微信小程序如何向java后端本地（基于springboot项目）发请求

一、微信小程序如何发请求？

1.1 请求注意事项

微信小程序发请求不是前后端ajax以及axios请求那样会存在跨域问题，微信使用的是网络请求，微信小程序支持发送https以及合法域名的请求，所以，本文章将使用微信不校验合法域名发送请求（仅限在开发以及生成环境下发起请求）。

首先开启不校验合法域名

1.2 了解wx对象调用request发起网络请求

基本语法很简单，都是模板，知道会怎么用，基本都是一套，看以下示例代码

// index.js
Page({

  data: {

    // 初始化当前页面所需的数据
    Emp: []
  },

  requestServe() {
    wx.request({
      url: 'http://localhost:8080/list',
      // data是发送到服务端的参数
       data:{
        },
      method: 'GET',
  
      // success请求成功后的回调函数
      success: res => {
        console.log(res.data.data)
        this.setData({
            Emp: res.data.data
          }

        )
      }
    })

  }

})

上面是在微信小程序所对应一个界面的js文件写的一个请求示例，简单说明一下，我们在data属性中先初始化我们从后端拿到数据要存放的一个数组，在requestServe方法中用wx对象调用request方法，方法中我们所写的配置项，url：你所要请求的路径，data:向服务端所传递的参数数据,method:请求方式（GET,POST等等）,success:请求成功的回调函数。

我这里之所以调了俩次data是因为，第一次的data返回的是一个对象，具体响应看下图

res.data

res.data.data

那么这样赋值给我们的Emp数组就是以对象为元素存放在数组中了

1.3 java后端代码编写示例

这里我们以查询员工信息为例，看以下三层架构的代码

controller层

service层

mapper层

1.3数据库字段设计 

1.4 wxml以及wxss代码

wxml

<view wx:for="{{Emp}}" wx:key="id">
  <view class="v1">
    <view>
      用户名：<text>{{item.username}}</text>
    </view>
    <view>
      姓名：<text>{{item.name}}</text>
    </view>
    <view>
      入职时间：<text>{{item.entrydate}}</text>
    </view>
  </view>
</view>
<van-button type="primary" class="but1" bind:tap="requestServe">测试发送请求</van-button>
 

wxss

/**index.wxss**/
.but1{
  margin-left: 150px;
}
.v1{
  margin-bottom: 10px;
}

1.5 请求示例结果

启动后端的启动类确保服务运行

点击按钮发起请求，回显数据如下