EasyExcel解析动态表头及导出

news2025/2/26 9:33:38

前言

excel文件导入及导出,是日常开发中经常遇到的需求。本次笔者以EasyExcel为例,针对在项目中遇到的动态表头解析及导出的场景,详细介绍具体的代码实现过程。

参考地址

https://github.com/alibaba/easyexcel

前端下载

  const download = () => {
    axios({
      method: 'GET',
      url: config.http.baseUrl + '/templateDownload',
      responseType: 'blob',
    })
      .then(function (res) {
      const content = res.data
      const blob = new Blob([content], { type: "application/application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" })
      const downloadElement = document.createElement("a");
      const href = window.URL.createObjectURL(blob);
      downloadElement.href = href;
      downloadElement.download = decodeURI(res.headers['filename']);
      document.body.appendChild(downloadElement);
      downloadElement.click();
      document.body.removeChild(downloadElement); // 下载完成移除元素
      window.URL.revokeObjectURL(href); // 释放掉blob对象
    })
  }

模板下载

excel文件导入功能,常常需要进行模板下载,在springboot项目中,程序是以jar包的形式运行的,所以有很多小伙伴常常

遇到在本地开发中能够实现下载功能,但部署到服务器的时候,找不到模板文件的问题。

@Override
public void templateDownload(HttpServletResponse response, HttpServletRequest request) {
    //获取要下载的模板名称
    String fileName = "批量导入模板.xlsx";
    //获取文件下载路径
    String filePath = "/template/template.xlsx";
    TemplateDownloadUtil.download(response, request, fileName, filePath);
}

import lombok.extern.slf4j.Slf4j;
import org.springframework.core.io.ClassPathResource;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.URLEncoder;

/**
 * 模板文件下载工具类
 * @author 
 * @date 2021/05/20 9:20
 */
@Slf4j
public class TemplateDownloadUtil {

    public static void download(HttpServletResponse response, HttpServletRequest request,String fileName,String filePath){
        try {
            response.setContentType("application/application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
            response.setCharacterEncoding("utf-8");
            // 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
            response.setHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode(fileName, "UTF-8"));
            response.setHeader("filename", URLEncoder.encode(fileName, "UTF-8"));
            response.setHeader("Access-Control-Expose-Headers", "filename,Content-Disposition");
          
            //获取文件的路径,此方式本地开发可以运行,服务器无法获取文件
//            String filePath = getClass().getResource("/template/template.xlsx").getPath();
//            FileInputStream input = new FileInputStream(filePath);
          
          	//在服务器中能够读取到模板文件
            ClassPathResource resource = new ClassPathResource(filePath);
            InputStream input = resource.getInputStream();
            OutputStream out = response.getOutputStream();
            byte[] b = new byte[2048];
            int len;
            while ((len = input.read(b)) != -1) {
                out.write(b, 0, len);
            }
            //修正 Excel在“xxx.xlsx”中发现不可读取的内容。是否恢复此工作薄的内容?如果信任此工作簿的来源,请点击"是"
//            response.setHeader("Content-Length", String.valueOf(input.getChannel().size()));
            input.close();
        } catch (Exception e) {
            log.error("下载模板失败 :", e);
        }
    }

}

EasyExcel动态表头解析

EasyExcel简单的读文件,官网中已经有详细的说明,本文不再赘述,详细操作参见

本文主要针对笔者遇到的复杂表头及动态表头进行讲解。

模板示例

在这里插入图片描述

解析


import com.alibaba.excel.context.AnalysisContext;
import com.alibaba.excel.event.AnalysisEventListener;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import lombok.Data;
import lombok.extern.slf4j.Slf4j;

import java.time.LocalDateTime;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;

/**
 * 发薪单上传excel读取类
 *
 * @author yupf
 * @description Listener 不能被spring管理,要每次读取excel都要new,然后里面用到spring可以构造方法传进去
 */
@Slf4j
@Data
public class BatchReadListener extends AnalysisEventListener<Map<Integer, String>> {

    /**
     * 每隔500条存储数据库,然后清理list ,方便内存回收
     */
    private static final int BATCH_COUNT = 500;
    //Excel数据缓存结构
    private List<Map<Integer, Map<Integer, String>>> list = new ArrayList<>();
    //Excel表头(列名)数据缓存结构
    private Map<Integer, String> headTitleMap = new HashMap<>();


