项目6：实现数据字典的展示与缓存

项目6：实现数据字典的展示与缓存

1.数据字典如何展示？

2.前后端如何设计？

3.前端设计代码？

4.后端设计代码？

5.实现数据字典缓存到redis

项目6：实现数据字典的展示与缓存

1.数据字典如何展示？

①数据字典展示

• 树形结构

②树形结构数据展示的方式

• 非延迟加载
  后台返回的数据中有嵌套数据，嵌套的数据放在Children属性中
• 延迟加载
  不需要包含嵌套属性，要定义Boolean属性的hasChildren，表示当前节点是否包好子数据，true为包含，false为不包含。点击当前节点时，通过load方法加载子数据

2.前后端如何设计？

①前端设计

• 通过利用延迟加载

②后端设计

• 利用Dict的entity类设计一个逻辑字段hasChildren，数据表中并没该字段，而是方便前端展示
• 如何为hasChildren赋值？
  可以利用该表的id查询是否有parent_id=该id的数据，有则为true，没有则为false

3.前端设计代码？

①设计 请求api

srb-admin\src\api\core\dict.js

import request from '@/utils/request'
export default {
  listByParentId(parentId) {
    return request({
      url: `/admin/core/dict/listByParentId/${parentId}`,
      method: 'get',
    })
  },
}

②涉及具体组件中的表格（参考element-ui）

srb-admin\src\views\core\dict\list.vue

<template>
  <div class="app-container">
    <!--Excel导入按钮-->
    <div style="margin-bottom: 10px">
      <el-button
        @click="dialogVisible = true"
        type="primary"
        size="mini"
        icon="el-icon-download"
      >
        导入Excel
      </el-button>
      <el-button
        @click="exportData"
        type="primary"
        size="mini"
        icon="el-icon-upload2"
      >
        导出Excel
      </el-button>
    </div>

    <!--显示一个dialog对话框-->
    <el-dialog title="数据字典导入" :visible.sync="dialogVisible" width="30%">
      <el-form>
        <el-form-item label="请选择Excel文件">
          <!--accept为只接受xls，xlsx的文件后缀，
          name名字必须要和后端的名字保持一致,
          avtion为提交地址发起ajax远程调用（和自己写的request请求无关），自己处理成功失败-->
          <el-upload
            :auto-upload="true"
            :multiple="false"
            :limit="1"
            :on-exceed="fileUploadExceed"
            :on-success="fileUploadSuccess"
            :on-error="fileUploadError"
            :action="BASE_API + '/admin/core/dict/import'"
            name="file"
            accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!--数据字典
    渲染树形数据必须指定row-key为id
    懒加载设置lazy（有了展开按钮）
    load为延迟加载函数
    -->
    <el-table :data="list" border row-key="id" lazy :load="load">
      <el-table-column label="名称" align="left" prop="name" />
      <el-table-column label="编码" prop="dictCode" />
      <el-table-column label="值" align="left" prop="value" />
    </el-table>
  </div>
</template>

<script>
import dictApi from '@/api/core/dict'
export default {
  data() {
    return {
      dialogVisible: false, //对话框是否显式
      BASE_API: process.env.VUE_APP_BASE_API, //获取后端接口地址
      list: [], //数据字典列表
    }
  },

  created() {
    this.fetchData()
  },
  methods: {
    //获取数据字典
    fetchData() {
      //获取顶层类别
      dictApi.listByParentId(1).then((response) => {
        this.list = response.data.list
      })
    },

    // 上传多于一个文件时
    fileUploadExceed() {
      this.$message.warning('只能选取一个文件')
    },

    //上传成功回调(http通信成功，有可能业务失败或业务失败)
    fileUploadSuccess(response) {
      if (response.code === 0) {
        //业务成功
        this.$message.success('数据导入成功')
        this.dialogVisible = false
      } else {
        //业务事变
        this.$message.error(response.message)
      }
    },

    //上传失败回调(http通信不成功)
    fileUploadError(error) {
      this.$message.error('数据导入失败')
    },

    //Excel数据导出
    exportData() {
      //导出excel，
      window.location.href = this.BASE_API + '/admin/core/dict/export'
    },
    //加载二级节点
    load(tree, treeNode, resolve) {
      //获取parent_id为点击id的数据
      dictApi.listByParentId(tree.id).then((response) => {
        resolve(response.data.list)
      })
    },
  },
}
</script>

