之前相(xiàng)冊的(de)數(shù)據都(dōu)是(shì)我們使用(yòng)π✔種子(zǐ)腳本模拟出來(lái)的(de)，本節我們嘗試從(cóng)小(₩↓xiǎo)程序端直接提交數(shù)據到(dào)yii2服務器(qì☆>λ)。

在本節我們要(yào)學習(xí)到(dào)如(rú)下(xià)知(zhī)識

• 小(xiǎo)程序的(de)form功能(néng)
• yii2中restful的(de)create和(hé)update≥¶π方法的(de)使用(yòng)

這(zhè)一(yī)次我們依然從(cóng)服務端開(kāi)始

服務器(qì)端

我們知(zhī)道(dào)使用(yòng)GET /xcx/<±albums 是(shì)觸發了(le)index這(zhè)個(gè)action，那(n•¥ →à)麽create和(hé)update那(nà)？也(yě)是(shì★$÷)有(yǒu)的(de)，當我們對(duì)接口發起POST /xcx/albums代表crea¶≤Ωte，同理(lǐ)PUT /xcx/albums/xxx 代表up"≤date。

我們先來(lái)說(shuō)create

簡單嘗試一(yī)下(xià)，如(rú)下(xià)圖，我先給yii2模拟一(yī)個(gè)p‍¶×ost請(qǐng)求看(kàn)看(kàn)是(s♦↑hì)否會(huì)有(yǒu)新數(shù)據

很(hěn)不(bù)錯(cuò)，在我沒有(yǒu)對π≠​∏(duì)服務器(qì)代碼進行(xíng)任何改動的(de)情況下(xià)已經成功插入↔€了(le)數(shù)據

當然這(zhè)面臨著(zhe)1個(gè)問(wè∏∏n)題，就(jiù)是(shì)對(duì)于album表記錄，created_a™≠t和(hé)updated_at并沒有(yǒu)賦值，關于它們≈​<☆方法有(yǒu)很(hěn)多(duō)，比如(rú)前台傳入時(shí)間(jiān©¶)戳、後台對(duì)create action進行(xíng)重寫，★↔當然還(hái)有(yǒu)一(yī)種方法也(yě)是(shì)我們即将采用(yòng)的(de→£<←)方法，那(nà)就(jiù)是(shì)使用(yòng)yii2的(de)Timest✘φampBehavior行(xíng)為(wèi)類，它将作(zuò)用(yòng)于模型Al♠£↕∏bum，如(rú)下(xià)圖

設置完以後我們再測試下(xià)

起作(zuò)用(yòng)了(le)

小(xiǎo)提示：yii2的(de)行(xíng)為(wèi)是(shì)÷∏α一(yī)門(mén)比較大(dà)的(de)教程，我們幹貨區(qū)也(yě)有(yǒ≤≈αu)講解，可(kě)以從(cóng)http://n ™ai8.me/sapper-index.h... 鏈接進入γ♣，共14篇文(wén)章(zhāng)。

現(xiàn)在我們已經知(zhī)道(dào)了(le)crβ♦©eate接口如(rú)何玩(wán)，接下(xià)來(lái)看(kàn)看(k ♥£àn)update，在yii2的(de)restful中如(rú)果對¥→♦(duì)一(yī)個(gè)已經存在的(de)記錄進行(xíng)更≤​新需要(yào)如(rú)下(xià)規則 PUT /xcx/albums/xxx 其中xxxש 代表這(zhè)個(gè)記錄的(de)ID，比如(rú)PUT /xcx/∏↓↕∏albums/6 就(jiù)是(shì)要(yào)更改id=6→≤∞↑的(de)相(xiàng)冊，其中form部分(fēn)就(jiù)是(shì)更新的(d₹♠‌e)內(nèi)容，我們來(lái)模拟一(yī)個(gè)記錄。

果然，數(shù)據庫被修改了(le)。

以上(shàng)就(jiù)是(shì)create和( ↓hé)update接口，現(xiàn)在服務器(qì)端我們都(dōu)知(zhīγ®)道(dào)如(rú)何做(zuò)了(le)，接下(xià)來(lái)就"↕ε(jiù)是(shì)小(xiǎo)程序的(de)部署。

小(xiǎo)程序

在小(xiǎo)程序端我們計(jì)劃增加一(yī)個(gè)新建按鈕，點'ε擊後跳(tiào)轉到(dào)一(yī)個(gè)頁面完成相(xiàng)冊"±✘新建功能(néng)，因此我對(duì)相(xiàng)冊列表頁面做(zuò)了(le)如£∏(rú)下(xià)配置

小(xiǎo)提示：關于樣式的(de)問(wèn)題大(d→>à)家(jiā)可(kě)以參考項目中的(de)list.wxss文(wén)件(jiàn)™€ ♠，這(zhè)裡(lǐ)就(jiù)不(bù)做(zuò)講解。

我設計(jì)了(le)一(yī)個(gè)相(xiàng)冊表單提交頁面，如(rú)下(xiàδ≠∞)圖

這(zhè)裡(lǐ)面有(yǒu)幾點要(yào)說(shuō)的(de)

表單form
首先是(shì)在小(xiǎo)程序中form的(de)用(yòn¶Ω≤♦g)法，它有(yǒu)固定的(de)步驟及能(néng)攜帶↕$的(de)組件(jiàn)數(shù)據(switch、input、checkbox、slφ§$ider、radio、picker)

