# 🏅 Week10 - typescript 實作課程

安 大家，這是第十週的任務

這週將近過年，這邊先預祝大家新年快樂~
這禮拜進度的內容這邊有預先看過，基本上部分邏輯大家有在龍巖多少碰過，針對該章節邏輯這邊也有協助標註在下方重點整理部分，大家請依自身熟悉度選擇性學習或跳過
過年期間每周任務部分會先暫停，<span style='color:red'>**預計直至 2/19(一) 才會接續喔**</span> ( 這週的學習進度也請大家盡量於這期限前完成 )

<hr />
<span style='color:gray'>**此次會使用到尚硅谷提供的 api 資源**
**服務器域名:** http://sph-api.atguigu.cn
**swagger文檔文檔 1 :** http://139.198.104.58:8212/swagger-ui.html#/index45controller
**swagger文檔文檔 2 :** http://39.98.123.211:8510/swagger-ui.html#/
**帳號測資:**: 帳/密: admin/atguigu123</span>

<br/>

**註1: login api 原帳密有時會出現 201 密碼錯誤，解決方法是先將 middleware ( permission.ts ) 中的路由 login 路由相關邏輯先 comment 掉，有鑑於目前後臺頁面的其他 api 操作都不須帶 token 的情況下，如此後續的課程內容仍可持續進行**

**註2: 屬性 api (GET /admin/product/attrInfoList/{category1Id}/{category2Id}/{category3Id}) 這支會因為回傳的內容太多而導致因回應的慢出現錯誤，建議遇到這個情形可以選擇較少回傳內容的組合**

<hr/>

### 1. 本週預定學習進度
以下根據[真真協助統整的進度規劃](https://puffy-spectrum-df9.notion.site/Vue-vue3-TypeScript-a1cb82c769334bcaa231ea614f47a1be)
**第七章、屬性頁面 (p64~p75)**

### 2. 本週學習重點整理

- 熟悉 typescript 與 api 型別定義的邏輯
- 熟悉 關聯選單 el-select 的製作邏輯 ( p65~67 龍巖專案常用邏輯，熟悉的可跳過 )
- 孰悉 el-table 以及內容的轉變與製作 ( p68~70 龍巖專案常用邏輯，熟悉的可跳過 )
- 使用 el-input 製作標籤查看與非查看模式切換 & 刪除不必要的空值 & 避免重複值 ( p72 )
- 若針對原取用 html 元件 instance 的 ref，使用 v-bind 後不接字串而接函式會發現其在原 html 元件結構發生變化時觸發，比如這邊以 ref 綁 el-input 就會因為 input 內容變化而觸發 ref 用 v-bind 綁定的函式 ( p73 )
- 針對新增 el-input 欄位放置自動聚焦 ex: element.focus() ( p73 )
- 使用 store.$reset() 重置 pinia 個別 store 中的狀態，可放在 onBeforeMounted() (p75)
註: 但若 pinia 的個別 store 是用組合式撰寫的，則無法使用 $reset() 得自行撰寫重置方法

<br>

**請大家交個 GitHub 連結作為有達到本週目標 & 挑戰的證明喔~**

---
| 名稱 | 回報網址 |
| -------- | :--------: |
| Bruno | [github](https://github.com/Bruno-Yu/vue_admin.git) |
| 真真 | [github](https://github.com/JudithCrocodile/vue_exercise) |
| 家欣 | [github](https://github.com/hsin0110/vue_admin_practice)|
|| |