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

Vue记事本应用实现教程

article 2025/6/13 1:40:09

文章目录

- 1. 项目介绍
- 2. 开发环境准备
- 3. 设计应用界面
- 4. 创建Vue实例和数据模型
- 5. 实现记事本功能
- - 5.1 添加新记事项
  - 5.2 删除记事项
  - 5.3 清空所有记事
- 6. 添加样式
- 7. 功能扩展：显示创建时间
- 8. 功能扩展：记事项搜索
- 9. 完整代码
- 10. Vue知识点解析
- - 10.1 数据绑定
  - 10.2 列表渲染
  - 10.3 条件渲染
  - 10.4 事件处理
  - 10.5 计算属性
  - 10.6 侦听器
  - 10.7 生命周期钩子
- 11. 功能扩展思路
- 12. 总结

1. 项目介绍

本教程将带领新手开发一个基于Vue.js的记事本应用，不需要使用脚手架，仅通过引入Vue.js库即可完成。通过这个项目，你将学习Vue的基础知识，包括：

数据绑定和响应式原理
列表渲染
事件处理
计算属性
条件渲染
本地存储

完成后的记事本应用具有以下功能：

显示所有记事项
添加新记事项
删除单个记事项
显示记事项总数
一键清空所有记事项
数据持久化（浏览器本地存储）

2. 开发环境准备

对于初学者，我们采用最简单的方式搭建环境：通过CDN引入Vue.js。

创建一个基本的HTML文件结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue记事本</title><!-- 引入Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><!-- 添加一些基本样式 --><style>/* 样式稍后添加 */</style>
</head>
<body><div id="app"><!-- 这里将是我们的应用 --></div><script>// Vue代码将写在这里</script>
</body>
</html>

3. 设计应用界面

我们设计一个简洁的记事本界面，包含以下部分：

标题
输入框和添加按钮
记事项列表（每项包含内容和删除按钮）
底部统计栏（显示数量和清空按钮）

更新HTML结构：

<div id="app"><div class="notepad"><h1>{{ title }}</h1><!-- 添加记事项 --><div class="add-note"><input type="text" v-model="newNote" @keyup.enter="addNote" placeholder="请输入记事内容..."><button @click="addNote">添加</button></div><!-- 记事项列表 --><ul class="note-list"><li v-for="(note, index) in notes" :key="index"><span>{{ note.text }}</span><button @click="deleteNote(index)">删除</button></li><li v-if="notes.length === 0" class="empty-note">暂无记事项</li></ul><!-- 底部统计 --><div class="note-stats" v-show="notes.length > 0"><span>共 {{ notes.length }} 条记事</span><button @click="clearAll">清空记事</button></div></div>
</div>

4. 创建Vue实例和数据模型

在script标签中，我们创建Vue实例并定义数据模型：

