上篇我們完成了數(shù)據(jù)源列表展示功能（還未測試）,。

本篇我們來新增數(shù)據(jù)源，并查看列表展示功能,。

接上篇：

二,、數(shù)據(jù)源管理功能開發(fā)

2、新增數(shù)據(jù)源

我們用模態(tài)對話框來完成數(shù)據(jù)源的新增,，效果如下圖：

我們分兩部分講解：展示 和 邏輯,。

展示：

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

去bootstrap的官網(wǎng)找到模態(tài)對話框,，粘貼相關(guān)UI稍作修改。

基本html結(jié)構(gòu)如下,。

通過按鈕來觸發(fā)對話框：

邏輯：

點擊按鈕 添加數(shù)據(jù)源 à 打開模態(tài)對話框 à 填寫表單

à點擊測試連接 à 保存進數(shù)據(jù)庫（需滿足條件：測試連接OK）

我們完成填寫表單后的點擊測試連接功能,，分成三個步驟。

步驟1：前端獲取表單信息并通過ajax提交

對照上圖,， SQL SERVER數(shù)據(jù)庫連接相關(guān)字段包括：數(shù)據(jù)庫地址Host,，端口號，數(shù)據(jù)庫名,，用戶名,，密碼。

提交部分代碼如下：

步驟2：后端新建web api 來處理提交過來的請求

我們不新建web api項目了,，直接在controller里面新建一個web api類型的controller即可。

為了便于區(qū)分,，我們起名時加上前綴Api

另外我們把類上面的路由 [Route("api/[controller]")] 注釋掉,，在每個action里面自己指定路由，另外我們添加下構(gòu)造函數(shù),，完成數(shù)據(jù)庫連接相關(guān)的準(zhǔn)備,。

新建一個action, 我們將接收過來的json格式的對象進行解析,。

將解析后的字符串作為連接字符串初始化一個SqlConnection對象，然后我們打開這個連接對象,，如果打開狀態(tài)正常,，我們認(rèn)為就連接上了。

步驟3：返回結(jié)果

如果連接是成功的我們返回一條連接成功的信息供前端展示,。

顯示效果：

連接測試成功后,，完成保存按鈕的功能，過程類似,，下面提兩點區(qū)別,，其他就不展開細說了。

1,、前端傳遞的數(shù)據(jù)對象中將每個字段分別傳輸,，這樣方便解析存儲。

2,、后端連接成功后,，構(gòu)造相應(yīng)的數(shù)據(jù)源對象，存儲即可,。

我們保存后可以看到新的數(shù)據(jù)源已被保存,。

三、總結(jié)

本次我們完成了數(shù)據(jù)源的保存功能,。

從使用角度來說,，代碼是有很多明顯的地方需要改善，例如 測試數(shù)據(jù)源連接和保存數(shù)據(jù)源連接 有著代碼冗余,；缺少一些必要的防呆措施,，保存按鈕最好開始是不可用的，等測試連接成功后再可用 等,。

這些問題,，不影響主干功能的使用，我們先不修改她,，等最終核心功能完成后再去迭代償還這些"技術(shù)債",。我們以開發(fā)速度為第一優(yōu)先級，每個功能達到最小可用后即進行下一步的開發(fā),。