微信小程序(十)实战——请求后台数据(微信小程序+laravel)

news/2024/7/6 1:44:08

1.刚开始是本地测试链接数据库,传递死数据,为了将前后流程走通,也就是给定一个数据

                                        从前台——》到后台——》前台显示;

2.现在我们是实战,直接干;

①本地测试为了方便,页面加载就请求后台数据

请求服务器:.js

 onLoad: function (options) {
      var that = this;//=====注意此处,要用that 指代this=====
      wx.request({
    url: 'http://localhost:8000/wxApp/showMentors', //服务器地址
    method: 'get',// OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
    data: {
      },
    header: {// 设置请求的 header
          'content-type': 'application/json'
    },
    success: function (res) {
          console.log(res);
          that.setData({ //======不能直接写this.setDate======
        message: res.data, //在相应的wxml页面显示接收到的数据
      });
    }
  })
}, 

这里需要注意的是服务器地址URL:即接口:http://localhost:8000/wxApp/showMentors

在浏览器中也可以直接访问:


说明:我是在本地测试+laravel框架,所以我的URL是:本地虚拟域名+路由:http://localhost:8000/wxApp/showMentors

路由:访问方法(laravel的路由)

Route::group(array('prefix'=>'wxApp'),function(){
    Route::get('/showMentors','WxApp\MentorController@showMentors');//老师列表
});

方法:查询所需数据传递到页面(laravel中路由->方法)

public function showMentors(){
    $mentorList = DB::table('mentor_infos_view')
        ->where('if_vip',1)
        ->where('user_id','!=',$this->uid)
        ->get();
    echo json_encode($mentorList);
}

接收:页面接收  .js

success : function (res ) {
that .setData ({ //======不能直接写this.setDate======
message : res .data , //在相应的wxml页面显示接收到的数据
});
}

显示: 页面显示.wxml

<!-- 接收数据循环 -->
< view wx:for= "{{message}}" wx:for-item= "j" wx:key= "id" name= "info_border" >
<!-- 判断是否有头像 -->
< view wx:if= "{{j.mentor_image_uri==null}}" >
< image class= "widget_arrow" src= "http://dev.cfo-mentor.com/menter/public/assets/images/avatar_default.png" mode= "aspectFill" >
</ image >
</ view >
< view wx:else >
< image class= "widget_arrow" src= "{{j.mentor_image_uri}}" mode= "aspectFill" ></ image >
</ view >
<!-- 显示 -->
< view class= 'info' >姓名:{{j.mentor_name}} </ view >
< view class= 'info' >职位:{{j.career}} </ view >
< view class= 'info' >公司:{{j.company_name}} </ view >
< view class= 'info' >地区:{{j.address}} </ view >
< view class= 'info' >擅长:{{j.mentor_skills}} </ view >
< navigator url= '../../pages/info/info?user_id={{j.user_id}}' >详情 </ navigator >
< view class= 'hr' ></ view >
</ view >

效果:

跳转到详情页面:

