---
# System prepended metadata

title: 檢核點 - 第二週
tags: [Vue 直播班 - 2021 夏季班]

---

---
tags: Vue 直播班 - 2021 夏季班
---

# 檢核點 - 第二週

**重點觀念：**

1. 這週開始串接後台 API
1. Vue 指令

**回覆參考：**
```
對於 Vue 的掌握度相當不錯，串接 API 也沒有問題，恭喜過關
可以開始規劃更豐富的產品列表內容喔
```

**如何測試同學作業？**
```
請各位用自己的帳密登入，並且建立一個新的產品來測試
不要更動學生原本的產品資料
```
**注意：**
```
codepen 提交會無法儲存 token，如果是這樣的話請同學
lv2 以上：將本地端可運行的 code 上傳到 Codepen，請助教拉下來測試
lv1：使用免驗證 api，就不需要儲存 token
```

---

**後台登入頁面：**
* 登入的 label for 需對應 
* input id 帳號的 input type 應為 email，密碼應為 password
*  有將 token 存入 Cookie 內



助教新增建議：

* axios 記得寫上 catch
* **有遇到串接到前台產品列表的同學， 可以注意一下**
* 以下程式碼可以嘗試用解構的方式來簡化：
```htmlembedded=
const token = res.data.token;
const expired = res.data.expired;
```


**後台產品頁面：**

- 正確使用 Vue 指令
- 串接後台 GET 產品 API
- 有讀取 Cookie 拿到 token 並賦予在 headers 上
- 測試功能正常，有錯誤再細看程式碼
- 此作業建議還是用自己新增的資料，避免直接使用測試 API 的內容
-  `axios.defaults.headers.common.Authorization = token;` 可以在初始化的函式內寫

```
驗證出現錯誤排除方式:

- 查看帳號密碼是否錯誤
- axios 是否在 headers 有帶上 token 
```

助教新增建議：

* 
