小程序模板网

小北微信小程序之--新建和编辑相册(小程序的表单提交)

之前相册的数据都是我们使用种子脚本模拟出来的,本节我们尝试从小程序端直接提交数据到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

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



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24008.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询