    /**
     * 假设这个是一个DAO,当然有业务逻辑这个也可以是一个service。当然如果不用存储这个对象没用。
     */
    private DbFileBatchService dbFileBatchService;
    private DbFileContentService dbFileContentService;
    private FileBatch fileBatch;
    private int total = 0;

    /**
     * 如果使用了spring,请使用这个构造方法。每次创建Listener的时候需要把spring管理的类传进来
     */
    public BatchReadListener(DbFileBatchService dbFileBatchService, DbFileContentService dbFileContentService, FileBatch fileBatch) {
        this.dbFileBatchService = dbFileBatchService;
        this.dbFileContentService = dbFileContentService;
        this.fileBatch = fileBatch;
    }

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

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

    /**
     * 解析表头数据
     **/
    @Override
    public void invokeHeadMap(Map<Integer, String> headMap, AnalysisContext context) {
        log.info("表头数据:{}", JSONObject.toJSONString(headMap));
        headTitleMap = headMap;
    }

    /**
     * 加上存储数据库
     */
    private void saveData() {
        log.info("{}条数据,开始存储数据库!", list.size());
        FileContent fileContent = null;
        List<FileContent> fileContentList = list.stream().flatMap(
            integerMap -> integerMap.entrySet().stream().map(entrySet -> {
                //entrySet.getKey()获取的是内容的RowIndex,实际的行数需要根据表头数进行处理
                Integer rowIndex = entrySet.getKey();
                Map<Integer, String> value = entrySet.getValue();
                log.info(JSONObject.toJSONString(value));
                fileContent = new FileContent();
                fileContent.setBatchId(fileBatch.getId());
                fileContent.setBatchNo(fileBatch.getBatchNo());
                //固定字段入库
                fileContent.setName(value.get(0) != null ? value.get(0).trim() : "");
                fileContent.setCertNo(value.get(1) != null ? value.get(1).trim() : "");
                fileContent.setRealAmount(value.get(2) != null ? value.get(2).trim() : "");
                //所有动态表头数据转为JSON串入库
                fileContent.setFieldsValue(JSONObject.toJSONString(value));
                //取实际的内容rowIndex
                fileContent.setRowNum(rowIndex + 1);
                fileContent.setCreateTime(LocalDateTime.now());
                return xcSalaryFileContent;
        	}
        )).collect(Collectors.toList());
        log.info(JSONObject.toJSONString(fileContentList));
        dbFileContentService.saveBatch(fileContentList);
        log.info("存储数据库成功!");
    }

}

    BatchReadListener listener = new BatchReadListener(dbFileBatchService, dbFileContentService, fileBatch);
    try {
        //注:headRowNumber默认为1,现赋值为2,即从第三行开始读取内容
        EasyExcel.read(fileInputStream, listener).headRowNumber(2).sheet().doRead();
    } catch (Exception e) {
        log.info("EasyExcel解析文件失败,{}", e);
        throw new CustomException("文件解析失败,请重新上传");
    }
    //获取表头信息进行处理
    Map<Integer, String> headTitleMap = listener.getHeadTitleMap();
    //获取动态表头信息
    List<String> headList = headTitleMap.keySet().stream().map(key -> {
        String head = headTitleMap.get(key);
        log.info(head);
        return head == null ? "" : head.replace("*", "");
    }).collect(Collectors.toList());
    //可以对表头进行入库保存,方便后续导出

综上,动态表头即可完成解析。

EasyExcel动态表头导出

导出示例

在这里插入图片描述

获取动态头

     private List<List<String>> getFileHeadList( FileBatch fileBatch) {
         String head = fileBatch.getFileHead();
         List<String> headList = Arrays.asList(head.split(","));
         List<List<String>> fileHead = headList.stream().map(item -> 	concatHead(Lists.newArrayList(item))).collect(Collectors.toList());
         fileHead.add(concatHead(Lists.newArrayList("备注")));
         return fileHead;
     }
    /**
     * 填写须知
     * @param headContent
     * @return
     */
	private List<String> concatHead(List<String> headContent) {
        String remake = "填写须知:                                                                                                \n" +
                "1.系统自动识别Excel表格,表头必须含有“企业账户号”、“企业账户名”、“实发金额”;\n" +
                "2.带 “*” 为必填字段,填写后才能上传成功;\n" +
                "3.若需上传其他表头,可自行在“实发金额”后添加表头,表头最多可添加20个,表头名称请控制在8个字以内;\n" +
                "4.填写的表头内容不可超过30个字;\n" +
                "5.实发金额支持填写到2位小数;\n" +
                "6.每次导入数据不超过5000条。\n" +
                "\n" +
                "注:请勿删除填写须知,删除后将导致文件上传失败\n" +
                "\n" +
                "表头示例:";
        headContent.add(0, remake);
        return headContent;
    }

