小程序（前端）與後端（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但是仍然不會接受前臺數據~~~

一把辛酸淚啊啊啊啊。

感謝網上各種大神的帖子和總結經驗！