上次课程我们完成了菜单的配置和开发里程碑的划定。

按照计划,我们先来开发数据仓库管理中的数据源管理(对应菜单为:数据仓库管理 / 数据源),首批支持的数据源是SQL SERVER数据库。

一、数据源管理功能任务分解

我们将这部分需求分解成以下几个任务:

1、新建数据源

主要功能是配置一个连接字符串,根据此连接字符串可以读取相应的数据库,即我们的数据仓库。

2、数据源列表

列出所有已建好的数据源。

3、预览数据

根据上一条,选择相应的数据源,我们可以显示该数据源下所有的 表/视图,点击 表/视图 后可以查询数据。

 

二、数据源管理功能开发

对应任务分解,我们依次来开发。

 

1、数据源列表

开发前后台逻辑代码前,我们先设计好数据源的表结构。

做个简单的分离,新建一个类库 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 ,在静态卡片后面添加如下调用代码:

因为现在还没有数据源,目前展示还是空的,我们就不浪费时间造数据了,等完成新建数据源功能后再来看这块展示效果。

 

 

三、总结

本次我们完成了数据源管理功能的任务分解并利用view componet完成了数据源展示的功能。

我们遵循敏捷开发的方式,一次完成一个功能的所有部分(数据源的表设计、后端逻辑代码、前端展示),通过增量和迭代的方式先完成了数据源展示功能。

限于篇幅,我们将会在下一篇中完成新增数据源,并验证本篇的展示功能。

 

欢迎大家给我留言,happy coding :)

 

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

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

    我们完成数据源管理的剩余部分:点击表名,预览表中数据. 我们需要完成的是下图的方框部分. 考虑到这块以后可能复用,我们将她独立出来,做成 view component. 新建 view compone ...

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

    上篇我们完成了数据源列表展示功能(还未测试). 本篇我们来新增数据源,并查看列表展示功能.   接上篇: 二.数据源管理功能开发 2.新增数据源 我们用模态对话框来完成数据源的新增,效果如下图: 我们 ...

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

    上篇我们完成了数据源保存功能,并顺便看了保存后的数据源列表展示功能. 本篇我们开始开发预览功能,用户预览主要步骤: 1.点击数据源卡片预览按钮 2.查看数据源包含的表 3.点击表名,预览表中数据   ...

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

    项目背景及需求说明 这是一个数据管理"工具类"的系统,计划有三个核心功能: 1.通过界面配置相关连接字符串,查询数据库的表数据. 2.配置相关模板,生成数据库表. 可以界面填报或通 ...

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

    上次课程我们完成了项目基本的UI风格配置. 现在就开始进入我们的需求开发,我们先捋一下需求. 一.总体需求说明 项目背景第一篇文章已有介绍,我们回顾一下. 这是一个数据管理"工具类" ...

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

    上次课程我们完成了需求的梳理. 我们根据梳理的需求把菜单配好,另外我们把项目里程碑也配置在系统中,开发和管理都在系统中,形成无文档化管理. 一.菜单配置 根据我们的归纳图,我们先将菜单配置好. 我们遵 ...

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

    本次课程就正式进入开发部分. 首先我们先搭建项目框架,还是和之前渐进式风格保持一致,除必备组件外,尽量使用原生功能以方便大家理解. 开发工具:vs 2019 或以上 数据库:SQL SERVER 20 ...

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

    上次课程我们新建了管理员的模板页. 本次我们就完善这个模板页,顺便加入样式和一些基本的组件,配置好整个项目的UI风格.   一.引入 共用的css和js文件 后端库用nuget, 前端库用libman ...

  9. Asp.Net Core 项目实战之权限管理系统(6) 功能管理

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

随机推荐

  1. 我们是如何做go语言系统测试覆盖率收集的?

    工程效能领域,测试覆盖率度量总是绕不开的话题,我们也不例外.在七牛云,我们主要使用go语言构建云服务,在考虑系统测试覆盖率时,最早也是通过围绕原生go test -c -cover的能力来构建.这个方 ...

  2. linux shell编程子bash变量

    参考视频:https://www.imooc.com/u/279399/courses?sort=publish https://www.imooc.com/video/6516 慕课网 用户的自定义 ...

  3. python从文件载入字典

    data = np.load('dict_.npy') data = data.item() 不加最后一句,data不是字典类型

  4. 懂了!VMware/KVM/Docker原来是这么回事儿

    云计算时代,计算资源如同小马哥当年所言,已经成为了互联网上的水和电. 虚拟主机.web服务器.数据库.对象存储等等各种服务我们都可以通过各种各样的云平台来完成. 而在云计算欣欣向荣的背后,有一个重要的 ...

  5. C# 从1到Core--委托与事件

    委托与事件在C#1.0的时候就有了,随着C#版本的不断更新,有些写法和功能也在不断改变.本文温故一下这些改变,以及在NET Core中关于事件的一点改变. 一.C#1.0 从委托开始 1. 基本方式 ...

  6. 初至cnblogs —— 博客搬迁

    感觉写博客是一种总结.分享知识的有效方式,于是打算坚持通过博客这一载体来提升自己. 最初通过 Hexo + GitHub Page 来搭建个人博客,但是通过这种方式搭建的博客基本没有访问量.个人感觉没 ...

  7. 数据解析_xpath

    重点推荐这种解析方式,xpath是最常用且最便捷高效的一种解析方式,通用性 1.解析原理 1.实例化一个etree的对象,且需要将被解析的页面源码数据加载到改对象中. 2.调用etree对象中的xpa ...

  8. 阿里云Linux CentOS8.1 64位服务器安装LNMP(Linux+Nginx+MySQL+PHP) 并发调试之MySQL配置

    mysql高并发配置 要在mysqld下设置 1. 修改back_log参数值:由默认的50修改为500.(每个连接256kb,占用:125M) back_log=500 back_log值指出MyS ...

  9. html实现邮箱发送邮件_js发送邮件至指定邮箱功能

    在前端开发中,JavaScript并没有提供直接操作Email邮箱的功能方法,但是遇到这样的需求,我们应该如何实现js发送邮件至指定邮箱功能呢?下面列举能够在通过前端实现邮件发送的几种方式: 方式一: ...

  10. css中雪碧图(sprite)的使用及制作方法

    雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位. 1.先看一下雪碧图 没有使用雪碧图时图标是这样一个个的单独文件: 合成雪碧图后是这样拼在一起的一 ...