MVC + EFCore 项目实战 - 数仓管理系统9 - 数据源管理完结篇
我们完成数据源管理的剩余部分:点击表名,预览表中数据。
我们需要完成的是下图的方框部分。

考虑到这块以后可能复用,我们将她独立出来,做成 view component.
新建 view component 框架
因为前面多次出现过 view component 的使用,分三步:建立类文件(WidgetTableViewComponent.cs)、建立视图文件、调用。详细步骤不再展开。
详解
1、类文件WidgetTableViewComponent.cs

我们接收两个参数,一个是连接字符串,一个是要查询的表名。
核心功能就是要产生一个数据集的 json 字符串。
json格式的字符串比较容易在前后端传递、解析,推荐使用。
2、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"] 来接收表名。
效果如图,我们点击表名传入不同的表名参数,就可以获取相应表的数据预览。

总结
1、本次我们完成了数据源管理最核心的部分,表格数据的动态展现。
数据源管理的核心功能就全部完成了,相信你可以根据自己的需要扩展这个系统。
最后提供一点扩展思路抛砖引玉,仅供参考:
将表格组件抽象出来作为一个组件(事实上我命名时已经可以看出来),类似的可以扩充出各种各样的图形组件。
图是根据表数据产生的,我们可以按照:
数据à抽象出数据源 à 组件展示(表显示、图显示、KPI展示、地图展示等) 分离出数据应用的三个层次。(可以参考tableau, 开发出一个微型的tableau出来。)
2、现在正在大力提倡国产化软件,大家可以尝试做一些产品化的东西,不要单纯的做流程化的业务系统。
数据源管理这个模块到这里就全部结束了,其他非核心的(右上区域功能:动态产生筛选条件)以及其它UI等大家可自行优化。
因为时间问题,我们整个的实战项目就开发到这。后面两个模块整个的开发过程类似,作为课后作业,大家可自行完成:)
欢迎在评论区留言打卡,happy coding :)
MVC + EFCore 项目实战 - 数仓管理系统9 - 数据源管理完结篇的更多相关文章
- MVC + EFCore 项目实战 - 数仓管理系统7 - 数据源管理中--新增数据源
上篇我们完成了数据源列表展示功能(还未测试). 本篇我们来新增数据源,并查看列表展示功能. 接上篇: 二.数据源管理功能开发 2.新增数据源 我们用模态对话框来完成数据源的新增,效果如下图: 我们 ...
- MVC + EFCore 项目实战 - 数仓管理系统8 - 数据源管理下--数据源预览
上篇我们完成了数据源保存功能,并顺便看了保存后的数据源列表展示功能. 本篇我们开始开发预览功能,用户预览主要步骤: 1.点击数据源卡片预览按钮 2.查看数据源包含的表 3.点击表名,预览表中数据 ...
- MVC + EFCore 项目实战 - 数仓管理系统6 – 数据源管理上--使用view component完成卡片列表
上次课程我们完成了菜单的配置和开发里程碑的划定. 按照计划,我们先来开发数据仓库管理中的数据源管理(对应菜单为:数据仓库管理 / 数据源),首批支持的数据源是SQL SERVER数据库. 一.数据源管 ...
- MVC+EFCore 项目实战-数仓管理系统1
项目背景及需求说明 这是一个数据管理"工具类"的系统,计划有三个核心功能: 1.通过界面配置相关连接字符串,查询数据库的表数据. 2.配置相关模板,生成数据库表. 可以界面填报或通 ...
- MVC + EFCore 项目实战 - 数仓管理系统4 – 需求分解
上次课程我们完成了项目基本的UI风格配置. 现在就开始进入我们的需求开发,我们先捋一下需求. 一.总体需求说明 项目背景第一篇文章已有介绍,我们回顾一下. 这是一个数据管理"工具类" ...
- MVC + EFCore 项目实战 - 数仓管理系统5 – 菜单配置及里程碑划分
上次课程我们完成了需求的梳理. 我们根据梳理的需求把菜单配好,另外我们把项目里程碑也配置在系统中,开发和管理都在系统中,形成无文档化管理. 一.菜单配置 根据我们的归纳图,我们先将菜单配置好. 我们遵 ...
- MVC + EFCore 项目实战 - 数仓管理系统2- 搭建基本框架配置EFCore
本次课程就正式进入开发部分. 首先我们先搭建项目框架,还是和之前渐进式风格保持一致,除必备组件外,尽量使用原生功能以方便大家理解. 开发工具:vs 2019 或以上 数据库:SQL SERVER 20 ...
- MVC + EFCore 项目实战 - 数仓管理系统3 - 完成整体样式风格配置
上次课程我们新建了管理员的模板页. 本次我们就完善这个模板页,顺便加入样式和一些基本的组件,配置好整个项目的UI风格. 一.引入 共用的css和js文件 后端库用nuget, 前端库用libman ...
- Asp.Net Core 项目实战之权限管理系统(6) 功能管理
0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...
随机推荐
- day59 django初识
目录 一.借助wsgiref模块实现简易版web框架 二.动静态页面 三.python三大主流web框架 四.启动一个django项目 1 启动前的注意事项 1.1 计算机的问题 1.2 django ...
- 04 drf源码剖析之版本
04 drf源码剖析之版本 目录 04 drf源码剖析之版本 1. 版本简述 2. 版本使用 3.源码剖析 4. 总结 1. 版本简述 API版本控制使您可以更改不同客户端之间的行为.REST框架提供 ...
- 一篇文章,学会jmeter模拟文件上传、下载操作
最近很多同学都在问jmeter上传,下载文件的脚本怎么做? 正巧这阵子忙完有时间,就来“折腾”一番,哈哈 现整理出来和大家分享 到底该怎么做? 一.准备工作: 上传接口一个(自行开发解决了) 下载接口 ...
- Ethical Hacking - Web Penetration Testing(1)
How to hack a website? An application installed on a computer. ->web application pen-testing A co ...
- ES6语法——let和const
一.let 1.定义 ES6新增了let命令,用来声明变量,用法类似于var,但是和var有一定的区别 2.let只在块级作用域内有效 首先来看一个比较简单的例子,请告诉我,他们分别输出什么 //代码 ...
- echarts 踩坑 : 为什么效果出不来?看看有没有正确引入
今天我要给 echarts 组件加个 dataZoom 功能,结果发现没有效果. 后来发现是引入 echarts 模块的问题. 如果是按需引入的话,必须引入相应的功能模块才能使用相应的功能. 举例: ...
- javascript原型:写一个合并后数组去掉同类项的方法
<!DOCTYPE html> <html> <head> <title>test013_Array_prototype_unique()</ti ...
- Markdown与LaTex使用语法整合
Markdown学习 RUNOOB 简介 Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档. Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gr ...
- ActiveMQ【CVE-2016-3088】上传公钥实现sssh免密登录
Apache-ActiveMQ是apache旗下的消息中间件,至今为止还是有较多的甲方爸爸们,还在使用该中间件.据了解,Apache-ActiveMQ中间件有2个厉害的CVE,一个是CVE-2016- ...
- 【转载】基于dom的一些前端漏洞
最直接的xss --dom xss function trackSearch(query) { document.write('<img src="/resources/images/ ...