new Vue({el: '#app',data: {title: 'Vue记事本',newNote: '',         // 用于存储新输入的记事内容notes: [],           // 用于存储所有记事项},// 在实例创建时从本地存储加载数据created() {// 从localStorage读取保存的笔记const savedNotes = JSON.parse(localStorage.getItem('vue-notes') || '[]');this.notes = savedNotes;},// 方法将在下一步定义methods: {// 方法将在这里实现},// 侦听器：当notes变化时保存到本地存储watch: {notes: {handler(newNotes) {// 将笔记保存到localStoragelocalStorage.setItem('vue-notes', JSON.stringify(newNotes));},deep: true}}
});

5. 实现记事本功能

5.1 添加新记事项

首先，我们实现添加记事项的功能。在methods对象中添加addNote方法：

methods: {// 添加新记事项addNote() {// 去除首尾空格const text = this.newNote.trim();// 如果输入为空，则不添加if (text === '') {return;}// 创建新记事项对象const note = {text: text,createdAt: new Date().toLocaleString() // 添加创建时间};// 将新记事项添加到数组this.notes.push(note);// 清空输入框this.newNote = '';},// 其他方法将在下面实现
}

5.2 删除记事项

接下来，实现删除单个记事项的功能：

// 添加到methods对象中
deleteNote(index) {// 确认删除if (confirm('确定要删除这条记事吗？')) {// 使用splice方法从数组中删除指定索引的记事项this.notes.splice(index, 1);}
}

5.3 清空所有记事

最后，实现清空所有记事项的功能：

// 添加到methods对象中
clearAll() {// 确认清空if (confirm('确定要清空所有记事吗？')) {// 将记事项数组清空this.notes = [];}
}

6. 添加样式

为了让应用看起来更美观，我们添加一些CSS样式：

/* 将这些样式添加到<style>标签中 */
body {font-family: 'Microsoft YaHei', sans-serif;background-color: #f5f5f5;padding: 20px;
}.notepad {max-width: 600px;margin: 0 auto;background-color: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}h1 {text-align: center;color: #333;margin-top: 0;border-bottom: 1px solid #eee;padding-bottom: 10px;
}.add-note {display: flex;margin-bottom: 20px;
}.add-note input {flex: 1;padding: 10px;border: 1px solid #ddd;border-radius: 4px 0 0 4px;outline: none;
}.add-note button {padding: 10px 15px;background-color: #4CAF50;color: white;border: none;border-radius: 0 4px 4px 0;cursor: pointer;
}.note-list {list-style: none;padding: 0;margin: 0;
}.note-list li {display: flex;justify-content: space-between;align-items: center;padding: 10px;border-bottom: 1px solid #eee;
}.note-list li:hover {background-color: #f9f9f9;
}.note-list li span {flex: 1;
}.note-list li button {padding: 5px 10px;background-color: #f44336;color: white;border: none;border-radius: 4px;cursor: pointer;
}.empty-note {text-align: center;color: #999;padding: 20px 0;
}.note-stats {display: flex;justify-content: space-between;align-items: center;margin-top: 20px;padding-top: 10px;border-top: 1px solid #eee;
}.note-stats button {padding: 5px 10px;background-color: #ff9800;color: white;border: none;border-radius: 4px;cursor: pointer;
}button:hover {opacity: 0.9;
}button:active {opacity: 0.8;
}

7. 功能扩展：显示创建时间

现在让我们扩展记事项，显示每条记事的创建时间。修改列表渲染部分：

<!-- 更新记事项列表 -->
<ul class="note-list"><li v-for="(note, index) in notes" :key="index"><div class="note-content"><span class="note-text">{{ note.text }}</span><span class="note-time">{{ note.createdAt }}</span></div><button @click="deleteNote(index)">删除</button></li><li v-if="notes.length === 0" class="empty-note">暂无记事项</li>
</ul>

添加对应的样式：

.note-content {flex: 1;
}.note-text {display: block;margin-bottom: 5px;
}.note-time {display: block;font-size: 12px;color: #999;
}

8. 功能扩展：记事项搜索

让我们增加一个搜索功能，帮助用户快速找到特定记事项：

在HTML中添加搜索框：

<!-- 在添加记事项的下方添加 -->
<div class="search-note"><input type="text" v-model="searchText" placeholder="搜索记事...">
</div>

在Vue实例中添加数据和计算属性：

data: {// 添加到现有data对象中searchText: '',  // 用于存储搜索文本
},
computed: {// 过滤后的记事项列表filteredNotes() {const searchText = this.searchText.trim().toLowerCase();if (!searchText) {return this.notes;}// 返回包含搜索文本的记事项return this.notes.filter(note => note.text.toLowerCase().includes(searchText));}
}

然后，修改列表渲染，使用过滤后的记事项：

<!-- 更新记事项列表，使用filteredNotes替代notes -->
<ul class="note-list"><li v-for="(note, index) in filteredNotes" :key="index"><div class="note-content"><span class="note-text">{{ note.text }}</span><span class="note-time">{{ note.createdAt }}</span></div><button @click="deleteNote(notes.indexOf(note))">删除</button></li><li v-if="filteredNotes.length === 0" class="empty-note">{{ notes.length === 0 ? '暂无记事项' : '没有匹配的记事项' }}</li>
</ul>

添加搜索框样式：

.search-note {margin-bottom: 20px;
}.search-note input {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 4px;outline: none;box-sizing: border-box;
}

9. 完整代码

以下是完整的HTML文件代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue记事本</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><style>body {font-family: 'Microsoft YaHei', sans-serif;background-color: #f5f5f5;padding: 20px;}.notepad {max-width: 600px;margin: 0 auto;background-color: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}h1 {text-align: center;color: #333;margin-top: 0;border-bottom: 1px solid #eee;padding-bottom: 10px;}.add-note {display: flex;margin-bottom: 20px;}.add-note input {flex: 1;padding: 10px;border: 1px solid #ddd;border-radius: 4px 0 0 4px;outline: none;}.add-note button {padding: 10px 15px;background-color: #4CAF50;color: white;border: none;border-radius: 0 4px 4px 0;cursor: pointer;}.search-note {margin-bottom: 20px;}.search-note input {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 4px;outline: none;box-sizing: border-box;}.note-list {list-style: none;padding: 0;margin: 0;}.note-list li {display: flex;justify-content: space-between;align-items: center;padding: 10px;border-bottom: 1px solid #eee;}.note-list li:hover {background-color: #f9f9f9;}.note-content {flex: 1;}.note-text {display: block;margin-bottom: 5px;}.note-time {display: block;font-size: 12px;color: #999;}.note-list li button {padding: 5px 10px;background-color: #f44336;color: white;border: none;border-radius: 4px;cursor: pointer;}.empty-note {text-align: center;color: #999;padding: 20px 0;}.note-stats {display: flex;justify-content: space-between;align-items: center;margin-top: 20px;padding-top: 10px;border-top: 1px solid #eee;}.note-stats button {padding: 5px 10px;background-color: #ff9800;color: white;border: none;border-radius: 4px;cursor: pointer;}button:hover {opacity: 0.9;}button:active {opacity: 0.8;}</style>
</head>
<body><div id="app"><div class="notepad"><h1>{{ title }}</h1><!-- 添加记事项 --><div class="add-note"><input type="text" v-model="newNote" @keyup.enter="addNote" placeholder="请输入记事内容..."><button @click="addNote">添加</button></div><!-- 搜索记事项 --><div class="search-note"><input type="text" v-model="searchText" placeholder="搜索记事..."></div><!-- 记事项列表 --><ul class="note-list"><li v-for="(note, index) in filteredNotes" :key="index"><div class="note-content"><span class="note-text">{{ note.text }}</span><span class="note-time">{{ note.createdAt }}</span></div><button @click="deleteNote(notes.indexOf(note))">删除</button></li><li v-if="filteredNotes.length === 0" class="empty-note">{{ notes.length === 0 ? '暂无记事项' : '没有匹配的记事项' }}</li></ul><!-- 底部统计 --><div class="note-stats" v-show="notes.length > 0"><span>共 {{ notes.length }} 条记事</span><button @click="clearAll">清空记事</button></div></div></div><script>new Vue({el: '#app',data: {title: 'Vue记事本',newNote: '',notes: [],searchText: ''},computed: {// 过滤后的记事项列表filteredNotes() {const searchText = this.searchText.trim().toLowerCase();if (!searchText) {return this.notes;}// 返回包含搜索文本的记事项return this.notes.filter(note => note.text.toLowerCase().includes(searchText));}},created() {// 从localStorage读取保存的笔记const savedNotes = JSON.parse(localStorage.getItem('vue-notes') || '[]');this.notes = savedNotes;},methods: {// 添加新记事项addNote() {// 去除首尾空格const text = this.newNote.trim();// 如果输入为空，则不添加if (text === '') {return;}// 创建新记事项对象const note = {text: text,createdAt: new Date().toLocaleString()};// 将新记事项添加到数组this.notes.push(note);// 清空输入框this.newNote = '';},// 删除记事项deleteNote(index) {// 确认删除if (confirm('确定要删除这条记事吗？')) {// 使用splice方法从数组中删除指定索引的记事项this.notes.splice(index, 1);}},// 清空所有记事clearAll() {// 确认清空if (confirm('确定要清空所有记事吗？')) {// 将记事项数组清空this.notes = [];}}},watch: {// 监听notes变化，保存到localStoragenotes: {handler(newNotes) {localStorage.setItem('vue-notes', JSON.stringify(newNotes));},deep: true}}});</script>
</body>
</html>

10. Vue知识点解析

通过这个项目，我们学习了以下Vue的知识点：

10.1 数据绑定

v-model：用于表单输入和应用数据之间的双向绑定
插值表达式 {{ }}：显示变量内容

10.2 列表渲染

v-for：遍历数组渲染列表项
:key：为列表项提供唯一标识符，帮助Vue优化渲染

10.3 条件渲染

v-if/v-else：根据条件决定是否渲染元素
v-show：根据条件切换元素的显示和隐藏（CSS的display属性）

10.4 事件处理

@click（即v-on:click）：监听点击事件
@keyup.enter：监听按下回车键事件

10.5 计算属性

computed：基于响应式依赖进行缓存，只有依赖更新时才重新计算

10.6 侦听器

watch：监听数据变化，执行相应操作
deep选项：深度监听对象内部变化
immediate选项：组件创建时立即执行一次

10.7 生命周期钩子

created：实例创建后执行代码（如从本地存储加载数据）

11. 功能扩展思路

以下是一些可以进一步扩展记事本功能的思路：

优先级标记：允许用户为记事项设置不同的优先级，并可按优先级排序。
分类功能：添加分类标签，对记事项进行分组管理。
编辑功能：允许用户编辑已添加的记事项。
完成状态：添加复选框，标记记事项为已完成或未完成状态。
拖拽排序：使用拖拽功能调整记事项的顺序。
导入/导出：支持将记事数据导出为文件，或从文件导入记事。
日期筛选：按照创建日期筛选记事项。
数据统计：显示更多统计信息，如已完成/未完成的任务数量。
夜间模式：添加切换夜间/日间模式的功能。
云同步：结合后端服务，实现记事内容的云端同步。

12. 总结

通过本教程，我们使用Vue.js构建了一个功能完整的记事本应用。虽然这是一个小型应用，但它涵盖了Vue的核心概念和实践技巧。作为新手，你可以通过这个项目了解Vue的数据驱动、组件化和响应式的特性，为进一步学习Vue打下基础。

要深入学习Vue，建议接下来了解Vue CLI、Vue Router、Vuex等进阶工具和概念，并尝试使用组件化的方式重构此应用。

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程日记 2025/6/13 1:40:09

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程日记 2025/6/12 22:18:58

地震勘探——干扰波识别、井中地震时距曲线特点

目录干扰波识别反射波地震勘探的干扰波井中地震时距曲线特点干扰波识别有效波：可以用来解决所提出的地质任务的波；干扰波：所有妨碍辨认、追踪有效波的其他波。地震勘探中，有效波和干扰波是相对的。例如，在反射波…...

编程日记 2025/6/12 23:09:18

7.4.分块查找

一.分块查找的算法思想： 1.实例： 以上述图片的顺序表为例， 该顺序表的数据元素从整体来看是乱序的，但如果把这些数据元素分成一块一块的小区间， 第一个区间[0,1]索引上的数据元素都是小于等于10的， 第二…...

编程日记 2025/6/12 23:09:11

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程日记 2025/6/12 21:22:09

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文｜魏琳华编｜王一粟一场大会，聚集了中国多模态大模型的“半壁江山”。智源大会2025为期两天的论坛中，汇集了学界、创业公司和大厂等三方的热门选手，关于多模态的集中讨论达到了前所未有的热度。其中，…...

编程日记 2025/6/12 23:09:07

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录一、前言二、UserServiceRpc_Stub 三、 CallMethod方法的重写头文件实现四、rpc调用端的调用实现五、 google::protobuf::RpcController *controller 头文件实现六、总结一、前言在前边的文章中，我们已经大致实现了rpc服务端的各项功能代…...

编程日记 2025/6/12 21:15:36

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园二、准备工作 1. 编译环境宿主机：Ubuntu 20.04.6 LTSHost：ARM32位交叉编译器：arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链在交叉编译之前&#x…...

编程日记 2025/6/13 1:42:12

Cursor实现用excel数据填充word模版的方法

cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中文章目录注意事项逐步生成程序1. 确定格式2. 调试程序注意事项直接给一个excel文件和最终呈现的word文件的示例，…...

编程日记 2025/6/12 19:08:37

synchronized 学习

学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...

编程日记 2025/6/11 16:22:56

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程日记 2025/6/13 1:58:45

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石，设计模式在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类：一、创建型模式（5种） 1. 单例模式（Sing…...

编程日记 2025/6/13 6:39:58

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器支持多种策略分发流量…...

编程日记 2025/6/12 19:52:49

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为：煮水 - 冲泡 - 倒入杯中 - 加入辅料利用多态技术实现本案例，提供抽象制作饮品基类，提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程日记 2025/6/12 23:08:53

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...

编程日记 2025/6/12 23:08:49

使用VSCode开发Django指南

使用VSCode开发Django指南一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...

编程日记 2025/6/12 23:08:43

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。具体可参…...

编程日记 2025/6/12 22:32:24

超短脉冲激光自聚焦效应

前言与目录强激光引起自聚焦效应机理超短脉冲激光在脆性材料内部加工时引起的自聚焦效应，这是一种非线性光学现象，主要涉及光学克尔效应和材料的非线性光学特性。自聚焦效应可以产生局部的强光场，对材料产生非线性响应，可能…...

编程日记 2025/6/12 23:08:39

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化：人工智能的自我改进与监管挑战文章目录递归进化：人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管？3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程日记 2025/6/12 22:33:09

Linux 文件类型，目录与路径，文件与目录管理

文件类型后面的字符表示文件类型标志普通文件：-（纯文本文件，二进制文件，数据格式文件） 如文本文件、图片、程序文件等。目录文件：d（directory） 用来存放其他文件或子目录。设备…...

编程日记 2025/6/12 16:24:21

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...

编程日记 2025/6/12 23:08:29

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程日记 2025/6/12 23:08:23

【kafka】Golang实现分布式Masscan任务调度系统

要求： 输出两个程序，一个命令行程序（命令行参数用flag）和一个服务端程序。命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽，然后将消息推送到kafka里面。服务端程序： 从kafka消费者接收…...

编程日记 2025/6/12 19:09:04

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天，再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至，这不仅是开发者的盛宴，更是全球数亿苹果用户翘首以盼的科技春晚。今年，苹果依旧为我们带来了全家桶式的系统更新，包括 iOS 26、iPadOS 26…...

编程日记 2025/6/12 23:08:10

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用安装包的方式快…...

编程日记 2025/6/12 21:22:29

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...

编程日记 2025/6/13 7:13:25

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank？由于时间太久，我真忘记了。搜搜发现，还真有人和我一样。见下面的链接：https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程日记 2025/6/12 23:07:58

springboot 百货中心供应链管理系统小程序

一、前言随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，百货中心供应链管理系统被用户普遍使用，为方…...

编程日记 2025/6/13 5:45:26

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程日记 2025/6/12 20:15:40

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别二、内核链表结构与宏解析常用宏/函数三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程日记 2025/6/11 16:01:24