小程序模板網(wǎng)

小北微信小程序之--新建和編輯相冊(cè)(小程序的表單提交)

發(fā)布時(shí)間:2018-04-25 10:10 所屬欄目:小程序開發(fā)教程

之前相冊(cè)的數(shù)據(jù)都是我們使用種子腳本模擬出來的,本節(jié)我們嘗試從小程序端直接提交數(shù)據(jù)到y(tǒng)ii2服務(wù)器。

在本節(jié)我們要學(xué)習(xí)到如下知識(shí)

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

這一次我們依然從服務(wù)端開始

服務(wù)器端

我們知道使用GET /xcx/albums 是觸發(fā)了index這個(gè)action,那么create和update那?也是有的,當(dāng)我們對(duì)接口發(fā)起POST /xcx/albums代表create,同理PUT /xcx/albums/xxx 代表update。

我們先來說create

簡(jiǎn)單嘗試一下,如下圖,我先給yii2模擬一個(gè)post請(qǐng)求看看是否會(huì)有新數(shù)據(jù)

很不錯(cuò),在我沒有對(duì)服務(wù)器代碼進(jìn)行任何改動(dòng)的情況下已經(jīng)成功插入了數(shù)據(jù)

當(dāng)然這面臨著1個(gè)問題,就是對(duì)于album表記錄,created_at和updated_at并沒有賦值,關(guān)于它們方法有很多,比如前臺(tái)傳入時(shí)間戳、后臺(tái)對(duì)create action進(jìn)行重寫,當(dāng)然還有一種方法也是我們即將采用的方法,那就是使用yii2的TimestampBehavior行為類,它將作用于模型Album,如下圖

設(shè)置完以后我們?cè)贉y(cè)試下

起作用了

小提示:yii2的行為是一門比較大的教程,我們干貨區(qū)也有講解,可以從http://nai8.me/sapper-index.h... 鏈接進(jìn)入,共14篇文章。

現(xiàn)在我們已經(jīng)知道了create接口如何玩,接下來看看update,在yii2的restful中如果對(duì)一個(gè)已經(jīng)存在的記錄進(jìn)行更新需要如下規(guī)則 PUT /xcx/albums/xxx 其中xxx代表這個(gè)記錄的ID,比如PUT /xcx/albums/6 就是要更改id=6的相冊(cè),其中form部分就是更新的內(nèi)容,我們來模擬一個(gè)記錄。

果然,數(shù)據(jù)庫(kù)被修改了。

以上就是create和update接口,現(xiàn)在服務(wù)器端我們都知道如何做了,接下來就是小程序的部署。

小程序

在小程序端我們計(jì)劃增加一個(gè)新建按鈕,點(diǎn)擊后跳轉(zhuǎn)到一個(gè)頁(yè)面完成相冊(cè)新建功能,因此我對(duì)相冊(cè)列表頁(yè)面做了如下配置

小提示:關(guān)于樣式的問題大家可以參考項(xiàng)目中的list.wxss文件,這里就不做講解。

我設(shè)計(jì)了一個(gè)相冊(cè)表單提交頁(yè)面,如下圖

這里面有幾點(diǎn)要說的

表單form
首先是在小程序中form的用法,它有固定的步驟及能攜帶的組件數(shù)據(jù)(switch、input、checkbox、slider、radio、picker)

  • 將含有能提交數(shù)據(jù)的組件用form包起來并至少要指定bindsubmit="abc",這代表表單提交后有對(duì)應(yīng)js中的abc()方法進(jìn)行接收。
  • 在表單中需要有一個(gè)button用來點(diǎn)擊提交它,且規(guī)定這個(gè)button的formType必須為submit

滿足以上兩個(gè)條件后,基本的表單提交就可以完成。

小提醒:在js端接收form里各組件數(shù)據(jù)的方法和html很像,是根據(jù)wxml內(nèi)各組件的name屬性獲取的。

我們?cè)赼dd.js中定義一個(gè)formSubmit方法用于接收表單數(shù)據(jù)。

這個(gè)方法有一些要說的,今后你也會(huì)經(jīng)常用到。

  • 1 上面我們說定義了表單內(nèi)每個(gè)組件的name,在js函數(shù)內(nèi),我們可以通過e.detail.value.name來獲取對(duì)應(yīng)的值。
  • 2 因?yàn)槲覀円峤灰粋€(gè)數(shù)據(jù),因此method必須為POST,如果是更新則為PUT
  • 3 在這里我告訴小程序本次請(qǐng)求發(fā)送的data格式為json

ok,開始提交~

0.1秒過去了,OMG失敗了~~~~

根據(jù)yii2的響應(yīng)說明兩點(diǎn)

  • 數(shù)據(jù)的驗(yàn)證失敗
  • name不能為空

這說明了一點(diǎn)就是yii2并沒有識(shí)別出我們傳遞過去的name=2,這是為什么那?

還記得我們是什么格式傳遞的么?json

對(duì),在這里你要注意

小提示:默認(rèn)情況下yii2的restful只能解析application/x-www-form-urlencoded 和 multipart/form-data類型的請(qǐng)求內(nèi)容。

那么第一種方法是不要傳遞json類型的數(shù)據(jù),但是我想將小程序的所有請(qǐng)求和響應(yīng)都用json,因此我必須去配置yii2讓其能解析json類型請(qǐng)求。

打開你的web.php,找到request組件配置,增加一個(gè)解析器,如下圖

現(xiàn)在再實(shí)驗(yàn)一下

哈哈哈,成功了。

總結(jié)

上面的教程讓我們完成了一次數(shù)據(jù)的提交,我們總結(jié)下

  • 小程序有自己的form,和我們使用html+js提交表單差不多
  • yii2的restful默認(rèn)不支持json類型的請(qǐng)求內(nèi)容,但是可以配置
  • 對(duì)于yii2的restful,POST新數(shù)據(jù)成功后會(huì)返回這條記錄。

關(guān)于更新操作
因?yàn)楦虏僮骱托陆ú僮鞯母叨戎睾闲?,本篇我們不再做講解,代碼中會(huì)實(shí)現(xiàn),大家可以去github拉下來看下 
https://github.com/abei2017/xgh

下一篇
到現(xiàn)在我們已經(jīng)有了相冊(cè),下一篇我們將講解為某一個(gè)相冊(cè)傳圖片的實(shí)現(xiàn),你也將學(xué)到如何使用小程序選擇/拍攝照片以及上傳到服務(wù)器等等。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/24008.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