天河微信小程序入门《四》：融会贯通，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);