知識
不管是網(wǎng)站,軟件還是小程序,都要直接或間接能為您產(chǎn)生價值,我們在追求其視覺表現(xiàn)的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網(wǎng)站成為營銷工具,讓軟件能切實提升企業(yè)內部管理水平和效率。優(yōu)秀的程序為后期升級提供便捷的支持!
小北微信小程序之--新建和編輯相冊(小程序的表單提交)
發(fā)表時間:2022-9-14
發(fā)布人:葵宇科技
瀏覽次數(shù):77
之前相冊的數(shù)據(jù)都是我們使用種子腳本模擬出來的,本節(jié)我們嘗試從小程序端直接提交數(shù)據(jù)到y(tǒng)ii2服務器。
在本節(jié)我們要學習到如下知識
- 小程序的form功能
- yii2中restful的create和update方法的使用
這一次我們依然從服務端開始
服務器端
我們知道使用GET /xcx/albums 是觸發(fā)了index這個action,那么create和update那?也是有的,當我們對接口發(fā)起POST /xcx/albums代表create,同理PUT /xcx/albums/xxx 代表update。
我們先來說create
簡單嘗試一下,如下圖,我先給yii2模擬一個post請求看看是否會有新數(shù)據(jù)
很不錯,在我沒有對服務器代碼進行任何改動的情況下已經(jīng)成功插入了數(shù)據(jù)
當然這面臨著1個問題,就是對于album表記錄,created_at和updated_at并沒有賦值,關于它們方法有很多,比如前臺傳入時間戳、后臺對create action進行重寫,當然還有一種方法也是我們即將采用的方法,那就是使用yii2的TimestampBehavior行為類,它將作用于模型Album,如下圖
設置完以后我們再測試下
起作用了
小提示:yii2的行為是一門比較大的教程,我們干貨區(qū)也有講解,可以從http://nai8.me/sapper-index.h... 鏈接進入,共14篇文章。
現(xiàn)在我們已經(jīng)知道了create接口如何玩,接下來看看update,在yii2的restful中如果對一個已經(jīng)存在的記錄進行更新需要如下規(guī)則 PUT /xcx/albums/xxx 其中xxx代表這個記錄的ID,比如PUT /xcx/albums/6 就是要更改id=6的相冊,其中form部分就是更新的內容,我們來模擬一個記錄。
果然,數(shù)據(jù)庫被修改了。
以上就是create和update接口,現(xiàn)在服務器端我們都知道如何做了,接下來就是小程序的部署。
小程序
在小程序端我們計劃增加一個新建按鈕,點擊后跳轉到一個頁面完成相冊新建功能,因此我對相冊列表頁面做了如下配置
小提示:關于樣式的問題大家可以參考項目中的list.wxss文件,這里就不做講解。
我設計了一個相冊表單提交頁面,如下圖
這里面有幾點要說的
表單form
首先是在小程序中form的用法,它有固定的步驟及能攜帶的組件數(shù)據(jù)(switch、input、checkbox、slider、radio、picker)
- 將含有能提交數(shù)據(jù)的組件用form包起來并至少要指定bindsubmit="abc",這代表表單提交后有對應js中的abc()方法進行接收。
- 在表單中需要有一個button用來點擊提交它,且規(guī)定這個button的formType必須為submit
滿足以上兩個條件后,基本的表單提交就可以完成。
小提醒:在js端接收form里各組件數(shù)據(jù)的方法和html很像,是根據(jù)wxml內各組件的name屬性獲取的。
我們在add.js中定義一個formSubmit方法用于接收表單數(shù)據(jù)。
這個方法有一些要說的,今后你也會經(jīng)常用到。
- 1 上面我們說定義了表單內每個組件的name,在js函數(shù)內,我們可以通過e.detail.value.name來獲取對應的值。
- 2 因為我們要提交一個數(shù)據(jù),因此method必須為POST,如果是更新則為PUT
- 3 在這里我告訴小程序本次請求發(fā)送的data格式為json
ok,開始提交~
0.1秒過去了,OMG失敗了~~~~
根據(jù)yii2的響應說明兩點
- 數(shù)據(jù)的驗證失敗
- name不能為空
這說明了一點就是yii2并沒有識別出我們傳遞過去的name=2,這是為什么那?
還記得我們是什么格式傳遞的么?json
對,在這里你要注意
小提示:默認情況下yii2的restful只能解析application/x-www-form-urlencoded 和 multipart/form-data類型的請求內容。
那么第一種方法是不要傳遞json類型的數(shù)據(jù),但是我想將小程序的所有請求和響應都用json,因此我必須去配置yii2讓其能解析json類型請求。
打開你的web.php,找到request組件配置,增加一個解析器,如下圖
現(xiàn)在再實驗一下
哈哈哈,成功了。
總結
上面的教程讓我們完成了一次數(shù)據(jù)的提交,我們總結下
- 小程序有自己的form,和我們使用html+js提交表單差不多
- yii2的restful默認不支持json類型的請求內容,但是可以配置
- 對于yii2的restful,POST新數(shù)據(jù)成功后會返回這條記錄。
關于更新操作
因為更新操作和新建操作的高度重合性,本篇我們不再做講解,代碼中會實現(xiàn),大家可以去github拉下來看下 https://github.com/abei2017/xgh
下一篇
到現(xiàn)在我們已經(jīng)有了相冊,下一篇我們將講解為某一個相冊傳圖片的實現(xiàn),你也將學到如何使用小程序選擇/拍攝照片以及上傳到服務器等等。
相關案例查看更多
相關閱讀
- 網(wǎng)站搭建
- 云南小程序開發(fā)哪家好
- 人人商城
- 重慶網(wǎng)站建設公司
- 云南網(wǎng)站建設 網(wǎng)絡服務
- 智慧農(nóng)貿(mào)市場
- 日歷組件
- 快排推廣
- 云南小程序定制
- 生成海報
- 云南網(wǎng)站建設報價
- 云南小程序開發(fā)制作公司
- 云南衛(wèi)視小程序
- 跳轉小程序
- 云南小程序制作
- 網(wǎng)站建設公司網(wǎng)站
- 云南網(wǎng)站建設優(yōu)化
- 昆明小程序定制開發(fā)
- 小程序公司
- 網(wǎng)站建設列表網(wǎng)
- web教程
- 網(wǎng)站建設報價
- 網(wǎng)站小程序
- web學習路線
- 模版消息
- 網(wǎng)站建設首頁
- 小程序定制開發(fā)
- 云南電商網(wǎng)站建設
- 云南網(wǎng)站建設方法
- 云南網(wǎng)站建設公司地址