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

【VUE案例练习】前端vue2+element-ui，后端nodo+express实现‘‘文件上传/删除‘‘功能

news 来源：原创 2025/7/5 11:16:24

近期在做跟毕业设计相关的数据后台管理系统，其中的列表项展示有图片展示，添加/编辑功能有文件上传。

“文件上传/删除”也是我们平时开发会遇到的一个功能，这里分享个人的实现过程，与大家交流谈论~

一、准备工作

本次案例使用的node版本是18.16.1
前端vue2+element-ui
后端使用node+express
安装对应库：element-ui、axios、multer

注意：本篇重点介绍文件上传的相关功能，后端express的具体使用可以看我的express专栏~

express专栏

二、前端

文件上传组件，来自element-ui组件库

注意：自行安装组件库

Element - The world's most popular Vue UI framework

关于组件，有些展示和功能需要对应设置（比如文件上传的服务器地址，删除后端文件等等）才可以正常使用，所以我对代码进行了修改补充。

组件代码

<template><div><el-uploadref="upload"action="http://localhost:4000/api/upload"  //文件上传的接口list-type="picture-card":on-preview="handlePictureCardPreview":on-remove="handleRemove":file-list="fileList":on-change="handleFileChange":on-success="handleUploadSuccess":on-error="handleUploadError"name="file"><i class="el-icon-plus" /></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></div>
</template>

变量和相关函数

注意：需要安装axios（若安装则跳过）

npm install axios

