微信小程序[第十篇] -- 新建和編輯相冊（小程序的表單提交）

昨天咱們作了相冊的上拉加載和下拉刷新功能，很好的對數據進行了展現，如今面臨一個問題，如何新建相冊並提交到服務器那？

以前相冊的數據都是咱們使用種子腳本模擬出來的，本節咱們嘗試從小程序端直接提交數據到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

下一篇
到如今咱們已經有了相冊，下一篇咱們將講解爲某一個相冊傳圖片的實現，你也將學到如何使用小程序選擇/拍攝照片以及上傳到服務器等等。