品牌新增页面分析
品牌的新增
昨天我們完成了品牌的查詢，接下來就是新增功能。點擊新增品牌按鈕
Brand.vue頁面有一個提交按鈕：
點擊觸發addBrand方法：
把數據模型之的show置為true，而頁面中有一個彈窗與show綁定：
彈窗中有一個表單子組件，并且是一個局部子組件，有頁面可以找到該組件：
頁面實現
重置表單
重置表單相對簡單，因為v-form組件已經提供了reset方法，用來清空表單數據。只要我們拿到表單組件對象，就可以調用方法了。
我們可以通過$refs內置對象來獲取表單組件。
首先，在表單上定義ref屬性：
然后，在頁面查看this.$refs屬性：
reset(){// 重置表單console.log(this);}查看如下：
看到this.$refs中只有一個屬性，就是myBrandForm
我們在clear中來獲取表單對象并調用reset方法：
要注意的是，這里我們還手動把this.categories清空了，因為我寫的級聯選擇組件并沒有跟表單結合起來。需要手動清空。
表單校驗
校驗規則
Vuetify的表單校驗，是通過rules屬性來指定的：
校驗規則的寫法：
說明：
-
規則是一個數組
-
數組中的元素是一個函數，該函數接收表單項的值作為參數，函數返回值兩種情況：
-
返回true，代表成功，
-
返回錯誤提示信息，代表失敗
-
編寫校驗
我們有四個字段：
-
name：做非空校驗和長度校驗，長度必須大于1
-
letter：首字母，校驗長度為1，非空。
-
image：圖片，不做校驗，圖片可以為空
-
categories：非空校驗，自定義組件已經幫我們完成，不用寫了
首先，我們定義規則：
然后，在頁面標簽中指定：
<v-text-field v-model="brand.name" label="請輸入品牌名稱" hint="例如：oppo" :rules="[rules.required, rules.nameLength]"></v-text-field> <v-text-field v-model="brand.letter" label="請輸入品牌首字母" hint="例如：O" :rules="[rules.letter]"></v-text-field>效果：
表單提交
在submit方法中添加表單提交的邏輯：
submit() {console.log(this.$qs);// 表單校驗if (this.$refs.myBrandForm.validate()) {// 定義一個請求參數對象，通過解構表達式來獲取brand中的屬性{categories letter name image}const {categories, letter, ...params} = this.brand; // params:{name, image, cids, letter}// 數據庫中只要保存分類的id即可，因此我們對categories的值進行處理,只保留id，并轉為字符串params.cids = categories.map(c => c.id).join(",");// 將字母都處理為大寫params.letter = letter.toUpperCase();// 將數據提交到后臺// this.$http.post('/item/brand', this.$qs.stringify(params))this.$http({method: this.isEdit ? 'put' : 'post',url: '/item/brand',data: params}).then(() => {// 關閉窗口this.$emit("close");this.$message.success("保存成功！");}).catch(() => {this.$message.error("保存失敗！");});} }通過this.$refs.myBrandForm選中表單，然后調用表單的validate方法，進行表單校驗。返回boolean值，true代表校驗通過
通過解構表達式來獲取brand中的值，categories需要處理，單獨獲取。其它的存入params對象中
品牌和商品分類的中間表只保存兩者的id，而brand.categories中保存的是對象數組，里面有id和name屬性，因此這里通過數組的map功能轉為id數組，然后通過join方法拼接為字符串
發起請求
彈窗提示成功還是失敗，這里用到的是我們的自定義組件功能message組件：
這個插件把$message對象綁定到了Vue的原型上，因此我們可以通過this.$message來直接調用。
包含以下常用方法：
-
info、error、success、warning等，彈出一個帶有提示信息的窗口，色調與為普通（灰）、錯誤（紅色）、成功（綠色）和警告（黃色）。使用方法：this.$message.info("msg")
-
confirm：確認框。用法：this.$message.confirm("確認框的提示信息")，返回一個Promise。
?
總結