4.后端设计代码？

①更新entity类

package com.atguigu.srb.core.pojo.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableLogic;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import lombok.EqualsAndHashCode;

import java.io.Serializable;
import java.time.LocalDateTime;

/**
 * 

 * 数据字典
 * 
 *
 * @author Likejin
 * @since 2023-04-09
 */
@Data
@EqualsAndHashCode(callSuper = false)
@ApiModel(value="Dict对象", description="数据字典")
public class Dict implements Serializable {

    private static final long serialVersionUID = 1L;

    @ApiModelProperty(value = "id")
      @TableId(value = "id", type = IdType.AUTO)
    private Long id;

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

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

    @ApiModelProperty(value = "值")
    private Integer value;

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

    @ApiModelProperty(value = "创建时间")
    private LocalDateTime createTime;

    @ApiModelProperty(value = "更新时间")
    private LocalDateTime updateTime;

    @ApiModelProperty(value = "删除标记（0:不可用 1:可用）")
    @TableField("is_deleted")
    @TableLogic
    private Boolean deleted;


    //数据库表没要有此字段， 表达逻辑概念的属性
    @TableField(exist = false)
    private Boolean hasChildren;


}

②编写controller接口

package com.atguigu.srb.core.controller.admin;


import com.alibaba.excel.EasyExcel;
import com.atguigu.common.exception.BusinessException;
import com.atguigu.common.result.R;
import com.atguigu.common.result.ResponseEnum;
import com.atguigu.srb.core.pojo.dto.ExcelDictDTO;
import com.atguigu.srb.core.pojo.entity.Dict;
import com.atguigu.srb.core.service.DictService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.net.URLEncoder;
import java.util.List;

/**
 * 

 * 数据字典 前端控制器
 * 
 *
 * @author Likejin
 * @since 2023-04-09
 */
@Api(tags = "数据字典管理")
@RestController
@RequestMapping("/admin/core/dict")
@Slf4j
@CrossOrigin
public class AdminDictController {

    @Resource
    DictService dictService;


    @ApiOperation("Excel数据的批量导入（导入到数据库）")
    @PostMapping("/import")
    public R batchImport(
            @ApiParam(value="Excel数据字典文件")
            @RequestParam("file") MultipartFile file){

        try {
            InputStream inputStream = file.getInputStream();
            dictService.importData(inputStream);
            return R.ok().message("数据字典批量导入成功");
        } catch (Exception e) {
            //返回R对象，并且打印异常跟踪栈
            throw new BusinessException(ResponseEnum.UPLOAD_ERROR,e);
        }

    }

    @ApiOperation("Excel数据的导出")
    //访问页面
    @GetMapping("/export")
    public void export(HttpServletResponse response){
        try {
            // 这里注意 有同学反应使用swagger 会导致各种问题，请直接用浏览器或者用postman
            //设置类型为excel
            response.setContentType("application/vnd.ms-excel");
            response.setCharacterEncoding("utf-8");
            // 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
            String fileName = URLEncoder.encode("mydict", "UTF-8").replaceAll("\\+", "%20");
            //设置附件的形式下载到浏览器端
            response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");
            EasyExcel.write(response.getOutputStream(), ExcelDictDTO.class).sheet("数据字典").doWrite(dictService.listDictData());

        } catch (IOException e) {
            //EXPORT_DATA_ERROR(104, "数据导出失败"),
            throw  new BusinessException(ResponseEnum.EXPORT_DATA_ERROR, e);
        }
    }


    @ApiOperation("根据上级id获取子节点数据列表")
    @GetMapping("/listByParentId/{parentId}")
    public R listByParentId(
            @ApiParam(value = "上级节点id", required = true)
            @PathVariable Long parentId) {
        List<Dict> dictList = dictService.listByParentId(parentId);
        return R.ok().data("list", dictList);
    }

}

③编写service

package com.atguigu.srb.core.service;

import com.atguigu.srb.core.pojo.dto.ExcelDictDTO;
import com.atguigu.srb.core.pojo.entity.Dict;
import com.baomidou.mybatisplus.extension.service.IService;

import java.io.InputStream;
import java.util.List;

/**
 * 

 * 数据字典 服务类
 * 
 *
 * @author Likejin
 * @since 2023-04-09
 */