获取数据

    List<FileContent> fileContentList = dbFileContentService.list(
        Wrappers.<FileContent>lambdaQuery()
        .eq(FileContent::getBatchId, fileBatch.getId())
        .orderByAsc(FileContent::getRowNum)
    );
    List<List<Object>> contentList = fileContentList.stream().map(fileContent -> {
        List<Object> rowList = new ArrayList<>();
        String fieldsValue = fileContent.getFieldsValue();
        JSONObject contentObj = JSONObject.parseObject(fieldsValue);
        for (int columnIndex = 0 , length = headList.size(); columnIndex < length; columnIndex++) {
            Object content = contentObj.get(columnIndex);
            rowList.add(content == null ? "" : content);
        }
        rowList.add(fileContent.getCheckMessage());
        return rowList;
    }).collect(Collectors.toList());

单元格格式设置


import com.alibaba.excel.metadata.data.DataFormatData;
import com.alibaba.excel.metadata.data.WriteCellData;
import com.alibaba.excel.write.handler.context.CellWriteHandlerContext;
import com.alibaba.excel.write.metadata.style.WriteCellStyle;
import com.alibaba.excel.write.metadata.style.WriteFont;
import com.alibaba.excel.write.style.HorizontalCellStyleStrategy;
import org.apache.poi.ss.usermodel.BorderStyle;
import org.apache.poi.ss.usermodel.HorizontalAlignment;
import org.apache.poi.ss.usermodel.IndexedColors;

import java.util.List;

/**
 * 设置表头和填充内容的样式
 */
public class CellStyleStrategy extends HorizontalCellStyleStrategy {

    private final WriteCellStyle headWriteCellStyle;
    private final WriteCellStyle contentWriteCellStyle;

    /**
     * 操作列
     */
    private final List<Integer> columnIndexes;

    public CellStyleStrategy(List<Integer> columnIndexes,WriteCellStyle headWriteCellStyle, WriteCellStyle contentWriteCellStyle) {
        this.columnIndexes = columnIndexes;
        this.headWriteCellStyle = headWriteCellStyle;
        this.contentWriteCellStyle = contentWriteCellStyle;
    }

    //设置头样式
    @Override
    protected void setHeadCellStyle( CellWriteHandlerContext context) {
        // 获取字体实例
        WriteFont headWriteFont = new WriteFont();
        headWriteFont.setFontName("宋体");
        //表头不同处理
        if (columnIndexes.get(0).equals(context.getRowIndex())) {
            headWriteCellStyle.setFillForegroundColor(IndexedColors.WHITE.getIndex());
            headWriteCellStyle.setHorizontalAlignment(HorizontalAlignment.LEFT);
            headWriteFont.setFontHeightInPoints((short) 12);
            headWriteFont.setBold(false);
            headWriteFont.setFontName("宋体");
        }else{
            headWriteCellStyle.setFillForegroundColor(IndexedColors.GREY_25_PERCENT.getIndex());
            headWriteCellStyle.setHorizontalAlignment(HorizontalAlignment.CENTER);
            headWriteFont.setFontHeightInPoints((short) 11);
            headWriteFont.setBold(false);
            headWriteFont.setFontName("微软雅黑");
        }
        headWriteCellStyle.setWriteFont(headWriteFont);
        DataFormatData dataFormatData = new DataFormatData();
        dataFormatData.setIndex((short)49);
        headWriteCellStyle.setDataFormatData(dataFormatData);
        if (stopProcessing(context)) {
            return;
        }
        WriteCellData<?> cellData = context.getFirstCellData();
        WriteCellStyle.merge(headWriteCellStyle, cellData.getOrCreateStyle());
    }

