Vue2+Element实现Excel文件上传下载预览【超详细图解】
目录
一、需求背景
二、落地实现
1.文件上传
图片示例
HTML代码
业务代码
2.文件下载
图片示例
方式一:代码
方式二:代码
3.文件预览
图片示例
方式一:代码
方式二:代码
一、需求背景
在一个愉快的年后,需求经理提出需要完成对单个Excel文件的上传、下载、预览的功能,对于一个没写过下载和预览的后端来说,真的十分痛苦,经过不断百度+努力看别人的博客,最终实现如下图所示
二、落地实现
1.文件上传
图片示例
HTML代码
<template><el-upload v-model="form.upload" ref="upload" name="file" action="" drag :on-remove="handleRemove" :on-success="handleSuccess" multiple :limit="1" accept=".xls,.xlsx" :before-upload="beforeUpload" :http-request="handleRequest" :on-exceed="handleExceed"><i class="el-icon-upload" style="color: #409eff"></i><div class="el-upload__tip"><span style="color: #333333;font-size: 13px">点击或将文件拖拽到这里上传</span></div><div class="el-upload__tip"><span style="color: #999999;font-size: 13px">仅支持单文件上传,文件上传行数最多1000,上传格式支持:.xls .xlsx</span></div></el-upload>
<template>
参数解释
name="file":是传到后端时,它接收这个文件的参数名叫file,本人没有仔细研究,因为在调接口时,可个性化定制参数名,后续贴的代码会提到。
action="":这个Element官方文档写的是一个上传的固定链接,假的,用不了。通常在开发中,也是自定义上传逻辑,所以这里置空。
drag:启用拖拽上传,Element默认是false,直接写drag,不写:drag="true"就是true了。
show-file-list:显示已上传文件列表,就是上传框下面的那行文件名,Element默认是false
multiple:支持多选文件,通常与limit搭配使用。
:limit="1":多选文件数量,如只需要单个文件就设置1。
accept=".xls,.xlsx":接受上传的文件类型,我的需求是只要Excel的。
:on-remove="handleRemove":文件列表移除文件时的方法,就是文件列表右边那个小X触发时调用的。
:on-success="handleSuccess":文件上传成功时的方法,比如弹出一个上传成功提示。
:before-upload="beforeUpload":上传文件之前的方法,通常用于上传文件前对文件的校验。
:http-request="handleRequest":自定义上传方式的方法,比如远程调用。
:on-exceed="handleExceed":文件超出个数限制时的方法,比如弹出一个仅支持单个文件的提示。
class="el-upload__tip":这个是Element封装好的样式,我的需求是需要文字在上传框里显示,所以都用el-upload__tip,官方文档还有个框外的用el-upload__text。
业务代码
export default {name: "upload-dialog",data() {return {};},methods: {handleSuccess(response, file, fileList) {// 文件上传成功的回调this.$message.success("上传成功");},handleRemove(file, fileList) {console.log("删除", file, fileList);// 看需要是否调用删除接口},beforeUpload(file) {// 在这里进行个性化校验const maxSize = 100 * 1024 * 1024; // 100MB(以字节为单位)if (file.size > maxSize) {// 这里可以添加你的提示逻辑(比如 Element UI 的 Message 警告)this.$message.warning("文件大小不能超过 100 MB");return false; // 阻止上传}return true;},handleRequest(option) {// 自定义上传函数,用于并发上传const formData = new FormData();// 这个file就是后端的接收这个文件的参数名,如果为其他,则设成其他formData.append("file", option.file);// 如果还需要其他参数比如id,name,就在这里继续加// formData.append("id", xxx);// 发送请求,这个uploadApi是import进来的,自己写uploadApi(formData).then(res => {// 自定义上传方法的话,需要手动触发文件上传成功的钩子,不然文件状态会一直处于readyoption.onSuccess(null, option.file);}).catch(error => {// 自定义上传方法的话,需要手动触发文件上传失败的钩子,不然文件状态会一直处于readyoption.onError(error, option.file, null);});},// 文件超出个数限制时的钩子handleExceed(files, fileList) {this.$message.warning("仅支持单个文件上传");},},
};
2.文件下载
图片示例
我是通过<a></a>标签去实现文件下载的,如果想通过点击按钮实现,那么,在按钮里面套塞<a></a>即可
方式一:代码
<template><a :href="fileUrl" download>>文件</a>
</template>
export default {data() {return {fileUlr: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'};},
}
这个href放是一个像http://static.shanhuxueyuan.com/demo/excel.xlsx这样的cdn文件地址,点击就可以直接下载到本地。
如果需要通过二进制流、Blob对象实现的话,则自定义按钮,触发方法去调用。(详情请看方式二)
方式二:代码
<template><el-button type="text" @click="downloadFile(fileName)"><span style="color: #0000FF">文件名</span></el-button>
</template>
export default {data() {return {};},methods: {downloadFile(fileName) {// 生成随机数据(示例:5行3列)const data = [["Name", "Age", "Join Date"], // 表头...Array.from({length: 5}, (_, i) => [`User ${i + 1}`, // 姓名Math.floor(Math.random() * 30 + 20), // 随机年龄 (20-50)new Date().toISOString().split("T")[0], // 当前日期]),];// 创建工作表const worksheet = XLSX.utils.aoa_to_sheet(data);// 创建工作簿const workbook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");// 生成 Excel 文件const excelBuffer = XLSX.write(workbook, {bookType: "xlsx",type: "array",});const blob = new Blob([excelBuffer], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",});// 创建一个链接元素const link = document.createElement('a');link.href = URL.createObjectURL(blob);link.download = fileName; // 设置下载的文件名// 触发下载link.click();// 释放 URL 对象URL.revokeObjectURL(link.href);this.$message.success("文件下载成功");},}
}
3.文件预览
图片示例
我的需求是:点击文件名,浏览器新打开一个标签页,展示文件内容。
这个需要在route中额外添加一个路由映射
{path: '/preview',name: 'preview',meta: { title: '文件预览', requiresAuth: false },component: () => import('@/views/preview.vue')
},
还需要额外结合@vue-office/excel写页面
npm install @vue-office/excel vue-demi
方式一:代码
入口代码
<template><el-button type="text"><a :href="'#/preview?fileUrl='+fileUrl" target="_blank">详情</a></el-button>
</template>
export default {data() {return {fileUlr: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'};},
}
页面代码
<template><vue-office-excel :src="excel" @rendered="rendered" @error="errorHandler"/>
</template>
<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
//引入相关样式
import "@vue-office/excel/lib/index.css";
//引入解析Excel文件组件
import XLSX from "xlsx";export default {components: {VueOfficeExcel,},data() {return {// 设置文档地址,支持三种格式// string: Excel文件的网络地址,如cdn地址// ArrayBuffer:以ArrayBuffer格式读取Excel文件的内容// Blob:以Blob格式读取Excel文件的内容excel: "",};},mounted() {this.getExcel();},methods: {rendered() {console.log("渲染完成");},errorHandler() {console.log("渲染失败");},getExcel() {this.excel = this.$route.query.fileUrl;}},
};
</script>
这样直接就是浏览器新打开一个标签页展示文件内容。与文件下载十分相似。
如果需要使用二进制流、Blob对象打开的话。(详情请看方式二)
方式二:代码
入口代码
<template><el-button type="text"><a :href="'#/preview'" target="_blank">详情</a></el-button>
</template>
页面代码
<template><vue-office-excel :src="excel" @rendered="rendered" @error="errorHandler"/>
</template>
<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
//引入相关样式
import "@vue-office/excel/lib/index.css";
//引入解析Excel文件组件
import XLSX from "xlsx";export default {components: {VueOfficeExcel,},data() {return {// 设置文档地址,支持三种格式// string: Excel文件的网络地址,如cdn地址// ArrayBuffer:以ArrayBuffer格式读取Excel文件的内容// Blob:以Blob格式读取Excel文件的内容excel: "",};},mounted() {this.createRandomExcel();},methods: {rendered() {console.log("渲染完成");},errorHandler() {console.log("渲染失败");},// 创建随机 Excel 文件createRandomExcel() {// 生成随机数据(示例:5行3列)const data = [["Name", "Age", "Join Date"], // 表头...Array.from({length: 5}, (_, i) => [`User ${i + 1}`, // 姓名Math.floor(Math.random() * 30 + 20), // 随机年龄 (20-50)new Date().toISOString().split("T")[0], // 当前日期]),];// 创建工作表const worksheet = XLSX.utils.aoa_to_sheet(data);// 创建工作簿const workbook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");// 生成 Excel 文件const excelBuffer = XLSX.write(workbook, {bookType: "xlsx",type: "array",});const blob = new Blob([excelBuffer], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",});this.excel = blob;},},
};
</script>
上述代码,也适用于展示Word和PPT文件,修改对应的格式即可。
相关文章:
Vue2+Element实现Excel文件上传下载预览【超详细图解】
目录 一、需求背景 二、落地实现 1.文件上传 图片示例 HTML代码 业务代码 2.文件下载 图片示例 方式一:代码 方式二:代码 3.文件预览 图片示例 方式一:代码 方式二:代码 一、需求背景 在一个愉快的年后ÿ…...
迪米特法则
迪米特法则 迪米特法则又叫最少知识原则。 只和你的直接朋友交流,不和 ‘陌生人’ 说话。 含义:如果两个软件实体无需直接通信,那么就不应当发生直接的相互调用,可以通过第三方转发该调用。其目的是降低类之间的耦合度ÿ…...
【Swift 算法实战】判断数组中是否存在重复元素
网罗开发 (小红书、快手、视频号同名) 大家好,我是 展菲,目前在上市企业从事人工智能项目研发管理工作,平时热衷于分享各种编程领域的软硬技能知识以及前沿技术,包括iOS、前端、Harmony OS、Java、Python等…...
机器学习数学基础:35.效度
效度全攻略:从理论到实践的深度剖析 一、效度(Validity)入门:揭开精准测量的面纱 效度,简单来说,就是测量工具能否准确命中目标的“命中率”。想象你手中有一把枪(测量工具)&#…...
excel单、双字节字符转换函数(中英文输入法符号转换)
在Excel中通常使用函数WIDECHAR和ASC来实现单、双字节字符之间的转换。其中 WIDECHAR函数将所有的字符转换为双字节,ASC函数将所有的字符转换为单字节 首先来解释一下单双字节的含义。单字节一般对应英文输入法的输入,如英文字母,英文输入法…...
重学SpringBoot3-整合 Elasticsearch 8.x (二)使用Repository
更多SpringBoot3内容请关注我的专栏:《SpringBoot3》 期待您的点赞??收藏评论 整合 Elasticsearch 8.x (二)使用Repository 1. 环境准备 1.1 项目依赖1.2 Elasticsearch 配置 2. 使用Repository的基本步骤 2.1 创建实体类2.2 创建 Reposit…...
Jenkinsfile流水线构建教程
前言 Jenkins 是目前使用非常广泛的自动化流程的执行工具, 我们目前的一些自动化编译, 自动化测试都允许在 Jenkins 上面. 在 Jenkins 的术语里面, 一些自动化工作联合起来称之为流水线, 比如拉取代码, 编译, 运行自动化测试等. 本文的主要目的是引导你快速熟悉 Jenkinsfile …...
比创达电子科技-EMC干货之防静电技术
EMC干货之防静电技术 什么是静电放电 两个具有不同静电电位的物体,由于直接接触或静电场感应引起两物体间的静电电荷的转移,静电电场的能量达到一定程度后,击穿其间介质而进行放电的现象就是静电放电,简称为ESD(Electro Static Discharge)。 静电产生的原…...
PDF扫描档智能方向识别:多模型投票机制的实践测试 救活古典书籍
2025-02-22 20:10物联全栈123 尊敬的诸位!我是一名物联网工程师。关注我,持续分享最新物联网与AI资讯和开发实战。期望与您携手探寻物联网与 AI 的无尽可能 RAG知识库搭建的过程中,扫描档pdf的支持和准确率一直是个大家都不愿主动提起的事情…...
算法教程:岛的最大面积
算法教程:岛的最大面积 我们将首先讨论问题和解决方案,然后使用可视化工具(上一篇博客中进行了介绍)来更好地理解搜索过程。 问题描述 我们将要演练的具体问题是问题 Leetcode:岛屿的最大面积。在 Leetcode 上找到的直接问题描述是: 给你一个 m x n 二进制矩阵网格。岛…...
18439二维前缀和
18439二维前缀和 ⭐️难度:中等 📖 📚 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);int n scanner.nextInt();int m scanner.nextInt();int q s…...
information_schema.processlist 表详解
information_schema.processlist 表(或 SHOW PROCESSLIST; 命令)用于查看 MySQL 当前所有的连接进程,帮助管理员监控数据库活动并排查性能问题。以下是该表的字段及其具体含义: 🔹 information_schema.processlist 字段…...
数字化转型数据自动采集统计分析发那科(FANUC)数据采集
针对各类数控机床,特别是FANUC系列的数据自动采集需求,以下是一个综合性的解决方案,并详细说明了如何采集FANUC系列机床的各类数据。 一、数据采集方案概述 协议支持: 以适应不同数控机床的通信需求。 针对FANUC系列机床…...
olmOCR:使用VLM解析PDF
在PDF解析中,目前主流的开源工具包括Minuer、GOT OCR等。主要都是通过飞桨等OCR套件组装的一套pipeline,或者直接通过VLM解析图像。 #一、 olmOCR是使用VLM进行的端到端的PDF文档解析 二、document-anchoring 与上述的不同在于,olmOCR使用…...
【自学嵌入式(11)闪存文件系统的应用】
闪存文件系统的应用 闪存文件插件程序的配置上传程序实例一上传程序实例二——上传文件到ESP8266的程序 上篇文章简要了解了闪存文件系统的概念,相关头文件、类以及方法。但我们只尝试了向开发板中传输文本数据,对于更加复杂的内容(如一个界面、一个互动…...
Spring Cloud——路由网关Zuul
??? 哈喽!大家好,我是【一心同学】,一位上进心十足的【Java领域博主】!??? 【一心同学】的写作风格:喜欢用【通俗易懂】的文笔去讲解每一个知识点,而不喜欢用【高大上】的官方陈述。 【一心同学】博客…...
ShenNiusModularity项目源码学习(14:ShenNius.Infrastructure项目分析)
ShenNius.Infrastructure项目用于定义ShenNius.Admin.Mvc项目和ShenNius.Admin.API项目共用的特性类、数据操作接口实现类、上下文类、通讯类,主要文件的用途如下: Attributes文件夹保存特性类或过滤器类定义,主要包括: …...
【博资考4】网安学院-硕转博考试内容
【博资考4】硕转博考试内容 - 网络安全与基础理论 写在最前面一. **21年硕转博面试内容回顾**网络、逆向、操作系统、攻防、漏洞1. **网络安全常见攻击方式及其防范措施**1.1 **DDoS攻击(分布式拒绝服务)**1.2 **SQL注入攻击**1.3 **XSS攻击(…...
web前端初学Angular由浅入深上手开发项目
Angular 是一个功能强大的前端框架,适合构建复杂的企业级应用。作为初学者,通过由浅入深的学习路径,可以快速上手并开发项目。以下是逐步学习 Angular 的指导: 1. 基础知识 (1) 了解 Angular Angular 是什么? Angul…...
5.10 P-Tuning v2:多层级提示编码的微调革新
P-Tuning v2:多层级提示编码的微调革新 一、技术架构解析 #mermaid-svg-4Wy6vkXZi67hY9PZ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-4Wy6vkXZi67hY9PZ .error-icon{fill:#552222;}#mermaid-svg-4Wy6vkXZi67h…...
RuntimeWarning: invalid value encountered in scalar power在进行标量的幂运算时遇到了无效值
year_profit ((profit / initial_cash) ** (1 / yy) - 1) * 100 RuntimeWarning: invalid value encountered in scalar power 这个警告表示在执行标量幂运算 ((profit / initial_cash) ** (1 / yy) - 1) * 100 时遇到了无效值。常见的引发原因及解决办法如下: ###…...
LabVIEW同步数据采集功能
VI通过使用数据采集(DAQ)硬件系统,进行多通道同步采集,实时获取模拟信号数据。它利用外部时钟信号触发数据采集,支持连续采样模式,并将采集到的数据实时显示在波形图上,方便用户进行数据监控和分…...
(21)从strerror到strtok:解码C语言字符函数的“生存指南2”
❤个人主页:折枝寄北的博客 ❤专栏位置:简单入手C语言专栏 目录 前言1. 错误信息报告1.1 strerror 2. 字符操作2.1 字符分类函数2.2 字符转换函数 3. 内存操作函数3.1 memcpy3.2 memmove3.2memset3.3 memcmp 感谢您的阅读 前言 当你写下strcpy(dest, s…...
【Azure 架构师学习笔记】- Azure Databricks (12) -- Medallion Architecture简介
本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Databricks】系列。 接上文 【Azure 架构师学习笔记】- Azure Databricks (11) – UC搭建 前言 使用ADB 或者数据湖,基本上绕不开一个架构“Medallion”, 它使得数据管理更为简单有效。ADB 通过…...
Golang——内存(内存管理、内存逃逸、垃圾回收 (GC) 机制)
大家好,这里是编程Cookbook。本文详细介绍Go内存相关的内容,包括内存管理、内存逃逸、垃圾回收 (GC) 机制的三色标记,写屏障。 文章目录 Go 的内存管理mspan && arenasarenasmspan mcachemcentralmheap内存分配逻辑内存回收逻辑优势内…...
关系型数据库的技术思路
一、网络协议 需要根据TCP协议设计一个客户端和服务器之间的命令响应协议。 1、服务端回复声明 2、客户端发送登录包 3、服务端返回登录结果 4、登录成功后进入命令阶段,否则退出。 二、每个连接用一个线程 服务器为每个客户端连接开启一个线程。 三、需要文件的随机…...
web安全——分析应用程序
文章目录 一、确定用户输入入口点二、确定服务端技术三、解析受攻击面 一、确定用户输入入口点 在检查枚举应用程序功能时生成的HTTP请求的过程中,用户输入入口点包括: URL文件路径 通常,在查询字符?之前的URL部分并不视为用户输入入口&am…...
数据库事务的基本要素(ACID)
数据库事务的基本要素(ACID) 在数据库管理系统(DBMS)中,事务(Transaction)是一个或多个数据库操作的集合,这些操作要么全部成功,要么全部失败。事务的目标是保证数据的一…...
server.servlet.session.timeout: 12h(HTTP 会话的超时时间为 12 小时)
从你提供的配置文件(应该是 Spring Boot 的 application.yml 或 application.properties 文件)来看,以下部分与会话超时时间相关: server:servlet:session:timeout: 12h # timeout: 30cookie:name: VENDER_SID会话超时时间的…...
Docker数据卷容器实战
数据卷容器 数据共享 上面讲述的是主机和容器之间共享数据,那么如何实现容器和容器之间的共享数据呢?那就是创建 创建数据卷容器。 命名的容器挂载数据卷,其他容器通过挂载这个(父容器)实现数据共享,挂载…...
基于LangChain4j调用火山引擎DeepSeek R1搭建RAG知识库实战指南
基于LangChain4j调用火山引擎DeepSeek R1搭建RAG知识库实战指南 基于LangChain4j调用火山引擎DeepSeek R1搭建RAG知识库实战指南 基于LangChain4j调用火山引擎DeepSeek R1搭建RAG知识库实战指南一、注册火山引擎账号二、RAG技术核心原理三、环境与工具准备1. 核心组件2. 依赖配…...
Java内存的堆(堆内、堆外)、栈含义理解笔记
一、核心概念区分 1. 内存中的堆(Heap)与栈(Stack) 栈内存 ▸ 用途:存储方法调用、局部变量、基本类型数据(如 int a 1) ▸ 特点: 线程私有,每个线程独立分配栈空间。…...
2.7 大模型RAG内容安全合规检查-大模型ACP模拟题-真题
单选题 在RAG应用中,输入内容合规检查的正确顺序是? A. 先处理模型生成,后检查用户输入 B. 先检查用户输入,后处理模型生成 ✅ C. 仅检查用户输入 D. 仅检查模型输出 解析:合规流程应优先过滤用户输入风险࿰…...
C#从入门到精通(35)—如何防止winform程序因为误操作被关闭
前言: 大家好,我是上位机马工,硕士毕业4年年入40万,目前在一家自动化公司担任软件经理,从事C#上位机软件开发8年以上!我们在开发的上位机软件运行起来以后,一般在右上角都有一个关闭按钮,正常情况下点击关闭按钮就能关闭软件,但是不排除我们不想关闭软件,但是因为不…...
特斯拉 FSD 算法深度剖析:软件层面全解读
一、引言 特斯拉的 FSD(Full Self-Driving)系统作为自动驾驶领域的前沿成果,其软件层面的算法设计至关重要。本文将从软件的角度,深入探讨特斯拉 FSD 所采用的算法,包括感知、规划、控制等多个方面,以期为…...
中央一号文件里的三维革命:数字孪生如何重构智慧乡村生态?
2024年中央一号文件提出"建设宜居宜业和美乡村",这一目标背后离不开数字技术的支撑。在浙江某数字乡村试点,凡拓数创通过三维建模还原整村风貌,路灯能耗、垃圾分类、古建保护等数据在虚拟空间中实时跳动。管理人员坦言:…...
DeepSeek 助力 Vue3 开发:打造丝滑的页眉(Header)
前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏关注哦 💕 目录 Deep…...
一个原教旨的多路径 TCP
前面提到过 ECMP 和 TCP 之间的互不友好,pacing 收益和中断开销的互斥,在事实上阻碍了 packet-based LB 的部署,也限制了交换机,服务器的并发性能,同时潜在增加了 bufferbloat 的概率,而适用 packet-based …...
DDD 架构之领域驱动设计【通俗易懂】
文章目录 1. 前言2. MVC 对比 DDD3. DDD 分层架构4. 完整业务流程 1. 前言 官方回答:DDD是一种应对复杂业务系统的设计方法,通过将软件设计与业务领域紧密结合,帮助开发人员构建清晰、可维护的领域模型。在复杂的业务系统中,它能…...
蓝桥杯15届JavaB组6题
一开始用的dfs,但是好像是因为数据量太大,数据错误,而且会超时,然后使用bfs dfs的代码(自留): import java.util.*;public class F15 {public static void main(String[] args) {Scanner sc n…...
Python 爬虫与网络安全有什么关系
Python爬虫和网络安全之间存在密切的关系。爬虫是一种用于自动化从网络上获取信息的程序,而网络安全是保护计算机网络和系统免受未经授权的访问、攻击和数据泄露的实践。本文将探讨Python爬虫与网络安全之间的关系以及如何在爬虫开发中注意网络安全。 爬虫的作用和…...
如何判断数据是否使用AES加密以及如何使用AES解密
在现代软件开发中,数据加密是保护敏感信息的重要手段。AES(Advanced Encryption Standard)是一种广泛使用的对称加密算法,因其安全性和高效性而被广泛应用。本文将介绍如何判断数据是否使用AES加密,并详细讲解如何使用…...
C++ Primer 泛型算法结构
欢迎阅读我的 【CPrimer】专栏 专栏简介:本专栏主要面向C初学者,解释C的一些基本概念和基础语言特性,涉及C标准库的用法,面向对象特性,泛型特性高级用法。通过使用标准库中定义的抽象设施,使你更加适应高级…...
java给钉钉邮箱发送邮件
1.开通POP和IMAP 2.引入pom <dependency><groupId>javax.mail</groupId><artifactId>mail</artifactId><version>1.4.7</version> </dependency>3.逻辑 String host "smtp.qiye.aliyun.com"; String port "…...
交安ABC-公路水运工程企业安全员ABC如何报名?报名要哪些条件?
交安ABC的报名方式及报名条件如下: 报名方式 1. 企业注册:企业要进入交通运输部公路水运工程施工主要负责人和安全生产管理人员信息管理系统,注册企业账户,提交企业相关信息,填写企业资料。 2. 发送审核ÿ…...
软件测试丨Docker与虚拟机架构对比分析
Docker 与虚拟机(VM)在架构上有显著区别,主要体现在资源利用、性能、隔离性和启动时间等方面。以下是两者的主要架构区别: 1. 架构层次 Docker: 主机操作系统:Docker 直接运行在宿主机的操作系统上。Docker 引擎&…...
Gatling介绍
Gatling:基于Scala的高性能负载测试工具 一、Gatling 简介 Gatling 是一个开源的 HTTP 压力测试工具,专为高并发场景设计,支持 HTTP/HTTPS、WebSocket、Kafka 等协议。其基于 Scala 的脚本语法简洁高效,支持实时报告生成和分布式…...
Shot Studio for macOS 发布 1.0.2
Shot Studio 是一个 macOS 的 app,专门为开发者设计,主要用于各大 app 应用商店的预览图设计。 提供了非常多的模板,也预设了很多尺寸。可以直接一键使用 在 1.0.2 这个版本中新增了: 文本渐变 图层:边框、颜色、圆…...
基于Spring Boot的乡村养老服务管理系统设计与实现(LW+源码+讲解)
专注于大学生项目实战开发,讲解,毕业答疑辅导,欢迎高校老师/同行前辈交流合作✌。 技术范围:SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容:…...
Harbor服务需要crt证书,而下载是nginx的证书pem,应该怎么处理
1. 明确文件用途 shgbitai.com.key:SSL 私钥文件(与 Apache/Nginx 通用)。shgbitai.com.pem:已合并的证书文件(通常包含域名证书 中间证书链)。 Nginx 的证书通常以 .pem 或 .crt 为后缀,而 …...