后端-数据字典模块开发

后端-数据字典模块开发

  • 1、需求和准备
    • 1.1、创建service_cmn模块
    • 1.2、新建application.properties配置文件
    • 1.3、准备实体类
    • 1.4、配置类
    • 1.5、持久层
    • 1.6、业务层
    • 1.7、控制层
    • 1.8、启动类
  • 2、数据字典列表功能
    • 2.1、接口开发
    • 2.2、前端开发
      • 2.2.1、添加路由
      • 2.2.2、新建js文件,调用后端接口
      • 2.2.3、编辑vue页面
        • 2.2.3.1、vue页面代码解释
    • 2.3、测试

1、需求和准备

1.1、创建service_cmn模块

后端-数据字典模块开发_第1张图片

1.2、新建application.properties配置文件

后端-数据字典模块开发_第2张图片

# 服务端口
server.port=8202
# 服务名
spring.application.name=service_cmn

# 环境设置:dev、test、prod
spring.profiles.active=dev

# mysql数据库连接
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/yygh_cmn?characterEncoding=utf-8&useSSL=false
spring.datasource.username=root
spring.datasource.password=root

#返回json的全局时间格式
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8

#配置mapper xml文件的路径
mybatis-plus.mapper-locations=classpath:com/study/yygh/hosp/mapper/xml/*.xml
#mybatis-plus.mapper-locations=classpath:com/atguigu/yygh/mapper/xml/*.xml
# nacos服务地址
#spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848

#开启sentinel
#feign.sentinel.enabled=true
#设置sentinel地址
#spring.cloud.sentinel.transport.dashboard=http://127.0.0.1:8858

#mongodb地址
#spring.data.mongodb.host=192.168.44.163
#spring.data.mongodb.port=27017
#spring.data.mongodb.database=yygh_hosp

#rabbitmq地址
#spring.rabbitmq.host=127.0.0.1
#spring.rabbitmq.port=5672
#spring.rabbitmq.username=guest
#spring.rabbitmq.password=guest

1.3、准备实体类

后端-数据字典模块开发_第3张图片


@Data
@ApiModel(description = "数据字典")
@TableName("dict")
public class Dict {
     

    private static final long serialVersionUID = 1L;

    @ApiModelProperty(value = "id")
    private Long id;

    @ApiModelProperty(value = "创建时间")
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    @TableField("create_time")
    private Date createTime;

    @ApiModelProperty(value = "更新时间")
    @TableField("update_time")
    private Date updateTime;

    @ApiModelProperty(value = "逻辑删除(1:已删除,0:未删除)")
    @TableLogic
    @TableField("is_deleted")
    private Integer isDeleted;

    @ApiModelProperty(value = "其他参数")
    @TableField(exist = false)
    private Map<String,Object> param = new HashMap<>();

    @ApiModelProperty(value = "上级id")
    @TableField("parent_id")
    private Long parentId;

    @ApiModelProperty(value = "名称")
    @TableField("name")
    private String name;

    @ApiModelProperty(value = "值")
    @TableField("value")
    private String value;

    @ApiModelProperty(value = "编码")
    @TableField("dict_code")
    private String dictCode;

    @ApiModelProperty(value = "是否包含子节点")
    @TableField(exist = false)
    private boolean hasChildren;
}

1.4、配置类

后端-数据字典模块开发_第4张图片

@Configuration
@MapperScan(basePackages = "com.study.yygh.cmn.mapper")
public class CmnConfig {
     

    //分页插件
    @Bean
    public PaginationInterceptor paginationInterceptor() {
     
        PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
        // 设置请求的页面大于最大页后操作, true调回到首页,false 继续请求  默认false
        // paginationInterceptor.setOverflow(false);
        // 设置最大单页限制数量,默认 500 条,-1 不受限制
        // paginationInterceptor.setLimit(500);
        // 开启 count 的 join 优化,只针对部分 left join
        paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));
        return paginationInterceptor;
    }
}

1.5、持久层

后端-数据字典模块开发_第5张图片mapper:

public interface DictMapper extends BaseMapper<Dict> {
     
}

mapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.study.yygh.cmn.mapper.DictMapper">

</mapper>

1.6、业务层

后端-数据字典模块开发_第6张图片
接口

public interface DictService extends IService<Dict> {
     
}

实现类:

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

1.7、控制层

后端-数据字典模块开发_第7张图片

@ApiModel("数据字典管理")
@RestController
@RequestMapping("admin/cmn/dict")
@CrossOrigin
public class DictController {
     

    @Autowired
    private DictService dictService;
}

1.8、启动类

后端-数据字典模块开发_第8张图片

@SpringBootApplication
@ComponentScan(basePackages = {
     "com.study"})
public class ServiceCmnApplication {
     

    public static void main(String[] args) {
     
        SpringApplication.run(ServiceCmnApplication.class,args);
    }
}

2、数据字典列表功能

2.1、接口开发

1、控制层方法
后端-数据字典模块开发_第9张图片

 //根据数据id查询子数据列表
@ApiModelProperty("//根据数据id查询子数据列表")
  @RequestMapping("findChildData/{id}")
  public Result findChildData(@PathVariable Long id){
     
      List<Dict> list = dictService.findChildData(id);
      return Result.ok(list);
  }

2、业务层
后端-数据字典模块开发_第10张图片

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

    //根据数据id查询子数据列表
    @Override
    public List<Dict> findChildData(Long id) {
     
        QueryWrapper<Dict> query = new QueryWrapper<>();
        query.eq("parent_id",id);
        List<Dict> dictList = baseMapper.selectList(query);//查询父节点为id的所有子数据对象
        //遍历集合中的每一个对象,并调用方法,判断该对象是否有子数据
        for(Dict dict:dictList){
     
            Long dictId = dict.getId();
            boolean flag = this.isChildren(dictId);//如果对象是否有子数据,返回true
            dict.setHasChildren(flag);//将hasChildren属性设置为flag的值
        }
        return dictList;
    }

    //判断该id是否有子数据
    private boolean isChildren(Long id){
     
        //封装查询条件
        QueryWrapper<Dict> query = new QueryWrapper<>();
        query.eq("parent_id",id);
        Integer count = baseMapper.selectCount(query);//如果有数据,会返回查询出的记录条数
        return count > 0;//如果查询出数据,返回true
    }
}

2.2、前端开发

2.2.1、添加路由

在src/router/index.js文件中添加路由
后端-数据字典模块开发_第11张图片

//数据字典设置
{
     
  path: '/cmn',
  component: Layout,
  redirect: '/cmn/list',
  name: '数据管理',
  alwaysShow: true,//由于该模块下只有一个数据字典子节点,所以在页面上只会展示数据字典节点,而不会展示数据管理功能,而使用了alwaysShow: true,即便该模块只有一个功能点,也会展示数据管理按钮的
  meta: {
      title: '数据管理', icon: 'example' },
  children: [
    {
     
      path: 'list',
      name: '数据字典',
      component: () => import('@/views/dict/list'),
      meta: {
      title: '数据字典', icon: 'table' }
    }
  ]
},

不使用alwaysShow:true时,只显示数据字典
后端-数据字典模块开发_第12张图片使用了alwaysShow:true。可以下拉,同时显示数据管理和数据字典
后端-数据字典模块开发_第13张图片

2.2.2、新建js文件,调用后端接口

后端-数据字典模块开发_第14张图片

import request from '@/utils/request'

export default{
     
    //编写方法,调用后端接口
    //根据id查询子数据列表
    dictList(id){
     
        return request({
     
            url:`/admin/cmn/dict/findChildData/${
     id}`,
            method:'get'
        })
    }

}

2.2.3、编辑vue页面

后端-数据字典模块开发_第15张图片

<template>
    <div class="app-container">
        <el-table 
        :data="list" 
        style="width: 100%" 
        row-key="id"
        border 
        lazy
        :load="getChildrens"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <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>


<script>
//引入js文件
import dict from '@/api/dict.js'

export default {
     
    data() {
     
        return {
     
            list:[],//初始化数据,数据字典列表数组
            
        }
    },
    created() {
     
        this.getDictList(1)
    },
    methods:{
     
        //数据字典列表
        getDictList(id){
     
            dict.dictList(id)
                .then(response=>{
     
                    // console.log(response)
                    this.list = response.data
                })
        },
        getChildrens(tree,treeNode,resolve){
     
            dict.dictList(tree.id)
                .then(response=>{
     
                    resolve(response.data)
            })
        }
    }

}
</script>

2.2.3.1、vue页面代码解释

1、:data=“list” 要显示测数据
后端-数据字典模块开发_第16张图片
2、lazy:懒加载。即页面的下拉列表中要显示的数据,只有点击下拉列表时才进行数据渲染。
后端-数据字典模块开发_第17张图片

3、load
我们点击页面上的箭头时,会显示箭头下边的数据,而箭头下边的数据也要调用方法进行查询。使用load的意思时当我们点击箭头时执行下方数据的查询的方法。
后端-数据字典模块开发_第18张图片
getChildrens函数:
后端-数据字典模块开发_第19张图片

element-ui官方解释:

后端-数据字典模块开发_第20张图片
4、:tree-props
根据hasChildren的值做判断,如果hasChildren值为true,才展示下拉列表。否则不展示下拉列表。
后端-数据字典模块开发_第21张图片所以在返回的数据对象中要包含hasChildren属性。
后端-数据字典模块开发_第22张图片

4、slot-scope=“scope”
后端-数据字典模块开发_第23张图片后端-数据字典模块开发_第24张图片
5、getChildrens方法表示可以查询第一级下边的第二级数据,可以查询第二级下边的第三级数据。实际上做了个递归操作。

  • 通过tree.id查询里边的内容的。
  • resolve(response.data)将查询出来的内容做显示
    后端-数据字典模块开发_第25张图片

2.3、测试

测试后我们发现表格下拉功能没有成功。这是因为我们使用的element-ui代码版本较高,而项目中使用的element-ui版本较低,即两者版本不一致导致的。
我们只需在package.json中修改element-ui版本即可。
如下图所示,element-ui版本原来是2.4.6,修改额lelement-ui版本为2.12.0
后端-数据字典模块开发_第26张图片再次测试,下拉列表功能成功展示:
后端-数据字典模块开发_第27张图片

你可能感兴趣的:(医院挂号系统)