博客

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

  • Post author:
  • Post category:其他


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



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-8
   String fileName = "dict";
   //告诉浏览器这个文件的名字和类型，attachment：作为附件下载；inline：直接打开
  response.setHeader("Content-disposition","attachment;fileName="+fileName+".xlsx");

    //查询数据库
    List<Dict> dictList = baseMapper.selectList(null);

    //将查询出的所有数据转成DictExcelVo对象，并将所有对象放到集合中供EasyExcel写操作
    //Dict---->DictExcelVo。将查询出来的Dict对象的值赋值给DictExcelVo
    List<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、实现类

在这里插入图片描述 

//将数据导入到数据库
@Override
 public 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;
    }

    //一行一行的读数据
    @Override
    public void invoke(DictEexcelVo dictEexcelVo, AnalysisContext analysisContext) {
        Dict dict = new Dict();//创建dict对象
        BeanUtils.copyProperties(dictEexcelVo, dict);//将dictEexcelVo对象的值复制给dict,用于数据插入
        dictMapper.insert(dict);//进行数据插入
    }

    @Override
    public 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)
    },


版权声明：本文为qq_46112274原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。