天河微信小程序入門《四》：融會貫通，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({        url: 'http://dev.wxapp-union.com/setForm' ,        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 );