网站导航
> 文章列表 > 项目6：实现数据字典的展示与缓存

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

网友: 文章列表 2024-03-21 18:06:49

项目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;/* <p>* 数据字典* </p> @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")@TableLogicprivate 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;/* <p>* 数据字典 前端控制器* </p> @author Likejin* @since 2023-04-09*/
@Api(tags = "数据字典管理")
@RestController
@RequestMapping("/admin/core/dict")
@Slf4j
@CrossOrigin
public class AdminDictController {@ResourceDictService 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//设置类型为excelresponse.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;/* <p>* 数据字典 服务类* </p> @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;/* <p>* 数据字典 服务实现类* </p> @author Likejin* @since 2023-04-09*/
@Slf4j
@Service
public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {@Resourceprivate  DictMapper dictMapper;//读取数据//写入数据库，利用事务的操作成功全成功，失败全失败（只要异常出现则回滚）@Transactional(rollbackFor = Exception.class)@Overridepublic void importData(InputStream inputStream) {//传入输入流，EasyExcel.read(inputStream, ExcelDictDTO.class, new ExcelDictDTOListener(dictMapper)).sheet().doRead();log.info("Excel导入成功");}@Overridepublic 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<Dict>* @author Likejin* @description 根据parentId查询列表* @date 2023/4/12 15:42*/@Overridepublic 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依赖

   <!-- spring boot redis缓存引入 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><!-- 缓存连接池--><dependency><groupId>org.apache.commons</groupId><artifactId>commons-pool2</artifactId></dependency><!-- redis 存储 json序列化 --><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId></dependency><dependency><groupId>com.fasterxml.jackson.datatype</groupId><artifactId>jackson-datatype-jsr310</artifactId></dependency>

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

server:port: 8110 # 服务端口
spring:#redis的配置redis:host: localhostport: 6379database: 0timeout: 3000ms #最大等待时间，超时则抛出异常，否则请求一直等待#连接池的连接lettuce:pool:max-active: 20  #最大连接数，负值表示没有限制，默认8max-wait: -1    #最大阻塞等待时间，负值表示没限制，默认-1max-idle: 8     #最大空闲连接，默认8min-idle: 0     #最小空闲连接，默认0profiles:active: dev # 环境设置application:name: service-core # 服务名datasource: # mysql数据库连接type: com.zaxxer.hikari.HikariDataSourcedriver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/db200921_srb_core?serverTimezone=GMT%2B8&characterEncoding=utf-8username: rootpassword: abc123mybatis-plus: #mybatisconfiguration:log-impl: org.apache.ibatis.logging.stdout.StdOutImplmapper-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 {@Resourceprivate RedisTemplate redisTemplate;@Resourceprivate DictMapper dictMapper;@Testpublic void saveDict(){Dict dict = dictMapper.selectById(1);//向数据库中存储string类型的键值对, 过期时间5分钟，序列化方案，序列化为jdk字符串redisTemplate.opsForValue().set("dict", dict, 5, TimeUnit.MINUTES);}@Testpublic 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 {@Beanpublic 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;/* <p>* 数据字典 服务实现类* </p> @author Likejin* @since 2023-04-09*/
@Slf4j
@Service
public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {@Resourceprivate  DictMapper dictMapper;@Resourceprivate RedisTemplate redisTemplate;//读取数据//写入数据库，利用事务的操作成功全成功，失败全失败（只要异常出现则回滚）@Transactional(rollbackFor = Exception.class)@Overridepublic void importData(InputStream inputStream) {//传入输入流，EasyExcel.read(inputStream, ExcelDictDTO.class, new ExcelDictDTOListener(dictMapper)).sheet().doRead();log.info("Excel导入成功");}@Overridepublic 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<Dict>* @author Likejin* @description 根据parentId查询列表* @date 2023/4/12 15:42*/@Overridepublic 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结果

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

未更新

未更新

未更新

未更新

未更新

未更新

未更新

未更新

未更新

网络标签：

相关问题