[練習][Asp.Net Core + Angular]打造一個單字記錄網站 – (16) 增加 Categories (單字本)頁面與修正 Words 路徑

      在〈[練習][Asp.Net Core + Angular]打造一個單字記錄網站 – (16) 增加 Categories (單字本)頁面與修正 Words 路徑〉中留言功能已關閉

功能雖然大抵可以使用了,但是上課的單字混再一起也不好用,所以再次將資料庫做一個整理。

建立一個 Category 資料表並在 Word 增加一個 CategoryId

(原本在 word 的資料進行清除或建立 Category 的資料後加入)

再次執行 nuget 更新 ef models

Scaffold-DbContext "Data Source=localhost;Initial Catalog=VocabularyDb;User ID=sa;Password=[你的密碼]" Microsoft.EntityFrameworkCore.SqlServer -OutputDir EFModels -f

伺服端

與前面一樣,先建立 CategoryViewModel 及 API 讓 Client 可以呼叫

Service 部分 :

API 部分 :

前端部分 :

在 ClientApp 底下執行產生 categories

ng generate component categories –module=app.module

建立 ViewModel.ts

修改 categories.component.ts

修改網頁內容

在 app.module.ts 增加參數

結果,增加一個 Categories 頁面,點及後會進到 Categories/{id}/Words 頁面(原本的 Words 頁面)

print