# 第三週：熟練 Vue.js

###### tags: `六角學院_Vue直播班_主線任務`

## 目錄
[ToC]

---

## 預測步驟

### 登入頁面

### 登入頁面_頁面顯示

- [ ] **1.** 將帳號密碼 input v-model 到 data

- [ ] **2.** 按下登入時，打送登入 api

- [ ] **2.1** 如果成功，將回送的 cookie 寫入

- [ ] **2.2** 如果失敗，跳出 alert

- [ ] **3.** 接續 **2.1** ，跳轉至[產品頁面](#產品頁面)

### 產品頁面

### 產品頁面_頁面顯示

- [ ] **1.** 打 api 取得產品列表

- [ ] **1.1** 將取得的資料寫入 data

- [ ] **2.** 使用 v-for 將 data 裡的產品渲染到畫面上

### 產品頁面_新增產品

- [ ] **1.** 點擊建立新的產品時，跳出燈箱 

- [ ] **1.1** 燈箱內的 input 用 v-model 綁入 data ， 主要圖片輸入圖片網址後要顯示圖片 

- [ ] **1.2** 燈箱內的新增圖片按鈕按下時，產生一個新的 input 可以輸入圖片網址 

- [ ] **1.3** 燈箱內的刪除圖片按鈕按下時，將最新產生的 空白 input 刪除 

- [ ] **1.3** 燈箱內的取消按鈕按下時，關閉壁燈箱 

- [ ] **1.4** 燈箱內的確認按鈕按下時，打上傳產品資料的 api ，alert(新增完成)，並關閉燈箱 

### 產品頁面_刪除產品

- [ ] **1.** 點擊刪除產品時，跳出提示燈箱 

- [ ] **1.1** 點選確認刪除，跳出 alert(刪除產品)，關閉燈箱 

### 產品頁面_編輯產品

- [ ] **1.** 點擊編輯產品時，跳出編輯產品燈箱  

- [ ] **1.1** 編輯產品燈箱與新增產品燈箱差不多， placeholder 要改一下 

---

## 實際狀況

### 登入頁面

### 登入頁面_頁面顯示

- [x] **1.** 將帳號密碼 input v-model 到 data

- [x] **2.** 按下登入時，打送登入 api

- [x] **2.1** 如果成功，將回送的 cookie 寫入

| 問題 | 成因 | 行動 |
|:--------------- |:------------------------------ |:------------ |
| cookie 寫不進去 | 忘記怎麼把回傳的 cookie 寫進去 | 偷看之前寫的 |

axios
  .post(`${this.apiUrl}/admin/signin`, this.user)
  .then((res) => {
    // 將回傳的 res 裡的 token 和 expired 拿出
    const { token, expired } = res.data;
    //  將 token 寫入 cookie
    document.cookie = `hexToken=${token}; 
          expires=${new Date(expired)};`;

    // 切換頁面
    window.location = "admin.html";
  })
  .catch((err) => alert(err.data.message));

- [x] **2.2** 如果失敗，跳出 alert

- [x] **3.** 接續 **2.1** ，跳轉至[產品頁面](#產品頁面)

### 登入頁面_問題紀錄

### 產品頁面

### 產品頁面_頁面顯示

- [ ] **1.** 打 api 取得產品列表

- [x] **1.1** 取得 token ,並設定 axios 每次都會帶 cookie

| 問題 | 成因 | 行動 |
|:------------------ |:------------------------------------ |:------------ |
| axios 沒辦法拿資料 | 忘記怎麼設定 axios 每次打都帶 cookie | 偷看之前寫的 |

// 取得 Token
const token = document.cookie.replace(
  /(?:(?:^|.*;\s*)hexToken\s*\=\s*([^;]*).*$)|^.*$/,
  "$1"
);
// 每次請求都會帶 token
axios.defaults.headers.common["Authorization"] = token;
// 確認是否登入
this.checkLogin();

- [x] **1.2** 確認使否有登入，如果有執行 **1.3** ，如果沒有導回登入頁面

| 問題 | 成因 | 行動 |
|:------------------------------ |:---------------------------------------------------------------------------- |:--------- |
| 登入成功後，拿產品資料一直進 catch | getProducts() 裡面 `${this.path}` 沒加 this 導致一直進 checkLogin() 的 catch | 加上 this |

- [x] **1.3** 將取得的資料寫入 data

- [x] **2.** 使用 v-for 將 data 裡的產品渲染到畫面上

### 產品頁面_新增產品

- [ ] **1.** 點擊建立新的產品時，跳出燈箱 

- [ ] **1.1** 燈箱內的 input 用 v-model 綁入 data ， 主要圖片輸入圖片網址後要顯示圖片 

| 問題 | 成因 | 行動 |
|:----------------------------------------- |:-------------- |:-------- |
| 改 modal 裡面的東西時，外面的清單也會更動 | 沒有使用淺拷貝 | 用深拷貝 |

- [ ] **1.2** 燈箱內的新增圖片按鈕按下時，產生一個新的 input 可以輸入圖片網址 

| 問題 | 成因 | 行動 |
|:----------------------------- |:----------------------------------------------------- |:------------------------------------------------- |
| 不知道怎麼產生新的 input 結構 | 以為要寫 html | 其實用 v-for 和 v-if data 裡的 imagesUrl 就能解決 |
| 新增按鈕變成刪除按鈕 | 此時 tempProduct.imagesUrl 是空陣列，不是 undefined | 加上是否是空陣列的判斷 |

<!-- 判斷使否是陣列，但如果是空陣列會跑進條件     -->
<div v-if="Array.isArray(tempProduct.imagesUrl)">    

<!-- 先判斷是否是有 imagesUrl 陣列，再判斷 imagesUrl 陣列是否為空陣列 -->
<div v-if="Array.isArray(tempProduct.imagesUrl) && tempProduct.imagesUrl.length ">    

- [ ] **1.3** 燈箱內的刪除圖片按鈕按下時，將最新產生的 空白 input 刪除 

- [ ] **1.3** 燈箱內的取消按鈕按下時，關閉壁燈箱 

- [ ] **1.4** 燈箱內的確認按鈕按下時，打上傳產品資料的 api ，alert(新增完成)，並關閉燈箱 

### 產品頁面_刪除產品

- [ ] **1.** 點擊刪除產品時，跳出提示燈箱 

| 問題 | 成因 | 行動 |
|:-------------- |:---------------------- |:--------------------------------------------------------------------------------- |
| 沒辦法開 modal | 忘記怎麼用 js 開 modal | [複習課程內容](https://courses.hexschool.com/courses/vue-20212/lectures/35988959) |

let delProductModal = '';

// mounted 時才能把 data 的東西寫到 modal 上
mounted() {
    // 創建 bootstrap 實體
    delProductModal = new bootstrap.Modal(
      document.getElementById('delProductModal')
    );
  }

// 開啟 modal
delProductModal.show();

- [ ] **1.1** 點選確認刪除，跳出 alert(刪除產品)，關閉燈箱 

### 產品頁面_編輯產品

- [ ] **1.** 點擊編輯產品時，跳出編輯產品燈箱  

| 問題 | 成因 | 行動 |
|:---------------------------------------------------- |:----------------------------------------------------- |:---------------------- |
| 如果編輯沒有其他圖片的產品，會報錯，undefined.length | 用 tempProduct.imagesUrl.length 來判斷使否是空陣列 | 改用 Array.isArray() |
| 如果沒有輸入其他圖片會說格式錯誤 | imagesUrl 是 空陣列 而不是 null | 改成空陣列 |
| 如果把其他圖片刪剩一個時，新增按鈕會變成刪除按鈕 | 此時 tempProduct.imagesUrl 是空陣列，不是 undefined | 加上是否是空陣列的判斷 |

<!-- 用這樣判斷，對於沒有其他圖片的產品會變成 undefined.length -->
<div v-if="tempProduct.imagesUrl.length">

<!-- 判斷使否是陣列，但如果是空陣列會跑進條件       -->
<div v-if="Array.isArray(tempProduct.imagesUrl)">    

<!-- 先判斷是否是有 imagesUrl 陣列，再判斷 imagesUrl 陣列是否為空陣列 -->
<div v-if="Array.isArray(tempProduct.imagesUrl) && tempProduct.imagesUrl.length ">    

- [ ] **1.1** 編輯產品燈箱與新增產品燈箱差不多， modal header 的字要改一下，確認按鈕呼叫的 function 要改 

### 問題紀錄模板

| 功能 | 步驟 | 問題 | 成因 | 行動 |
| ---- | ---- |:----------------- | ---- |:----------------------- |
| | | GitHub Sync | | [:link:][GitHub-Sync] |
| | | Browser Extension | | [:link:][HackMD-it] |
| | | Book Mode | | [:link:][Book-mode] |
| | | Slide Mode | | [:link:][Slide-mode] |
| | | Share & Publish | | [:link:][Share-Publish] |

[GitHub-Sync]: https://hackmd.io/c/tutorials/%2Fs%2Flink-with-github
[HackMD-it]: https://hackmd.io/c/tutorials/%2Fs%2Fhackmd-it
[Book-mode]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-create-book
[Slide-mode]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-create-slide-deck
[Share-Publish]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-publish-note