MVC + EFCore 項目實戰 - 數倉管理系統9 - 數據源管理完結篇

 

咱們完成數據源管理的剩餘部分：點擊表名，預覽表中數據。

咱們須要完成的是下圖的方框部分。

考慮到這塊之後可能複用，咱們將她獨立出來，作成 view component.

 

新建 view component 框架

由於前面屢次出現過 view component 的使用，分三步：創建類文件（WidgetTableViewComponent.cs）、創建視圖文件、調用。詳細步驟再也不展開。

 

詳解

一、類文件WidgetTableViewComponent.cs

咱們接收兩個參數，一個是鏈接字符串，一個是要查詢的表名。

核心功能就是要產生一個數據集的 json 字符串。

json格式的字符串比較容易在先後端傳遞、解析，推薦使用。

 

二、view component 渲染視圖

視圖的核心功能就是解析接收的json字符串，拼接成表格的html.

 

總體的結構以下：

 

下面重點看如何拼接。

先對數據作個預處理，表格歸根到底就是個二維表，爲了更方便處理，咱們將json字符串轉爲二維數組，以下。

處理前的字符串相似這樣：

[{"DepartmentGroupKey":1,"ParentDepartmentGroupKey":null,"DepartmentGroupName":"Corporate"},

{"DepartmentGroupKey":2,"ParentDepartmentGroupKey":1,"DepartmentGroupName":"Executive General and Administration"},

{"DepartmentGroupKey":3,"ParentDepartmentGroupKey":1,"DepartmentGroupName":"Inventory Management"}]

即 [{標題：數據，標題：數據。。。}，。。。，{標題：數據，標題：數據。。。}] 這樣的格式。

處理後相似這樣：

[ [標題，標題],[數據，數據],[數據，數據]。。。[數據，數據] ]

 

這樣咱們拼接html時只要把第一行遍歷做爲標題，後面遍歷做爲數據，不斷的append就能夠了。

 

這樣咱們的動態表格就構建好了，最後咱們在DBPreview調用一下便可：

@await Component.InvokeAsync("WidgetTable", new { connStr = @connStr, tbName ="DimAccount" })

 

* 說明：tbName這個參數實際沒有用到（由於測試後發現不能將表名做爲SqlParameter參數），直接改爲了經過 Request.Query["curTb"] 來接收表名。

效果如圖，咱們點擊表名傳入不一樣的表名參數，就能夠獲取相應表的數據預覽。

 

總結

一、本次咱們完成了數據源管理最核心的部分，表格數據的動態展示。

數據源管理的核心功能就所有完成了，相信你能夠根據本身的須要擴展這個系統。

最後提供一點擴展思路拋磚引玉，僅供參考：

將表格組件抽象出來做爲一個組件（事實上我命名時已經能夠看出來），相似的能夠擴充出各類各樣的圖形組件。

圖是根據表數據產生的，咱們能夠按照：

數據à抽象出數據源 à 組件展現（表顯示、圖顯示、KPI展現、地圖展現等） 分離出數據應用的三個層次。(能夠參考tableau, 開發出一個微型的tableau出來。)

 

 

二、如今正在大力提倡國產化軟件，你們能夠嘗試作一些產品化的東西，不要單純的作流程化的業務系統。

數據源管理這個模塊到這裏就所有結束了，其餘非核心的（右上區域功能：動態產生篩選條件）以及其它UI等你們可自行優化。

由於時間問題，咱們整個的實戰項目就開發到這。後面兩個模塊整個的開發過程相似，做爲課後做業，你們可自行完成：）

 

歡迎在評論區留言打卡，happy coding ：）

 

 

P.S. 相關文章

MVC + EFCore 項目實戰 - 數倉管理系統8 - 數據源管理下--數據源預覽

MVC + EFCore 項目實戰 - 數倉管理系統7 - 數據源管理中--新增數據源

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

MVC + EFCore 項目實戰 - 數倉管理系統5 – 菜單配置及里程碑劃分

MVC + EFCore 項目實戰 - 數倉管理系統4 – 需求分解

MVC + EFCore 項目實戰 - 數倉管理系統3 - 完成總體樣式風格配置

MVC + EFCore 項目實戰 - 數倉管理系統2- 搭建基本框架配置EFCore

MVC + EFCore 項目實戰 - 數倉管理系統1