初步接触小程序开发,在没有申请域名、SSL等的情况下实现与后端的连接,后台用的是thinkjs,一个很好用的nodejs框架。现在记录一下这个前后端连接的过程。
总的逻辑就是:
- 小程序端数据放到一个formdata中,之后就写在wx.request里面,包括了【url , data, header, method以及成功的回调函数】
- 中间部分就是设置好连接的端口
- 最后是后台通过某个方法拿到传过来的数据。这里thinkjs用的是 const data = this.post()
对thinkjs感兴趣的请戳https://thinkjs.org/
在这里以最基础的表单数据提交为例子吧。小程序的图示如下:
小程序端的代码如下:
界面代码:
{{notice_str}}
确认提交吗?
比较关键的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' ,
我这里就不列出关于数据库的配置相关代码啦~~~~
其实最关键的就是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('数据保存失败')
}
}
}
-------------------------------不校验合法的域名、HTTPS证书
后台接收并保存到MySQL数据库:
看到这条数据库插入语句就觉得好亲切哈感人!
菜鸟终于自己把前后端给连接起来了!
中间经历各种坑!
尤其是小程序那一块,设置header啊,还有把数据怎么弄啊,包括最一开始看了半天thinkjs的API但是仍然不会接受前台数据~~~
一把辛酸泪啊啊啊啊。
感谢网上各种大神的帖子和总结经验!