• 将含有(yǒu)能(néng)提交數(shù)據的(de)↑★≈組件(jiàn)用(yòng)form包起來(lái)并至少(shǎ♥§o)要(yào)指定bindsubmit="abc"，這(zhè)代☆$♠表表單提交後有(yǒu)對(duì)應js中的(de)abc()方法‍¶​σ進行(xíng)接收。
• 在表單中需要(yào)有(yǒu)一(yī)個(gè)button用(yò"↔ng)來(lái)點擊提交它，且規定這(zhè)個(gè)button的(de)formTy&₽£pe必須為(wèi)submit

滿足以上(shàng)兩個(gè)條件(jiàn)後，基本的(de)表單提交就(jiù)可¥¥(kě)以完成。

小(xiǎo)提醒：在js端接收form裡(lǐ)各組件(j↕♥φ iàn)數(shù)據的(de)方法和(hé)html很(hěn)像，是(shì)根據₹‍wxml內(nèi)各組件(jiàn)的(de)name屬性獲取的(de)。

我們在add.js中定義一(yī)個(gè)formSubmit方法用(yòng)于接收σ‌↕✔表單數(shù)據。

這(zhè)個(gè)方法有(yǒu)一(yī)些(xiē)要(yào)¥∏ ↔說(shuō)的(de)，今後你(nǐ)也(yě)會(huì)經常用(yòng)到(dào)。

• 1 上(shàng)面我們說(shuō)定義了(le)表εγπ單內(nèi)每個(gè)組件(jiàn)的(de)name，在js函數(shù)內(n∏ π₹èi)，我們可(kě)以通(tōng)過e.detail.value.na♥λme來(lái)獲取對(duì)應的(de)值。
• 2 因為(wèi)我們要(yào)提交一(yī)個(gè)數(shù)據，因此method必須₩"↔>為(wèi)POST，如(rú)果是(shì)更新則為(wèi)PUT
• 3 在這(zhè)裡(lǐ)我告訴小(xiǎo)程序本☆↔♠↕次請(qǐng)求發送的(de)data格式為(wèi)json

ok，開(kāi)始提交~

0.1秒(miǎo)過去(qù)了(le)，OMG失敗了(le)~~~~

根據yii2的(de)響應說(shuō)明(míngβ↓)兩點

• 數(shù)據的(de)驗證失敗
• name不(bù)能(néng)為(wèi)空(kōng)

這(zhè)說(shuō)明(míng)了(le)一(yī)點就(jiù)是•δ<★(shì)yii2并沒有(yǒu)識别出我們傳遞過去(qù)≤↑☆的(de)name=2，這(zhè)是(shì)為(wèi)什(shénσ→ ')麽那(nà)？

還(hái)記得(de)我們是(shì)什(shén)麽格式傳遞的(de)麽？jso✔©<★n

對(duì)，在這(zhè)裡(lǐ)你(nǐ)要(yào)÷ ​™注意

小(xiǎo)提示：默認情況下(xià)yii2的(de)restful隻✘ 能(néng)解析application/x-www-form-urlen∑•coded 和(hé) multipart/form-data類型的(de)請(qǐn¶‌εg)求內(nèi)容。

那(nà)麽第一(yī)種方法是(shì)不(bù)要(yào)傳遞json類型的(₩π↑αde)數(shù)據，但(dàn)是(shì)我想将小(xiǎoβ±π)程序的(de)所有(yǒu)請(qǐng)求和(hé)響應都(σ•dōu)用(yòng)json，因此我必須去(qù)配置yii2讓其能(néng)解析 ≈json類型請(qǐng)求。

打開(kāi)你(nǐ)的(de)web.php，找到(dào)request組件(jiàn)配置♠₹δλ，增加一(yī)個(gè)解析器(qì)，如(rú)下(xià)圖

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

哈哈哈，成功了(le)。

總結

上(shàng)面的(de)教程讓我們完成了(le)一(yī)次數(shù)據的(de)提交，我§®≠✘們總結下(xià)

• 小(xiǎo)程序有(yǒu)自(zì)己的(de)form，和(hé)±≥Ω我們使用(yòng)html+js提交表單差不(bù)多(duō)
• yii2的(de)restful默認不(bù)支持json類型的(de) ♥γ請(qǐng)求內(nèi)容，但(dàn)是(sh<★π↑ì)可(kě)以配置
• 對(duì)于yii2的(de)restful，POST新數(shù)據成功後會(huì)返回<"Ω€這(zhè)條記錄。

關于更新操作(zuò)
因為(wèi)更新操作(zuò)和(hé)新建操作(zuò)'§ 的(de)高(gāo)度重合性，本篇我們不(bù)再做(zuò)講解↕✘，代碼中會(huì)實現(xiàn)，大(dà)家(jiā)可(kě)以去(qù)←®github拉下(xià)來(lái)看(kàn)下(xià) ♠≥π;https://github.com/abei2017/xgh

下(xià)一(yī)篇
到(dào)現(xiàn)在我們已經有(yǒu)了(le)<☆≈相(xiàng)冊，下(xià)一(yī)篇我們将講解為(wèi)某一(yī)個(gè♦<₹)相(xiàng)冊傳圖片的(de)實現(xiàn)，你(nǐ)也(yě)将學到(dàoε£)如(rú)何使用(yòng)小(xiǎo)程序選擇/拍(p£'λ₩āi)攝照(zhào)片以及上(shàng)傳到(dào)服務器(qì)等等。