    //设置填充数据样式
    @Override
    protected void setContentCellStyle(CellWriteHandlerContext context) {
        WriteFont contentWriteFont = new WriteFont();
        contentWriteFont.setFontName("宋体");
        contentWriteFont.setFontHeightInPoints((short) 11);
        //设置数据填充后的实线边框
        contentWriteCellStyle.setWriteFont(contentWriteFont);
        contentWriteCellStyle.setBorderLeft(BorderStyle.THIN);
        contentWriteCellStyle.setBorderTop(BorderStyle.THIN);
        contentWriteCellStyle.setBorderRight(BorderStyle.THIN);
        contentWriteCellStyle.setBorderBottom(BorderStyle.THIN);
        DataFormatData dataFormatData = new DataFormatData();
        dataFormatData.setIndex((short)49);
        contentWriteCellStyle.setDataFormatData(dataFormatData);
        contentWriteCellStyle.setHorizontalAlignment(HorizontalAlignment.CENTER);
        WriteCellData<?> cellData = context.getFirstCellData();
        WriteCellStyle.merge(contentWriteCellStyle, cellData.getOrCreateStyle());
    }
}


行高设置


import com.alibaba.excel.write.style.row.AbstractRowHeightStyleStrategy;
import org.apache.poi.ss.usermodel.Row;

/**
 * 设置表头的自动调整行高策略
 */
public class CellRowHeightStyleStrategy extends AbstractRowHeightStyleStrategy {

    @Override
    protected void setHeadColumnHeight(Row row, int relativeRowIndex) {
        //设置主标题行高为17.7
        if(relativeRowIndex == 0){
            //如果excel需要显示行高为15,那这里就要设置为15*20=300
            row.setHeight((short) 3240);
        }
    }

    @Override
    protected void setContentColumnHeight(Row row, int relativeRowIndex) {
    }
}

列宽度自适应

如果是简单表头,可以使用EasyExcel中的LongestMatchColumnWidthStyleStrategy()来实现。

EasyExcel.write(fileName, LongestMatchColumnWidthData.class)
    .registerWriteHandler(new LongestMatchColumnWidthStyleStrategy()).sheet("模板").doWrite(dataLong());

如果是复杂表头,就需要自己来实现,代码如下:


import com.alibaba.excel.enums.CellDataTypeEnum;
import com.alibaba.excel.metadata.Head;
import com.alibaba.excel.metadata.data.CellData;
import com.alibaba.excel.metadata.data.WriteCellData;
import com.alibaba.excel.write.metadata.holder.WriteSheetHolder;
import com.alibaba.excel.write.style.column.AbstractColumnWidthStyleStrategy;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.collections.CollectionUtils;
import org.apache.poi.ss.usermodel.Cell;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @author yupf
 * @description
 * @date 2022/9/7 18:48
 */
@Slf4j
public class CellWidthStyleStrategy extends AbstractColumnWidthStyleStrategy {
    private Map<Integer, Map<Integer, Integer>> CACHE = new HashMap<>();

    @Override
    protected void setColumnWidth(WriteSheetHolder writeSheetHolder, List<WriteCellData<?>> cellDataList, Cell cell, Head head, Integer relativeRowIndex, Boolean isHead) {
        Map<Integer, Integer> maxColumnWidthMap = CACHE.get(writeSheetHolder.getSheetNo());
        if (maxColumnWidthMap == null) {
            maxColumnWidthMap = new HashMap<>();
            CACHE.put(writeSheetHolder.getSheetNo(), maxColumnWidthMap);
        }
        if (isHead) {
            if(relativeRowIndex.intValue() == 1){
                Integer length = cell.getStringCellValue().getBytes().length;
                Integer maxColumnWidth = maxColumnWidthMap.get(cell.getColumnIndex());
                if (maxColumnWidth == null || length > maxColumnWidth) {
                    maxColumnWidthMap.put(cell.getColumnIndex(), length);
                    writeSheetHolder.getSheet().setColumnWidth(cell.getColumnIndex(), length * 300);
                }
            }
        }else{
            Integer columnWidth = this.dataLength(cellDataList, cell, isHead);
            if (columnWidth >= 0) {
                if (columnWidth > 255) {
                    columnWidth = 255;
                }
                Integer maxColumnWidth = maxColumnWidthMap.get(cell.getColumnIndex());
                if (maxColumnWidth == null || columnWidth > maxColumnWidth) {
                    maxColumnWidthMap.put(cell.getColumnIndex(), columnWidth);
                    writeSheetHolder.getSheet().setColumnWidth(cell.getColumnIndex(), columnWidth * 256);
                }
            }
        }
    }

    private Integer dataLength(List<WriteCellData<?>> cellDataList, Cell cell, Boolean isHead) {
        if (isHead) {
            return cell.getStringCellValue().getBytes().length;
        } else {
            CellData cellData = cellDataList.get(0);
            CellDataTypeEnum type = cellData.getType();
            if (type == null) {
                return -1;
            } else {
                switch (type) {
                    case STRING:
                        return cellData.getStringValue().getBytes().length;
                    case BOOLEAN:
                        return cellData.getBooleanValue().toString().getBytes().length;
                    case NUMBER:
                        return cellData.getNumberValue().toString().getBytes().length;
                    default:
                        return -1;
                }
            }
        }
    }
}

