MVC + EFCore 專案實戰 - 數倉管理系統6 – 資料來源管理上--使用view component完成卡片列表

程式設計小紙條發表於2020-07-21

上次課程我們完成了選單的配置和開發里程碑的劃定。

按照計劃,我們先來開發資料倉儲管理中的資料來源管理(對應選單為:資料倉儲管理 / 資料來源),首批支援的資料來源是SQL SERVER資料庫。

一、資料來源管理功能任務分解

我們將這部分需求分解成以下幾個任務:

1、新建資料來源

主要功能是配置一個連線字串,根據此連線字串可以讀取相應的資料庫,即我們的資料倉儲。

2、資料來源列表

列出所有已建好的資料來源。

3、預覽資料

根據上一條,選擇相應的資料來源,我們可以顯示該資料來源下所有的 表/檢視,點選 表/檢視 後可以查詢資料。

 

二、資料來源管理功能開發

對應任務分解,我們依次來開發。

 

1、資料來源列表

開發前後臺邏輯程式碼前,我們先設計好資料來源的表結構。

做個簡單的分離,新建一個類庫 DWMS.Domain, 專門存放表對應的類。

先來規劃資料來源相關的類。

新建 DataSourceBase,用來存放所有資料來源的共有欄位。

 

新建DSSQLServer繼承 DataSourceBase ,用來儲存SQL SERVER 型別的資料來源配置。

 

在 DefaultContext 中同步增加一下,另外 appsettings.json 將資料庫名由 DWMS 改成 DWMS1,重新生成資料庫。

* 開發階段會有頻繁的表變動,簡便起見,我們給資料庫名+1,通過增加數字來形成新的資料庫。

我們先完成資料來源列表的顯示。

我們就不用平常的table了,用卡片來顯示列表。

如上圖,先做一個靜態的卡片。

我們到官網上找到card的樣式稍加修改,完成上圖的卡片。

 

 

 

接著,我們將靜態的卡片替換成一個 view component, 來迴圈產生資料來源卡片。

一個 view component 由兩部分組成:類(繼承 ViewComponent)和 渲染檢視,我們先來建立這個類

建立ViewComponents 資料夾,在該資料夾下新增一個類 DSViewComponent.cs

再來建立view component檢視

新建兩個資料夾: Views/Shared/Components 和Views/Shared/Components/DS (約定大於配置,命名必須和之前的類DSViewComponent去掉字尾後一樣,即 DS),並在該檔案新建Razor view Views/Shared/Components/DS/Default.cshtml

我們將之前卡片的樣式貼上過來做修改。

接收一個DSSQLServer型別的列表,然後用foreach迴圈羅列出來。

 

 

 

 

 

最後來呼叫

開啟Views/DW/Index.cshtml ,在靜態卡片後面新增如下呼叫程式碼:

因為現在還沒有資料來源,目前展示還是空的,我們就不浪費時間造資料了,等完成新建資料來源功能後再來看這塊展示效果。

 

 

三、總結

本次我們完成了資料來源管理功能的任務分解並利用view componet完成了資料來源展示的功能。

我們遵循敏捷開發的方式,一次完成一個功能的所有部分(資料來源的表設計、後端邏輯程式碼、前端展示),通過增量和迭代的方式先完成了資料來源展示功能。

限於篇幅,我們將會在下一篇中完成新增資料來源,並驗證本篇的展示功能。

 

歡迎大家給我留言,happy coding :)

 

相關文章