小北微信小程序之(zhī)--新建和(hé / huò)編輯相冊（小程序的(de)表單提交）

發表時(shí)間：2022-9-14

發布人(rén)：融晨科技

浏覽次數：77

之(zhī)前相冊的(de)數據都是(shì)我們使用種子(zǐ)腳本模拟出(chū)來(lái)的(de)，本節我們嘗試從小程序端直接提交數據到(dào)yii2服務器。

在(zài)本節我們要(yào / yāo)學習到(dào)如下知識

小程序的(de)form功能
yii2中restful的(de)create和(hé / huò)update方法的(de)使用

這(zhè)一次我們依然從服務端開始

服務器端

我們知道(dào)使用GET /xcx/albums 是(shì)觸發了(le／liǎo)index這(zhè)個(gè)action，那麽create和(hé / huò)update那？也(yě)是(shì)有的(de)，當我們對接口發起POST /xcx/albums代表create，同理PUT /xcx/albums/xxx 代表update。

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

簡單嘗試一下，如下圖，我先給yii2模拟一個(gè)post請求看看是(shì)否會有新數據

很不(bù)錯，在(zài)我沒有對服務器代碼進行任何改動的(de)情況下已經成功插入了(le／liǎo)數據

當然這(zhè)面臨着1個(gè)問題，就(jiù)是(shì)對于(yú)album表記錄，created_at和(hé / huò)updated_at并沒有賦值，關于(yú)它們方法有很多，比如前台傳入時(shí)間戳、後台對create action進行重寫，當然還有一種方法也(yě)是(shì)我們即将采用的(de)方法，那就(jiù)是(shì)使用yii2的(de)TimestampBehavior行爲(wéi / wèi)類，它将作用于(yú)模型Album，如下圖

設置完以(yǐ)後我們再測試下

起作用了(le／liǎo)

小提示：yii2的(de)行爲(wéi / wèi)是(shì)一門比較大(dà)的(de)教程，我們幹貨區也(yě)有講解，可以(yǐ)從http://nai8.me/sapper-index.h... 鏈接進入，共14篇文章。

現在(zài)我們已經知道(dào)了(le／liǎo)create接口如何玩，接下來(lái)看看update，在(zài)yii2的(de)restful中如果對一個(gè)已經存在(zài)的(de)記錄進行更新需要(yào / yāo)如下規則 PUT /xcx/albums/xxx 其中xxx代表這(zhè)個(gè)記錄的(de)ID，比如PUT /xcx/albums/6 就(jiù)是(shì)要(yào / yāo)更改id=6的(de)相冊，其中form部分就(jiù)是(shì)更新的(de)内容，我們來(lái)模拟一個(gè)記錄。

果然，數據庫被修改了(le／liǎo)。

以(yǐ)上(shàng)就(jiù)是(shì)create和(hé / huò)update接口，現在(zài)服務器端我們都知道(dào)如何做了(le／liǎo)，接下來(lái)就(jiù)是(shì)小程序的(de)部署。

小程序

在(zài)小程序端我們計劃增加一個(gè)新建按鈕，點擊後跳轉到(dào)一個(gè)頁面完成相冊新建功能，因此我對相冊列表頁面做了(le／liǎo)如下配置

小提示：關于(yú)樣式的(de)問題大(dà)家可以(yǐ)參考項目中的(de)list.wxss文件，這(zhè)裏就(jiù)不(bù)做講解。

我設計了(le／liǎo)一個(gè)相冊表單提交頁面，如下圖

這(zhè)裏面有幾點要(yào / yāo)說(shuō)的(de)

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

将含有能提交數據的(de)組件用form包起來(lái)并至少要(yào / yāo)指定bindsubmit="abc"，這(zhè)代表表單提交後有對應js中的(de)abc()方法進行接收。
在(zài)表單中需要(yào / yāo)有一個(gè)button用來(lái)點擊提交它，且規定這(zhè)個(gè)button的(de)formType必須爲(wéi / wèi)submit

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

小提醒：在(zài)js端接收form裏各組件數據的(de)方法和(hé / huò)html很像，是(shì)根據wxml内各組件的(de)name屬性獲取的(de)。

我們在(zài)add.js中定義一個(gè)formSubmit方法用于(yú)接收表單數據。

這(zhè)個(gè)方法有一些要(yào / yāo)說(shuō)的(de)，今後你也(yě)會經常用到(dào)。

1 上(shàng)面我們說(shuō)定義了(le／liǎo)表單内每個(gè)組件的(de)name，在(zài)js函數内，我們可以(yǐ)通過e.detail.value.name來(lái)獲取對應的(de)值。
2 因爲(wéi / wèi)我們要(yào / yāo)提交一個(gè)數據，因此method必須爲(wéi / wèi)POST，如果是(shì)更新則爲(wéi / wèi)PUT
3 在(zài)這(zhè)裏我告訴小程序本次請求發送的(de)data格式爲(wéi / wèi)json

ok，開始提交~

0.1秒過去了(le／liǎo)，OMG失敗了(le／liǎo)~~~~

根據yii2的(de)響應說(shuō)明兩點