MVC + EFCore 項目實戰 - 數倉管理系統6 – 數據源管理上--使用view component完成卡片列表

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

按照計劃，咱們先來開發數據倉庫管理中的數據源管理（對應菜單爲：數據倉庫管理 / 數據源），首批支持的數據源是SQL SERVER數據庫。

1、數據源管理功能任務分解

咱們將這部分需求分解成如下幾個任務：

一、新建數據源

主要功能是配置一個鏈接字符串，根據此鏈接字符串能夠讀取相應的數據庫，即咱們的數據倉庫。

二、數據源列表

列出全部已建好的數據源。

三、預覽數據

根據上一條，選擇相應的數據源，咱們能夠顯示該數據源下全部的 表/視圖，點擊 表/視圖 後能夠查詢數據。

 

2、數據源管理功能開發

對應任務分解，咱們依次來開發。

 

一、數據源列表

開發先後臺邏輯代碼前，咱們先設計好數據源的表結構。

作個簡單的分離，新建一個類庫 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 ，在靜態卡片後面添加以下調用代碼：

由於如今尚未數據源，目前展現仍是空的，咱們就不浪費時間造數據了，等完成新建數據源功能後再來看這塊展現效果。

 

 

3、總結

本次咱們完成了數據源管理功能的任務分解並利用view componet完成了數據源展現的功能。

咱們遵循敏捷開發的方式，一次完成一個功能的全部部分（數據源的表設計、後端邏輯代碼、前端展現），經過增量和迭代的方式先完成了數據源展現功能。

限於篇幅，咱們將會在下一篇中完成新增數據源，並驗證本篇的展現功能。

 

歡迎你們給我留言，happy coding ：）