數(shù)據(jù)字典模塊

數(shù)據(jù)字典可以管理系統(tǒng)常用的分類(lèi)數(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í)體類(lèi)的屬性應(yīng)該是一一對(duì)應(yīng)的，但要注意下面兩個(gè)地方：

• 添加上@TableLogic表示為邏輯刪除，后續(xù)刪除操作會(huì)自動(dòng)變?yōu)樾薷牟僮鳌?/li>
• 為了實(shí)現(xiàn)頁(yè)面上單擊展開(kāi)子節(jié)點(diǎn)的功能，額外使用@TableField(exist = false)加入ha's'Children屬性。

數(shù)據(jù)庫(kù)表和實(shí)體類(lèi)

2.編寫(xiě)三層調(diào)用

根據(jù)下圖總結(jié)的三層調(diào)用關(guān)系，我們需要分別編寫(xiě)好Controlller層、Service層、Mapper層的代碼。

三層調(diào)用的關(guān)系

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查詢(xún)子數(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查詢(xún)子數(shù)據(jù)列表，調(diào)用數(shù)據(jù)層的查詢(xún)方法查到子數(shù)據(jù)集合后，將集合遍歷，遍歷過(guò)程中為每條記錄的hasChildren屬性賦值。具體業(yè)務(wù)邏輯詳見(jiàn)下面的代碼：

Service接口繼承IService<T>接口：

public interface DictService extends IService<Dict> {

    /**
     * 根據(jù)id查詢(xún)子數(shù)據(jù)列表
     * @param id
     * @return list
     */
    List<Dict> findChildData(Long id);
}

Service實(shí)現(xiàn)類(lèi)繼承ServiceImpl<TMapper, T>類(lèi)：

@Service
public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {

    /**
     * 根據(jù)id查詢(xún)子數(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ù)字典模塊中配置類(lèi)、配置文件不是我們主要研究的內(nèi)容，所以這里不再給出，具體可參考github倉(cāng)庫(kù)代碼。至此，數(shù)據(jù)字典模塊的后端接口已經(jīng)完成：

數(shù)據(jù)字典模塊后端接口

二、前端頁(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接口代碼：

在跳轉(zhuǎn)到的頁(yè)面獲取后端數(shù)據(jù)

3.頁(yè)面表格渲染

表格渲染我們使用elementUI提供的樹(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="名稱(chēng)" 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)完成了。