public interface DictService extends IService<Dict> {


    void importData(InputStream inputStream);

    List<ExcelDictDTO> listDictData();

    List<Dict> listByParentId(Long parentId);
}

package com.atguigu.srb.core.service.impl;

import com.alibaba.excel.EasyExcel;
import com.atguigu.srb.core.listener.ExcelDictDTOListener;
import com.atguigu.srb.core.mapper.DictMapper;
import com.atguigu.srb.core.pojo.dto.ExcelDictDTO;
import com.atguigu.srb.core.pojo.entity.Dict;
import com.atguigu.srb.core.service.DictService;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.BeanUtils;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.annotation.Resource;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;

/**
 * 

 * 数据字典 服务实现类
 * 
 *
 * @author Likejin
 * @since 2023-04-09
 */
@Slf4j
@Service
public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {

    @Resource
    private  DictMapper dictMapper;

    //读取数据
    //写入数据库，利用事务的操作成功全成功，失败全失败（只要异常出现则回滚）
    @Transactional(rollbackFor = Exception.class)
    @Override
    public void importData(InputStream inputStream) {
        //传入输入流，
        EasyExcel.read(inputStream, ExcelDictDTO.class, new ExcelDictDTOListener(dictMapper)).sheet().doRead();
        log.info("Excel导入成功");
    }

    @Override
    public List<ExcelDictDTO> listDictData() {
        List<Dict> dictList = dictMapper.selectList(null);
        //创建ExcelDictDTO列表，将Dict列表转化为ExcelDictDTO列表
        ArrayList<ExcelDictDTO> excelDictDTOList = new ArrayList<>(dictList.size());
        dictList.forEach(dict -> {

            ExcelDictDTO excelDictDTO = new ExcelDictDTO();
            //对象拷贝，dict拷贝到excelDictDTO（相同列拷贝）
            BeanUtils.copyProperties(dict, excelDictDTO);
            excelDictDTOList.add(excelDictDTO);
        });
        return excelDictDTOList;
    }

    /**
     * @param parentId: 
     * @return List
     * @author Likejin
     * @description 根据parentId查询列表
     * @date 2023/4/12 15:42
     */

    @Override
    public List<Dict> listByParentId(Long parentId) {

        QueryWrapper<Dict> dictQueryWrapper = new QueryWrapper<>();
        dictQueryWrapper.eq("parent_id",parentId);
        List<Dict> dictList = dictMapper.selectList(dictQueryWrapper);
        //填充hasChildren字段
        dictList.forEach(dict -> {
            //判断当前节点是否有子节点,找到当前的dict的下级有没有子节点
            //即用当前dic的id当做parent_id去查，如果有数据则有子节点，如果没有数据则有子节点
            Boolean hasChildren = this.hasChildren(dict.getId());
            dict.setHasChildren(hasChildren);
        });
        return dictList;
    }
    /**
     * @param id:
     * @return Boolean
     * @author Likejin
     * @description 判断当前id的节点是否有子节点
     * @date 2023/4/12 15:03
     */

    private Boolean hasChildren(Long id){
        QueryWrapper<Dict> dictQueryWrapper = new QueryWrapper<>();
        dictQueryWrapper.eq("parent_id",id);
        Integer count = dictMapper.selectCount(dictQueryWrapper);
        if(count.intValue()>0){
            return true;
        }
        return false;
    }
}

5.实现数据字典缓存到redis

①为什么要用缓存技术？

• 数据字典的数据一段时间不会变，redis内存存储，查询速度快

②引入流程

• 引入redis依赖
  redis连接池管理
  redis存储json序列化
• 为什么序列化
  如果不序列化，默认使用jdk序列化存储可读性太差
  序列化后可以直接存储json数据
• 实现逻辑
  即前端先查redis，redis有则取出数据。
  redis没有则查询数据库，将数据库的数据存入redis，返回数据
  注意：redis出错但是不能影响数据库取数据后返回，故需要在查redis数据和存redis数据都try-catch

③引入redis依赖

   
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-data-redisartifactId>
        dependency>
        
        <dependency>
            <groupId>org.apache.commonsgroupId>
            <artifactId>commons-pool2artifactId>
        dependency>

        
        <dependency>
            <groupId>com.fasterxml.jackson.coregroupId>
            <artifactId>jackson-databindartifactId>
        dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.datatypegroupId>
            <artifactId>jackson-datatype-jsr310artifactId>
        dependency>