①首先需要创建小程序页面(在app.js中添加 "pages/info/info",

       效果:

②再创建连接:在小程序中navigator标签相当于a标签

< navigator url= '../../pages/info/info?user_id={{j.user_id}}' >详情 </ navigator >

说明:带参数和以前一样?XX={{XX}},URL就是前面创建的info中的info.js


③在新页面接收数据:     

data : {
user_id : ""
},

④在onload中加载请求:

onLoad : function (options ) {
var that = this ;
wx .request ({
url : 'http://localhost:8000/wxApp/showMentorInfo' , //服务器地址
method : 'get' ,
data : {
user_id : options .user_id ,
},
header : {
'content-type' : 'application/json'
},
success : function (res ) {
that .setData ({
showMentorInfo : res .data ,
});
}
})
},

请求地址: url: 'http://localhost:8000/wxApp/showMentorInfo', //在laravel中就是到路由;

请求方式:method: 'get',

请求参数: data: {
        user_id : options.user_id,

      },

请求头:header: {

        'content-type': 'application/json'

      },

⑤在laravel中创建路由

Route::group(array('prefix'=>'wxApp'),function(){
    Route::get('/showMentorInfo','WxApp\MentorController@showInfo');//老师个人信息
});

⑥在创建方法

public function showInfo()
{
    $user_id=$_REQUEST['user_id'];
    $showMentorInfo = DB::table('mentor_infos_view')
        ->where('if_vip',1)
        ->where('user_id',$user_id)
        ->first();
    echo json_encode($showMentorInfo);
}

⑦在success里面接收数据

success : function (res ) {
that .setData ({
showMentorInfo : res .data ,
});
}

⑧在.wxml里面显示数据

< view wx:if= "{{j.mentor_image_uri==null}}" >
< image class= "widget_arrow" src= "http://dev.cfo-mentor.com/menter/public/assets/images/avatar_default.png" mode= "aspectFill" >
</ image >
</ view >
< view wx:else >
< image class= "widget_arrow" src= "{{j.mentor_image_uri}}" mode= "aspectFill" ></ image >
</ view >
< view class= 'info' >姓名:{{showMentorInfo.mentor_name}} </ view >
< view class= 'info' >电话:{{showMentorInfo.mentor_phone}} </ view >
< view class= 'info' >职位:{{showMentorInfo.career}} </ view >
< view class= 'info' >公司:{{showMentorInfo.company_name}} </ view >
< view class= 'info' >地区:{{showMentorInfo.address}} </ view >
< view class= 'info' >擅长:{{showMentorInfo.mentor_skills}} </ view >
< view class= 'info' >偏好:{{showMentorInfo.mentor_prefer}} </ view >
< view class= 'info' >导师介绍:{{showMentorInfo.mentor_ps}} </ view >
< view class= 'hr' ></ view >

效果:


刚入门,如有错误,欢迎指出,感谢!!!



http://www.niftyadmin.cn/n/3272123.html

相关文章

RecycleView的使用

recycleView发布了好长时间了&#xff0c;一直没有用过&#xff0c;这让我意识到自己在获取新知识这方面做的不够好。最近一直在研究这个recycleview怎么用&#xff0c;现在简单的做一个记录。 首先是对包的引用&#xff0c;修改build.gradle的dependencies&#xff0c;添加一行…

唯品会面试被虐

笔试 1、选择题 选择题由单选和不定项选择组成。 唯品会的笔试相对于BAT的笔试来说&#xff0c;考的内容比较正常&#xff0c;考得都是比较常用的的知识&#xff0c;像数据库、操作系统、计算机网络、数据结构、C等。 2、大题&#xff08;五道选两道完成就可以了&#xff0c;个…

微信小程序(八)实战——加载图片images

1.加载本地图片 本地路径&#xff1a;/pages/images/1.png<image class"widget_arrow" src"/pages/images/1.png" mode"aspectFill"></image> 在wxss中设置图片样式.widget_arrow{width:25px; height:25px; }2.加载网络图片 网络图…

更改应用程序图标无效

使用Markdown编辑器 今天看了下之前写的小程序&#xff0c;想要给它换一个图标&#xff0c;在application里做了设置如下&#xff0c;结果发现不起作用&#xff0c;我确定文件名称没有写错&#xff0c;文件也放在了它该在的位置。结果就是在手机桌面显示的还是那个机器人的小图…

微信小程序(十一)实战——时间的获取,比较,判断(微信小程序 如何获取时间)

1.获取当前系统日期和时间 在小程序中&#xff0c;新建项目时&#xff0c;就会有一个utils.js文件&#xff0c;就是获取日期和时间的&#xff0c;代码如下&#xff1a; utils.js&#xff1a;const formatTime date > {const year date.getFullYear()const month date.get…

Android退出应用的方式

思路有这么几种&#xff1a; 1.把启动的activity都放入一个栈中&#xff0c;当要退出应用的时候遍历关闭 2.广播方式&#xff0c;基类的activity中添加广播接收器&#xff0c;接收到广播就关闭activity&#xff0c;其他activity继承这个activity&#xff0c;关闭时发送广播 …

javascript三级联动效果实现2

var text ""; for (i 0; i < data.length; i) {text "<option value" i " data-pId" data[i].pId ">" data[i].pName "</option>"; } $(".shengf").append(text); //step2:城市 var text…

微信小程序(十二)实战——小程序模板template的使用,以及传递集合数据

如下图&#xff0c;我们经常做这样的列表页&#xff0c;课程搜索结果页和课程列表页结构是完全一样的&#xff0c;非常适合使用模板来完成页面搭建。 这样我们就不用写那些重复的代码了,而且修改界面的时候也只需要改动模板一个地方 WXML提供模板&#xff08;template&#xff…