二、数据字典开发

文章目录

  • 二、数据字典开发
    • 1、搭建service-cmn模块
      • 1.1 搭建service-cmn模块
      • 1.2 修改配置
      • 1.3 启动类
    • 2、数据字典列表
      • 2.1 数据字典列表接口
        • 2.1.1 model模块添加数据字典实体
        • 2.1.2 添加数据字典mapper
        • 2.1.4 添加数据字典controller
      • 2.2 数据字典列表前端
        • 2.2.1 添加路由
        • 2.2.2 定义api
        • 2.2.2 方法调用
        • 2.2.3 表格渲染
    • 3、EasyExcel介绍
    • 4、数据字典导出
      • 4.1 导出接口封装
        • 4.1.2 在service-cmn模块添加service方法
        • 4.1.3 在service-cmn模块添加controller方法
        • 4.1.4 测试
      • 4.2 导出前端实现
        • 4.2.1 列表页面添加导出按钮
        • 4.2.2 添加导出方法
        • 4.2.1 测试
    • 5、数据字典导入
      • 5.1 导入接口封装
        • 5.1.1 创建回调监听器
        • 5.1.2 在service-cmn模块添加service方法
        • 5.1.3 在service-cmn模块添加controller方法
      • 5.2 导入前端实现
        • 5.2.1 列表页面添加导入按钮
        • 5.2.2 添加导入弹出层
        • 5.2.3 添加弹出可见模型
        • 5.2.4 添加方法

二、数据字典开发

1、搭建service-cmn模块

1.1 搭建service-cmn模块

搭建过程参考service-hosp模块

1.2 修改配置

修改pom.xml

<?xml version="1.0"encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>com.atguigu.yygh</groupId>
<artifactId>service</artifactId>
<version>1.0</version>
</parent>

<version>1.0</version>
<artifactId>service-cmn</artifactId>
<packaging>jar</packaging>
<name>service-cmn</name>
<description>service-cmn</description>

<dependencies>
</dependencies>

<build>
<finalName>service-cmn</finalName>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>

</project>

1、添加配置文件application.properties

# 服务端口
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://192.168.44.165:3306/yygh_cmn?characterEncoding=utf-8&useSSL=false
spring.datasource.username=root
spring.datasource.password=root123

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

1.3 启动类

package com.atguigu.yygh;

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

2、数据字典列表

根据element组件要求,返回列表数据必须包含hasChildren字典,如图:
https://element.eleme.cn/#/zh-CN/component/table
在这里插入图片描述

2.1 数据字典列表接口

2.1.1 model模块添加数据字典实体

在model模块查看实体:com.atguigu.yygh.model.cmn.Dict

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

    private static final long serialVersionUID = 1L;

    @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;
}

说明:hasChildren为树形组件所需字典,标识为数据库表不存在该字段

2.1.2 添加数据字典mapper

1、添加com.atguigu.yygh.cmn.mapper.DictMapper

public interface DictMapper extends BaseMapper<Dict> {
}

2、添加com.atguigu.yygh.cmn.service.impl.DictServiceImpl接口实现

@Service
public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {
    //根据数据id查询子数据列表
    @Override
    public List<Dict> findChlidData(Long id) {
        QueryWrapper<Dict> wrapper = new QueryWrapper<>();
        wrapper.eq("parent_id",id);
        List<Dict> dictList = baseMapper.selectList(wrapper);
        //向list集合每个dict对象中设置hasChildren
        for (Dict dict:dictList) {
            Long dictId = dict.getId();
            boolean isChild = this.isChildren(dictId);
            dict.setHasChildren(isChild);
        }
        return dictList;
    }
    //判断id下面是否有子节点
    private boolean isChildren(Long id) {
        QueryWrapper<Dict> wrapper = new QueryWrapper<>();
        wrapper.eq("parent_id",id);
        Integer count = baseMapper.selectCount(wrapper);
        // 0>0    1>0
        return count>0;
    }
}

2.1.4 添加数据字典controller

添加com.atguigu.yygh.cmn.controller.DictController

@Api(description = "数据字典接口")
@RestController
@RequestMapping("/admin/cmn/dict")
public class DictController {

    @Autowired
    private DictService dictService;

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

2.2 数据字典列表前端

2.2.1 添加路由

在 src/router/index.js 文件添加路由

