当前位置: 首页 > news >正文

若依框架篇-若依集成 X-File-Storage 框架(实现图片上传阿里云 OSS 服务器)、EasyExcel 框架(实现 Excel 数据批量导入功能)

🔥博客主页: 【小扳_-CSDN博客】
❤感谢大家点赞👍收藏⭐评论✍

文章目录

        1.0 实现使用 Excel 文件批量导入

        1.1 导入功能的前端具体实现

        1.2 导入功能的后端具体实现

        1.3 使用 EasyExcel 框架实现 Excel 读、写功能

        1.4 将 Easy Excel 集成到若依框架中

        2.0 阿里云 OSS 概述

        2.1 使用阿里云 OSS 具体过程

        2.2 将 X-File-Storage 集成到若依框架中


        1.0 实现使用 Excel 文件批量导入

        使用若依框架实现了 CRUD 之后,若依会自动实现导出功能:

        将当前页面所展示的信息,以 Excel 的形式导入到本地中:

        导出功能若依由若依框架实现的,对于导入功能,若依框架没有实现该功能。

若依框架实现导出功能:

        1)前端代码:

        首先定义了一个按钮,关联着 handleExport 方法:

        2)后端代码:

        在 Controller 层中,调用接口获取到 list 需要导出的数据,通过 ExcelUtil 工具类,调用该工具类的 exportExcel() 方法,来将数据进行导出。

        Sku 是一个根据业务需要生成的一个实体类:

        通过 @Excel 注解来实现实体类与 Excel 表格中的数据进行映射。

        1.1 导入功能的前端具体实现

根据业务需要实现:

        1)首先需要定义一个按钮,点击之后,弹出对话框:

      <el-col :span="1.5"><el-buttontype="warning"plainicon="upload"@click="handleImport"v-hasPermi="['manage:sku:add']">导入</el-button></el-col>

        该按钮关联着 handleImport 的方法,当触发点击事件之之后,弹出对话框:

const excelOpen = ref(false);
function handleImport(){excelOpen.value = true;}

        2)对话框的内容:

        根据 Element 官网参考实现文件上传功能:Upload 上传 | Element Plus

         在对话框中插入文件上传的功能:

        使用了 el-dialog 组件来创建一个对话框,用于导入数据。对话框内嵌了一个 el-upload 组件,用于文件上传。

    <!-- 数据导入对话框 --><el-dialog title="导入数据" v-model="excelOpen" width="400px" append-to-body><el-uploadref="uploadRef"class="upload-demo":action="uploadExcelUrl":headers="headers":on-success="handleUploadSuccess":on-error="handleUploadError":before-upload="handleBeforeUpload":limit="1":auto-upload="false"><template #trigger><el-button type="primary">上传文件</el-button></template><el-button class="ml-3" type="success" @click="submitUpload">上传</el-button><template #tip><div class="el-upload__tip">上传文件仅支持,xls/xlsx格式,文件大小不得超过1M</div></template></el-upload></el-dialog>

对应的 JS 代码: 

const uploadRef = ref({});
function submitUpload(){uploadRef.value.submit();
}

标签中属性解析:

        - v-model="excelOpen": 控制对话框的显示与隐藏。
        - :action="uploadExcelUrl": 文件上传的目标 URL。
        - :headers="headers": 上传请求的头部信息。
        - :on-success="handleUploadSuccess": 文件上传成功后的回调函数。
        - :on-error="handleUploadError": 文件上传失败后的回调函数。
        - :before-upload="handleBeforeUpload": 文件上传前的钩子函数,可以用来做文件校验。
        - :limit="1": 限制一次只能上传一个文件。
        - :auto-upload="false": 禁用自动上传,需要手动触发上传。

        3)前端实现导入功能的完整代码

        基于若依框架实现的前端代码:

