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

上篇咱们完成了数据源列表展现功能（还未测试）。

本篇咱们来新增数据源，并查看列表展现功能。

 

接上篇：

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：返回结果

若是链接是成功的咱们返回一条链接成功的信息供前端展现。

显示效果：

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

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

二、后端链接成功后，构造相应的数据源对象，存储便可。

 

咱们保存后能够看到新的数据源已被保存。

 

 

 

3、总结

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

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

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

 

欢迎你们给我留言，happy coding ：）