  {
    path: '/cmn',
    component: Layout,
    redirect: '/cmn/list',
    name: '数据管理',
    alwaysShow: true,
    meta: { title: '数据管理', icon: 'example' },
    children: [
      {
        path: 'list',
        name: '数据字典',
        component: () => import('@/views/dict/list'),
        meta: { title: '数据字典', icon: 'table' }
      }
    ]
  },

说明:列表与查看都添加了

2.2.2 定义api

创建文件 src/api/cmn/dict.js

export default {
  dictList(id) {//数据字典列表
    return request ({
      url: `/admin/cmn/dict/findChildData/${id}`,
      method: 'get'
    })
  }
}

2.2.2 方法调用

<script>
import dict from '@/api/dict'
export default {
    data() {
        return {
            list:[] //数据字典列表数组
        }
    },
    created() {
        this.getDictList(1)
    },
    methods: {
        //数据字典列表
        getDictList(id) {
            dict.dictList(id)
                .then(response => {
                    this.list = response.data
                })
        },
        getChildrens(tree, treeNode, resolve) {
            dict.dictList(tree.id).then(response => {
                resolve(response.data)
            })
        }
    }
}
</script>

2.2.3 表格渲染

<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>

3、EasyExcel介绍

EasyExcel介绍

4、数据字典导出

4.1 导出接口封装

4.1.1 在model模块添加导出实体
在model模块查看实体:com.atguigu.yygh.vo.cmn.DictEeVo

package com.atguigu.yygh.vo.cmn;

@Data
public class DictEeVo {

@ExcelProperty(value = "id",index = 0)
private Long id;

@ExcelProperty(value = "上级id",index = 1)
private Long parentId;

@ExcelProperty(value = "名称",index = 2)
private String name;

@ExcelProperty(value = "值",index = 3)
private String value;

@ExcelProperty(value = "编码",index = 4)
private String dictCode;

}

4.1.2 在service-cmn模块添加service方法

1、在DictService类添加接口

/**
 * 导出
 * @param response
*/
void exportData(HttpServletResponse response);

2、在DictServiceImpl类添加接口实现类

@Override
public void exportData(HttpServletResponse response) {
try {
      response.setContentType("application/vnd.ms-excel");
      response.setCharacterEncoding("utf-8");
// 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
String fileName = URLEncoder.encode("数据字典", "UTF-8");
      response.setHeader("Content-disposition", "attachment;filename="+ fileName + ".xlsx");

      List<Dict> dictList = dictMapper.selectList(null);
      List<DictEeVo> dictVoList = new ArrayList<>(dictList.size());
for(Dict dict : dictList) {
         DictEeVo dictVo = new DictEeVo();
         BeanUtils.copyBean(dict, dictVo, DictEeVo.class);
         dictVoList.add(dictVo);
      }

      EasyExcel.write(response.getOutputStream(), DictEeVo.class).sheet("数据字典").doWrite(dictVoList);
   } catch (IOException e) {
      e.printStackTrace();
   }
}

说明:直接复制示例代码中的“web中的写”,改造即可

4.1.3 在service-cmn模块添加controller方法

在DictController类添加方法

@ApiOperation(value="导出")
@GetMapping(value = "/exportData")
public void exportData(HttpServletResponse response) {
dictService.exportData(response);
}

4.1.4 测试

直接通过浏览器导出数据:http://localhost:8202/admin/cmn/dict/exportData

4.2 导出前端实现

4.2.1 列表页面添加导出按钮

src/views/cmn/dict/list.vue

<div class="el-toolbar">
<div class="el-toolbar-body"style="justify-content: flex-start;">
<el-button type="text"@click="exportData"><i class="fa fa-plus"/> 导出</el-button>
</div>
</div>

4.2.2 添加导出方法

exportData() {
window.location.href = 'http://localhost:8202/admin/cmn/dict/exportData'
}

4.2.1 测试

5、数据字典导入

5.1 导入接口封装

5.1.1 创建回调监听器

public class DictListener extends AnalysisEventListener<DictEeVo> {

    private DictMapper dictMapper;
    public DictListener(DictMapper dictMapper) {
        this.dictMapper = dictMapper;
    }