<!--  导入按钮-->
<el-col :span="1.5"><el-button type="warning" plain icon="Upload" @click="handleExcelImport" v-hasPermi="['manage:sku:add']">导入</el-button>
</el-col><!-- 数据导入对话框 -->
<el-dialog title="数据导入" v-model="excelOpen" width="400px" append-to-body><el-upload ref="uploadRef" class="upload-demo":action="uploadExcelUrl":headers="headers":on-success="handleUploadSuccess":on-error="handleUploadError":before-upload="handleBeforeUpload"         :limit="1":auto-upload="false"><template #trigger><el-button type="primary">上传文件</el-button></template><el-button class="ml-3" type="success" @click="submitUpload">上传</el-button><template #tip><div class="el-upload__tip">上传文件仅支持,xls/xlsx格式,文件大小不得超过1M</div></template></el-upload>
</el-dialog><script setup name="Sku">
import { getToken } from "@/utils/auth";/* 打开数据导入对话框 */
const excelOpen = ref(false);
function handleExcelImport() {excelOpen.value = true;
}/* 上传地址 */
const uploadExcelUrl = ref(import.meta.env.VITE_APP_BASE_API + "/manage/sku/import"); // 上传excel文件地址
/* 上传请求头 */
const headers = ref({ Authorization: "Bearer " + getToken() });/* 上传excel */
const uploadRef = ref({});
function submitUpload() {uploadRef.value.submit()
}const props = defineProps({modelValue: [String, Object, Array],// 大小限制(MB)fileSize: {type: Number,default: 1,},// 文件类型, 例如["xls", "xlsx"]fileType: {type: Array,default: () => ["xls", "xlsx"],},
});// 上传前loading加载
function handleBeforeUpload(file) {let isExcel = false;if (props.fileType.length) {let fileExtension = "";if (file.name.lastIndexOf(".") > -1) {fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);}isExcel = props.fileType.some(type => {if (file.type.indexOf(type) > -1) return true;if (fileExtension && fileExtension.indexOf(type) > -1) return true;return false;});} if (!isExcel) {proxy.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`);return false;}if (props.fileSize) {const isLt = file.size / 1024 / 1024 < props.fileSize;if (!isLt) {proxy.$modal.msgError(`上传excel大小不能超过 ${props.fileSize} MB!`);return false;}}proxy.$modal.loading("正在上传excel,请稍候...");
}// 上传失败
function handleUploadError() {proxy.$modal.msgError("上传excel失败");uploadRef.value.clearFiles();proxy.$modal.closeLoading();
}// 上传成功回调
function handleUploadSuccess(res, file) {if (res.code === 200) {proxy.$modal.msgSuccess("上传excel成功");excelOpen.value = false;getList();}else{proxy.$modal.msgError("res.msg");} uploadRef.value.clearFiles();proxy.$modal.closeLoading();
}    
</script>

        1.2 导入功能的后端具体实现

        与导出 Excel 功能一样,创建了 ExcelUtil 对象,使用该对象的 importExcel() 方法,将文件流进行导入,返回的结果是一个 List 集合数据,接下来可以进行批量插入数据了。

        1.3 使用 EasyExcel 框架实现 Excel 读、写功能

        EasyExcel 官网:EasyExcel官方文档 - 基于Java的Excel处理工具 | Easy Excel 官网

        阿里巴巴开源的框架,它以使用简单、功能强大和节省内存而著称,特别适合于需要进行大量数据导入和导出的场景。

        Java 解析、生成 Excel 比较有名的框架有 Apache poi、jxl。但他们都存在一个严重的问题就是非常的耗内存,poi 有一套 SAX 模式的 API 可以一定程度的解决一些内存溢出的问题,但 POI 还是有一些缺陷,比如 07 版 Excel 解压缩以及解压后存储都是在内存中完成的,内存消耗依然很大。 easyexcel 重写了 poi 对 07 版 Excel 的解析,一个 3M 的 excel 用 POI sax 解析依然需要 100M 左右内存,改用 easyexcel 可以降低到 几M,并且再大的 excel 也不会出现内存溢出;03 版依赖 POI 的 sax 模式,在上层做了模型转换的封装,让使用者更加简单方便。

        1.4 将 Easy Excel 集成到若依框架中

        1)dkd-common\pom.xml 模块添加整合依赖:

<!--  excel处理工具-->
<dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>4.0.1</version>
</dependency>

        2)在 dkd-common\ 模块的 ExcelUtil.java 新增 easyexcel 导出导入方法:

/*** 对excel表单默认第一个索引名转换成list(EasyExcel)* * @param is 输入流* @return 转换后集合*/
public List<T> importEasyExcel(InputStream is) throws Exception
{return EasyExcel.read(is).head(clazz).sheet().doReadSync();
}/*** 对list数据源将其里面的数据导入到excel表单(EasyExcel)* * @param list 导出数据集合* @param sheetName 工作表的名称* @return 结果*/
public void exportEasyExcel(HttpServletResponse response, List<T> list, String sheetName)
{try{EasyExcel.write(response.getOutputStream(), clazz).sheet(sheetName).doWrite(list);}catch (IOException e){log.error("导出EasyExcel异常{}", e.getMessage());}
}

        3)实体类的属性上添加 @ExcelProperty 注解:

        添加完 @ExcelPropety 注解之后,实现实体类的属性与 Excel 表格字段映射。还需要在实体类上添加注解:

        - @ExcelIgnoreUnannotated// 注解表示在导出Excel时,忽略没有被任何注解标记的字段
        - @ColumnWidth(16)// 注解用于设置列的宽度
        - @HeadRowHeight(14)// 注解用于设置表头行的高度
        - @HeadFontStyle(fontHeightInPoints = 11)// 注解用于设置表头的字体样式

举个例子:

package com.dkd.manage.domain;import com.alibaba.excel.annotation.ExcelIgnoreUnannotated;
import com.alibaba.excel.annotation.ExcelProperty;
import com.alibaba.excel.annotation.write.style.ColumnWidth;
import com.alibaba.excel.annotation.write.style.HeadFontStyle;
import com.alibaba.excel.annotation.write.style.HeadRowHeight;
import com.dkd.common.annotation.Excel;
import com.dkd.common.core.domain.BaseEntity;
import org.apache.commons.lang3.builder.ToStringBuilder;
import org.apache.commons.lang3.builder.ToStringStyle;/*** 商品管理对象 tb_sku** @author itheima* @date 2024-07-15*/
@ExcelIgnoreUnannotated// 注解表示在导出Excel时,忽略没有被任何注解标记的字段
@ColumnWidth(16)// 注解用于设置列的宽度
@HeadRowHeight(14)// 注解用于设置表头行的高度
@HeadFontStyle(fontHeightInPoints = 11)// 注解用于设置表头的字体样式
public class Sku extends BaseEntity
{private static final long serialVersionUID = 1L;/** 主键 */private Long skuId;/** 商品名称 */@Excel(name = "商品名称")@ExcelProperty("商品名称")private String skuName;/** 商品图片 */@Excel(name = "商品图片")@ExcelProperty("商品图片")private String skuImage;/** 品牌 */@Excel(name = "品牌")@ExcelProperty("品牌")private String brandName;/** 规格(净含量) */@Excel(name = "规格(净含量)")@ExcelProperty("规格(净含量)")private String unit;/** 商品价格 */@Excel(name = "商品价格")@ExcelProperty("商品价格")private Long price;/** 商品类型Id */@Excel(name = "商品类型Id")@ExcelProperty("商品类型Id")private Long classId;/** 是否打折促销 */private Integer isDiscount;// 其他略...
}

        完成之后,就可以使用了,通过创建 ExcelUtil 对象,调用 importEasyExcel() 方法实现导入功能,调用 exportEasyExcel() 方法实现导出功能。

举个例子:

导出结果:

        2.0 阿里云 OSS 概述

        阿里云对象存储 OSS(Object Storage Service),是一款海量、安全、低成本、高可靠的云存储服务。使用 OSS,您可以通过网络随时存储和调用包括文本、图片、音频和视频等在内的各种文件。

        使用了阿里云 OSS 对象存储服务之后,我们的项目当中如果涉及到文件上传这样的业务,在前端进行文件上传并请求到服务端时,在服务器本地磁盘当中就不需要再来存储文件了。我们直接将接收到的文件上传到 oss,由 oss 帮我们存储和管理,同时阿里云的 oss 存储服务还保障了我们所存储内容的安全可靠。

        2.1 使用阿里云 OSS 具体过程

        1)注册阿里云账户(注册完成后需要实名认证)

        2)注册完账号之后,就可以登录阿里云

        3)通过控制台找到对象存储 OSS 服务

        4)如果是第一次访问,还需要开通对象存储服务 OSS

        5)开通 OSS 服务之后,就可以进入到阿里云对象存储的控制台

        6)点击左侧的 "Bucket列表",创建一个Bucket

        7)点击 "AccessKey管理",进入到管理页面

        8)以管理员身份打开CMD命令行,执行如下命令,配置系统的环境变量

set OSS_ACCESS_KEY_ID=LTAI5tXXXXXXXXXXXXXXXXXXXXM8TP
set OSS_ACCESS_KEY_SECRET=UzMcJXXXXXXXXXXXXXXXXXXXXdabTNafi

        将上述的ACCESS_KEY_ID 与 ACCESS_KEY_SECRET 的值一定要替换成自己的 。

        执行如下命令,让更改生效:

setx OSS_ACCESS_KEY_ID "%OSS_ACCESS_KEY_ID%"
setx OSS_ACCESS_KEY_SECRET "%OSS_ACCESS_KEY_SECRET%"

         执行如下命令,验证环境变量是否生效:

echo %OSS_ACCESS_KEY_ID%
echo %OSS_ACCESS_KEY_SECRET%

        阿里云oss 对象存储服务的准备工作我们已经完成了,接下来我们就来完成第二步操作:参照官方所提供的sdk示例来编写入门程序。

        1)首先我们需要来打开阿里云OSS的官方文档,在官方文档中找到 SDK 的示例代码:

        2)文档阅读:

        3)参照官方提供的SDK,改造一下,即可实现文件上传功能:

package com.dkd.common.test;import com.aliyun.oss.ClientException;
import com.aliyun.oss.OSS;
import com.aliyun.oss.common.auth.*;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.OSSException;
import com.aliyun.oss.model.PutObjectRequest;
import com.aliyun.oss.model.PutObjectResult;
import java.io.FileInputStream;
import java.io.InputStream;public class Demo {public static void main(String[] args) throws Exception {// Endpoint以华东1(杭州)为例,其它Region请按实际情况填写。String endpoint = "https://oss-cn-beijing.aliyuncs.com";// 从环境变量中获取访问凭证。运行本代码示例之前,请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();// 填写Bucket名称,例如examplebucket。String bucketName = "dkd-itheima";// 填写Object完整路径,完整路径中不能包含Bucket名称,例如exampledir/exampleobject.txt。String objectName = "gao.png";// 填写本地文件的完整路径,例如D:\\localpath\\examplefile.txt。// 如果未指定本地路径,则默认从示例程序所属项目对应本地路径中上传文件流。String filePath= "E:\\temp\\upload\\gao.png";// 创建OSSClient实例。OSS ossClient = new OSSClientBuilder().build(endpoint, credentialsProvider);try {InputStream inputStream = new FileInputStream(filePath);// 创建PutObjectRequest对象。PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, objectName, inputStream);// 创建PutObject请求。PutObjectResult result = ossClient.putObject(putObjectRequest);} catch (OSSException oe) {System.out.println("Caught an OSSException, which means your request made it to OSS, "+ "but was rejected with an error response for some reason.");System.out.println("Error Message:" + oe.getErrorMessage());System.out.println("Error Code:" + oe.getErrorCode());System.out.println("Request ID:" + oe.getRequestId());System.out.println("Host ID:" + oe.getHostId());} catch (ClientException ce) {System.out.println("Caught an ClientException, which means the client encountered "+ "a serious internal problem while trying to communicate with OSS, "+ "such as not being able to access the network.");System.out.println("Error Message:" + ce.getMessage());} finally {if (ossClient != null) {ossClient.shutdown();}}}
}

在以上代码中,需要替换的内容为:

        - endpoint:阿里云OSS中的bucket对应的域名

        - bucketName:Bucket名称

        - objectName:对象名称,在Bucket中存储的对象的名称

        - filePath:文件路径

运行以上程序后,会把本地的文件上传到阿里云OSS服务器上。

        2.2 将 X-File-Storage 集成到若依框架中

        相比直接使用阿里云 OSS,使用 X-File-Storage 上传图片到云服务器的操作会更加容易,使用 X-File-Storage 可以简化图片上传到云服务器的过程,特别是对于那些不熟悉阿里云 OSS API 或者希望减少开发工作量的开发者来说。X-File-Storage 是一个抽象层,它封装了底层存储服务的复杂性,提供了更简单、更统一的接口。 

将 X-File-Storage 集成到若依框架中的步骤:

        1)在 dkd-common 的 pom.xml 中引入依赖:

<!-- 文件上传-->
<dependency><groupId>org.dromara.x-file-storage</groupId><artifactId>x-file-storage-spring</artifactId><version>2.1.0</version>
</dependency>
<!-- 阿里云oss-->
<dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.16.1</version>
</dependency>

        2)在 dkd-admin 的 application.yml 配置文件中先添加以下基础配置,再添加对应平台的配置:

# 文件上传
dromara:x-file-storage: #文件存储配置default-platform: aliyun-oss-1 #默认使用的存储平台thumbnail-suffix: ".min.jpg" #缩略图后缀,例如【.min.jpg】【.png】#对应平台的配置写在这里,注意缩进要对齐aliyun-oss:- platform: aliyun-oss-1 # 存储平台标识enable-storage: true  # 启用存储access-key: ??secret-key: ??end-point: oss-cn-qingdao.aliyuncs.combucket-name: itheima-007domain: https://itheima-007.oss-cn-qingdao.aliyuncs.com/ # 访问域名,注意“/”结尾,例如:https://abc.oss-cn-shanghai.aliyuncs.com/base-path: dkd-images/ # 基础路径

        3)在 dkd-admin 的启动类上加上 @EnableFileStorage 注解:

@EnableFileStorage
@SpringBootApplication(exclude = { DataSourceAutoConfiguration.class })
public class DkdApplication
{public static void main(String[] args){// System.setProperty("spring.devtools.restart.enabled", "false");SpringApplication.run(DkdApplication.class, args);System.out.println("(♥◠‿◠)ノ゙  帝可得启动成功   ლ(´ڡ`ლ)゙");}
}

        4)修改若依默认上传图片代码

        找到 ruoyi-admin 模块中的 com.ruoyi.web.controller.common.CommonController 类,修改单个文件上传的方法:

