小程序与Spring项目数据交互

上一篇博客刚说了利用Postman来测试Spring Boot项目，测试通过后就可以和小程序进行交互了。

首先要在微信开发者工具里面，点击"详情"，勾选上"不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书"，不然你是连接不到url滴。

controller代码在上一篇博客里面都有，这里就不贴了。

GET请求获取数据

data: {
    list:[]
  },

/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //异步传输，每一刻的对象都不一样
    var that=this;
    wx.request({
      url: 'http://localhost:8080/AllStu',
      method:"GET",
      data:{},//是否有数据传输到服务器
      success:function(res){
        //stuList与controller中名字相同
        var listData=res.data.stuList;
        if(listData!=null){
          //list=listData;错误写法
          that.setData({
            list:listData
          })
        }
      }
    })
  },

1、为什么要用this和that呢？

因为request操作依赖网络，会造成等待，影响用户体验，因此目前只支持异步模式。

我的理解是，你这一刻发出请求，过个几十毫秒才能收到响应，所以要用that先把此刻的状态保存，然后再将收到的数据赋给js文件里面定义的变量。

2、var listData=res.data.stuList；这一句里面的stuList与controller里面的代码是相呼应的，千万不要写错！

3、为什么不写在onload()里面呢？

onload是页面加载，只会被调用一次；

而onshow是页面显示，每次打开页面都会更新一次，比如插入某个数据后再返回，当前页面就会被更新。

4、简单说一下wxml里面对应的代码

<!--动态表格下半部分开始-->
  <scroll-view scroll-y="true">
    <view>
      <block wx:for="{{list}}">
        <view>
          <text class='column'>{{item.stuID}}</text>
          <text class='column'>{{item.name}}</text>
          <text class='column'>{{item.phone}}</text>
          <view>
            <navigator class='link' url='../updateStu/updateStu?stuID='>编辑</navigator>
            <navigator class='link'>删除</navigator>
          </view>
        </view>
      </block>
    </view>
  </scroll-view>
  <!--动态表格下半部分结束-->

wx:for是类似于thymeleaf的写法，{{}}是Vue.js的特性之一，毕竟小程序就是基于Vue.js框架来运行的。

{{list}}表示js里面定义的list变量，当我们使用wx.request(object)将请求到的数据赋给list之后，list里面会拥有很多对象，所以要用wx:for循环将每个对象的属性给取出来。

怎么取呢？下面的{{item.stuID}}，item就表示list里面的某个对象，stuID就是该对象的某一个属性，这样巴拉巴拉取出来就对了。

POST请求发送数据

frmSubmit是绑定在某个表单上的函数，提交事件发生时，这个函数就会被执行。

frmSubmit:function(e){
    //获取表单数据
    var frmData=e.detail.value;
    wx.request({
      url: 'http://localhost:8080/addStu',
      method:"POST",
      data:JSON.stringify(frmData),
      //数据被转换为JSON格式
      //{"name":"123","phone":"123456789"}
      header:{"Content-Type":"application/json"},
      success:function(res){
        wx.showToast({
          title: '添加成功！',
          duration:5000
        })
      }
    })
  }

1、JSON.stringify(para)是将某个对象中转换为JSON字符串，转换后类似于这样：{"name":"123","phone":"123456789"}

与其相对的是JSON.parse(para)，会逆向将JSON字符串转换为js的对象。

2、header:{"Content-Type":"application/json"}

这一句就和Postman那里差不多，头里面要规定数据传送方式，这里是以JSON字符串形式传送的。

 

参考资料：

微信小程序开发---应用与页面的生命周期