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 ：）