- 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 dictList = baseMapper.selectList(null);
//将查询出的所有数据转成DictExcelVo对象，并将所有对象放到集合中供EasyExcel写操作
//Dict---->DictExcelVo。将查询出来的Dict对象的值赋值给DictExcelVo
List 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.1、src/dict.js中编写方法调用后端方法
//数据导出
exportData(response){
return request({
url:/admin/cmn/dict/exportData,
method:'get'
})
}
2.4.2、页面打印按钮
2.4.3、前端页面打印的方法
//导出数据
exportData(){
//调用导出接口
window.location.href="http://localhost:8202/admin/cmn/dict/exportData"
},
点击页面的导出
浏览器下载数据，并将数据存放到excel表格中
查看下载的数据
=========================================================================
@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;
}
//将数据导入到数据库
@PostMapping("importData")
public Result importData(MultipartFile file) throws IOException {
dictService.importData(file);
return Result.ok();
}
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();
}
}
public class DictListener extends AnalysisEventListener {
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) {
}
}
<el-button type="text" @click="importData"> 导入
效果：
3.4.2、添加导入弹框
-
dialogImportVisible：用于是否启动弹框，如果值为false,不起用
-
:multiple=“false” 是否支持多个文件上传，false不支持
-
:on-success=“onUploadSuccess” 文件上传成功后要调用的方法
-
-:action="‘http://localhost:8202/admin/cmn/dict/importData’" 点击上传后要请求的接口路劲
<el-upload
:multiple="false"
:on-success="onUploadSuccess"
:action="'http://localhost:8202/admin/cmn/dict/importData'"
class="upload-demo">
点击上传
效果：
3.4.3、编写js代码
data() {
return {
list:[],//初始化数据,数据字典列表数组
dialogImportVisible:false//用于设置弹框是否弹出，false不弹出
}
},
总结
=============================================================
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。
个人将这段时间所学的知识，分为三个阶段：
第一阶段：HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
-
推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
-
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。
