项目数据字典数据导入导出

1、引入导入导出依赖
2、数据导出，将数据写到excel文件中
- 2.1、封装对象，用于接收导出数据
- 2.2、编写控制层方法
- 2.3、编写业务层方法
- - 2.3.1、接口
  - 2.3.2、实现类：代码分三部分
- 2.4、前端代码编写
- - 2.4.1、src/dict.js中编写方法调用后端方法
  - 2.4.2、页面打印按钮
  - 2.4.3、前端页面打印的方法
- 2.5、测试
3、数据导入-读操作
- 3.1、封装对象
- 3.2、编写控制层方法
- 3.3、编写业务层方法
- - 3.3.1、接口
  - 3.2.2、实现类
- 3.3、监听器
- 3.4、数据导入前端代码
- 3.4.1、vue页面添加导入的按钮
- - 3.4.2、添加导入弹框
  - 3.4.3、编写js代码

1、引入导入导出依赖

<dependencies><!-- https://mvnrepository.com/artifact/com.alibaba/easyexcel -->0-<dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.1.1</version></dependency>
</dependencies>

2、数据导出，将数据写到excel文件中

2.1、封装对象，用于接收导出数据

@Data
public class DictEexcelVo {@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;}

2.2、编写控制层方法

//导出数据字典数据
@GetMapping("exportData")
public void exportData(HttpServletResponse response) throws IOException {dictService.exportDictData(response);
}

2.3、编写业务层方法

2.3.1、接口

//导出数据字典数据
void exportDictData(HttpServletResponse response) throws IOException;

2.3.2、实现类：代码分三部分

1、Excel导出中HttpServletResponse消息头参数设置

response.setCharacterEncoding(“UTF-8”);
//编码格式为UTF-8
response.setContentType(“application/vnd.ms-excel;charset=UTF-8”);
//让服务器告诉浏览器它发送的数据属于excel文件类型
response.setHeader(“Content-Disposition”, “attachment;filename=”" + fileName + “.xls”");
//告诉浏览器这个文件的名字和类型，attachment：作为附件下载；inline：直接打开

2、数据库查询数据，数据对象拷贝

3、调用EasyExcel方法实现写操作

//导出数据字典数据
@Override
public void exportDictData(HttpServletResponse response) {//设置下载信息//让服务器告诉浏览器它发送的数据属于excel文件类型response.setContentType("application/vnd.ms-excel");response.setCharacterEncoding("utf-8");//编码格式为UTF-8String fileName = "dict";//告诉浏览器这个文件的名字和类型，attachment：作为附件下载；inline：直接打开response.setHeader("Content-disposition","attachment;fileName="+fileName+".xlsx");//查询数据库List<Dict> dictList = baseMapper.selectList(null);//将查询出的所有数据转成DictExcelVo对象，并将所有对象放到集合中供EasyExcel写操作//Dict---->DictExcelVo。将查询出来的Dict对象的值赋值给DictExcelVoList<DictEexcelVo> dictEexcelVoList = new ArrayList<>();//创建一个存放DictEexcelVo对象的集合for(Dict dict:dictList){//遍历从数据库中查询出的数据DictEexcelVo dictEexcelVo = new DictEexcelVo();//新建DictEexcelVo对象，用户数据导出BeanUtils.copyProperties(dict,dictEexcelVo);//将Dict对象值复制到dictEexcelVo对象中dictEexcelVoList.add(dictEexcelVo);//将dictEexcelVo对象添加到集合中}try{//调用方法执行写数据操，将数据库中数据写到excel表格中EasyExcel.write(response.getOutputStream(),DictEexcelVo.class).sheet("数据字典").doWrite(dictEexcelVoList);}catch (IOException e){e.printStackTrace();}
}

2.4、前端代码编写

2.4.1、src/dict.js中编写方法调用后端方法

//数据导出
exportData(response){return request({url:`/admin/cmn/dict/exportData`,method:'get'})
}

2.4.2、页面打印按钮

<div class="el-toolbar"><div class="el-toolbar-body" style="justify-content: flex-start;"><a href="http://localhost:8202/admin/cmn/dict/exportData" target="_blank"><el-button type="text"><i class="el-icon-printer"/> 导出</el-button></a></div></div>

2.4.3、前端页面打印的方法

