分布式開發(fā)醫(yī)療掛號系統(tǒng)數(shù)據字典模塊前后端實現(xiàn)

數(shù)據字典可以管理系統(tǒng)常用的分類數(shù)據或 固定數(shù)據,例如:省市區(qū)三級聯(lián)動數(shù)據、民族數(shù)據、行業(yè)數(shù)據、學歷數(shù)據等。由于我們的 分布式醫(yī)療掛號系統(tǒng) 大量使用這種數(shù)據,所有我們要做一個數(shù)據管理,方便管理系統(tǒng)數(shù)據,并且在一般的系統(tǒng)中基本都會做數(shù)據管理。
數(shù)據字典主要功能:使系統(tǒng)中的各項數(shù)據變的更加的嚴格,這樣有利于降低因為數(shù)據問題而導致的bug。
一、后端接口
1.數(shù)據庫表設計
數(shù)據字典的數(shù)據庫表字段和對應的實體類的屬性應該是一一對應的,但要注意下面兩個地方:
添加上@TableLogic表示為邏輯刪除,后續(xù)刪除操作會自動變?yōu)樾薷牟僮?。為了實現(xiàn)頁面上單擊展開子節(jié)點的功能,額外使用@TableField(exist = false)加入ha’s’Children屬性。

2.編寫三層調用
根據下圖總結的三層調用關系,我們需要分別編寫好Controlller層、Service層、Mapper層的代碼。

Controller層
通過url:/admin/cmn/dict/findChildData/{id} 訪問資源到達控制層后,控制層調用服務層的findChildData(Long id)方法。
@Api(tags = "數(shù)據字典接口")
@RestController
@RequestMapping("/admin/cmn/dict")
@CrossOrigin
public class DictController {
@Autowired
private DictService dictService;
@ApiOperation(value = "根據id查詢子數(shù)據列表")
@GetMapping("findChildData/{id}")
public Result findChildData(@PathVariable Long id) {
List<Dict> list = dictService.findChildData(id);
return Result.ok(list);
}
}
Service層
在服務層根據id查詢子數(shù)據列表,調用數(shù)據層的查詢方法查到子數(shù)據集合后,將集合遍歷,遍歷過程中為每條記錄的hasChildren屬性賦值。具體業(yè)務邏輯詳見下面的代碼:
Service接口繼承IService<T>接口:
public interface DictService extends IService<Dict> {
/**
* 根據id查詢子數(shù)據列表
* @param id
* @return list
*/
List<Dict> findChildData(Long id);
}
Service實現(xiàn)類繼承ServiceImpl<TMapper, T>類:
@Service
public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {
/**
* 根據id查詢子數(shù)據列表
* @param id
* @return list
*/
@Override
public List<Dict> findChildData(Long id) {
QueryWrapper<Dict> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("parent_id", id);
List<Dict> dictList = baseMapper.selectList(queryWrapper);
for (Dict dict : dictList) {
// 得到每一條記錄的id值
Long dictId = dict.getId();
// 調用hasChildren方法判斷是否包含子節(jié)點
boolean flag = this.hasChildren(dictId);
// 為每條記錄設置hasChildren屬性
dict.setHasChildren(flag);
}
return dictList;
}
/**
* 判斷id下面是否有子結點
* @param id
* @return true:有子結點,false:無子結點
*/
private boolean hasChildren(Long id) {
QueryWrapper<Dict> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("parent_id", id);
Integer count = baseMapper.selectCount(queryWrapper);
return count > 0;
}
}
Mapper層
Mapper接口繼承了BaseMapper<T>接口。由于服務層調用的方法是BaseMapper自帶的方法,所以在數(shù)據層,我們并沒有給出具體的方法。
public interface DictMapper extends BaseMapper<Dict> {
}
由于在數(shù)據字典模塊中配置類、配置文件不是我們主要研究的內容,所以這里不再給出,具體可參考github倉庫代碼。至此,數(shù)據字典模塊的后端接口已經完成:

二、前端頁面
1.添加路由
由于數(shù)據管理中的數(shù)據字典是一個全新的頁面,我們可以將數(shù)據字典的路由設置為/cmn/list,路由到/cmn/list后,會跳轉到/views/dict/list.js資源。
// 數(shù)據字典路由
{
path: '/cmn',
component: Layout,
redirect: '/cmn/list',
name: '數(shù)據管理',
meta: { title: '數(shù)據管理', icon: 'example' },
// 如果只有一級會僅顯示子按鈕,添加alwaysShow=true 可以使父按鈕也顯示
alwaysShow:true,
children: [
{
path: 'list',
name: '數(shù)據字典',
component: () => import('@/views/dict/list'),
meta: { title: '數(shù)據字典', icon: 'table' }
}
]
},
2.添加跳轉頁面
路由后,跳轉到/views/dict/list.js頁面,下面給出此頁面的邏輯片段代碼和其調用的api接口代碼:

3.頁面表格渲染
表格渲染我們使用elementUI提供開發(fā)文檔:樹形數(shù)據與懶加載表格組件。
修改后的代碼如下:
:data=“list”
查出來的數(shù)據。
:load=“getChildrens”
加載getChildrens方法。
:tree-props="{ children: ‘children’, hasChildren: ‘hasChildren’ }"
樹的屬性值,通過屬性值來判斷hasChildren中的值是true還是false。
<template>
<div class="app-container">
<el-table
:data="list"
:load="getChildrens"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
style="width: 100%"
row-key="id"
border
lazy>
<el-table-column label="名稱" width="230" align="left">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="編碼" width="220">
<template slot-scope="{ row }">
{{ row.dictCode }}
</template>
</el-table-column>
<el-table-column label="值" width="230" align="left">
<template slot-scope="scope">
<span>{{ scope.row.value }}</span>
</template>
</el-table-column>
<el-table-column label="創(chuàng)建時間" align="center">
<template slot-scope="scope">
<span>{{ scope.row.createTime }}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
三、標準Debug流程
目前數(shù)據字典模塊的前后端已經開發(fā)完成了,但是此刻如果允許程序,頁面并不會加載到后端傳過來的數(shù)據。因為不同的訪問請求訪問到不同的服務器中,我們?yōu)閿?shù)據字典模塊設置端口是8202,而前端config/dev.env.js中,配置的是之前醫(yī)院設置模塊中的8201端口。
我們可以加入Nginx暫時解決,后期也會加入路由來替換掉Nginx,不過僅為了展示效果,這里簡單的將前端 config/dev.env.js 中的端口改為和數(shù)據字典模塊8202統(tǒng)一的端口。關于Nginx和添加統(tǒng)一路由會在后續(xù)的文章中進行介紹。
至此,數(shù)據字典模塊的初步功能就已經實現(xiàn)完成了。
以上就是分布式開發(fā)醫(yī)療掛號系統(tǒng)數(shù)據字典模塊前后端實現(xiàn)的詳細內容,更多關于分布式醫(yī)療掛號系統(tǒng)數(shù)據字典模塊前后端的資料請關注腳本之家其它相關文章!
相關文章
SpringBoot用@Async注解實現(xiàn)異步任務
這篇文章主要介紹了SpringBoot用@Async注解實現(xiàn)異步任務,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
SpringSecurity實現(xiàn)登陸認證并返回token方式
這篇文章主要介紹了SpringSecurity實現(xiàn)登陸認證并返回token方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
SpringBoot之多環(huán)境打包與配置文件排除方式
這篇文章主要介紹了SpringBoot之多環(huán)境打包與配置文件排除方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04

