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 ：）