天河微信小程序入门《四》:融会贯通,form表单提交数据库
2017-05-15 11:14
1221 查看
天河在阔别了十几天之后终于又回来了。其实这篇文章里的demo是接着(天河微信小程序入门《三》)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来。放到今天来看,从前台提交数据到数据库已经是没有什么可写的了。不过既然开篇了就不能太监么,所以还是分享出来给大家。
我当时的目的是为了实验api的功能和跟后台数据的通讯存储,所以没有考虑到美观之类的,界面非常丑请大家包涵。
一个带form表单的页面
在这里定义好自己form表单的元素名称
然后调用wx.request的API方法将表单提交到后台
这里需要提到几个坑,首先是你所有的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分享出来供大家参考。
以下是建库脚本,如果有能力的后端猿们也可以帮我把这件事情做了,分享给大家,毕竟众人拾柴火焰高嘛!
我当时的目的是为了实验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, 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分享出来供大家参考。
以下是建库脚本,如果有能力的后端猿们也可以帮我把这件事情做了,分享给大家,毕竟众人拾柴火焰高嘛!
-- ================================================== -- 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 表单提交和取值实例详解
- 微信小程序六(数据请求 表单的创建 提交 与接收)
- 微信小程序表单验证form提交错误提示效果
- 微信小程序开发(6)-表单数据组件的使用(picker,form,input,button)
- 微信小程序例子——使用form表单获取输入框数据
- 微信小程序-form表单提交
- 微信小程序表单验证form提交错误提示
- 微信小程序 form表单提交 点击键盘的完成自动执行
- 微信小程序 PHP后端form表单提交实例详解
- 微信小程序服务器请求和上传数据,上传图片并展示,提交表单完整实例代码附效果图
- 微信小程序使用form表单获取输入框数据的实例代码
- 微信小程序简单实现form表单获取输入数据功能示例
- 微信小程序中form 表单提交和取值实例详解
- 微信小程序 PHP后端form表单提交实例详解
- 微信小程序中form 表单提交和取值实例详解
- form表单提交后无法接收到数据
- 使用form表单提交数据打开两个页面的问题
- form表单在firefox下提交 后台获取到数据,但是在IE8下后台却只能获取部分值