之前相冊(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ù)庫被修改了。

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

小程序

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

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

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

這里面有幾點(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)楦虏僮骱托陆ú僮鞯母叨戎睾闲裕酒覀儾辉僮鲋v解，代碼中會(huì)實(shí)現(xiàn)，大家可以去github拉下來看下 https://github.com/abei2017/xgh

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