④配置redis的application.yml以及简单测试

server:
  port: 8110 # 服务端口
spring:
  #redis的配置
  redis:
    host: localhost
    port: 6379
    database: 0
    timeout: 3000ms #最大等待时间，超时则抛出异常，否则请求一直等待
    #连接池的连接
    lettuce:
      pool:
        max-active: 20  #最大连接数，负值表示没有限制，默认8
        max-wait: -1    #最大阻塞等待时间，负值表示没限制，默认-1
        max-idle: 8     #最大空闲连接，默认8
        min-idle: 0     #最小空闲连接，默认0
  profiles:
    active: dev # 环境设置
  application:
    name: service-core # 服务名
  datasource: # mysql数据库连接
    type: com.zaxxer.hikari.HikariDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/db200921_srb_core?serverTimezone=GMT%2B8&characterEncoding=utf-8
    username: root
    password: abc123

mybatis-plus: #mybatis
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  mapper-locations: classpath:com/atguigu/srb/core/mapper/xml/*.xml

# 设置日志级别
#logging:
#  level:
#    root: ERROR

package com.atguigu.srb.core;

import com.atguigu.srb.core.mapper.DictMapper;
import com.atguigu.srb.core.pojo.entity.Dict;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.test.context.junit4.SpringRunner;

import javax.annotation.Resource;
import java.util.concurrent.TimeUnit;

@SpringBootTest
@RunWith(SpringRunner.class)
public class RedisTemplateTests {
    @Resource
    private RedisTemplate redisTemplate;
    @Resource
    private DictMapper dictMapper;

    @Test
    public void saveDict(){
        Dict dict = dictMapper.selectById(1);
        //向数据库中存储string类型的键值对, 过期时间5分钟，序列化方案，序列化为jdk字符串
        redisTemplate.opsForValue().set("dict", dict, 5, TimeUnit.MINUTES);
    }

    @Test
    public void getDict(){
        Dict dict = (Dict)redisTemplate.opsForValue().get("dict");
        System.out.println(dict);
    }
}

⑤配置redis

• 通用配置写在service-base包下

package com.atguigu.srb.base.config;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;
import com.fasterxml.jackson.databind.jsontype.impl.LaissezFaireSubTypeValidator;
import com.fasterxml.jackson.datatype.jsr310.JavaTimeModule;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.redis.connection.lettuce.LettuceConnectionFactory;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.data.redis.serializer.Jackson2JsonRedisSerializer;
import org.springframework.data.redis.serializer.StringRedisSerializer;

@Configuration
public class RedisConfig {


    @Bean
    public RedisTemplate<String, Object> redisTemplate(LettuceConnectionFactory redisConnectionFactory) {

        RedisTemplate<String, Object> redisTemplate = new RedisTemplate<>();
        //设置连接池工厂
        redisTemplate.setConnectionFactory(redisConnectionFactory);

        //首先解决key的序列化方式
        StringRedisSerializer stringRedisSerializer = new StringRedisSerializer();
        redisTemplate.setKeySerializer(stringRedisSerializer);

        //解决value的序列化方式
        Jackson2JsonRedisSerializer<Object> jackson2JsonRedisSerializer = new Jackson2JsonRedisSerializer<>(Object.class);

        //序列化时将类的数据类型存入json，以便反序列化的时候转换成正确的类型
        ObjectMapper objectMapper = new ObjectMapper();
        //objectMapper.enableDefaultTyping(ObjectMapper.DefaultTyping.NON_FINAL);
        objectMapper.activateDefaultTyping(LaissezFaireSubTypeValidator.instance, ObjectMapper.DefaultTyping.NON_FINAL);

        // 解决jackson2无法反序列化LocalDateTime的问题
        objectMapper.disable(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS);
        objectMapper.registerModule(new JavaTimeModule());

        jackson2JsonRedisSerializer.setObjectMapper(objectMapper);

        redisTemplate.setValueSerializer(jackson2JsonRedisSerializer);
        return redisTemplate;
    }
}

⑥redis实现逻辑

• 即实现逻辑实际在controller调用的service层实现（前端根据parent_id查询列表）

package com.atguigu.srb.core.service.impl;

import com.alibaba.excel.EasyExcel;
import com.atguigu.srb.core.listener.ExcelDictDTOListener;
import com.atguigu.srb.core.mapper.DictMapper;
import com.atguigu.srb.core.pojo.dto.ExcelDictDTO;
import com.atguigu.srb.core.pojo.entity.Dict;
import com.atguigu.srb.core.service.DictService;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.exception.ExceptionUtils;
import org.springframework.beans.BeanUtils;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.annotation.Resource;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.TimeUnit;

/**
 * 

 * 数据字典 服务实现类
 * 
 *
 * @author Likejin
 * @since 2023-04-09
 */
