天河微信小程序入門《四》：融會貫通，form表單提交數據庫
天河在闊別了十幾天之后終于又回來了。其實這篇文章里的demo是接著（天河微信小程序入門《三》）后面就做了的，但是因為最近在做別的項目，所以就偷懶沒有發出來。放到今天來看，從前臺提交數據到數據庫已經是沒有什么可寫的了。不過既然開篇了就不能太監么，所以還是分享出來給大家。
我當時的目的是為了實驗api的功能和跟后臺數據的通訊存儲，所以沒有考慮到美觀之類的，界面非常丑請大家包涵。
一個帶form表單的頁面
在這里定義好自己form表單的元素名稱
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<view class="page">
<view class="page__hd">
<text>表單提交</text>
</view>
<form class="page__bd" catchsubmit="formSubmit" catchreset="formReset">
<view class="section">
<input name="name" placeholder="姓名" auto-focus/>
</view>
<view class="section">
<input name="age" type="number" placeholder="年齡"/>
</view>
<view class="section section_gap">
<view class="section__title">性別</view>
<radio-group name="gender">
<label><radio value="MAN"/>MAN</label>
<label><radio value="WOMAN"/>WOMAN</label>
</radio-group>
</view>
<view class="btn-area">
<button formType="submit">提交</button>
<button formType="reset">重置</button>
</view>
<view class="page__hd" wx:if="{{error}}">
<text>{{error}}</text>
</view>
</form>
|
然后調用wx.request的API方法將表單提交到后臺
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
Page({
data: {
pickerHidden: true,
chosen: ‘‘
},
pickerConfirm: function(e) {
this.setData({
pickerHidden: true
})
this.setData({
chosen: e.detail.value
})
},
pickerCancel: function(e) {
this.setData({
pickerHidden: true
})
},
pickerShow: function(e) {
this.setData({
pickerHidden: false
})
},
formSubmit: function(e) {
var _this = this
/*********************
wx.redirectTo({
url:‘create_photo‘
})
**********************/
wx.request({
data:
{
name: e.detail.value.name,
age: e.detail.value.age,
gender: e.detail.value.gender
}
,
method: ‘POST‘, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
‘content-type‘: ‘application/x-www-form-urlencoded; charset=UTF-8‘
},
success: function(res){
var err = res.data.error
if(err) {
_this.setData({
error:err
})
}
else {
wx.redirectTo({
url:‘create_photo‘
})
}
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
formReset: function(e) {
console.log(‘form發生了reset事件，攜帶數據為：‘, e.detail.value)
this.setData({
chosen: ‘‘
})
}
})
|
這里需要提到幾個坑，首先是你所有的js和json文件，如果創建了，里面一定要有內容，哪怕json文件就是一對花括號
{}
哪怕js文件就只有一個Page
Page({})
都必須有。如果你沒有，微信的開發工具是不會報錯的。但是在加載的時候，這里其實已經出錯了，這些空文件后面的文件統統都沒有加載進去。結果導致你后面再寫任何代碼都是該文件不存在或者該方法不存在。這里要感謝 @leochen幫我找到的這個bug，解決了我的按鈕提交無效。
ok我們來看看效果：
這是輸入界面，然后我在微信開發工具的調試界面看form提交的格式
我們可以看到提交的內容是
-
name:
微信小程序聯盟 -
age:
18 -
gender:
MAN
提交的head是
-
content-type:
application/x-www-form-urlencoded; charset=UTF-8
因為這兩個值都是我們在代碼中寫的。
這里需要說明一下，head并不是必須的，微信默認的content-type是application/json，但是我的后臺框架配置必須是x-www-form-urlencoded格式才接收，所以這里跟微信官方的文檔不同，而charset=UTF-8是一種習慣問題，告訴后臺編碼格式，這樣更規范。
閑話少說，我們看看后臺的斷點
看來我們的req已經成功的接收到了前臺傳過來的表單，然后我一個個的放入我的對象中。最后調用mybatis存入數據庫
這就是我存入數據庫的數據。這樣一個完整的表單提交錄入就完成了。
雖然這個功能很簡單，但是因為微信提供的后臺請求方式是自己封裝的，所以可能還是會有一些剛入門的前端朋友不習慣，畢竟是第一次使用嘛，總想試一試是否能夠成功錄入數據庫。所以我才寫了這樣一個簡單的demo。
完整的demo我這里就不上傳了，因為沒有后臺的服務和數據庫，下了也用不了。我考慮后面是不是可以做成一個簡單的api，然后再把查詢也做了，這樣大家就可以提交之后看到效果了，那個時候再把完整的demo分享出來供大家參考。
以下是建庫腳本，如果有能力的后端猿們也可以幫我把這件事情做了，分享給大家，畢竟眾人拾柴火焰高嘛！
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
-- ==================================================
-- formDemo信息表
-- ==================================================
DROP TABLE IF EXISTS d_form;
CREATE TABLE d_form (
id CHAR(32) NOT NULL COMMENT ‘ID序列號‘,
name VARCHAR(32) NOT NULL COMMENT ‘用戶名‘,
age INT NOT NULL DEFAULT 0 COMMENT ‘年齡‘,
gender CHAR(32) NOT NULL DEFAULT ‘DEFAULT‘ COMMENT ‘性別‘,
cre_tim TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT ‘注冊時間‘,
upd_tim DATETIME COMMENT ‘更新時間‘,
remark VARCHAR(128) COMMENT ‘備注‘,
PRIMARY KEY (id)
) COMMENT=‘formDemo信息表‘ ENGINE=InnoDB;
CREATE UNIQUE INDEX uniq_idx_form_name ON d_form (name);
|
