天河微信小程序入門《四》：融會貫通，form表單提交數據庫

時間 2019-11-06

原文原文鏈接

天河在闊別了十幾天以後終於又回來了。其實這篇文章裏的demo是接着（天河微信小程序入門《三》）後面就作了的，可是由於最近在作別的項目，因此就偷懶沒有發出來。放到今天來看，從前臺提交數據到數據庫已是沒有什麼可寫的了。不過既然開篇了就不能太監麼，因此仍是分享出來給你們。
我當時的目的是爲了實驗api的功能和跟後臺數據的通信存儲，因此沒有考慮到美觀之類的，界面很是醜請你們包涵。
一個帶form表單的頁面

在這裏定義好本身form表單的元素名稱php

<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方法將表單提交到後臺前端

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是
json

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分享出來供你們參考。
如下是建庫腳本，若是有能力的後端猿們也能夠幫我把這件事情作了，分享給你們，畢竟衆人拾柴火焰高嘛！小程序

-- ==================================================
-- 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);