    //一行一行读取
    @Override
    public void invoke(DictEeVo dictEeVo, AnalysisContext analysisContext) {
        //调用方法添加数据库
        Dict dict = new Dict();
        BeanUtils.copyProperties(dictEeVo,dict);
        dictMapper.insert(dict);
    }
    @Override
    public void doAfterAllAnalysed(AnalysisContext analysisContext) {

    }
}

5.1.2 在service-cmn模块添加service方法

//导入数据字典
@Override
public void importDictData(MultipartFile file) {
    try {
        EasyExcel.read(file.getInputStream(),DictEeVo.class,new DictListener(baseMapper)).sheet().doRead();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

5.1.3 在service-cmn模块添加controller方法

在DictController类添加方法

@ApiOperation(value = "导入")
@PostMapping("importData")
public Result importData(MultipartFile file) {
 dictService.importData(file);
 return Result.ok();
}

5.2 导入前端实现

5.2.1 列表页面添加导入按钮

src/views/cmn/dict/list.vue

<el-button type="text"@click="importData"><i class="fa fa-plus"/> 导入</el-button>

说明:按钮位置与导出并列

5.2.2 添加导入弹出层

<el-dialog title="导入":visible.sync="dialogImportVisible"width="480px">
<el-form label-position="right"label-width="170px">

<el-form-item label="文件">
<el-upload
:multiple="false"
:on-success="onUploadSuccess"
:action="'http://localhost:8202/admin/cmn/dict/importData'"
class="upload-demo">
<el-button size="small"type="primary">点击上传</el-button>
<div slot="tip"class="el-upload__tip">只能上传xls文件,且不超过500kb</div>
</el-upload>
</el-form-item>

</el-form>
<div slot="footer"class="dialog-footer">
<el-button @click="dialogImportVisible = false">
      取消
</el-button>
</div>
</el-dialog>

5.2.3 添加弹出可见模型

// 定义数据
data() {
return {
list: [],
listLoading: true,
dialogImportVisible: false
}
}

5.2.4 添加方法

importData() {
this.dialogImportVisible = true
},

onUploadSuccess(response, file) {
this.$message.info('上传成功')
this.dialogImportVisible = false
  this.fetchData()
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/21513.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Java算法题】剑指offer_01数据结构

前言 刷题链接&#xff1a; https://www.nowcoder.com/exam/oj/ta?page2&tpId13&type265 1. 链表 JZ24 反转链表 思路&#xff1a;基本操作&#xff0c;如下所示。 /* public class ListNode {int val;ListNode next null;ListNode(int val) {this.val val;} }…

ad18学习笔记一

如何自学altium designer如何自学altium designer&#xff1f; - 知乎如何自学altium designer 这里面有ad官方推荐的b站的视频&#xff1a;可以直接去b站关注ad官方账号 AltiumChina&#xff0c;它本身就发布了很多实用教程。 在知乎的这个界面也有Altium Designer Ver18_官…

c++ 11标准模板(STL) std::set(六)

定义于头文件 <set> template< class Key, class Compare std::less<Key>, class Allocator std::allocator<Key> > class set;(1)namespace pmr { template <class Key, class Compare std::less<Key>> using se…

如何使用SCQA模型提高表达能力

SCQA架构是“结构化表达”工具。 一、什么是“SCQA架构”&#xff1f;‍ S&#xff08;Situation&#xff09;情景——由熟悉的情境或事实引入 C&#xff08;Complication&#xff09;冲突——指出实际面临的困境或冲突 Q&#xff08;Question&#xff09;疑问——你如何分析…

文本三剑客正则表达式3

文章目录 文本三剑客&正则表达式31 awk工作原理2 awk的基本格式及其内置变量2.1 基本格式2.2 内置变量2.3 示例2.3.1 直接打印所有内容2.3.2 取每一行的第一列2.3.3 打印行号&#xff0c;及所有内容2.3.4 打印第三行2.3.5 打印2-4行2.3.6 打印第2行和第4行2.3.7 用正则表达…

基于harbor安装私有镜像仓库

目录 Harbor介绍 Harbor安装 下载完成后&#xff0c;在压缩包解压到/usr/local目录下&#xff1a; 修改Harbor配置文件 推送本地镜像到harbor上 1、给本地镜像打一个标签 2、 设置docker的daemon.json 3、重启docker 4、使用docker登录harbor 5、把本地的镜像push到harbor…

银豆信息张雪灿:钻石级合作伙伴的增长秘诀

编者按&#xff1a; 杭州银豆信息技术有限公司&#xff08;简称“银豆”&#xff09;&#xff0c;是一家专注于云计算服务的高科技企业&#xff0c;目前已为2000家企业级客户提供了专业的行业解决方案, 与人民网、光大银行、长安汽车金融、vivo金融、浙江省农科院、淄博市大数…

MediaPipe虹膜检测:实时虹膜跟踪和深度估计

包括计算摄影(例如,人像模式和闪光反射)和增强现实效果(例如,虚拟化身)在内的大量实际应用都依赖于通过跟踪虹膜来估计眼睛位置。一旦获得了准确的光圈跟踪,我们就可以确定从相机到用户的公制距离,而无需使用专用的深度传感器。反过来,这可以改善各种用例,从计算摄影…

机器学习之SVM分类器介绍——核函数、SVM分类器的使用

系类文章目录 机器学习算法——KD树算法介绍以及案例介绍 机器学习的一些常见算法介绍【线性回归&#xff0c;岭回归&#xff0c;套索回归&#xff0c;弹性网络】 文章目录 一、SVM支持向量机介绍 1.1、SVM介绍 1.2、几种核函数简介 a、sigmoid核函数 b、非线性SVM与核函…

从内网护卫到零信任尖兵:腾讯iOA炼成记

腾讯既是企业产品的服务商又是使用者&#xff0c;很多产品最原始的出发点最早只是为了解决腾讯自身某一个需求&#xff0c;经过不断地发展完善和业务场景锤炼&#xff0c;最终进化成一个成熟的企服产品。本系列文章讲述的是这样一组Made in Tencent故事&#xff0c;这是系列的第…

Word批量更改图片环绕方式与=尺寸大小

前提&#xff1a;一份Word文档里面有100张图片&#xff0c;有大有小&#xff0c;需要将100张图片更改为统一大小&#xff0c;宽度与高度均为5厘米&#xff0c;同时环绕方式也需要改成四周型。 默认Word图片的默认环绕方式为嵌入型&#xff0c;需要统一更改为四周型&#xff0c;…

linux 安装 maven 3.8 版本

文章目录 1&#xff1a;maven 仓库官网 2、下载安装包 3、使用&#xff1a;Xftp 上传到你想放的目录 4、解压文件 ​编辑 5、配置环境变量 ​编辑 6、刷新 /etc/profile 文件 7、查看maven 版本 1&#xff1a;maven 仓库官网 Maven – Download Apache Mavenhttps://mave…

Java 基础进阶篇(十五):IO 流总结(全网最全面)

文章目录 前置内容&#xff1a;字符集一、IO 流概述二、字节流2.1 文件字节输入流 FileInputStream2.1.1 案例&#xff1a;每次读取一个字节2.1.2 案例&#xff1a;每次读取一个字节数组2.1.3 案例&#xff1a;读取文件的全部字节 2.2 文件字节输出流 FileOutputStream2.3 文件…

使用Docker Dockerfile构建php LNMP集成开发环境,并运行Thinkphp5

宿主机环境 系统&#xff1a;MAC、Windows10 Docker版本&#xff1a;Docker version 23.0.5 Docker Desktop:Dockerdesktop官方地址 前言 这篇主要介绍如何在Mac、Windows10使用docker搭建LNMP集成开发环境。下面我会写Dockerfile编译安装Nginxphp基础环境。mysql、redis基…

pynvme操作流程

如下操作pynvme运行在fedora上&#xff0c;在其他操作系统尚未做尝试。 步骤一&#xff1a;检查本地windows是否安装ssh 检查方式&#xff1a;windows本地打开windows powershell&#xff0c;输入ssh&#xff0c;若打印usage &#xff1a;ssh等一些信息&#xff0c;则已安装s…

8.防火墙

文章目录 防火墙iptables防火墙介绍基础操作高级操作通用匹配隐含匹配端口匹配&#xff1a;--sport 源端口、--dport 目的端口 TCP标志位匹配&#xff1a;--tcp-flags TCP标志位ICMP类型匹配&#xff1a;--icmp-type ICMP类型 显式匹配多端口匹配IP范围匹配&#xff1a;-m ipra…

基于αβ剪枝算法的五子棋

访问【WRITE-BUG数字空间】_[内附完整源码和文档] 五子棋是世界智力运动会竞技项目之一&#xff0c;是一种两人对弈的纯策略型棋类游戏&#xff0c;是世界智力运动会竞技项目之一&#xff0c;通常双方分别使用黑白两色的棋子&#xff0c;下在棋盘直线与横线的交叉点上&#xf…

记录:自回归 模型在记忆 全随机序列 的潜变量 统计量爆炸现象

只是一个记录 8层12头512维度的 GPT 模型&#xff0c;使用它来记忆 10000 条 512长度 的无序序列&#xff0c;vocab_size 为100。 模型要自回归生成这些序列&#xff0c;不可能依赖局部推理&#xff0c;必须依赖全局视野&#xff0c;即记住前面的序列。 然后统计 最后一个no…

EasyRecovery16电脑硬盘数据恢复软件功能讲解

硬盘是很常见的存储数据的设备&#xff0c;硬盘中很多重要的数据一旦丢失会很麻烦&#xff0c;不过现在有硬盘数据恢复软件可以自行在家恢复数据。今天的文章就带大家来看看硬盘恢复数据的软件EasyRecovery。 EasyRecovery 是一款专业的数据恢复软件&#xff0c;支持恢复不同存…

nginx实现正向代理

1.下载nginx nginx: download 选择自己需要的版版本下载下来 2.解压文件修改ngixn.conf配置文件 events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout…