ssm版的统计图Echart和easyexcel

勤奋上进的兔子

已于 2023-05-07 18:29:09 修改

阅读量1k

点赞数

分类专栏： SSM 文章标签： spring 开发语言

于 2022-11-27 12:00:09 首次发布

本文链接：https://blog.csdn.net/qq_55648724/article/details/128062226

版权

SSM 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

前言

一、统计图Echart

1.引入echarts.js文件在相应的网页

<script type="text/javascript" src="/js/echarts.min.js"></script>

2.定义DOM容器

<div id="main" style="width: 600px;height:400px;"></div>

3.初始化Echarts对象

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

4.改为通过异步请求动态获取数据

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

      //请求路径和返回数据函数
    $.get("/echarts/demo01",function(data){
        myChart.setOption({
            title: {
                text: '异步数据加载示例'
            },
            tooltip: {},
            legend: {},
            xAxis: {
                data: data.data.categories
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: data.data.values
                }
            ]
        });
    })


</script>

二、easyexcel

1.写操作就是导出功能

1.1先引入依赖


    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>easyexcel</artifactId>
      <version>3.0.5</version>
    </dependency>

1.2 封装要导出的数据对象

注意对象的字段要符合驼峰命名，还要是完整的有意义的单词

@Data
public class ExcelDemo {

    @ExcelProperty(value = "姓名")//标记excel标题内容
    private String name;

    @ExcelProperty(value = "年龄")
    private Integer age;

    @ExcelProperty(value = "性别")
    private String sex;

    @ExcelIgnore  //标记该属性不写入到excel表格中
    private String address;
}

1. 3 控制层

@Controller
@RequestMapping("/excel")
public class ExcelController {


    @PostMapping("/download")
    public void download(HttpServletResponse response,  @RequestBody ExcelDemo excel) throws IOException {

        System.out.println("excel = " + excel);
        // 这里注意 有同学反应使用swagger 会导致各种问题，请直接用浏览器或者用postman
        List<ExcelDemo> all=new ArrayList<>();
        all.add(excel);
        response.setContentType("application/vnd.ms-excel; charset=utf-8");
        response.setCharacterEncoding("utf-8");
        response.setHeader("Pragma", "public");
        response.setHeader("Cache-Control", "no-store");
        response.addHeader("Cache-Control", "max-age=0");
        // 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
        String fileName = URLEncoder.encode("测试", "UTF-8").replaceAll("\\+", "%20");
        response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");
        EasyExcel.write(response.getOutputStream(), ExcelDemo.class).sheet("模板").doWrite(all);

    }
    @PostMapping("/download2")
    public void download2(HttpServletResponse response, @RequestBody List<MedicalVo> medicalVos) throws IOException {


        // 请直接用浏览器或者用postman

        response.setContentType("application/vnd.ms-excel; charset=utf-8");
        response.setCharacterEncoding("utf-8");
        response.setHeader("Pragma", "public");
        response.setHeader("Cache-Control", "no-store");
        response.addHeader("Cache-Control", "max-age=0");
        // 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
        String fileName = URLEncoder.encode("测试", "UTF-8").replaceAll("\\+", "%20");
        response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");
        EasyExcel.write(response.getOutputStream(), MedicalVo.class).sheet("模板").doWrite(medicalVos);

    }



}

1.4 前端方法请求

//前端必须要用这种请求格式不然出错
                axios.post("/excel/download",this.format1,{responseType: 'blob'}).then(function (response){
                    let blob = new Blob([response.data])
                    console.log(blob)
                    let downloadElement = document.createElement('a');
                    let href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = '管理员.xlsx'; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载a
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(href); //释放掉blob对象

                })

2.读操作就是上传表格然后存到数据库里

2.1现在sring.xml里面配置文件上传解析器也需要引入依赖

<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>


<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="1000000000"/>
</bean>

2.2 编写读操作的监听器

// 有个很重要的点 DemoDataListener 不能被spring管理，要每次读取excel都要new,然后里面用到spring可以构造方法传进去
@Slf4j
public class DemoDataListener implements ReadListener<DemoData> {

