---
# System prepended metadata

title: "\U0001F3C5 Week11 - typescript 實作課程"

---

# 🏅 Week11 - typescript 實作課程


安 大家 過年結束拉~ 該收心了! 第十一週的學習進度如下，一樣最晚下禮拜一繳交喔 
但目前的情況比較特別，筆者在上週六 (2024/2/17) 測試目前此課程的這部分的 API 全掛，考量到中國過年假期直至今天 (2024/2/19) 才開工(預計開工後才有可能會被修復)
所以這邊先推演幾個可能性以及預計執行的方式 ( 若有更好的建議或方法也歡迎提出喔 )
1. 情況一、SPU 相關的 API 在這周後續有修復完成: 若有影響到各自的學習進度的話，再請再於下周一提交時間前幫忙補上預計的繳交時間
2. 情況二、SPU 相關的 API 在這周整周都沒有修復的話: 大家請參考下面本周預計學習重點處，揀選自己有興趣的單元學習後以文字部分回報學習完成就行
而若情況二 API 未修復的問題不幸一直被延遲的話，就有可能會提前結束此 ts 學習計畫(畢竟當初計畫的目的也已完成)，當然若大家有其他更好的想法也歡迎於 Discord 中提出囉~


<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) 
**第八章、SPU頁面 (p76~p89)**


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

- SPU 管理頁面業務邏輯說明，並解釋甚麼是 SPU、SKU -- P76
- SPU 頁面靜態搭建 & 接 API & 定義 ts -- P77~P82
- SPU 照片牆展示 ( el-upload 照片牆功能使用 & 說明 ) -- P84
- 完成 SPU 頁面編輯 & 新增邏輯 -- P85 ~ P89

註: 此次的練習所需介接的api較多業務邏輯也較雜與實戰較為相似，但這塊其實我們在龍巖部分大都處理過類似的邏輯，所以大家請依自身熟悉情況揀選此頁要練習或學習的內容 (目前我的程式碼為已補齊到 P89 的程式碼，若後續的課程與這邊有相關但有跳過部分學習內容的同仁，還請自行至下方我提供的 Github 連結自行參考 & 取用 )

補充: 這禮拜課程主要針對 SPU 管理頁面的製作，這邊對於 SPU 以及 SKU 這兩個專有名詞進行補充說明 ( 老師在課程 P76 中也會提及 )

* SPU: 電商術語，代表一個標準化的產品單元 ( Standard Product Unit ) ，通常一個 SPU 是由一個以上的 SKU 所組成 - 可以想成 class
( 此專案的一個 SPU 需涵蓋內容 品牌名稱、品牌描述、照片(品牌旗下產品)、銷售屬性(標籤 ex: 顏色、版本、尺碼) ) 
    - 可以在 SPU 管理介面新增 SPU
    - 可以在 SPU 管理介面中新增 SKU
- SKU:  電商術語，最小庫存單位 ( stock keeping unit ) 也就是定義貨物的料號/貨號 - 可以想成 class 的 instance
( 此專案的一個 SKU 需涵蓋內容 名稱、價格、重量、描述、平台屬性(機體參數)、銷售屬性 (顏色、版本)、圖片名稱 )

可參考說明 SPU & SKU 文章: https://fslol.com/blog/post/146/%E4%BB%80%E9%BA%BC%E6%98%AF-spu-sku%EF%BC%9F/

<br>

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

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