小程序（前端）与后端（thinkjs）进行数据交互的实现【小程序+thinkjs+MySQL】

初步接触小程序开发，在没有申请域名、SSL等的情况下实现与后端的连接，后台用的是thinkjs，一个很好用的nodejs框架。现在记录一下这个前后端连接的过程。

总的逻辑就是：

1. 小程序端数据放到一个formdata中，之后就写在wx.request里面，包括了【url , data, header, method以及成功的回调函数】
2. 中间部分就是设置好连接的端口
3. 最后是后台通过某个方法拿到传过来的数据。这里thinkjs用的是 const data = this.post()

 

对thinkjs感兴趣的请戳https://thinkjs.org/

 1.小程序端

在这里以最基础的表单数据提交为例子吧。小程序的图示如下：

小程序端的代码如下：

界面代码：

<!-- sugar.wxml -->
<form bindsubmit="formSubmit" bindreset="formReset">
    <view class="section">
        <view class="picker">测量时间</view>
        <view class="picker2">
            <picker name="cltime" mode="multiSelector" value="{{dateTime1}}" bindchange="changeDateTime1" bindcolumnchange="changeDateTimeColumn1" range="{{dateTimeArray1}}">
                <view class="datetime">
                    {{dateTimeArray1[0][dateTime1[0]]}}-{{dateTimeArray1[1][dateTime1[1]]}}-{{dateTimeArray1[2][dateTime1[2]]}} {{dateTimeArray1[3][dateTime1[3]]}}:{{dateTimeArray1[4][dateTime1[4]]}}
                </view>
            </picker>
        </view>
    </view>
    <view class="hr"></view>
    <view class="section1">
        <view class="wenzi">血糖</view>
        <view class="sugar">
            <view class="del" bindtap="delSugar">
                <image class="del1" src="/images/jian.png" />
            </view>
           <!-- 这个写法也可以  <view class="data">{{sugardata}}   mmol/L</view>    -->
             <view class="data1"><input name="sugardata" class="data" type="digit" value="{{sugardata}}"  /></view>
             <view class="mol"> mmol/L</view> 
            <view class="add" bindtap="addSugar">
                <image class="add1" src="/images/jia.png" />
            </view>
        </view>
    </view>
    <view class="hr"></view>
    <view class="section">
        <view class="picker">时间点</view>
        <view class="picker2">
            <picker name="timedian" bindchange="bindPickerChange" value="{{index}}" range="{{array}}" >
                <view class="time">{{array[index]}}</view>
            </picker>
        </view>
    </view>
    <view class="hr"></view>
    <view class="section2">
        <view class="section_title">备注</view>
        <view class="input">
            <input name="beizhu" placeholder="请添加备注信息" />
        </view>
    </view>
        <view class="hr"></view>

    <view class="shuoming">早中晚餐后血糖建议用餐后两小时测量</view>
    <view class="btn">
        <button form-type="submit" type="primary">保存数据</button>
    </view>
</form>

<!--提示框部分设置-->
<toast hidden="{{toastHidden}}" bindchange="toastChange">
{{notice_str}}
</toast>

<view class="page_bd">
<modal title="确认" confirm-text="确定" cancel-text="取消" hidden="{{modalHidden}}" mask bindconfirm="confirm" bindcancel="cancel" >
确认提交吗？
</modal>

</view>

比较关键的js代码：【请注意在wx.request部分，URL就是后台的或者是不以端口号为基础的URL，我这个就是带了端口号的，被专门放在一个文件里了，】

// pages/recordHand/xuetang/xuetang.js
var app = getApp()
var util = require('../../../utils/utils.js')
var api = require('../../../config/api.js')

