Vue3-新增產品(查/增/修/刪)功能實作

練習 Vue.js 的各項語法及指令，目標以串接 API 完成一頁式的產品新增、刪除、修改的頁面。

* 可以新增、編輯、刪除商品
* 商品啟用、關閉可以使用不同的顏色標示

拆解的流程進行開發

-切版
-登入功能
-進入產品列表
-get
-post
-bs5 Modal功能
-put
-多圖上傳新增功能
-delete

//抽象的
-關注點分離
-元件化

開始開發

起始畫面

• 切版部分
  
• js與vue部分
  
• api網址/get_v2_apiapi_pathadmin_products)
  • 管理控制台-產品(products)練習這裡的api

get產品列表功能

• 登入成功後，會進入到後台的產品列表區->
• 我們會利用生命週期mounted幫我們做初始化畫面->
  • mounted生命週期就是會在進入畫面時，把html＃app進入初始化
• 初始化之前，要先存入剛剛登入過程的帳密token存入到cookie再帶入到傳送到遠端需求的header中，不用重新登入，自動驗證->
  
• 再去觸發methods中的getProducts事件->
  • 在上圖的mounted區塊內尾端加入觸發事件
    this.getProducts()
    
• 在getProducts()方法中，利用axios get方法取的遠端產品總資料->
  
  • 回傳結果
    
• then取的遠端產品總資料後，要將資料存入data中的products陣列裡->
  • this.products = res.data.products
    
• 先驗證是否抓到資料，在實際的把總資料渲染在對應的畫面欄位上
  • {{products}}塞入到html驗證資料是否存入 v ->
  • 找產品表單欄位的html <tr v-for="" ：key=""></tr> 利用v-for跑迴圈資料，一次渲染(v-for 搭配key值) ->
  • 將資料補上欄位
    
    
    
  • 是否啟用這個欄位需要使用v-if="product.is_enable"做判斷
    • v-if="true"會自動寫啟用（v-if和else要為相鄰的html欄位喔！）
    • v-else false會自動寫不啟用
      
• 取的產品資料清單並放入到畫面中功能完成
  

測試出現modal視窗/利用vue開啟modal展開功能

• 詳細可以參考本篇
• 先檢查bs5版本載入最新的cdn
• 想要做的事情是，當我們點擊畫面上的右上角有一個"建立新產品"的按鈕 ->
• 出現"建立新產品"的modal視窗（bs5有定義好使用js點擊按鈕會開啟），但這裡我們要改用vue去做開啟，就必須功能自定義 ->
• 建立bs5 modal方法 ->
  • 進入畫面時，生命週期初始化，先測試bootstrap有沒有載入成功？
    
    
  • 上圖代表有載入bs5成功，下圖代表開啟成功
    
    

post功能-點擊“建立新的產品”，出現modal新增欄位功能（把新增與更新功能寫在同一個方法）

• 首先，先利用vue指令把modal中欄位的畫面跟資料作綁定 ->
  
  
  
  
• 要在modal右下方的“確認”按鈕上設定vue事件綁定 ->
  • 點擊按鈕之後,觸發updateProduct（）方法
    
  • 有回傳代表觸發成功！！！
• 點擊確認按鈕後，接著我們要利用觸發updateProduct（）傳送post api請求來新增使用者所新增的商品
  
  • 發現有些必填欄位沒有填到，因此無法存入資料庫，要重新填清楚欄位
• 要注意在updateProduct（）內更新/新增資料給伺服器後，需要再觸發this.getProducts()重新取的更新後的資料，如下：
  
• 在新增商品modal視窗填寫一次所必要的欄位按下確認鍵後，新增產品成功出現在表單中
  
• 修改一下modal視窗的程式碼，把mounted中保持開啟的modal測試關閉，真正的把開啟modal寫入畫面中
  
  
• 當我們在modal欄位都新增好資料後,按下確認按鈕 updateProduct()會post最新一筆資料上去伺服器，然後我們要重新更新資料this.getProducts()在把新增資料的modal關閉.hide()
• 到這裡就把新增資料功能寫完了！進入到更改資料put api

點擊，編輯產品->出現modal/在modal填入更改資料，按確認，api put資料上傳成功．

• 其實在新增產品的modal和編輯產品的modal功能或刪除的modal欄位大致相同，所以其實我們可以使用同一個modal視窗就好 ->
• 因此，我們用到data中的變數isNew: false
• 所以先來聚焦思考，當我們openModal時，可能是新增產品的情況，也可能是編輯產品的情況 or 刪除的modal 做判斷->

• 所以我們可以在openModal(status)加入status參數做情況判斷
  

• 接著在updateProduct(){}方法中也可以透過this.isNew的情況判斷是要post api請求還是put 請求這樣做判斷->

  • 嘿嘿！又再次用到了js的物件變數取值了！！！
    

陣列圖片／多圖上傳功能

• 多圖設置，裡面會需要有兩個判斷：
  • 判斷 tempProduct.imagesUrl 資料是一個陣列->
    • 用Array.isArray(tempProduct.imagesUrl)判斷是否為陣列
      • 搭配新的div＋v-if做上述判斷
    • 若資料不是陣列程式碼會整個出錯 ->
• 再來是判斷新增 刪除出現的時機
  • 先將資料跟新增圖片的按鈕作綁定
  • 將資料跟刪除圖片的按鈕作綁定->
    if -> 新增
    //欄位是有填寫資料時
    //當如果是空的時候

else -> 刪除
//當欄位是空的時後，就不能刪除

刪除功能

• 使用到delete api
  • 新增刪除方法deleteProduct()
    
• 創建一個delProductModal
  
• 當用戶點擊畫面上該產品的刪除按鈕
  
• 刪除產品資料後會把delete modal 關閉
  
  
• 補上商品名稱
  
• 在確認刪除按鈕上加入刪除事件就會在我們按下確認刪除時刪除該產品