写入文件

EasyExcel.write(response.getOutputStream())
    .head(head)
    .registerWriteHandler(new CellRowHeightStyleStrategy())   //设置行高的策略
    .registerWriteHandler(new CellStyleStrategy(Arrays.asList(0,1),new WriteCellStyle(), new WriteCellStyle()))
    .registerWriteHandler(new CellWidthStyleStrategy())
    .sheet(sheetName)
    .doWrite(list);

总结

以上便是EasyExcel解析动态表头及导出的整个过程。

在使用过程中,笔者的感受是,上手难度很低,很适合新手去做简单的表格解析,当然,如果你的需求有复杂的格式,EasyExcel也提供了api,能够很好的满足需要。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405389.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JavaScript判断对象是否为空对象的几种方法

目录 1、空对象对应的字符串为 "{}" 2、for in 3、jquery 的 isEmptyObject()方法 4、Object.getOwnPropertyNames() 5、ES6 的 Object.keys() JSON.stringify()扩展 1、第一大特性 小结 2、第二大特性 3、第三大特性 4、第四大特性 5、第五大特性 6、第…

Vue实战——使用代理服务器解决跨域问题——No‘Access-Control-Allow-Origin‘ header is present on the requested resource

概论&#xff1a; 目录 一、跨域问题是怎么产生的 1.1 跨域问题&#xff1a; 1.2 解决办法 三、开启代理服务器 第一种方式&#xff1a;&#xff08;存在弊端&#xff09; 细节问题&#xff1a;&#xff08;解释两个弊端&#xff09; 第二种方式&#xff1a;&#xff08…

el-input设置必填提示(单个多个)

有两种:一种是多个el-input通过同一个el-form表单来限制,这种用得最多的地方就是添加和修改功能;另一种是每个el-input通过各自的el-form表单来限制,这种通常是用在动态添加多个输入框等功能上&#xff0c;话不多说&#xff0c;上才艺噻. 第一种&#xff08;多个el-input同时限…

【JavaScript】JS实用案例分享:DOM节点转JSON数据 | 标签输入框

&#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff08;源创征文一等奖作品&#xff09;&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&#xff09; &#x1f5a5;️ TypeScript知识总结&…

微信小程序--》tabBar底部栏

&#x1f3cd;️作者简介&#xff1a;大家好&#xff0c;我是亦世凡华、渴望知识储备自己的一名在校大学生 &#x1f6f5;个人主页&#xff1a;亦世凡华、 &#x1f6fa;系列专栏&#xff1a;微信小程序 &#x1f6b2;座右铭&#xff1a;人生亦可燃烧&#xff0c;亦可腐败&…

搭建博客,基于vue3 的 vitepress 轻松搞定

Ⅰ、什么是vitepress &#x1f48e; vitepress 使用场景 简单的说 &#xff0c;只要 会用 markdown 语法&#xff0c;就能构建自己的 「博客、笔记、使用文档」等系统 &#xff1b; ✨ vitepress 优势 优势介绍傻瓜式操作只需要配置 菜单 和 对应的 markdown 就能实现博客、笔…

【Vue脚手架安装教程】

文章目录前言一、安装Node.js二、配置淘宝镜像安装cnpm,将npm设置为淘宝镜像&#xff1a;二、安装vue/cli检查是否安装成功&#xff1a; vue -V 或者 vue --version ![在这里插入图片描述](https://img-blog.csdnimg.cn/7f66366eba81456388fcf28871db0650.png)三、 创建一个vue…

Chrome浏览器的跨域设置

做前后端分离的开发的时候&#xff0c;出于一些原因往往需要将浏览器设置成支持跨域的模式&#xff0c;而且chrome浏览器支持可跨域的设置&#xff0c;但是新版本的chrome浏览器提高了跨域设置的门槛&#xff0c;原来的方法不再适用了。其实网上也有很多大神总结的chrome跨域设…

webpack的面试题(吐血整理)

以下为整理的webpack面试题&#xff0c;如有不足之处&#xff0c;还请大家多多指正。 一、webpack的构建流程 二、对webpack的理解 webpack是一个打包模块化js的工具&#xff0c;在webpack里一切文件皆模块&#xff0c;通过loader转换文件&#xff0c;通过plugin注入钩子&#…