Page({

  /**
   * 页面的初始数据
   */
  data: {
    date: '2018-10-18',
    time: '12:00',
    sugardata: 6.0,
    toastHidden: true,
    modalHidden: true,
    notice_str: '',
    dateTimeArray1: null,
    dateTime1: null,
    startYear: 2000,
    endYear: 2050,
    array: ['空腹', '早餐后', '午餐前', '午餐后', '晚餐前', '晚餐后', '睡前', '凌晨'],
    objectArray: [{
        id: 0,
        name: '空腹'
      },
      {
        id: 1,
        name: '早餐后'
      },
      {
        id: 2,
        name: '午餐前'
      },
      {
        id: 3,
        name: '午餐后'
      },
      {
        id: 4,
        name: '晚餐前'
      },
      {
        id: 5,
        name: '晚餐后'
      },
      {
        id: 6,
        name: '睡前'
      },
      {
        id: 7,
        name: '凌晨'
      }
    ],
    index: 0,

  },
  /**
   * 日期控件   
   * @param {*} e 
   */
  changeDateTime1(e) {
    this.setData({
      dateTime1: e.detail.value
    });
  },
  changeDateTimeColumn1(e) {
    var arr = this.data.dateTime1,
      dateArr = this.data.dateTimeArray1;

    arr[e.detail.column] = e.detail.value;
    dateArr[2] = util.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);

    this.setData({
      dateTimeArray1: dateArr,
      dateTime1: arr
    });
  },



  /**
   * 多项选择控件
   * @param {*} e 
   */
  bindPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取完整的年月日 时分秒，以及默认显示的数组
    var obj1 = util.dateTimePicker(this.data.startYear, this.data.endYear);
    // 精确到分的处理，将数组的秒去掉
    var lastArray = obj1.dateTimeArray.pop();
    var lastTime = obj1.dateTime.pop();

    this.setData({

      dateTimeArray1: obj1.dateTimeArray,
      dateTime1: obj1.dateTime,

    });
  },

  /**
   * 降低血糖数
   */

  addSugar: function () {
    let sugardata = util.add(this.data.sugardata, 0.1)
    // console.log(sugardata)
    let that = this
    that.setData({
      sugardata: sugardata
    })
  },

  delSugar: function () {
    let sugardata = util.decrease(this.data.sugardata, 0.1)
    let that = this
    that.setData({
      sugardata: sugardata
    })
  },

  toastChange: function (e) {
    this.setData({
      toastHidden: true
    })
  },

  //弹出确认框
  modalTap: function (e) {
    this.setData({
      modalHidden: false
    })
  },

  confirm: function (e) {
    this.setData({
      modalHidden: true,
      toastHidden: false,
      notice_str: '提交成功'
    })
  },

  cancel: function (e) {
    this.setData({
      modalHidden: true,
      toastHidden: false,
      notice_str: '取消成功'

    })
  },

  

  /**
   * 进行界面的提交!!!!!!!!!最重要的！！！！！围观围观ing
   */
  formSubmit: function (e) {
    let that = this
    console.log(e.detail.value)
 
    let formData = e.detail.value

//比较重要的向后台提交数据
    wx.request({
      url: api.SugarRecord,  
      data: formData, //向后台提交的表单的数据
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'//post时y要设置为此header才会成功
      },
      success: function(res) {
       // console.log(res.data)
        that.modalTap()
      }
    })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

将所有的请求API放在config/api.js中方便管理：

const ApiRootUrl = 'http://127.0.0.1:8360/api/';

module.exports = {
    SugarRecord: ApiRootUrl + 'sugar/sugarhand' ,  

---

2.后端实现（thinkjs框架的nodejs）

我这里就不列出关于数据库的配置相关代码啦~~~~

其实最关键的就是this.post()，直接就把后台发送的数据放在里面，这个框架是会自己解析的，前端所有数据都通过this.post()方法保存在data对象里。

/*
 * @Description: 关于血糖的数据
 * @Author: pxf
 * @Date: 2018-12-08 17:03:19
 * @LastEditTime: 2018-12-23 14:18:29
 * @LastEditors: Please set LastEditors
 */

const Base = require('./base.js')

module.exports = class extends Base {
    /**
     * sssss
     */
    async sugarhandAction() {
        var data = this.post() ///获取到提交上来的所有数据
        console.log(data)
        // const beizhu = data.beizhu
        //  const buffer = Buffer.from(beizhu)
        const sugar = this.model('sugardata')
        const insertId = await sugar.add({
            sugardata:data.sugardata,
            timedian:data.timedian,
            // beizhu: buffer.toString('base64'),哈哈哈这个地方暂时不需要了
             beizhu: data.beizhu,
            add_time: this.getTime(),
            //user_id: this.getLoginUserId
        })
        console.log(insertId)

        if (insertId) {
            return this.success('数据保存成功')
        } else {
            return this.fail('数据保存失败')
        }
    }
}

3.需要注意的点：

• 我这里没有什么域名，所以在小程序端要把这一项给勾画上：

-------------------------------不校验合法的域名、HTTPS证书

• 相关的API的名称前后端对上号。
• 小程序端提交数据：

后台接收并保存到MySQL数据库：

 

看到这条数据库插入语句就觉得好亲切哈感人！

菜鸟终于自己把前后端给连接起来了！

中间经历各种坑！

尤其是小程序那一块，设置header啊，还有把数据怎么弄啊，包括最一开始看了半天thinkjs的API但是仍然不会接受前台数据~~~

一把辛酸泪啊啊啊啊。

感谢网上各种大神的帖子和总结经验！