<script>
import Axios from 'axios'
export default {data() {return {dialogImageUrl: '', //预览时展示的图片dialogVisible: false,fileList: [] // 用于存储文件列表}},methods: {// 生成文件预览 URLhandleFileChange(file, fileList) {file.url = URL.createObjectURL(file.raw)this.fileList = fileList},// 删除文件handleRemove(file, fileList) {this.fileList = fileList// 调用后端删除接口if (file.response && file.response.data) {this.deleteFile(file.response.data)} else {this.$message.warning('文件尚未上传成功，无法删除')}},// 预览图片handlePictureCardPreview(file) {this.dialogImageUrl = file.urlthis.dialogVisible = true},// 文件上传成功handleUploadSuccess(response, file) {console.log('文件上传成功', response)if (response.code === 0) {// 从后端响应中获取图片的 URLconst imageUrl = response.data// 更新 fileList 中的文件 URLconst index = this.fileList.findIndex(f => f.uid === file.uid)if (index !== -1) {this.fileList[index].url = imageUrlthis.fileList[index].response = response // 保存后端返回的响应}this.$message.success('文件上传成功')} else {this.$message.error('文件上传失败: ' + response.msg)}},// 文件上传失败handleUploadError(err, file) {console.error('文件上传失败', err)this.$message.error('文件上传失败')},deleteFile(filename) {// 去掉前缀 /public/static/upload/const pureFilename = filename.replace('/public/static/upload/', '')// 调用后端删除接口Axios.delete(`http://localhost:4000/api/upload/${pureFilename}`).then(response => {if (response.data.code === 0) {this.$message.success('文件删除成功')} else {this.$message.error('文件删除失败: ' + response.data.msg)}}).catch(err => {console.error('文件删除失败', err)this.$message.error('文件删除失败')})}}
}
</script>

完整代码

注意看：''localhost:4000''相关字眼（关于后端接口的，下文会作介绍）

<template><div><el-uploadref="upload"action="http://localhost:4000/api/upload"list-type="picture-card":on-preview="handlePictureCardPreview":on-remove="handleRemove":file-list="fileList":on-change="handleFileChange":on-success="handleUploadSuccess":on-error="handleUploadError"name="file"><i class="el-icon-plus" /></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></div>
</template><script>
import Axios from 'axios'
export default {data() {return {dialogImageUrl: '',dialogVisible: false,fileList: [] // 用于存储文件列表}},methods: {// 生成文件预览 URLhandleFileChange(file, fileList) {file.url = URL.createObjectURL(file.raw)this.fileList = fileList},// 删除文件handleRemove(file, fileList) {this.fileList = fileList// 调用后端删除接口if (file.response && file.response.data) {this.deleteFile(file.response.data)} else {this.$message.warning('文件尚未上传成功，无法删除')}},// 预览图片handlePictureCardPreview(file) {this.dialogImageUrl = file.urlthis.dialogVisible = true},// 文件上传成功handleUploadSuccess(response, file) {console.log('文件上传成功', response)if (response.code === 0) {// 从后端响应中获取图片的 URLconst imageUrl = response.data// 更新 fileList 中的文件 URLconst index = this.fileList.findIndex(f => f.uid === file.uid)if (index !== -1) {this.fileList[index].url = imageUrlthis.fileList[index].response = response // 保存后端返回的响应}this.$message.success('文件上传成功')} else {this.$message.error('文件上传失败: ' + response.msg)}},// 文件上传失败handleUploadError(err, file) {console.error('文件上传失败', err)this.$message.error('文件上传失败')},// 删除后端文件，参数传递的是文件名（经前端上传过后，返回给前端的文件名）deleteFile(filename) {// 去掉前缀 /public/static/upload/const pureFilename = filename.replace('/public/static/upload/', '')// 调用后端删除接口Axios.delete(`http://localhost:4000/api/upload/${pureFilename}`).then(response => {if (response.data.code === 0) {this.$message.success('文件删除成功')} else {this.$message.error('文件删除失败: ' + response.data.msg)}}).catch(err => {console.error('文件删除失败', err)this.$message.error('文件删除失败')})}}
}
</script><style>
.el-upload-list__item-thumbnail {width: 100%;height: 100%;object-fit: cover;
}
</style>

三、后端

1、搭建express应用

【express-generator】01-安装和基本使用

如果按照文章步骤（默认端口是3000，我这里设置成4000端口），则对应更换端口为4000，在创建的express项目的bin/www中进行修改。

2、新建文件夹以及文件

2.1、新建public/static/upload

这是存储上传文件的位置。

2.2、新建routes/upload.js，用于撰写路由方法。

安装multer，这是处理文件上传的相关库。

npm install multer

var express = require("express");
const multer = require("multer");
const { uploading } = require("../utils/tool");
const fs = require('fs');
const path = require('path');
var router = express.Router();// 文件上传接口
router.post("/", async function (req, res, next) {// single 方法里面书写上传控件的 name 值uploading.single("file")(req, res, function (err) {if (err instanceof multer.MulterError) {next("上传文件失败，请检查文件的大小，控制在 6MB 以内");} else {console.log("req.file>>>", req.file);const filePath = "/public/static/upload/" + req.file.filename;res.send({ code: 0, msg: "文件上传成功", data: filePath });}})
});// 文件删除接口
router.delete("/:filename", function (req, res, next) {const filename = req.params.filename;const filePath = path.join(__dirname, '../public/static/upload',filename);console.log("后端接收到的文件参数>>>",filename,"完整基本路径是>>>>",filePath);fs.unlink(filePath, (err) => {if (err) {console.error("删除文件失败", err);return res.status(500).send({ code: 1, msg: "删除文件失败" });}res.send({ code: 0, msg: "文件删除成功" });});
});module.exports = router;

2.3、新增utlis/tool.js，撰写工具类函数。

const multer = require("multer");
const path = require("path");// 设置上传文件的引擎
const storage = multer.diskStorage({// 文件存储的位置destination: function (req, file, cb) {cb(null, __dirname + '/../public/static/upload');},// 上传到服务器的文件，文件名要做单独处理filename: function (req, file, cb) {// 获取文件名const basename = path.basename(file.originalname, path.extname(file.originalname));// 获取后缀名const extname = path.extname(file.originalname);// 构建新的名字const newName = basename + new Date().getTime() + Math.floor(Math.random() * 9000 + 1000) + extname;cb(null, newName);}
})module.exports.uploading = multer({storage: storage,limits: {fileSize: 6000000,files: 1}
})

3、在app.js中引入和使用

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
const cors = require('cors');
// 文件上传
const multer = require('multer');
const fs = require('fs');
// const path = require('path');var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var uploadRouter = require('./routes/upload');
var app = express();// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');// 允许所有来源访问
app.use(cors());// 文件上传
// const upload = multer({ dest: 'static/upload/' });
app.use(express.static(path.join(__dirname, 'public')));
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/api/upload/', uploadRouter);// error handler
app.use(function(err, req, res, next) {// set locals, only providing error in developmentres.locals.message = err.message;res.locals.error = req.app.get('env') === 'development' ? err : {};// render the error pageres.status(err.status || 500);res.render('error');
});module.exports = app;

四、测试

1、上传文件（图片）

查看存储上传文件的位置

2、删除文件（图片）

前端组件，鼠标进入到图片区域，点击删除按键

前端作出对应提示

最后前端的文件列表也为空，成功删除了文件。

后端查看文件夹，发现刚上传的文件由于前端的删除操作，也对应进行了删除。

五、总结

一些注意点

express应用默认端口号是3000，而案例演示的是4000（因为一般情况，3000端口容易被其他代码程序给使用用，避免这种情况，可以使用一个新的端口号（或者把占用3000端口的程序都关闭））

关于文件上传的设置，涉及到的知识点比较多，比如fs.unlink，path相关的知识，需要大家自行进行补充了解，部分知识点可以参考下方这篇博客文章。

【NODE】01-fs和path常用知识点

如果有问题，请留言评论~

如果你喜欢这篇文章，留下你的点赞和收藏~

【VUE案例练习】前端vue2+element-ui，后端nodo+express实现‘‘文件上传/删除‘‘功能

近期在做跟毕业设计相关的数据后台管理系统，其中的列表项展示有图片展示，添加/编辑功能有文件上传。 “文件上传/删除”也是我们平时开发会遇到的一个功能，这里分享个人的实现过程，与大家交流谈论~ 一、准备工作本次案例使用的…...

编程日记 2025/7/5 11:16:24

【B站保姆级视频教程：Jetson配置YOLOv11环境（六）PyTorchTorchvision安装】

Jetson配置YOLOv11环境（6）PyTorch&Torchvision安装文章目录 1. 安装PyTorch1.1安装依赖项1.2 下载torch wheel 安装包1.3 安装 2. 安装torchvisiion2.1 安装依赖2.2 编译安装torchvision2.2.1 Torchvisiion版本选择2.2.2 下载torchvisiion到Downloa…...

编程日记 2025/7/3 16:49:01

relational DB与NoSQL DB有什么区别？该如何选型？

Relational Database（关系型数据库，简称RDB）与NoSQL Database（非关系型数据库）是两类常见的数据库类型。它们在设计理念、数据存储方式、性能优化、扩展性等方面有许多差异。下面我们将会详细分析它们的区别，以及如何根据应用场景进行选型。一、数据模型的区别关系型…...

编程日记 2025/7/5 11:03:04

解决对axios请求返回对象进行json化时报“TypeError Converting circular structure to JSON“错误的问题

发现直接对axios请求返回对象进行json化会报"TypeError: Converting circular structure to JSON"错误，而对返回对象下的data属性进行json化就没问题如果想对循环引用的对象进行json化，解决方案可参考： TypeError: Converting c…...

编程日记 2025/7/2 10:42:56

优化代码性能：利用CPU缓存原理

在计算机的世界里，有一场如同龟兔赛跑般的速度较量，主角便是 CPU 和内存。龟兔赛跑的故事大家都耳熟能详，兔子速度飞快，乌龟则慢吞吞的。在计算机中，CPU 就如同那敏捷的兔子，拥有超高的运算速度&#xff0…...

编程日记 2025/7/3 18:14:03

Rust场景示例：为什么要使用切片类型

通过对比不用切片和使用切片的场景，说明切片类型在 Rust 中的必要性： 场景：提取字符串中的单词假设我们需要编写一个函数，从一个句子中提取第一个单词。我们将分别展示不用切片和使用切片的实现，并对比二者的…...

编程日记 2025/7/3 4:13:00

ubuntu直接运行arm环境qemu-arm-static

qemu-arm-static 嵌入式开发有时会在ARM设备上使用ubuntu文件系统。开发者常常会面临这样一个问题，想预先交叉编译并安装一些应用程序，但是交叉编译的环境配置以及依赖包的安装十分繁琐，并且容易出错。想直接在目标板上进行编译和安装&#x…...

编程日记 2025/7/4 15:21:36

HTTP 黑科技

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/literature?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，…...

编程日记 2025/7/2 23:52:38

【Vite + Vue + Ts 项目三个 tsconfig 文件】

Vite Vue Ts 项目三个 tsconfig 文件为什么 Vite Vue Ts 项目会有三个 tsconfig 文件？首先我们先了解什么是 tsconfig.json ? 为什么 Vite Vue Ts 项目会有三个 tsconfig 文件？ 在使用 Vite 创建 vue-ts 模板的项目时，会发现除了 ts…...

编程日记 2025/7/3 0:17:01

Mac怎么彻底卸载软件，简单彻底的卸载方式

一个阳光明媚的下午，咖啡厅里，珂珂正在和他的好友帅帅讨论如何优化他们的Mac电脑，特别是谈到Mac怎么彻底卸载软件的时候，帅帅就特别感同身受，因为他近期就遇到了这个的麻烦，并且找了很久才找到号的解决方案…...

编程日记 2025/7/3 8:13:51

15 刚体变换模块（rigid.rs）

rigid.rs是一个表示三维刚体变换（Rigid Transformation）的结构体定义，用于在计算机图形学、机器人学以及物理模拟等领域中表示物体在三维空间中的旋转和平移。在这个定义中，所有长度在变换后都保持不变，这是刚体变换的…...

编程日记 2025/7/1 19:52:09

springboot使用rabbitmq

使用springboot创建rabbitMQ的链接。整个项目结构如下： 1.maven依赖 <dependency><groupId>com.rabbitmq</groupId><artifactId>amqp-client</artifactId><version>3.4.1</version> </dependency>application.y…...

编程日记 2025/7/1 12:03:20

【Linux】一文带你入门了解线程和虚拟地址空间中页表映射的秘密（内附手绘底层逻辑图通俗易懂）

绪论每日激励：“努力去做自己该做的，但是不要期待回报，不是付出了就会有回报的，做了就不要后悔，不做才后悔。—Jack” 绪论： 本章是LInux中非常重要的线程部分，通过了解线程的基本概念&am…...

编程日记 2025/6/30 7:53:50

高并发、高可用的消息队列（MQ）设计与实战

目录背景与历史消息队列的核心功能高并发、高可用的业务场景消息队列的实用性企业规模与消息队列的选择Java实战案例：基于RabbitMQ的高并发、高可用消息队列 6.1 环境准备6.2 RabbitMQ的安装与配置6.3 Java客户端集成6.4 生产者与消费者实现6.5 高并发处理6.6 高可…...

编程日记 2025/7/3 17:50:42

nginx 新手指南

文章来源：https://nginx.cadn.net.cn/beginners_guide.html 本指南对 nginx 进行了基本的介绍，并描述了一些可以用它完成的简单任务。假设 nginx 已经安装在阅读器的机器上。如果不是，请参阅安装 nginx 页面。本指南介绍如何启动和停止…...

编程日记 2025/6/28 3:06:22

7-4 西安距离

小明来到了古都西安，想去参观大唐西市！ 西安的道路可以看做是与x轴或y轴垂直的直线，小明位于(a,b)，而目的地位于(c,d)，问最少几步可以到达。输入格式: 一行中四个整数，a,b,c,d，表示坐标为(a…...

编程日记 2025/6/29 23:00:50

VScode+Latex (Recipe terminated with fatal error: spawn xelatex ENOENT)

使用VSCode编辑出现Recipe terminated with fatal error: spawn xelatex ENOENT问题咋办？ 很好解决，大概率的原因是因为latex没有添加到系统环境变量中，所有设置的编译工具没有办法找到才出现的这种情况。解决方法： winR 然后输…...

编程日记 2025/7/4 15:58:35

使用 Elastic Cloud Hosted 优化长期数据保留：确保政府合规性和效率

作者：来自 Elastic Jennie Davidowitz 在数字时代，州和地方政府越来越多地承担着管理大量数据的任务，同时确保遵守严格的监管要求。这些法规可能因司法管辖区而异，通常要求将数据保留较长时间 —— 有时从一年到七年不等。遵守刑事…...

编程日记 2025/7/3 7:56:01

51单片机 02 独立按键

一、独立按键控制LED亮灭轻触按键：相当于是一种电子开关，按下时开关接通，松开时开关断开，实现原理是通过轻触按键内部的金属弹片受力弹动来实现接通和断开。 #include <STC89C5xRC.H> void main() { // P20xFE;while(1){…...

编程日记 2025/7/3 1:12:23

海外问卷调查渠道查，具体运营的秘密

相信只要持之以恒并逐渐掌握技巧，每一位调查人在踏上征徐之时都会非常顺利的。并在日后的职业生涯中拥有捉刀厮杀的基本技能！本文会告诉你如何做好一个优秀的海外问卷调查人。在市场经济高速发展的今天，众多的企业为了自身的生存和发展而在…...

编程日记 2025/7/3 11:02:25

Vue.js 的介绍与组件开发初步

Vue.js 的介绍与组件开发初步 Vue.js 的介绍与组件开发初步引言第一部分：Vue.js 基础入门1.1 什么是 Vue.js？1.2 搭建 Vue.js 开发环境安装 Node.js 和 npm安装 Vue CLI创建新项目运行示例 1.3 第一个 Vue.js 示例第二部分：Vue.js 组件开发基…...

编程日记 2025/7/1 1:14:43

Shadow DOM举例

这东西具有隔离效果，对于一些插件需要append一些div倒是不错的选择 <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"utf-8"> <title>演示例子</title> </head> <body> <style&g…...

编程日记 2025/7/3 1:15:41

kamailio-Core 说明书版本：Kamailio SIP Server v6.0.x（稳定版）

Core 说明书版本：Kamailio SIP Server v6.0.x（稳定版） 概述本教程收集了 Kamailio 导出的函数和参数 core 添加到配置文件中。注意：此页面上的参数不按字母顺序排列。结构 kamailio.cfg 的结构可以看作是三个部分&#xff…...

编程日记 2025/7/3 1:08:30

PHP XML操作指南

PHP XML操作指南引言随着互联网的快速发展，数据交换和共享变得越来越重要。XML（可扩展标记语言）作为一种灵活的标记语言，被广泛应用于各种数据交换场景。PHP作为一种流行的服务器端脚本语言，具有强大的XML处理能力…...

编程日记 2025/6/27 23:58:47

一文了解DeepSeek

1. DeepSeek 的起源创立时间：DeepSeek 于 2023 年由中国的梁文锋创立。 V3 模型训练成本：最终训练成本为 600 万美元。开源：DeepSeek 提供开源版本。流行度：DeepSeek R1 模型成为 Apple 应用商店中下载量最高的应用。 2. …...

编程日记 2025/7/2 13:06:26

三角形的最大周长（976）

976. 三角形的最大周长 - 力扣（LeetCode） 可以一起总结的题目：三数之和（15）-CSDN博客官方解法： class Solution { public://官方解法int largestPerimeter(vector<int>& nums) {sort(nums.be…...

编程日记 2025/7/2 7:23:26

10：预处理

预处理 1、宏替换2、头文件包含3、条件编译4、typedef和#define的区别5、#define中的注意点5.1、使用do....while(0)5.2、#和##的含义 C语言编译器在编译程序之前，会先使用预处理器(预处理器)处理代码，代码经过预处理之后再送入编译器进行编译。预处理器…...

编程日记 2025/7/4 15:53:08

一文讲解HashMap线程安全相关问题(上)

HashMap不是线程安全的，主要有以下几个问题： ①、多线程下扩容会死循环。JDK1.7 中的 HashMap 使用的是头插法插入元素，在多线程的环境下，扩容的时候就有可能导致出现环形链表，造成死循环。 JDK 8 时已经修复了这个问…...

编程日记 2025/6/30 10:44:48

C++泛型编程指南04-（对默认调用参数的类型推断）

文章目录问题描述解决方案示例代码关键点解释进一步改进：结合概念约束你提到的情况确实是一个常见的问题：在C中，类型推断不适用于默认调用参数。这意味着如果你希望函数模板能够通过默认参数来实例化，你需要为模板参数提供一个…...

编程日记 2025/7/5 8:36:46

Python爬虫：1药城店铺爬虫（完整代码）

⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ 🐴作者：秋无之地 🐴简介：CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作，主要擅长领域有：爬虫、后端、大数据…...

编程日记 2025/7/2 21:31:19

浅谈知识蒸馏技术

最近爆火的DeepSeek 技术，将知识蒸馏技术运用推到我们面前。今天就简单介绍一下知识蒸馏技术并附上python示例代码。知识蒸馏（Knowledge Distillation）是一种模型压缩技术，它的核心思想是将一个大型的、复杂的教师模型&#xff0…...

编程日记 2025/7/1 18:31:28

【人工智能】使用Python和Hugging Face构建情感分析应用：从模型训练到Web部署

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界情感分析是自然语言处理（NLP）中的重要任务，它通过分析文本来判断情绪或观点的倾向性。近年来，预训练语言模型如BERT、GPT等在情感分析任…...

编程日记 2025/7/2 7:23:15

【R语言】函数

一、函数格式如下所示： hello：函数名；function：定义的R对象是函数而不是其它变量；()：函数的输入参数，可以为空，也可以包含参数；{}：函数体，如果…...

编程日记 2025/7/2 18:11:43

python leetcode 笔记

只为记录一些python相关的特殊写法无穷大，无穷小，NAN float(inf), float(-inf), float(nan) 判断字符的类型 isdigit(x) isspace(x) 字符串拼接 /.join([a,b,c]) # a/b/c 格式转换，字符转整形 ord(a) # 97 chr(97) # a 进制转…...

编程日记 2025/7/1 16:32:51

基于SpringBoot的青年公寓服务平台的设计与实现(源码+SQL脚本+LW+部署讲解等)

专注于大学生项目实战开发,讲解,毕业答疑辅导，欢迎高校老师/同行前辈交流合作✌。技术范围：SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：…...

编程日记 2025/7/2 13:33:12

深入剖析 HTML5 新特性：语义化标签和表单控件完全指南

系列文章目录 01-从零开始学 HTML：构建网页的基本框架与技巧 02-HTML常见文本标签解析：从基础到进阶的全面指南 03-HTML从入门到精通：链接与图像标签全解析 04-HTML 列表标签全解析：无序与有序列表的深度应用 05-HTML表格标签全面…...

编程日记 2025/6/30 12:25:36

kamailio的kamctl的使用

kamctl 是 Kamailio SIP 服务器的管理工具，用于执行各种管理任务，如启动、停止、重启 Kamailio 进程，管理用户、ACL、路由、信任的 IP 地址等。以下是对 kamctl 命令的解释及举例说明： 1. 启动、停止、重启 Kamailio start: 启动…...

编程日记 2025/7/3 20:22:27

[创业之路-270]：《向流程设计要效率》-2-企业流程架构模式 POS架构(规划、业务运营、支撑）、OES架构（业务运营、使能、支撑）

目录一、POS架构二、OES架构三、POS架构与OES架构的差异四、各自的典型示例 POS架构典型示例 OES架构典型示例示例分析五、各自的典型企业 POS架构典型企业 OES架构典型企业分析六、各自典型的流程 POS架构的典型流程 OES架构的典型流程企业流程架构模式…...

编程日记 2025/7/4 16:38:03

【leetcode100】路径总和Ⅲ

1、题目描述给定一个二叉树的根节点 root ，和一个整数 targetSum ，求该二叉树里节点值之和等于 targetSum 的路径的数目。路径不需要从根节点开始，也不需要在叶子节点结束，但是路径方向必须是向下的（只能从父节点…...

编程日记 2025/7/3 8:21:11

用结构加法3ax+1预测第4点的分布

有1个点在19*19的平面上在某种力的作用下运动，轨迹为共移动了90步，按照（0，1，2，3），（1，2，3，4），…，&…...

编程日记 2025/7/1 15:38:48

CTF-web: Python YAML反序列化利用

PyYAML存在以下几个特殊标签,如果这些标签被不安全的解析,会造成解析漏洞从 PyYaml 版本 6.0 开始，load 的默认加载器已切换到 SafeLoader，以降低远程代码执行的风险。更新后易受攻击的是 yaml.unsafe_load 和 yaml.load(input, Loaderyaml.UnsafeLoade…...

编程日记 2025/7/4 21:24:33

JDK-1.8.0_432安装（CentOS7）

目录 1、卸载系统自带JDK 2、下载安装包并解压 3、赋予可执行权限 4、设置环境变量 5、刷新环境变量 6、查看JDK版本 1、卸载系统自带JDK # 查询出自带的jdk rpm -qa | grep jdk rpm -qa | grep java # 将上述命令列出的包依次删除 rpm -e --nodeps xxxxxxx 2、下载…...

编程日记 2025/6/30 20:03:29

OpenGL学习笔记（五）：Textures 纹理

文章目录纹理坐标纹理环绕方式纹理过滤——处理纹理分辨率低的情况多级渐远纹理Mipmap——处理纹理分辨率高的情况加载与创建纹理 （ <stb_image.h> ）生成纹理应用纹理纹理单元练习1练习2练习3练习4 通过上一篇着色部分的学习，我们可以…...

编程日记 2025/7/2 12:13:15

【Pytorch和Keras】使用transformer库进行图像分类

目录一、环境准备二、基于Pytorch的预训练模型1、准备数据集2、加载预训练模型3、使用pytorch进行模型构建三、基于keras的预训练模型四、模型测试五、参考现在大多数的模型都会上传到huggface平台进行统一的管理，transformer库能关联到huggface中对应的模型&am…...

编程日记 2025/7/4 20:47:32

2025年Android开发趋势全景解读

文章目录一、界面开发：从"手写代码"到"智能拼装"1.1 Jetpack Compose实战进化1.2 淘汰XML布局的三大信号二、AI融合开发：无需炼丹的普惠智能2.1 设备端AI三大杀手级应用2.2 成本对比：设备端VS云端AI 三、跨平台演进&am…...

编程日记 2025/7/2 17:47:41

Python NumPy（12）：NumPy 字节交换、NumPy 副本和视图、NumPy 矩阵库(Matrix)

1 NumPy 字节交换在几乎所有的机器上，多字节对象都被存储为连续的字节序列。字节顺序，是跨越多字节的程序对象的存储规则。大端模式：指数据的高字节保存在内存的低地址中，而数据的低字节保存在内存的高地址中，这样的…...

编程日记 2025/6/28 13:23:48

【Vaadin flow 实战】第5讲-使用常用UI组件绘制页面元素

vaadin flow官方提供的UI组件文档地址是 https://vaadin.com/docs/latest/components这里，我简单实战了官方提供的一些免费的UI组件，使用案例如下： Accordion 手风琴 Accordion 手风琴效果组件 Accordion 手风琴-测试案例代码 Slf4j PageT…...

编程日记 2025/7/4 5:04:31

第三篇：模型压缩与量化技术——DeepSeek如何在边缘侧突破“小而强”的算力困局

——从算法到芯片的全栈式优化实践随着AI应用向移动终端与物联网设备渗透，模型轻量化成为行业核心挑战。DeepSeek通过自研的“算法-编译-硬件”协同优化体系，在保持模型性能的前提下，实现参数量与能耗的指数级压缩。本文从技术原理、工程实…...

编程日记 2025/7/4 15:59:50

搜索与图论复习2最短路

单源最短路---所有边权是正数(Dijkstra算法O(n^2)--稠密图(邻接矩阵)和堆优化的Dijkstra算法O(mlogn)--稀疏图(邻接表)) 或存在负边权(Bellman-ford贝尔曼福特算法O(nm)和SPFA一般O(m) 最坏O(nm) ) 多源最短路---Floyd算法O(n^3) 一、迪杰斯特拉算法(Dijkstra)：1…...

编程日记 2025/7/2 20:57:42

redis集群理论详解

一. Redis集群发展历程本片文章只介绍集群理论知识，不包含Redis集群搭建教程教程文章请点击docker搭建redis集群（三主三从） 阶段一：单机版Redis 优点： 简单：易于部署和使用，适合小型项目或初期…...

编程日记 2025/7/2 21:40:49