最常见的六种跨域解决方案

目录&#xff1a; 前言&#xff1a;什么是跨域&#xff1f;JSONPCORS搭建Node代理服务器Nginx反向代理postMessageWebsocket总结 前言&#xff1a;什么是跨域&#xff1f; 跨域就是当在页面上发送ajax请求时&#xff0c;由于浏览器同源策略的限制&#xff0c;要求当前页面和…

jQuery模态弹窗插件(jquery-confirm)

前言 今天为大家分享一款开源的非常轻量且精美的jQuery模态弹窗插件&#xff1a;jquery-confirm&#xff0c;它包含Bootstrap,Material等多种主题供选择。 如果你的前端项目中还在使用jQuery&#xff0c;那么jquery-confirm是你模态弹窗的完美选择。 下面我们就来零距离感受…

IDEA如何运行SpringBoot项目(超详细截图)

【辰兮要努力】&#xff1a;hello你好我是辰兮&#xff0c;很高兴你能来阅读&#xff0c;昵称是希望自己能不断精进&#xff0c;向着优秀程序员前行&#xff01; 博客来源于项目以及编程中遇到的问题总结&#xff0c;偶尔会有读书分享&#xff0c;我会陆续更新Java前端、后台、…

vue中组件的props属性(详)

今天这篇文章&#xff0c;让你彻底学会props属性…… props主要用于组件的传值&#xff0c;他的工作就是为了接收外面传过来的数据&#xff0c;与data、el、ref是一个级别的配置项。 问题一&#xff1a;那props具体是怎么使用呢&#xff1f;原理又是什么呢&#xff1f;往下看…

css绘制3D炫动ikun

今天做一个3D版的ikun。 先准备图片一张 代码浅析 页面整体div.contrainer,舞台div.stage,控制盒子div.control,图片盒子div.imgWrap,js载入div.img列表。 <div class"contrainer"><div class"stage"><div class"control">…

vue项目引入svg图标(完整步骤)

1. 安装svg依赖 在vue中首先需要安装可以加载svg的依赖。 npm安装&#xff1a;npm install svg-sprite-loader --save-dev 2. 创建svg文件夹存放svg图标 创建icons文件夹&#xff0c;在icons文件夹下创建svg文件夹存放本地svg图标。 3. vue.config.js 中配置svg图片 vue.c…

vue中使用echarts实现动态数据绑定、获取后端接口数据

之前几篇echarts的文章是实现了静态的柱状图、折线图、饼状图、地图&#xff0c;在项目中我们肯定是需要获取后端接口&#xff0c;将后端返回的数据显示在图表上&#xff0c;所以这次就记录一下如何实现echarts的动态数据绑定。 简单来讲&#xff0c;就是从接口获取到的数据&a…

Vue生命周期总结(四个阶段,八个钩子函数)

生命周期就是组件或者实例&#xff0c;从创建到被销毁&#xff08;初始化化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载&#xff09;的一系列过程&#xff0c;我们称这是Vue的生命周期 文章目录一、Vue的生命周期阶段二、生命周期钩子函数1. beforeCreate2. created3. be…

ES6+--》熟知JS中的async函数

目录 async函数 await 表达式 async使用形式 async读取文件 async发送AJAX请求 与生成器(Generator)相比 async函数 async函数的返回值为 promise 对象&#xff0c;promise对象的结果由async函数执行的返回值决定。async函数能使得异步操作变得更加方便&#xff0c;简而…

前端开发常用哪些工具软件?

前端开发必备工具&#xff0c;一篇文章一网打尽 文章目录 一、前端提高“生产力”工具 1.WebStorm 2. 远程开发 - VSCode 3. 接口测试 - Postman 4.API在线文档生成和测试 - SwaggerUI 5.抓包工具 - Wireshark 6.通用数据库管理 - DBeaver 7.MD编辑器 - Typora 8.虚拟…

【数字孪生】UE4虚幻引擎与前端Web页面的结合

目录介绍基础准备鼠标穿透设置备注介绍 UE初学者&#xff0c;非专业UE工程师&#xff0c;在项目中需要使用UE4结合前端页面完成三维场景与前端图表的联动效果&#xff0c;自学总结方法&#xff0c;使用的版本为UE4.26。 基础准备 1. 使用Vue、Echarts创建前端页面&#xff0…