    /**
     * 每隔5条存储数据库，实际使用中可以100条，然后清理list ，方便内存回收
     */
    private static final int BATCH_COUNT = 100;
    /**
     * 缓存的数据
     */
    private List<DemoData> cachedDataList = ListUtils.newArrayListWithExpectedSize(BATCH_COUNT);
    /**
     * 假设这个是一个DAO，当然有业务逻辑这个也可以是一个service。当然如果不用存储这个对象没用。
     */
    private DemoDAO demoDAO;

    public DemoDataListener() {
        // 这里是demo，所以随便new一个。实际使用如果到了spring,请使用下面的有参构造函数
        demoDAO = new DemoDAO();
    }

    /**
     * 如果使用了spring,请使用这个构造方法。每次创建Listener的时候需要把spring管理的类传进来
     *
     * @param demoDAO
     */
    public DemoDataListener(DemoDAO demoDAO) {
        this.demoDAO = demoDAO;
    }

    /**
     * 这个每一条数据解析都会来调用
     *
     * @param data    one row value. Is is same as {@link AnalysisContext#readRowHolder()}
     * @param context
     */
    @Override
    public void invoke(DemoData data, AnalysisContext context) {
        log.info("解析到一条数据:{}", JSON.toJSONString(data));
        cachedDataList.add(data);
        // 达到BATCH_COUNT了，需要去存储一次数据库，防止数据几万条数据在内存，容易OOM
        if (cachedDataList.size() >= BATCH_COUNT) {
            saveData();
            // 存储完成清理 list
            cachedDataList = ListUtils.newArrayListWithExpectedSize(BATCH_COUNT);
        }
    }

    /**
     * 所有数据解析完成了 都会来调用
     *
     * @param context
     */
    @Override
    public void doAfterAllAnalysed(AnalysisContext context) {
        // 这里也要保存数据，确保最后遗留的数据也存储到数据库
        saveData();
        log.info("所有数据解析完成！");
    }

    /**
     * 加上存储数据库
     */
    private void saveData() {
        log.info("{}条数据，开始存储数据库！", cachedDataList.size());
        demoDAO.save(cachedDataList);
        log.info("存储数据库成功！");
    }
}

2.3 保存到数据库的saveData方法，使用mybatis时，要自己写个批量插入方法，或者使用mybatis-plus

2.4 配置控制层

    @Autowired
    private DemoDAO demoDAO;
    
    @PostMapping("upload")
    @ResponseBody
    public String upload(MultipartFile file) throws IOException{
        EasyExcel.read(file.getInputStream(), ExcelDemo.class, new DemoDataListener(demoDAO)).sheet().doRead();
        return "success";
    }

2.5 前端实现

<el-upload action="/excel/upload"
    name="excelFile"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload">
    <el-button type="primary">上传文件</el-button>
</el-upload>


这里使用Element UI文件上传空间。

:before-upload=“beforeUpload” ：文件上传前调用该方法，一般是执行对文件的格式校验

:on-success=“handleSuccess” ：文件上传成功后执行的方法，一般是做上传成功后的信息提示

//上传之前进行文件格式校验
beforeUpload(file){
    if (file.type != undefined){
        const isXLS = file.type === 'application/vnd.ms-excel';
        if(isXLS){
            return true;
        }
        const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        if (isXLSX) {
            return true;
        }
        this.$message.error('上传文件只能是xls或者xlsx格式!');
        return false;
    }else {
        var name = file.name;
        var first = name.lastIndexOf(".");
        var namelength = name.length;//取到文件名长度
        var filesuffix = name.substring(first + 1, namelength );//截取获得后缀名
        console.log(filesuffix);
        if (filesuffix != "xlsx" || filesuffix != "xls"){
            this.$message.error('上传文件只能是xls或者xlsx格式!');
            return false;
        }else {
            return true;
        }
    }
},
//上传成功提示
    handleSuccess(response, file) {
        if(response.flag){
            this.$message({
                message: response.message,
                type: 'success'
            });
        }else{
            this.$message.error(response.message);
        }
        console.log(response, file, fileList);
    },