分布式開(kāi)發(fā)醫(yī)療掛號(hào)系統(tǒng)數(shù)據(jù)字典模塊前后端實(shí)現(xiàn)
數(shù)據(jù)字典可以管理系統(tǒng)常用的分類數(shù)據(jù)或 固定數(shù)據(jù),例如:省市區(qū)三級(jí)聯(lián)動(dòng)數(shù)據(jù)、民族數(shù)據(jù)、行業(yè)數(shù)據(jù)、學(xué)歷數(shù)據(jù)等。由于我們的 分布式醫(yī)療掛號(hào)系統(tǒng) 大量使用這種數(shù)據(jù),所有我們要做一個(gè)數(shù)據(jù)管理,方便管理系統(tǒng)數(shù)據(jù),并且在一般的系統(tǒng)中基本都會(huì)做數(shù)據(jù)管理。
數(shù)據(jù)字典主要功能:使系統(tǒng)中的各項(xiàng)數(shù)據(jù)變的更加的嚴(yán)格,這樣有利于降低因?yàn)閿?shù)據(jù)問(wèn)題而導(dǎo)致的bug。
一、后端接口
1.數(shù)據(jù)庫(kù)表設(shè)計(jì)
數(shù)據(jù)字典的數(shù)據(jù)庫(kù)表字段和對(duì)應(yīng)的實(shí)體類的屬性應(yīng)該是一一對(duì)應(yīng)的,但要注意下面兩個(gè)地方:
添加上@TableLogic
表示為邏輯刪除,后續(xù)刪除操作會(huì)自動(dòng)變?yōu)樾薷牟僮?。為了?shí)現(xiàn)頁(yè)面上單擊展開(kāi)子節(jié)點(diǎn)的功能,額外使用@TableField(exist = false)
加入ha’s’Children屬性。
2.編寫(xiě)三層調(diào)用
根據(jù)下圖總結(jié)的三層調(diào)用關(guān)系,我們需要分別編寫(xiě)好Controlller層、Service層、Mapper層的代碼。
Controller層
通過(guò)url:/admin/cmn/dict/findChildData/{id}
訪問(wèn)資源到達(dá)控制層后,控制層調(diào)用服務(wù)層的findChildData(Long id)
方法。
@Api(tags = "數(shù)據(jù)字典接口") @RestController @RequestMapping("/admin/cmn/dict") @CrossOrigin public class DictController { @Autowired private DictService dictService; @ApiOperation(value = "根據(jù)id查詢子數(shù)據(jù)列表") @GetMapping("findChildData/{id}") public Result findChildData(@PathVariable Long id) { List<Dict> list = dictService.findChildData(id); return Result.ok(list); } }
Service層
在服務(wù)層根據(jù)id查詢子數(shù)據(jù)列表,調(diào)用數(shù)據(jù)層的查詢方法查到子數(shù)據(jù)集合后,將集合遍歷,遍歷過(guò)程中為每條記錄的hasChildren屬性賦值。具體業(yè)務(wù)邏輯詳見(jiàn)下面的代碼:
Service接口繼承IService<T>
接口:
public interface DictService extends IService<Dict> { /** * 根據(jù)id查詢子數(shù)據(jù)列表 * @param id * @return list */ List<Dict> findChildData(Long id); }
Service實(shí)現(xiàn)類繼承ServiceImpl<TMapper, T>
類:
@Service public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService { /** * 根據(jù)id查詢子數(shù)據(jù)列表 * @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(); // 調(diào)用hasChildren方法判斷是否包含子節(jié)點(diǎn) boolean flag = this.hasChildren(dictId); // 為每條記錄設(shè)置hasChildren屬性 dict.setHasChildren(flag); } return dictList; } /** * 判斷id下面是否有子結(jié)點(diǎn) * @param id * @return true:有子結(jié)點(diǎn),false:無(wú)子結(jié)點(diǎn) */ 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>
接口。由于服務(wù)層調(diào)用的方法是BaseMapper自帶的方法,所以在數(shù)據(jù)層,我們并沒(méi)有給出具體的方法。
public interface DictMapper extends BaseMapper<Dict> { }
由于在數(shù)據(jù)字典模塊中配置類、配置文件不是我們主要研究的內(nèi)容,所以這里不再給出,具體可參考github倉(cāng)庫(kù)代碼。至此,數(shù)據(jù)字典模塊的后端接口已經(jīng)完成:
二、前端頁(yè)面
1.添加路由
由于數(shù)據(jù)管理中的數(shù)據(jù)字典是一個(gè)全新的頁(yè)面,我們可以將數(shù)據(jù)字典的路由設(shè)置為/cmn/list
,路由到/cmn/list
后,會(huì)跳轉(zhuǎn)到/views/dict/list.js
資源。
// 數(shù)據(jù)字典路由 { path: '/cmn', component: Layout, redirect: '/cmn/list', name: '數(shù)據(jù)管理', meta: { title: '數(shù)據(jù)管理', icon: 'example' }, // 如果只有一級(jí)會(huì)僅顯示子按鈕,添加alwaysShow=true 可以使父按鈕也顯示 alwaysShow:true, children: [ { path: 'list', name: '數(shù)據(jù)字典', component: () => import('@/views/dict/list'), meta: { title: '數(shù)據(jù)字典', icon: 'table' } } ] },
2.添加跳轉(zhuǎn)頁(yè)面
路由后,跳轉(zhuǎn)到/views/dict/list.js
頁(yè)面,下面給出此頁(yè)面的邏輯片段代碼和其調(diào)用的api接口代碼:
3.頁(yè)面表格渲染
表格渲染我們使用elementUI提供開(kāi)發(fā)文檔:樹(shù)形數(shù)據(jù)與懶加載表格組件。
修改后的代碼如下:
:data=“list”
查出來(lái)的數(shù)據(jù)。
:load=“getChildrens”
加載getChildrens方法。
:tree-props="{ children: ‘children’, hasChildren: ‘hasChildren’ }"
樹(shù)的屬性值,通過(guò)屬性值來(lái)判斷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)建時(shí)間" align="center"> <template slot-scope="scope"> <span>{{ scope.row.createTime }}</span> </template> </el-table-column> </el-table> </div> </template>
三、標(biāo)準(zhǔn)Debug流程
目前數(shù)據(jù)字典模塊的前后端已經(jīng)開(kāi)發(fā)完成了,但是此刻如果允許程序,頁(yè)面并不會(huì)加載到后端傳過(guò)來(lái)的數(shù)據(jù)。因?yàn)椴煌脑L問(wèn)請(qǐng)求訪問(wèn)到不同的服務(wù)器中,我們?yōu)閿?shù)據(jù)字典模塊設(shè)置端口是8202,而前端config/dev.env.js
中,配置的是之前醫(yī)院設(shè)置模塊中的8201端口。
我們可以加入Nginx暫時(shí)解決,后期也會(huì)加入路由來(lái)替換掉Nginx,不過(guò)僅為了展示效果,這里簡(jiǎn)單的將前端 config/dev.env.js
中的端口改為和數(shù)據(jù)字典模塊8202統(tǒng)一的端口。關(guān)于Nginx和添加統(tǒng)一路由會(huì)在后續(xù)的文章中進(jìn)行介紹。
至此,數(shù)據(jù)字典模塊的初步功能就已經(jīng)實(shí)現(xiàn)完成了。
以上就是分布式開(kāi)發(fā)醫(yī)療掛號(hào)系統(tǒng)數(shù)據(jù)字典模塊前后端實(shí)現(xiàn)的詳細(xì)內(nèi)容,更多關(guān)于分布式醫(yī)療掛號(hào)系統(tǒng)數(shù)據(jù)字典模塊前后端的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- 分布式醫(yī)療掛號(hào)系統(tǒng)整合Gateway網(wǎng)關(guān)解決跨域問(wèn)題
- 分布式醫(yī)療掛號(hào)系統(tǒng)Nacos微服務(wù)Feign遠(yuǎn)程調(diào)用數(shù)據(jù)字典
- 實(shí)戰(zhàn)分布式醫(yī)療掛號(hào)系統(tǒng)開(kāi)發(fā)醫(yī)院科室及排班的接口
- 分布式醫(yī)療掛號(hào)系統(tǒng)SpringCache與Redis為數(shù)據(jù)字典添加緩存
- 分布式醫(yī)療掛號(hào)系統(tǒng)EasyExcel導(dǎo)入導(dǎo)出數(shù)據(jù)字典的使用
- 實(shí)戰(zhàn)分布式醫(yī)療掛號(hào)系統(tǒng)登錄接口整合阿里云短信詳情
相關(guān)文章
Java 實(shí)戰(zhàn)項(xiàng)目錘煉之樸素風(fēng)格個(gè)人博客系統(tǒng)的實(shí)現(xiàn)流程
讀萬(wàn)卷書(shū)不如行萬(wàn)里路,只學(xué)書(shū)上的理論是遠(yuǎn)遠(yuǎn)不夠的,只有在實(shí)戰(zhàn)中才能獲得能力的提升,本篇文章手把手帶你用Java+vue+Springboot+ssm+mysql+maven+redis實(shí)現(xiàn)一個(gè)樸素風(fēng)格的個(gè)人博客系統(tǒng),大家可以在過(guò)程中查缺補(bǔ)漏,提升水平2021-11-11Java中notify和notifyAll的區(qū)別及何時(shí)使用
本文主要介紹了Java中notify和notifyAll的區(qū)別及何時(shí)使用,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09java對(duì)接支付寶支付項(xiàng)目的實(shí)戰(zhàn)記錄
最近公司有一個(gè)需求是接入第三方支付(微信&支付寶),我接到了支付寶支付,所以下面這篇文章主要給大家介紹了關(guān)于java對(duì)接支付寶支付項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-06-06springboot配置多數(shù)據(jù)源并集成Druid和mybatis的操作
這篇文章主要介紹了springboot配置多數(shù)據(jù)源并集成Druid和mybatis的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-07-07SpringBoot集成Swagger2生成接口文檔的方法示例
我們提供Restful接口的時(shí)候,API文檔是尤為的重要,它承載著對(duì)接口的定義,描述等,本文主要介紹了SpringBoot集成Swagger2生成接口文檔的方法示例,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12Jmeter跨線程組傳值調(diào)用實(shí)現(xiàn)圖解
這篇文章主要介紹了Jmeter跨線程組傳值調(diào)用實(shí)現(xiàn)圖解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07