codeasy school 是一個提供程式教師資訊的實作練習網頁。 透過 https://mocki.io/ 新增一個能取得教師資訊列表 API，再串接此 API 取得教師資訊，呈現於網頁中。
- 網頁 favicon 取自 Programming icon by Icons8
https://codeasy-school.wujue.dev/
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm run start
# generate static project
$ npm run generate✅ 使用 Nuxt 開發專案
✅ 以 SCSS 撰寫內容樣式
✅ 應用 component 功能
✅ 應用 computed 功能
✅ 製作輸入類型 text、radio、select，同一 component 切換 prop 來改變對應的輸入類型，並套用 v-model
✅ 可切換頁面
✅ 設定 Global 參數讓頁面的顏色主題會隨著更換
✅ 串接一組列表資料 API
✅ 程式架構做到最大的沿用性、維護性，並撰寫 Readme
✅ 部署至 Firebase Hosting
✅ 提供 Github 程式碼
此節將描述專案的設計構想，包括後續的維護和沿用構思。
.
├── apis
│ └── teacher-api.js
├── assets
│ └── css
│ ├── main.scss
│ ├── mixins.scss
│ └── variables.scss
├── components
│ ├── search-condition-pane.vue
│ └── teacher-card.vue
├── layouts
│ └── default.vue
├── pages
│ ├── index.vue
│ └── search.vue
├── store
│ └── index.js
└── utils
└── lcs.js
網頁首頁切分成左右兩部分，考慮到 RWD，因此將手機和平板切分成上下兩部分。
點擊 Start 按鈕會跳至搜尋教師頁面。
將 Header 和 Footer 放在 layouts 檔案中，之後若新增其他頁面可以直接套用，不需在每一個頁面都寫一遍。
-
在 Header 上提供四種主題顏色如下圖，依序為綠色、藍色、橙色、紫色。
-
透過 global variable 設定不同主題顏色 class，再使用 Vuex 控制主題狀態
-
若是需增加主題，只要在 ./assets/css/variable.scss 中按照格式 (如下圖) 撰寫主題顏色，接著在 Header 的頁面 (./layouts/default.vue) 增加顏色資料即可直接套用。
搜尋頁面切分成上下區塊。上方區塊為搜尋版面，透過 text、radio、select 分別提供使用者不同的搜尋過濾條件 (搜尋內容文字、性別、上課地區)。下方區塊為教師資訊版面，透過 computed 將 API 取得的教師列表資料處理成對應資訊內容，並根據搜尋條件過濾資料。
-
將各種搜尋條件類型包裝進這個 component，透過 props 可以改變不同類型 (text、radio、select)。
-
另外可透過 v-model 雙向綁定資料，當使用者更改搜尋條件時，父層 component 會依據新搜尋條件過濾顯示資料。
-
考慮到可能需綁定其他屬性到類型上 (例如：placeholder)，因此用 mainProps 直接綁定到類型上，增加擴充性。
-
下圖範例是 input 為 text 的基本資料屬性。
-
後續如需增加更多類型 (例如：checkbox)，可以繼續在此 component 中製作。若是類型種類過多，可考慮將每個類型切分為獨立的 component，然後再 import 到此檔案中統一管理。
-
將單一教師資訊版面包裝成 component，方便使用。
-
透過 slot 讓大部分教師資料不需用 props 傳遞到此 component，此 component 只需負責樣式的呈現和 rating star 資料處理，易於維護。
-
以下為 HTML structure of teacher card，後續可以繼續新增教師其他欄位資訊 (例如：聯絡方式)，或是增加教師頁面連結按鈕。
- 在搜尋文字功能上進行特別處理，盡可能過濾出相關教師資訊。
- 搜尋文字可用 " " 或 "," 切分，例如 "script, python"，將會裁切成 "script" 和 "python"，只要任一個配對到資料內容皆會顯示該資料。
- 透過 LCS algorithm 允許搜尋文字不完整時也能盡量配對到資料，例如："pyhn" 可以配對到 python 相關的資料。
- 只要 LCS 長度 >= 搜尋內容長度 * 0.8 皆能配對資料，允許部分搜尋文字有錯誤時也能盡量配對到資料，例如："puthon" 可以配對到 python 相關的資料。
- apis 資料夾將有串接的 api 進行統一管理，在 fetch 接收完資料後處理並回傳特定格式資料 (例如：JSON)。
- utils 資料夾存放自己寫的額外功能檔案 (例如：此專案所用的 LCS 演算法)。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent