android java与vue通信 vue与java对接

转载

mob64ca1411a6fc 2024-02-19 07:54:22

文章标签 android java与vue通信 java vue.js spring boot excel 文章分类 Android 移动开发

文章目录

前言
一、JAVA后端接口设计
二、Vue前端页面设计
总结

前言

实现前端页面基于 Vue，后端基于 JAVA ，最终通过前台页面点击下载excel模板文件，调用后端接口返回模板文件的输出流，将模板excel下载到本地。

需要注意的是：因为在实际应用场景中，后端是用SpringBoot打Jar包的方式部署到服务器中，所以需要后端适配对应的模板文件能够在服务器中，能够正常读取；本地运行代码的时候，需要注意，先使用 mvn clean，然后再 mvn install之后再运行代码，不然可能会报找不到对应的excel模板文件

一、JAVA后端接口设计

1.引入excel模板文件

android java与vue通信 vue与java对接_spring boot

存在excel模板文件的路径（resources目录下）：

android java与vue通信 vue与java对接_excel_02

template/excel/template.xlsx

2.excel模板下载接口实现

controller层接口设计：

@RestController
@RequiredArgsConstructor
@Api(tags = "excel：excel操作相关控制")
@RequestMapping("/api/excel")
public class ExcelController {

    @Autowired
    private IExcelService excelService;

    @GetMapping("/excelTemplate")
    @ApiOperation("下载药物的excel导入模板")
    public void downloadExcelTemplate(HttpServletResponse response) throws IOException {
        excelService.downloadExcelTemplate(response);
    }
}

具体的业务实现逻辑：

package me.zhengjie.modules.excel.service.impl;

import cn.hutool.core.io.IoUtil;
import me.zhengjie.modules.excel.service.IExcelService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Service;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedInputStream;
import java.io.InputStream;
import java.net.URLEncoder;


@Service
public class ExcelServiceImpl implements IExcelService {

    private static final Logger LOGGER = LoggerFactory.getLogger(ExcelServiceImpl.class);

    private static final String EXCEL_TEMPLATE_PATH = "template/excel/template.xlsx";


    @Override
    public void downloadExcelTemplate(HttpServletResponse response) {
        InputStream inputStream = this.getClass().getClassLoader().getResourceAsStream(EXCEL_TEMPLATE_PATH);

        ServletOutputStream out = null;
        BufferedInputStream bis = new BufferedInputStream(inputStream);
        int buffer = 1024 * 10;
        byte[] data = new byte[buffer];
        try {
            String fileName = URLEncoder.encode("template.xlsx", "UTF-8");
            response.setContentType("multipart/form-data");
            response.setHeader("Content-Disposition", "attachment;fileName=" + fileName);
            int read;
            out = response.getOutputStream();
            while ((read = bis.read(data)) != -1) {
                out.write(data, 0, read);
            }
            out.flush();
        } catch (Exception ex) {
            IoUtil.close(out);
            LOGGER.error("下载excel导入模板失败", ex);
        } finally {
            IoUtil.close(inputStream);
        }
    }
}

3.启动后端服务

后端的接口读取Excel设计成从Jar包的路径中获取的，所以本地启动的时候，先执行 mvn clean, 然后再执行 mvn install, 最后再启动程序

android java与vue通信 vue与java对接_excel_03

android java与vue通信 vue与java对接_java_04

二、Vue前端页面设计

1.excel模板下载接口定义

export function downloadExcelTemplate() {
  return request({
    url: '/api/excel/excelTemplate',
    method: 'get',
    responseType: 'blob'
  })
}

2.前端的下载按钮设计

<el-button
      slot="left"
      type="warning"
      size="mini"
      style="margin-left: 60px"
      @click="downLoadTemplate()"
    >
      导出模板
    </el-button>

3.vue下载模板文件的方法

downLoadTemplate() {
      downloadExcelTemplate().then(res => {
        console.log(res)
        const fileName = '模板文件'
        const url = window.URL.createObjectURL(new Blob([res]))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', fileName + '.xlsx')
        document.body.appendChild(link)
        link.click()
        // 下载完成移除元素
        // document.body.removeChild(link)
        // 释放掉blob对象
        // window.URL.revokeObjectURL(url)
      }).catch(err => {
        console.log(err.response.data.message)
      })
    }