//导出数据
exportData(){//调用导出接口window.location.href="http://localhost:8202/admin/cmn/dict/exportData"},

2.5、测试

点击页面的导出
浏览器下载数据，并将数据存放到excel表格中

查看下载的数据

3、数据导入-读操作

3.1、封装对象

@Data
public class DictEexcelVo {@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;}

3.2、编写控制层方法

//将数据导入到数据库
@PostMapping("importData")
public Result importData(MultipartFile file) throws IOException {dictService.importData(file);return Result.ok();
}

3.3、编写业务层方法

3.3.1、接口

//将数据导入到数据库
void importData(MultipartFile file) throws IOException;

3.2.2、实现类

//将数据导入到数据库
@Overridepublic void importData(MultipartFile file) {try{EasyExcel.read(file.getInputStream(),DictExcelVo.class, new DictListener(baseMapper)).sheet().doRead();}catch (IOException e){e.printStackTrace();}}

3.3、监听器

public class DictListener extends AnalysisEventListener<DictEexcelVo> {private DictMapper dictMapper;public DictListener(DictMapper dictMapper) {this.dictMapper = dictMapper;}//一行一行的读数据@Overridepublic void invoke(DictEexcelVo dictEexcelVo, AnalysisContext analysisContext) {Dict dict = new Dict();//创建dict对象BeanUtils.copyProperties(dictEexcelVo, dict);//将dictEexcelVo对象的值复制给dict,用于数据插入dictMapper.insert(dict);//进行数据插入}@Overridepublic void doAfterAllAnalysed(AnalysisContext analysisContext) {}
}

3.4、数据导入前端代码

3.4.1、vue页面添加导入的按钮

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

效果：

3.4.2、添加导入弹框

dialogImportVisible：用于是否启动弹框，如果值为false,不起用
:multiple=“false” 是否支持多个文件上传，false不支持
:on-success=“onUploadSuccess” 文件上传成功后要调用的方法
-:action="‘http://localhost:8202/admin/cmn/dict/importData’" 点击上传后要请求的接口路劲

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

效果：

3.4.3、编写js代码

data() {return {list:[],//初始化数据,数据字典列表数组dialogImportVisible:false//用于设置弹框是否弹出，false不弹出}
},
//页面渲染之前执行
created() {this.getDictList(1)
},
methods:{//导入数据importData() {this.dialogImportVisible = true},//上传文件成功后调用的方法onUploadSuccess() {//关闭弹窗this.dialogImportVisible = false//刷新列表this.getDictList(1)},

项目数据字典数据导入导出相关推荐

linux中mongo的导出数据,Linux下mongodb安装及数据导入导出教程(示例代码)
Linux下mongodb安装及数据导入导出教程 #查看linux发行版本 cat /etc/issue #查看linux内核版本号 uname -r 一.Linux下mongodb安装的一般步骤 1 ...
Linux下mongodb安装及数据导入导出教程
Linux下mongodb安装及数据导入导出教程 #查看linux发行版本 cat /etc/issue #查看linux内核版本号 uname -r 一.Linux下mongodb安装的一般步骤 1 ...
java横向导出excel_利用Java进行Excel的数据导入导出
1. 引言 MS 的电子表格(Excel)是Office 的重要成员,是保存统计数据的一种常用格式.在一个Java 应用中,将一部分数据生成Excel 格式,是与其他系统无缝连接的重要手段.在远程 ...
300万数据导入导出优化方案，从80s优化到8s（实测）
前景在项目开发中往往需要使用到数据的导入和导出,导入就是从Excel中导入到DB中,而导出就是从DB中查询数据然后使用POI写到Excel上. 写本文的背景是因为在工作中遇到了大数据的导入和导出,问 ...
java自定义注解实现excel数据导入导出,设置单元格数据验证与生成省市区多列联动效果
本文通过自定义注解实现excel数据导入导出.以及设置excel文件中列数据验证,即用户在excel文件中输入数据时就可以对数据格式验证是否符合,节省了程序中过多的数据验证操作,注解还额外提供了一系列 ...
Oracle数据导入导出imp/exp?批处理文件
原文:http://ymy131931.iteye.com/blog/1114476 Oracle数据导入导出imp/exp?批处理文件如何写批处理文件自动将数据导入oracle数据库 Oracle ...
MaxCompute数据导入导出
MaxCompute数据导入导出 1.Tunnel命令导入数据 2.MaxCompute Studio导入数据 3.Tunnel SDK 4.其他导入方式详细介绍请见 MaxCompute提供多种数 ...
hive数据导入导出
Hive数据导入导出的几种方式一,Hive数据导入的几种方式首先列出讲述下面几种导入方式的数据和hive表. 导入: 本地文件导入到Hive表: Hive表导入到Hive表; HDFS文件导入到H ...
[转载]在SQL Server数据库之间进行数据导入导出，OPENDATASOURCE
需要在c盘下先建立一个data.txt文件,然后在文件的第一行写上你要导出的列,不如说要导出id和name这两列,就在第一行写上 id,name 然后保存,使用下列SQL就可以了,你如果要保持原有的I ...

项目数据字典数据导入导出

项目数据字典数据导入导出

1、引入导入导出依赖

2、数据导出，将数据写到excel文件中

2.1、封装对象，用于接收导出数据

2.2、编写控制层方法

2.3、编写业务层方法

2.3.1、接口

2.3.2、实现类：代码分三部分

2.4、前端代码编写

2.4.1、src/dict.js中编写方法调用后端方法

2.4.2、页面打印按钮

2.4.3、前端页面打印的方法

2.5、测试

3、数据导入-读操作

3.1、封装对象

3.2、编写控制层方法

3.3、编写业务层方法

3.3.1、接口

3.2.2、实现类

3.3、监听器

3.4、数据导入前端代码

3.4.1、vue页面添加导入的按钮

3.4.2、添加导入弹框

3.4.3、编写js代码

项目数据字典数据导入导出相关推荐

最新文章

热门文章