微信小程序[第十篇] -- 新建和编辑相册（小程序的表单提交）

昨天咱们作了相册的上拉加载和下拉刷新功能，很好的对数据进行了展现，如今面临一个问题，如何新建相册并提交到服务器那？

以前相册的数据都是咱们使用种子脚本模拟出来的，本节咱们尝试从小程序端直接提交数据到yii2服务器。

在本节咱们要学习到以下知识

• 小程序的form功能
• yii2中restful的create和update方法的使用

这一次咱们依然从服务端开始

服务器端

咱们知道使用GET /xcx/albums 是触发了index这个action，那么create和update那？也是有的，当咱们对接口发起POST /xcx/albums表明create，同理PUT /xcx/albums/xxx 表明update。

咱们先来讲create

简单尝试一下，以下图，我先给yii2模拟一个post请求看看是否会有新数据

很不错，在我没有对服务器代码进行任何改动的状况下已经成功插入了数据

固然这面临着1个问题，就是对于album表记录，created_at和updated_at并无赋值，关于它们方法有不少，好比前台传入时间戳、后台对create action进行重写，固然还有一种方法也是咱们即将采用的方法，那就是使用yii2的TimestampBehavior行为类，它将做用于模型Album，以下图

设置完之后咱们再测试下

起做用了

小提示：yii2的行为是一门比较大的教程，咱们干货区也有讲解，能够从http://nai8.me/sapper-index.h... 连接进入，共14篇文章。

如今咱们已经知道了create接口如何玩，接下来看看update，在yii2的restful中若是对一个已经存在的记录进行更新须要以下规则 PUT /xcx/albums/xxx 其中xxx表明这个记录的ID，好比PUT /xcx/albums/6 就是要更改id=6的相册，其中form部分就是更新的内容，咱们来模拟一个记录。

果真，数据库被修改了。

以上就是create和update接口，如今服务器端咱们都知道如何作了，接下来就是小程序的部署。

小程序

在小程序端咱们计划增长一个新建按钮，点击后跳转到一个页面完成相册新建功能，所以我对相册列表页面作了以下配置

小提示：关于样式的问题你们能够参考项目中的list.wxss文件，这里就不作讲解。

我设计了一个相册表单提交页面，以下图

这里面有几点要说的

表单form
首先是在小程序中form的用法，它有固定的步骤及能携带的组件数据(switch、input、checkbox、slider、radio、picker)

• 将含有能提交数据的组件用form包起来并至少要指定bindsubmit="abc"，这表明表单提交后有对应js中的abc()方法进行接收。
• 在表单中须要有一个button用来点击提交它，且规定这个button的formType必须为submit

知足以上两个条件后，基本的表单提交就能够完成。

小提醒：在js端接收form里各组件数据的方法和html很像，是根据wxml内各组件的name属性获取的。

咱们在add.js中定义一个formSubmit方法用于接收表单数据。

这个方法有一些要说的，从此你也会常常用到。

• 1 上面咱们说定义了表单内每一个组件的name，在js函数内，咱们能够经过e.detail.value.name来获取对应的值。
• 2 由于咱们要提交一个数据，所以method必须为POST，若是是更新则为PUT
• 3 在这里我告诉小程序本次请求发送的data格式为json

ok，开始提交~

0.1秒过去了，OMG失败了~~~~

根据yii2的响应说明两点

• 数据的验证失败
• name不能为空

这说明了一点就是yii2并无识别出咱们传递过去的name=2，这是为何那？

还记得咱们是什么格式传递的么？json

对，在这里你要注意

小提示：默认状况下yii2的restful只能解析application/x-www-form-urlencoded 和 multipart/form-data类型的请求内容。

那么第一种方法是不要传递json类型的数据，可是我想将小程序的全部请求和响应都用json，所以我必须去配置yii2让其能解析json类型请求。

打开你的web.php，找到request组件配置，增长一个解析器，以下图

如今再实验一下

哈哈哈，成功了。

总结

上面的教程让咱们完成了一次数据的提交，咱们总结下

• 小程序有本身的form，和咱们使用html+js提交表单差很少
• yii2的restful默认不支持json类型的请求内容，可是能够配置
• 对于yii2的restful，POST新数据成功后会返回这条记录。

关于更新操做
由于更新操做和新建操做的高度重合性，本篇咱们再也不作讲解，代码中会实现，你们能够去github拉下来看下 https://github.com/abei2017/xgh

下一篇
到如今咱们已经有了相册，下一篇咱们将讲解为某一个相册传图片的实现，你也将学到如何使用小程序选择/拍摄照片以及上传到服务器等等。