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