MVC + EFCore 项目实战 - 数仓管理系统9 - 数据源管理完结篇

时间 2020-08-06

标签 mvc efcore 项目实战管理系统数据完结繁體版

原文原文链接

咱们完成数据源管理的剩余部分：点击表名，预览表中数据。 html

咱们须要完成的是下图的方框部分。 json

考虑到这块之后可能复用，咱们将她独立出来，作成 view component. 后端

新建 view component 框架

由于前面屡次出现过 view component 的使用，分三步：创建类文件（WidgetTableViewComponent.cs）、创建视图文件、调用。详细步骤再也不展开。数组

一、类文件WidgetTableViewComponent.cs app

咱们接收两个参数，一个是链接字符串，一个是要查询的表名。框架

核心功能就是要产生一个数据集的 json 字符串。 post

json格式的字符串比较容易在先后端传递、解析，推荐使用。测试

二、view component 渲染视图优化

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

总体的结构以下：

下面重点看如何拼接。

先对数据作个预处理，表格归根到底就是个二维表，为了更方便处理，咱们将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 ：）