上篇我们完成了数据源列表展示功能(还未测试)。

本篇我们来新增数据源,并查看列表展示功能。

 

接上篇:

二、数据源管理功能开发

2、新增数据源

我们用模态对话框来完成数据源的新增,效果如下图:

我们分两部分讲解:展示 和 逻辑。

 

展示:

我们用的前端UI是基于bootstrap的,因此bootstrap中的所有组件也都可以正常使用。

去bootstrap的官网找到模态对话框,粘贴相关UI稍作修改。

基本html结构如下。

通过按钮来触发对话框:

 

逻辑:

点击按钮 添加数据源 à 打开模态对话框 à 填写表单

à点击测试连接 à 保存进数据库(需满足条件:测试连接OK)

 

我们完成填写表单后的点击测试连接功能,分成三个步骤。

步骤1:前端获取表单信息并通过ajax提交

对照上图, SQL SERVER数据库连接相关字段包括:数据库地址Host,端口号,数据库名,用户名,密码。

提交部分代码如下:

步骤2:后端新建web api 来处理提交过来的请求

我们不新建web api项目了,直接在controller里面新建一个web api类型的controller即可。

为了便于区分,我们起名时加上前缀Api

另外我们把类上面的路由 [Route("api/[controller]")] 注释掉,在每个action里面自己指定路由,另外我们添加下构造函数,完成数据库连接相关的准备。

 

新建一个action, 我们将接收过来的json格式的对象进行解析。

将解析后的字符串作为连接字符串初始化一个SqlConnection对象,然后我们打开这个连接对象,如果打开状态正常,我们认为就连接上了。

 

步骤3:返回结果

如果连接是成功的我们返回一条连接成功的信息供前端展示。

显示效果:

连接测试成功后,完成保存按钮的功能,过程类似,下面提两点区别,其他就不展开细说了。

1、前端传递的数据对象中将每个字段分别传输,这样方便解析存储。

2、后端连接成功后,构造相应的数据源对象,存储即可。

 

我们保存后可以看到新的数据源已被保存。

 

 

 

三、总结

本次我们完成了数据源的保存功能。

从使用角度来说,代码是有很多明显的地方需要改善,例如 测试数据源连接和保存数据源连接 有着代码冗余;缺少一些必要的防呆措施,保存按钮最好开始是不可用的,等测试连接成功后再可用 等。

这些问题,不影响主干功能的使用,我们先不修改她,等最终核心功能完成后再去迭代偿还这些"技术债"。我们以开发速度为第一优先级,每个功能达到最小可用后即进行下一步的开发。

 

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

 

MVC + EFCore 项目实战 - 数仓管理系统7 - 数据源管理中--新增数据源的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    上次课程我们完成了菜单的配置和开发里程碑的划定. 按照计划,我们先来开发数据仓库管理中的数据源管理(对应菜单为:数据仓库管理 / 数据源),首批支持的数据源是SQL SERVER数据库. 一.数据源管 ...

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

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

随机推荐

  1. 使用JUnit 和Jacoco进行单元测试

    Jacoco配置 <dependency> <groupId>org.jacoco</groupId> <artifactId>jacoco-maven ...

  2. 35 _ 队列1 _ 什么是队列.swf

    队列是一种可以实现一个先进先出的存储结构 什么是队列? 队列(Queue)也是一种运算受限的线性表.它只允许在表的一端进行插入,而在另一端进行删除.允许删除的一端称为队头(front),允许插入的一端 ...

  3. SpringMVC 学习笔记(7)spring和springmvc的整合

    58. 尚硅谷_佟刚_SpringMVC_Spring整合SpringMVC_解决方案.avi 解决办法让springmvc值扫描@Control控制层和@ControllerAdvice对应的异常处 ...

  4. sql 语句和实例

    修改字段格式的sql语句: alter table tablename alter column colname newDataType 比如:alter table mytable alter co ...

  5. 一.3.序列化使用之idc资源与api文档

    前后端分离,前端写前端的,后端写后端的,但是它们中间得有一个api文档 1.idc资源 (1)models.py: from django.db import models class Idc(mod ...

  6. IndentationError: unindent does not match any outer indentation level解决策略

    [亲测有效]Nodepad++/Sublime Text3中Python脚本运行出现语法错误:IndentationError: unindent does not match any outer i ...

  7. Linux文件权限学习笔记

    文件权限共10个字符,第一个字符表示该文件是[文件夹]或[文件]——如果是字符“d"则表示该文件是文件夹:如果是字符“-”则表示是文件. 后九个字符,三个一组,共三组,分别表示[所有者权限] ...

  8. 每日一题 - 剑指 Offer 32 - II. 从上到下打印二叉树 II

    题目信息 时间: 2019-06-25 题目链接:Leetcode tag: 队列 BFS 难易程度:简单 题目描述: 从上到下按层打印二叉树,同一层的节点按从左到右的顺序打印,每一层打印到一行. 示 ...

  9. 赞!7000 字学习笔记,一天搞定 MySQL

    MySQL数据库简介 MySQL近两年一直稳居第二,随时有可能超过Oracle计晋升为第一名,因为MySQL的性能一直在被优化,同时安全机制也是逐渐成熟,更重要的是开源免费的. MySQL是一种关系数 ...

  10. beautiful numbers树形dp or 数位dp

    题目找链接 题意: 如果数a能被a中的每一位数整除(0除掉),则称a是一个beautiful number,求一个区间内的beautiful numbers的个数. 分析: 首先,很显然,l到r的所有 ...