@Autowired
private FileStorageService fileStorageService;//注入实列/*** 通用上传请求(单个)
*/
@PostMapping("/upload")
public AjaxResult uploadFile(MultipartFile file) throws Exception {try {// 指定oss保存文件路径String objectName = LocalDate.now().format(DateTimeFormatter.ofPattern("yyyy/MM/dd")) + "/";// 上传图片,成功返回文件信息FileInfo fileInfo = fileStorageService.of(file).setPath(objectName).upload();// 设置返回结果AjaxResult ajax = AjaxResult.success();ajax.put("url", fileInfo.getUrl());ajax.put("fileName", fileInfo.getUrl());  //注意:这里的值要改为url,前端访问的地址,需要文件的地址 而不是文件名称ajax.put("newFileName", fileInfo.getUrl());ajax.put("originalFilename", file.getOriginalFilename());return ajax;} catch (Exception e) {return AjaxResult.error(e.getMessage());}
}

相关文章:

若依框架篇-若依集成 X-File-Storage 框架(实现图片上传阿里云 OSS 服务器)、EasyExcel 框架(实现 Excel 数据批量导入功能)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 实现使用 Excel 文件批量导入 1.1 导入功能的前端具体实现 1.2 导入功能的后端具体实现 1.3 使用 EasyExcel 框架实现 Excel 读、写功能 1.4 将 Easy Excel 集成到…...

.rmallox勒索病毒肆虐:如何有效防范与应对

引言 在当今这个数字化时代&#xff0c;网络安全已成为一个不可忽视的重要议题。随着信息技术的飞速发展&#xff0c;网络空间的安全威胁也日益复杂多变。病毒、木马、勒索软件等恶意程序层出不穷&#xff0c;比如.rmallox勒索病毒。它们利用先进的技术手段&#xff0c;如代码…...

人工智能能否影响未来生活:一场深刻的社会与技术变革

随着人工智能技术的不断发展&#xff0c;我们已经目睹了它在各行各业掀起的巨大变革浪潮。从医疗行业的病例诊断、药物研发&#xff0c;到企业运营的数据分析、智能决策&#xff0c;再到日常生活中的智能语音助手、自动驾驶汽车、智能家居&#xff0c;人工智能正以前所未有的速…...

cmu 15-445学习笔记-3 存储引擎

03 Database Storage-Part Ⅰ 数据库存储上半部分 数据库分层划分结构图&#xff1a; Disk Manager&#xff1a;存储引擎&#xff0c;管理磁盘上的文件Bufferpool Manager&#xff1a;管理内存的缓存池Access Methods&#xff1a;访问方法Operator Execution&#xff1a;执行…...

[linux]和windows间传输命令scp 执行WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!错误解决

[linux]和windows间传输命令scp 执行WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!错误解决. 现象&#xff1a; 原因&#xff1a; 接收方服务器系统做了某些更改&#xff0c;导致登录时会报错。主要因为接收方服务器对登录过它的主机都会把该主机登录标识证书记录下来&a…...

C++ | Leetcode C++题解之第518题零钱兑换II

题目&#xff1a; 题解&#xff1a; class Solution { public:int change(int amount, vector<int>& coins) {vector<int> dp(amount 1), valid(amount 1);dp[0] 1;valid[0] 1;for (int& coin : coins) {for (int i coin; i < amount; i) {valid[…...

高并发-负载均衡

负载均衡在微服务架构中是一个重要的组成部分&#xff0c;旨在优化资源利用、提高服务可用性和确保系统的高可扩展性。以下是对微服务中的负载均衡的详细介绍&#xff0c;包括其原理、类型、实现方式以及相关的技术。 一、负载均衡的原理 负载均衡的基本原理是将进入系统的请…...

Docker 常用命令全解析:提升对雷池社区版的使用经验

Docker 常用命令解析 Docker 是一个开源的容器化平台&#xff0c;允许开发者将应用及其依赖打包到一个可移植的容器中。以下是一些常用的 Docker 命令及其解析&#xff0c;帮助您更好地使用 Docker。 1. Docker 基础命令 查看 Docker 版本 docker --version查看 Docker 运行…...

基于 Postman 和 Elasticsearch 测试乐观锁的操作流程

鱼说&#xff0c;你看不到我眼中的泪&#xff0c;因为我在水中。水说&#xff0c;我能感觉到你的泪&#xff0c;因为你在我心中。 -村上春树 在分布式系统中&#xff0c;多个并发操作对同一资源的修改可能导致数据不一致。为了解决这种问题&#xff0c;Elasticsearch 提供了乐观…...

如何从PPT中导出600dpi的高清图

Step1. 修改PPT注册表 具体过程&#xff0c;参见如下链接&#xff1a;修改ppt注册表&#xff0c;导出高分辨率图片 Step2. 打开PPT&#xff0c;找到自己想要保存的图&#xff0c;选中图像&#xff0c;查看图像尺寸并记录 Step3. 重新新建一个PPT&#xff0c;并根据记录的图片…...

day01-ElasticStack+Kibana

ElasticStack-数据库 #官网https://www.elastic.co/cn/ #下载7.17版环境准备 主机名IP系统版本VMware版本elk110.0.0.91Ubuntu 22.04.417.5.1elk210.0.0.92Ubuntu 22.04.417.5.1elk310.0.0.93Ubuntu 22.04.417.5.1 单机部署ES 1.下载ES软件包&#xff0c;放到/usr/local下 […...

HTML 约束验证

HTML5引入了表单相关的一些新机制&#xff1a;它为<input>元素和约束验证增加了一些新的语义类型&#xff0c;使得客户端检查表单内容变得容易。基本上&#xff0c;通过设置一些新的属性&#xff0c;常用的约束条件可以无需 JavaScript 代码而检测到&#xff1b;对于更复…...

vue3项目开发一些必备的内容,该安装安装,该创建创建

重新整理了一下项目开发必备的一些操作&#xff0c;以后直接复制黏贴运行&#xff0c;随着项目开发&#xff0c;后期会陆续补充常用插件或组件等 如果你是还没有安装过的新人&#xff0c;建议从《通过安装Element UI/Plus来学习vue之如何创建项目、搭建vue脚手架、npm下载、封装…...

2D拓扑图

2D拓扑图主要指的是在二维平面上表示物体形状和关系的一种图形表示方法。 一、基本概念 2D网格拓扑结构&#xff1a;在二维平面上&#xff0c;由一系列的节点&#xff08;node&#xff09;和边&#xff08;edge&#xff09;组成。每个节点代表一个具体的位置或坐标点&#xf…...

大数据面试题整理——Hive

系列文章目录 大数据面试题专栏点击进入 文章目录 系列文章目录Hive 面试知识点全面解析一、函数相关&#xff08;一&#xff09;函数分类与特点&#xff08;二&#xff09;concat和concat_ws的区别 二、SQL 的书写和执行顺序&#xff08;一&#xff09;书写顺序&#xff08;二…...

Python实现图像(边缘)锐化:梯度锐化、Roberts 算子、Laplace算子、Sobel算子的详细方法

目录 Python实现图像&#xff08;边缘&#xff09;锐化&#xff1a;梯度锐化、Roberts算子、Laplace算子、Sobel算子的详细方法引言一、图像锐化的基本原理1.1 什么是图像锐化&#xff1f;1.2 边缘检测的基本概念 二、常用的图像锐化算法2.1 梯度锐化2.1.1 实现步骤 2.2 Robert…...

【电机控制】相电流重构——单电阻采样方案

【电机控制】相电流重构——单电阻采样方案 文章目录 [TOC](文章目录) 前言一、基于单电阻采样电流重构技术原理分析1.1 单电阻采样原理图1.2 基本电压矢量与电流采样关系 二、非观测区2.1 扇区过渡区2.2 低压调制区 三、非观测区补偿——移相法四、参考文献总结 前言 使用工具…...

#基础算法

1 差分练习 1 模板题 代码实现&#xff1a; import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int m sc.nextInt();int num sc.nextInt();long[][] arr new long[n 2][m …...

如何用猿大师办公助手实现OA系统中Word公文/合同在线编辑及流转?

在OA系统或者合同管理系统中&#xff0c;我们会经常遇到网页在线编辑Word文档形式的公文及合同的情况&#xff0c;并且需要上级对下级的公文进行批注等操作&#xff0c;或者不同部门的人需要签字审核&#xff0c;这就需要用到文档流转功能&#xff0c;如何用猿大师办公助手实现…...

Python中的列表是什么?它们有什么用途?

1、Python中的列表是什么&#xff1f;它们有什么用途&#xff1f; 在Python中&#xff0c;列表是一种有序的集合&#xff0c;可以包含不同类型的元素。列表可以存储一组值&#xff0c;并且可以方便地访问、修改和操作这些值。 列表的主要用途包括&#xff1a; 数据存储&…...

探索现代软件开发中的持续集成与持续交付(CI/CD)实践

探索现代软件开发中的持续集成与持续交付&#xff08;CI/CD&#xff09;实践 随着软件开发的飞速进步&#xff0c;现代开发团队已经从传统的开发模式向更加自动化和灵活的开发流程转变。持续集成&#xff08;CI&#xff09; 与 持续交付&#xff08;CD&#xff09; 成为当下主…...

React 前端框架开发入门案例

以下是一个使用 React 进行前端框架开发的入门案例&#xff0c;实现一个简单的待办事项列表应用。 一、准备工作 安装 Node.js&#xff1a;React 需要 Node.js 环境来运行。你可以从 Node.js 官方网站下载并安装适合你操作系统的版本。 创建项目目录&#xff1a;在你的电脑上…...

模拟 DDoS 攻击与防御实验

模拟 DDoS 攻击与防御实验可以帮助理解攻击原理和防御策略。在进行这种实验时&#xff0c;必须确保在受控、合法的环境中进行&#xff0c;避免对真实网络造成损害。以下是具体步骤&#xff1a; 环境要求 硬件&#xff1a;至少两台计算机&#xff08;或虚拟机&#xff09;&…...

【electron8】electron实现“图片”的另存为

注&#xff1a;该列出的代码&#xff0c;都在文章内示例出 1. 另存为按钮事件&#xff1a; const saveAsHandler async () > {const { path, sessionId } recordInfoif(typeof message ! string) return;// 因为我的图片是加密的&#xff0c;所以我需要根据接口返回的路…...

Python分析假期对美国出生率的影响

背景 1、数据集下载 birthsHistorical US birth data culled from the CDC website - jakevdp/data-CDCbirthshttps://github.com/jakevdp/data-CDCbirths 2、数据集介绍 此数据来自美国疾病控制和预防中心&#xff0c;并通过 Google 的 BigQuery Web UI 使用以下查询进行编…...

机械臂笛卡尔空间轨迹规划

1. 重新优化末端轨迹规划 调整末端轨迹的插值方法或参数&#xff1a;如果之前使用的是线性插值&#xff0c;可改为三次样条插值。例如&#xff0c;对于一个在二维平面上从点(0, 0)到(10, 10)的末端轨迹&#xff0c;线性插值可能是简单地在每个时间步长均匀增加坐标值&#xff0…...

红队工具---Behinder学习

1.什么是Behinder&#xff1f; Behinder 是一款用于网络渗透测试的安全工具&#xff0c;主要用于对 Web 应用进行攻击和漏洞利用。它提供了强大的功能&#xff0c;是一款红队的大杀器&#xff0c;几乎是现代web安全必须学习的一款webshell管理工具。 主要用途 渗透测试&#…...

k8s 1.28.2 集群部署 NFS server 和 NFS Subdir External Provisioner

文章目录 [toc]前言部署 NFS server镜像准备节点打标签启动 NFS server创建 pv 验证创建 pvc创建 pod 挂载验证 部署 NFS Subdir External Provisioner创建 pod 验证提前创建 pvc 的方式使用 volumeClaimTemplates 的方式 前言 NFS Subdir External Provisioner 可以使用现有的…...

前端零基础入门到上班:【Day1】什么是前端?

本来打算开付费专栏 但是想起那句话 赠人玫瑰手留余香 引言1. 什么是前端&#xff1f;1.1 前端的定义1.2 前端的三大核心技术1.3 前端框架和工具 2. 什么是后端&#xff1f;2.1 后端的定义2.2 后端的组成要素2.3 后端框架和工具 3. 前后端的区别4. 什么是前后端分离&#xff1f…...

搜索二叉树 Binary Search Tree(BST)

【提醒】本章内容需掌握二叉树结构的基本概念和特性&#xff0c;不然可能阅读起来比较费劲。 一、 概念 什么是搜索二叉树&#xff1f;搜索二叉树和普通二叉树的却别是什么&#xff1f; 答&#xff1a; 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树 或者是具有以下性…...

2010年最具人气的平面设计师必备网站/百度店铺怎么开通

此题为某年微软面试题。转载于:https://www.cnblogs.com/SCUTMSTechClub/archive/2010/10/18/1855212.html...

做网站如何排版/外贸建站推广公司

A. 一农户在杀鸡前的晚上喂鸡&#xff0c;不经意地说&#xff1a;快吃吧&#xff0c;这是你最后一顿&#xff01;第二日&#xff0c;见鸡已躺倒并留遗书&#xff1a;爷已吃老鼠药&#xff0c;你们别想吃爷了&#xff0c;爷他妈也不是好惹的。当对手知道了你的决定之后&#xff…...

教育网站建设的策划方案/成都关键词优化报价

基督教 赞美诗歌 Hymns Lyrics MP3 中文版 英文版 中英对照 MP3音频提取&#xff08;自动播放&#xff09;&#xff1a; http://filer.blogbus.com/5320797/resource_53207971262594667h.mp3 &#xff08;右击迅雷或目标另存为&#xff09; 词曲&#xff1a; 写作背景介绍&…...

北京建网站 优帮云/营销技巧在线完整免费观看

题目描述 有一种技巧可以对数据进行加密&#xff0c;它使用一个单词作为它的密匙。下面是它的工作原理&#xff1a;首先&#xff0c;选择一个单词作为密匙&#xff0c;如TRAILBLAZERS。如果单词中包含有重复的字母&#xff0c;只保留第1个&#xff0c;将所得结果作为新字母表开…...

wordpress 安装 403/线上销售渠道有哪些

mysql max() 函数的需扫描where条件过滤后的所有行&#xff1a;在测试环境中重现&#xff1a;测试版本&#xff1a;Server version: 5.1.58-log MySQL Community Server (GPL)testtable表中的索引mysql> show index from testtable;-------------------------------…...

学做网站论坛插件/外贸业务推广

SimpleViewpagerIndicator 项目地址&#xff1a;al4fun/SimpleViewpagerIndicator 简介&#xff1a;一个简单的 Viewpager 指示器&#xff0c;提供多种可选样式 更多&#xff1a;作者 提 Bug 标签&#xff1a; viewpager指示器- 写这个小控件是因为最近负责维护的一…...