@Slf4j
@Service
public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {

    @Resource
    private  DictMapper dictMapper;

    @Resource
    private RedisTemplate redisTemplate;

    //读取数据
    //写入数据库，利用事务的操作成功全成功，失败全失败（只要异常出现则回滚）
    @Transactional(rollbackFor = Exception.class)
    @Override
    public void importData(InputStream inputStream) {
        //传入输入流，
        EasyExcel.read(inputStream, ExcelDictDTO.class, new ExcelDictDTOListener(dictMapper)).sheet().doRead();
        log.info("Excel导入成功");
    }

    @Override
    public List<ExcelDictDTO> listDictData() {
        List<Dict> dictList = dictMapper.selectList(null);
        //创建ExcelDictDTO列表，将Dict列表转化为ExcelDictDTO列表
        ArrayList<ExcelDictDTO> excelDictDTOList = new ArrayList<>(dictList.size());
        dictList.forEach(dict -> {

            ExcelDictDTO excelDictDTO = new ExcelDictDTO();
            //对象拷贝，dict拷贝到excelDictDTO（相同列拷贝）
            BeanUtils.copyProperties(dict, excelDictDTO);
            excelDictDTOList.add(excelDictDTO);
        });
        return excelDictDTOList;
    }

    /**
     * @param parentId:
     * @return List
     * @author Likejin
     * @description 根据parentId查询列表
     * @date 2023/4/12 15:42
     */

    @Override
    public List<Dict> listByParentId(Long parentId) {


        //首先查询redis中是否存在数据
        //一级分类放到一个键中
        //一级分类的各个二级分类再存储
        try {
            List<Dict> dictList =(List<Dict>) redisTemplate.opsForValue().get("srb:core:dictList:" + parentId);
            if(dictList !=null){
                log.info("从redis获取数据列表");
                //如果redis取值出错，数据还可以从数据库中查
                return dictList;
            }
        } catch (Exception e) {
            log.error("redis服务器异常:" + ExceptionUtils.getStackTrace(e));
        }
        //如果存在则从redis直接返回数据列表
        //前面已经返回

        //如果不存在则查询数据库，同时将数据库中的数据放入缓存redis中
        log.info("从数据库中获取数据列表");
        QueryWrapper<Dict> dictQueryWrapper = new QueryWrapper<>();
        dictQueryWrapper.eq("parent_id",parentId);
        List<Dict> dictList = dictMapper.selectList(dictQueryWrapper);
        //填充hasChildren字段
        dictList.forEach(dict -> {
            //判断当前节点是否有子节点,找到当前的dict的下级有没有子节点
            //即用当前dic的id当做parent_id去查，如果有数据则有子节点，如果没有数据则有子节点
            Boolean hasChildren = this.hasChildren(dict.getId());
            dict.setHasChildren(hasChildren);
        });
        try {
            log.info("将数据存入redis");
            redisTemplate.opsForValue().set("srb:core:dictList:" + parentId,dictList,5, TimeUnit.MINUTES);
            //返回数据
        } catch (Exception e) {
            log.error("redis服务器异常:" + ExceptionUtils.getStackTrace(e));
        }
        return dictList;
    }
    /**
     * @param id:
     * @return Boolean
     * @author Likejin
     * @description 判断当前id的节点是否有子节点
     * @date 2023/4/12 15:03
     */

    private Boolean hasChildren(Long id){
        QueryWrapper<Dict> dictQueryWrapper = new QueryWrapper<>();
        dictQueryWrapper.eq("parent_id",id);
        Integer count = dictMapper.selectCount(dictQueryWrapper);
        if(count.intValue()>0){
            return true;
        }
        return false;
    }
}

⑦存储redis结果

未更新

未更新

未更新

未更新

未更新

未更新

未更新

未更新

未更新