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

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 >

效果：

刚入门，如有错误，欢迎指出，感谢！！！