分布式开发医疗挂号系统数据字典模块前后端实现

 更新时间:2022年04月24日 17:32:07   作者:Hudie.  
这篇文章主要为大家介绍了分布式开发医疗挂号系统数据字典模块前后端实现,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

数据字典模块

数据字典可以管理系统常用的分类数据或 固定数据,例如:省市区三级联动数据、民族数据、行业数据、学历数据等。由于我们的 分布式医疗挂号系统 大量使用这种数据,所有我们要做一个数据管理,方便管理系统数据,并且在一般的系统中基本都会做数据管理。

数据字典主要功能:使系统中的各项数据变的更加的严格,这样有利于降低因为数据问题而导致的bug。

一、后端接口

1.数据库表设计

数据字典的数据库表字段和对应的实体类的属性应该是一一对应的,但要注意下面两个地方:

添加上@TableLogic表示为逻辑删除,后续删除操作会自动变为修改操作。为了实现页面上单击展开子节点的功能,额外使用@TableField(exist = false)加入ha’s’Children属性。

数据库表和实体类

2.编写三层调用

根据下图总结的三层调用关系,我们需要分别编写好Controlller层、Service层、Mapper层的代码。

三层调用的关系

Controller层

通过url:/admin/cmn/dict/findChildData/{id} 访问资源到达控制层后,控制层调用服务层的findChildData(Long id)方法。

@Api(tags = "数据字典接口")
@RestController
@RequestMapping("/admin/cmn/dict")
@CrossOrigin
public class DictController {
    @Autowired
    private DictService dictService;
    @ApiOperation(value = "根据id查询子数据列表")
    @GetMapping("findChildData/{id}")
    public Result findChildData(@PathVariable Long id) {
        List<Dict> list = dictService.findChildData(id);
        return Result.ok(list);
    }
}

Service层

在服务层根据id查询子数据列表,调用数据层的查询方法查到子数据集合后,将集合遍历,遍历过程中为每条记录的hasChildren属性赋值。具体业务逻辑详见下面的代码:

Service接口继承IService<T>接口:

public interface DictService extends IService<Dict> {
    /**
     * 根据id查询子数据列表
     * @param id
     * @return list
     */
    List<Dict> findChildData(Long id);
}

Service实现类继承ServiceImpl<TMapper, T>类:

@Service
public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {
    /**
     * 根据id查询子数据列表
     * @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方法判断是否包含子节点
            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自带的方法,所以在数据层,我们并没有给出具体的方法。

public interface DictMapper extends BaseMapper<Dict> {
}

由于在数据字典模块中配置类、配置文件不是我们主要研究的内容,所以这里不再给出,具体可参考github仓库代码。至此,数据字典模块的后端接口已经完成:

数据字典模块后端接口

二、前端页面

1.添加路由

由于数据管理中的数据字典是一个全新的页面,我们可以将数据字典的路由设置为/cmn/list,路由到/cmn/list后,会跳转到/views/dict/list.js资源。

  // 数据字典路由
  {
    path: '/cmn',
    component: Layout,
    redirect: '/cmn/list',
    name: '数据管理',
    meta: { title: '数据管理', icon: 'example' },
    // 如果只有一级会仅显示子按钮,添加alwaysShow=true 可以使父按钮也显示
    alwaysShow:true,
    children: [
      {
        path: 'list',
        name: '数据字典',
        component: () => import('@/views/dict/list'),
        meta: { title: '数据字典', icon: 'table' }
      }
    ]
  },

2.添加跳转页面

路由后,跳转到/views/dict/list.js页面,下面给出此页面的逻辑片段代码和其调用的api接口代码:

在跳转到的页面获取后端数据

3.页面表格渲染

表格渲染我们使用elementUI提供开发文档:树形数据与懒加载表格组件

修改后的代码如下:

:data=“list”

查出来的数据。

: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="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

三、标准Debug流程

目前数据字典模块的前后端已经开发完成了,但是此刻如果允许程序,页面并不会加载到后端传过来的数据。因为不同的访问请求访问到不同的服务器中,我们为数据字典模块设置端口是8202,而前端config/dev.env.js中,配置的是之前医院设置模块中的8201端口。

我们可以加入Nginx暂时解决,后期也会加入路由来替换掉Nginx,不过仅为了展示效果,这里简单的将前端 config/dev.env.js 中的端口改为和数据字典模块8202统一的端口。关于Nginx和添加统一路由会在后续的文章中进行介绍。

至此,数据字典模块的初步功能就已经实现完成了。

以上就是分布式开发医疗挂号系统数据字典模块前后端实现的详细内容,更多关于分布式医疗挂号系统数据字典模块前后端的资料请关注脚本之家其它相关文章!

相关文章

  • Spring boot 总结之跨域处理cors的方法

    Spring boot 总结之跨域处理cors的方法

    本篇文章主要介绍了Spring boot 总结之跨域处理cors的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 浅谈Servlet 实现网页重定向的方法

    浅谈Servlet 实现网页重定向的方法

    本篇文章主要介绍了Servlet 实现重定向几种方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • SpringBoot MDC全局链路最新完美解决方案

    SpringBoot MDC全局链路最新完美解决方案

    MDC 在 Spring Boot 中的作用是为日志事件提供上下文信息,并将其与特定的请求、线程或操作关联起来,通过使用 MDC,可以更好地理解和分析日志,并在多线程环境中确保日志的准确性和一致性,这篇文章主要介绍了SpringBoot MDC全局链路解决方案,需要的朋友可以参考下
    2023-08-08
  • Java语法基础之函数的使用说明

    Java语法基础之函数的使用说明

    函数就是定义在类中的具有特定功能的一段小程序,函数也称为方法
    2013-07-07
  • 全网最全最细的jmeter接口测试教程以及接口测试流程(入门教程)

    全网最全最细的jmeter接口测试教程以及接口测试流程(入门教程)

    本文主要介绍了全网最全最细的jmeter接口测试教程以及接口测试流程,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • Idea 配置国内 Maven 源的图文教程

    Idea 配置国内 Maven 源的图文教程

    这篇文章主要介绍了Idea 配置国内 Maven 源的教程,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-11-11
  • Java JUC中操作List安全类的集合案例

    Java JUC中操作List安全类的集合案例

    这篇文章主要介绍了JUC中操作List安全类的集合案例,本文罗列了不安全的集合和安全的集合进行对比,以及Java中提供的安全措施,需要的朋友可以参考下
    2021-07-07
  • java return用法实例详解

    java return用法实例详解

    在本篇文章里小编给大家整理的是关于java return用法以及相关知识点总结,需要的朋友们参考下。
    2019-08-08
  • 猜你不知道Spring Boot的几种部署方式(小结)

    猜你不知道Spring Boot的几种部署方式(小结)

    这篇文章主要介绍了猜你不知道Spring Boot的几种部署方式(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • Java针对ArrayList自定义排序的2种实现方法

    Java针对ArrayList自定义排序的2种实现方法

    这篇文章主要介绍了Java针对ArrayList自定义排序的2种实现方法,结合实例形式总结分析了Java操作ArrayList自定义排序的原理与相关实现技巧,需要的朋友可以参考下
    2018-01-01

最新评论