天河微信小程序入门《四》：融会贯通，form表单提交数据库

天河在阔别了十几天之后终于又回来了。其实这篇文章里的demo是接着（天河微信小程序入门《三》）后面就做了的，但是因为最近在做别的项目，所以就偷懒没有发出来。放到今天来看，从前台提交数据到数据库已经是没有什么可写的了。不过既然开篇了就不能太监么，所以还是分享出来给大家。
我当时的目的是为了实验api的功能和跟后台数据的通讯存储，所以没有考虑到美观之类的，界面非常丑请大家包涵。
一个带form表单的页面

在这里定义好自己form表单的元素名称

<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, CONNECTheader: {'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'},success: function(res){var err = res.data.errorif(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

提交的hecontent-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);

天河微信小程序入门《四》：融会贯通，form表单提交数据库相关推荐

微信小程序开发（三）表单提交、PHP后台数据交互
上一篇:微信小程序学习笔记(二) [form表单提交] form.wxml: <form bindsubmit="formSubmit" bindreset="fo ...
微信小程序入门四详情页面
前三章基本完成文章列表页面的UI界面和数据加载,这章介绍内容详情页面的加载和布局.有了之前的知识储蓄,这章就容易多了.废话不多说. 首先是服务端代码,通过id查询数据:接口 https://www.i ...
微信小程序入门三: 简易form、本地存储
实例内容登陆界面处理登陆表单数据处理登陆表单数据(异步) 清除本地数据实例一: 登陆界面在app.json中添加登陆页面pages/login/login,并设置为入口. 保存后,自动生成相 ...
微信小程序入门四：实现table效果
微信小程序中没有table组件,那么怎么实现呢? 其实使用多个view组件就可以实现,接下来就直接看代码吧 <view class="co ...
微信小程序六（数据请求表单的创建提交与接收）
好了开始正题了,本节小小研究了下微信小程序的表单创建与提交先看看效果 1. 表单页面 <view id="adduser"><form bindsubmit ...
【微信小程序-初级实战】商品/表单编辑
标题又名: 1.option页面传值取值,页面重置(option参数清除) 2.uploadfile/downloadfile对商品图的首次&再次提交(单图) 环境/工具: 使用微信小程序原生 ...
在微信小程序中使用uView rules 表单校验 validator 不起作用（无效）
注意,如果需要兼容微信小程序,最好通过setRules方法设置rules规则 onReady() {// 如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则this ...
微信小程序入门四: 导航栏样式、tabBar导航栏
实例内容导航栏样式设置 tabBar导航栏实例一:导航栏样式设置小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: {&q ...
微信小程序点击添加/删除表单
wxml : <view class="container"><block wx:for="{{lists}}" wx:key="{ ...

天河微信小程序入门《四》：融会贯通，form表单提交数据库

天河微信小程序入门《四》：融会贯通，form表单提交数据库相关推荐

最新文章

热门文章