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