MVC + EFCore 项目实战 - 数仓管理系统8 - 数据源管理下--数据源预览

上篇咱们完成了数据源保存功能，并顺便看了保存后的数据源列表展现功能。

本篇咱们开始开发预览功能，用户预览主要步骤：

一、点击数据源卡片预览按钮

二、查看数据源包含的表

三、点击表名，预览表中数据

 

1、前端结构及样式

效果以下图（静态html示意图）：

左侧是数据源及包含的表。

右上为筛选条件（筛选条件功能先不开发，预留）。

右下为点击表以后显示的预览数据。

2、前端交互

先在DWController中新建Action及配套的视图

 

咱们来开发视图DBPreview.cshtml 的html结构：

对照效果图，以2：10的比例分红两列：

 

展开代码，左侧数据源和表：

右上筛选条件：

右下是数据表格：

静态的html结构就完成了，下面咱们来填充功能。

 

3、后台逻辑

先来填充上图方框中的值。

 

步骤：

一、页面加载时接收一个DataSourceBase类型的对象，经过此对象获取 数据源名称 和 数据源类别。

二、前端根据 数据源类别 和 数据源名称 动态查询，获取相关链接字符串。

三、以SQL SERVER为例，根据链接字符串获取相应数据库下包含的表。

 

下面来依次完成。

打开 controller, 添加数据库链接相关功能。

修改咱们的action, 完成步骤一、2，传递一个DataSourceBase类型的Model到View

* 用DataSourceBase而不用DSSQLServer，由于可能会有其余类型的数据源，View不知道Action会传什么类型的数据源过去。

 

接着咱们在View中增长第3步，取得目标数据库下包含的表。

 

说明一下，上图中多了一个SQLHelper，后面由于会有比较复杂的多表操做，所以咱们新建个SQLHelper类，复杂的操做咱们直接用原生SQL来完成。

咱们简单复习下ADO.NET操做数据库的步骤。

一、用链接字符串初始化 SqlConnection 对象。

二、打开链接

三、执行语句，返回结果。

按操做类别分两类：

查询 返回个数据集合，咱们这里用 DataTable；增删改 返回受影响的行数。

按执行载体的形式分两类：

执行文本SQL语句和执行存储过程。

另外，为了方便咱们通常还会将语句或存储过程分为带参数和不带参数两种。

 

咱们用SQLHelper将这几个步骤封装，限于篇幅就不展开了，你们能够去源码中自行查看，有疑问能够给我留言。下图给出SQLHelper的结构概况。

 

回到数据源展现部分的html结构，咱们将原来的固定值替换。

下图中方框处为替换值，方框上面注释代码为原来的值。

替换完后的展现效果：

 

总结

本次咱们先完成了查看数据源信息及数据源包含的表。

另外，咱们回顾了直接操做ADO.NET的基本步骤，并将步骤封装成了SQLHelper.

虽然EFCore 能够完成大部分数据库的操做，但SQLHelper是一个很好的补充，能够代替EFCore不擅长的部分。

 

限于篇幅，咱们在下一篇中完成点击表名，预览表中数据。

预览表数据的主要问题是：表结构是动态的，咱们须要根据不一样表的结构动态展现表字段及包含的数据，具体作法且听下回分解。

 

欢迎在评论区留言打卡，happy coding ：）

 

 

P.S. 相关文章

MVC + EFCore 项目实战 - 数仓管理系统7 - 数据源管理中--新增数据源

MVC + EFCore 项目实战 - 数仓管理系统6 – 数据源管理上--使用view component完成卡片列表

MVC + EFCore 项目实战 - 数仓管理系统5 – 菜单配置及里程碑划分

MVC + EFCore 项目实战 - 数仓管理系统4 – 需求分解

MVC + EFCore 项目实战 - 数仓管理系统3 - 完成总体样式风格配置

MVC + EFCore 项目实战 - 数仓管理系统2- 搭建基本框架配置EFCore

MVC + EFCore 项目实战 - 数仓管理系统1