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

python-66-前后端分离之图书管理系统的Vue前端项目逐行分析

article 2026/1/22 16:22:26

文章目录

  • 1 App.vue的数据表格
    • 1.1 template部分
      • 1.1.1 div标签
      • 1.1.2 h1标签
      • 1.1.3 el-button标签
      • 1.1.4 el-table标签
      • 1.1.5 el-table-column标签
      • 1.1.6 表格中放置按钮
    • 1.2 script部分
      • 1.2.1 加载库和函数
      • 1.2.2 创建响应式数组
      • 1.2.3 创建getBooks函数
      • 1.2.4 onMounted函数
      • 1.2.5 创建handleDelete函数
  • 2 App.vue的添加图书弹框
    • 2.1 template部分
      • 2.1.1 el-dialog标签
      • 2.1.2 el-form标签
      • 2.1.3 el-form-item标签
      • 2.1.4 el-input标签
      • 2.1.5 el-button标签
    • 2.2 script部分
      • 2.2.1 创建响应式变量(ref)
      • 2.2.2 创建响应式变量(reactive)
      • 2.2.3 创建submitForm函数
      • 2.2.4 创建resetForm函数
      • 2.2.5 创建handleClose函数
  • 3 App.vue编辑图书弹框
    • 3.1 template部分
    • 3.2 script部分
  • 4 关键代码
    • 4.1 v-model和:model
    • 4.2 ref和reactive
  • 5 flask服务

1 App.vue的数据表格

一个Vue文件通常由以下三部分组成，分别对应 template、script和style 标签：
(1)template：定义组件的HTML结构，描述用户界面的呈现方式。这部分使用的是类HTML的语法，可以嵌套各种标签，并结合Vue的指令(如v-if、v-for、@click等)实现动态交互。
(2)script：定义组件的逻辑部分，包含数据、方法、生命周期钩子等。这部分使用 JavaScript 或 TypeScript 编写，负责处理业务逻辑、数据绑定和事件响应。
(3)style：定义组件的样式，用于控制组件的外观。可以通过 scoped 属性限制样式仅作用于当前组件，避免全局污染。

1.1 template部分

在这里插入图片描述
这段代码实现了一个简单的图书管理系统前端界面，功能包括：
(1)显示图书管理系统的标题。
(2)提供“添加图书”按钮，点击后显示添加对话框。

相关文章：

python-66-前后端分离之图书管理系统的Vue前端项目逐行分析

文章目录 1 App.vue的数据表格1.1 template部分1.1.1 div标签1.1.2 h1标签1.1.3 el-button标签1.1.4 el-table标签1.1.5 el-table-column标签1.1.6 表格中放置按钮1.2 script部分1.2.1 加载库和函数1.2.2 创建响应式数组1.2.3 创建getBooks函数1.2.4 onMounted函数1.2.5 创建ha…...

编程日记 2026/1/22 16:22:26

【实战手册】8000w数据迁移实践：MySQL到MongoDB的完整解决方案

🔥 本文将带你深入解析大规模数据迁移的实践方案，从架构设计到代码实现，手把手教你解决数据迁移过程中的各种挑战。 📚博主其他匠心之作，强推专栏： 小游戏开发【博主强推 匠心之作 拿来即用无门槛】文章目录 一、场景引入1. 问题背景2. 场景分析为什么需要消息队列？为…...

编程日记 2026/1/22 16:16:30

麒麟高级服务器操作系统内核升级

1. 确认系统及内核版本 使用uname -r命令查看当前系统内核版本 ,使用cat /etc/.productinfo等命令确认操作系统版本，以便后续操作适配。 2. 查看可用内核版本 运行sudo yum list kernel* ，该命令会列出当前 yum 源中可用的内核相关包及版本信息&#…...

编程日记 2026/1/9 1:06:20

OpenAI为抢跑AI，安全底线成牺牲品？

几年前，如果你问任何一个AI从业者，安全测试需要多长时间，他们可能会淡定地告诉你：“至少几个月吧，毕竟这玩意儿可能改变世界，也可能毁了它。”而现在，OpenAI用实际行动给出了一个新答案——几天…...

编程日记 2026/1/21 12:51:02

OpenCV 图形API（25）图像滤波-----均值滤波（模糊处理）函数blur()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 使用归一化的方框滤波器模糊图像。 该函数使用以下核来平滑图像： K 1 k s i z e . w i d t h k s i z e . h e i g h t [ 1 1 ⋯ …...

编程日记 2026/1/22 16:17:13

大模型——Crawl4AI入门指南

大模型——Crawl4AI入门指南 本快速入门指南介绍了Crawl4AI，涵盖了基本用法、先进功能（例如分块和提取策略）以及异步编程。用户将学习如何实现各种爬虫技术，包括截图、JSON提取和动态内容爬取。 1. 什么是Crawl4AI？ Crawl4AI 是一个强大的异步网络爬虫库，旨在简化信息…...

编程日记 2026/1/8 3:41:20

轻量级开源文件共享系统PicoShare本地部署并实现公网环境文件共享

## 前言 本篇文章介绍，如何在 Linux 系统本地部署轻量级文件共享系统 PicoShare，并结合 Cpolar 内网穿透实现公网环境远程传输文件至本地局域网内文件共享系统。 PicoShare 是一个由 Go 开发的轻量级开源共享文件系统，它没有文…...

编程日记 2026/1/22 16:42:58

UE5蓝图之间的通信------接口

一、创建蓝图接口 二、双击创建的蓝图接口，添加函数，并重命名新函数。 三、在一个蓝图（如玩家角色蓝图）中实现接口，如下图： 步骤一：点击类设置 步骤二：在细节面板已经实现的接口中…...

编程日记 2026/1/22 3:22:39

银河麒麟服务器操作系统V10安装Nvidia显卡驱动和CUDA（L40）并安装ollama运行DeepSeek【开荒存档版】

前期说明 麒麟官方适配列表查找没有L40，只有海光和兆芯适配麒麟V10，不适配Intel芯片 但是我在英伟达驱动列表查到是适配的！ 反正都算是X86，我就直接开始干了，按照上面安装系统版本为：银河麒麟kylinos V10 sp3 2403 输入nkvers可以查看麒麟系统具体版本： 安装Nvid…...

编程日记 2026/1/22 16:35:44

学习八股的随机思考

随时有八股思考都更新一下，理解的学一下八股。谢谢大家的阅读，有错请大家指出。 bean的生命周期 实际上只有四步 实例化 ----> 属性赋值 ---> 初始化 ---> 销毁 但是在实例化前后 初始化前后 会存在一些前置后置的处理，目的是增…...

编程日记 2026/1/22 12:54:49

山东大学软件学院创新项目实训开发日志（10）之测试前后端连接

在正式开始前后端功能开发前，在队友的帮助下，成功完成了前后端测试连接： 首先在后端编写一个测试相应程序： 然后在前端创建vue 并且在index.js中添加一下元素： 然后进行测试，测试成功： 后续可…...

编程日记 2026/1/22 14:22:07

AUTO-RAG: AUTONOMOUS RETRIEVAL-AUGMENTED GENERATION FOR LARGE LANGUAGE MODELS

Auto-RAG：用于大型语言模型的自主检索增强生成 单位：中科院计算所 代码： https://github.com/ictnlp/Auto-RAG 拟解决问题：通过手动构建规则或者few-shot prompting产生的额外推理开销。 贡献：提出一种以LLM决策为中…...

编程日记 2026/1/21 9:19:51

基础贪心算法集合2（10题）

目录 1.单调递增的数字 2.坏了的计算器 3.合并区间 4.无重叠区间 5. 用最少数量的箭引爆气球 6.整数替换 解法1：模拟记忆化搜索 解法2位运算贪心 7.俄罗斯套娃信封问题 补充.堆箱子 8.可被3整除的最大和 9.距离相等的条形码 10.重构字符串 1.单调递增的数字…...

编程日记 2026/1/20 2:40:41

空间信息可视化——WebGIS前端实例（二）

技术栈：原生HTML 源代码：CUGLin/WebGIS: This is a project of Spatial information visualization 5 水质情况实时监测预警系统 5.1 系统设计思想 水安全是涉及国家长治久安的大事。多年来，为相应国家战略，诸多地理信息领域的…...

编程日记 2026/1/22 7:45:03

Vue3微前端架构全景解析：模块联邦与渐进式集成

一、微前端核心模式 1.1 主应用与微应用通讯机制 1.2 架构模式对比 维度iFrame方案Web Components模块联邦组合式微前端样式隔离完全隔离Shadow DOM构建时CSS作用域动态样式表通信复杂度困难(postMessage)自定义事件依赖共享Props传递依赖共享不共享按需加载自动共享显式声明…...

编程日记 2026/1/22 19:33:38

多模态大语言模型arxiv论文略读（十九）

MLLMs-Augmented Visual-Language Representation Learning ➡️ 论文标题：MLLMs-Augmented Visual-Language Representation Learning ➡️ 论文作者：Yanqing Liu, Kai Wang, Wenqi Shao, Ping Luo, Yu Qiao, Mike Zheng Shou, Kaipeng Zhang, Yang Yo…...

编程日记 2026/1/22 20:46:26

【蓝桥杯选拔赛真题101】Scratch吐丝的蜘蛛 第十五届蓝桥杯scratch图形化编程 少儿编程创意编程选拔赛真题解析

目录 scratch吐丝的蜘蛛 一、题目要求 1、准备工作 2、功能实现 二、案例分析 1、角色分析 2、背景分析 3、前期准备 三、解题思路 四、程序编写 五、考点分析 六、推荐资料 1、scratch资料 2、python资料 3、C++资料 scratch吐丝的蜘蛛 第十五届青少年蓝桥杯s…...

编程日记 2026/1/22 18:37:40

springboot集成spring-cloud-context手动刷新并读取更新后的配置文件

背景 springboot单体项目在运行过程需要刷新springboot配置文件值，比如某个接口限流阈值，新增某个账户等场景。分布式设计的可以直接引入一些持久化中间件比如redis等，也可以用相关配置中心中间件如nacos等。处于成本等场景单体项目可以考虑①…...

编程日记 2025/11/30 3:00:13

游戏引擎学习第221天:(实现多层次过场动画)

资产: intro_art.hha 已发布 在下载页面，你会看到一个新的艺术包。你将需要这个艺术包来进行接下来的开发工作。这个艺术包是由一位艺术家精心制作并打包成我们设计的格式，旨在将这些艺术资源直接应用到游戏中。它包含了许多我们会在接下来的直播中使用…...

编程日记 2026/1/22 18:26:49

贪心算法（19）（java）重构字符串

题目：给定一个字符串 s ，检查是否能重新排布其中的字母，使得两相邻的字符不同。 返回 s 的任意可能的重新排列。若不可行，返回空字符串 "" 。 示例 1: 输入: s "aab" 输出: "aba"示例 2: 输入:…...

编程日记 2026/1/13 4:40:17

前端基础之《Vue（4）—响应式原理》

一、什么是响应式 1、响应式英文reactive 当你get/set一个变量时&#xff0c;你有办法可以“捕获到”这种行为。 2、一个普通对象和一个响应式对象对比 &#xff08;1&#xff09;普通对象 <script>// 这种普通对象不具备响应式var obj1 {a: 1,b: 2} </script>…...

编程日记 2026/1/19 10:27:11

Go学习系列文章声明

本次学习是基于B站的视频&#xff0c;【Udemy高分热门付费课程】Golang&#xff1a;完整开发者指南&#xff08;基础知识和高级特性&#xff09;中英文字幕_哔哩哔哩_bilibili 本人会尝试输出视频中的内容&#xff0c;如有错误欢迎指出 next page: Go installation process...

编程日记 2026/1/22 21:55:46

Go：程序结构

文章目录 名称声明变量短变量声明指针new 函数变量的生命周期 赋值多重赋值可赋值性 类型声明包和文件导入包初始化 作用域 名称 命名规则&#xff1a; 通用规则&#xff1a;函数、变量、常量、类型、语句标签和包的名称&#xff0c;开头须是字母&#xff08;Unicode 字符 &a…...

编程日记 2026/1/22 20:19:59

【GitHub探索】mcp-go，MCP协议的Golang-SDK

近期大模型Agent应用开发方面&#xff0c;MCP的概念比较流行&#xff0c;基于MCP的ToolServer能力开发也逐渐成为主流趋势。由于笔者工作原因&#xff0c;主力是Go语言&#xff0c;为了调研大模型应用开发&#xff0c;也接触到了mcp-go这套MCP的SDK实现。 对于企业内部而言&am…...

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

Python 二分查找（bisect）：排序数据的高效检索

二分查找&#xff1a;排序数据的高效检索 第二天清晨&#xff0c;李明早早来到了图书馆。今天他的研究目标是bisect模块&#xff0c;特别是其中的bisect_left和bisect_right函数。这些函数实现了二分查找算法&#xff0c;用于在已排序的序列中高效地查找元素或确定插入位置。 …...

编程日记 2026/1/22 21:09:24

【数据结构】堆排序详细图解

堆排序目录 1、什么是堆&#xff1f;1.1、什么是大顶堆1.2、什么是小顶堆 2、堆排序的过程3、堆排序的图解3.1、将数组映射成一个完全二叉树3.2、将数组转变为一个大顶堆3.3、开始进行堆排序 4、堆排序代码 1、什么是堆&#xff1f; 堆的定义&#xff1a;在一棵完全二叉树中&a…...

编程日记 2026/1/22 21:20:44

Dubbo（45）如何排查Dubbo的序列化问题？

排查Dubbo的序列化问题需要从多个角度进行分析&#xff0c;包括序列化协议的配置、序列化对象的定义、序列化框架的兼容性等。以下是详细的排查步骤及相关代码示例&#xff1a; 1. 检查序列化协议配置 Dubbo支持多种序列化协议&#xff08;如Hessian、Kryo、FST等&#xff09…...

编程日记 2026/1/7 17:28:49

有哪些基于solidity的应用

&#x1f525; Solidity 常见应用分类&#xff08;附例子&#xff09; &#x1f3e6; 1. DeFi&#xff08;去中心化金融&#xff09; Solidity 的最大应用场景之一。 项目功能示例合约逻辑Uniswap去中心化交易所&#xff08;AMM&#xff09;流动性池、定价算法、swap函数Aave /…...

编程日记 2025/12/20 12:08:36

CST1016.基于Spring Boot+Vue高校竞赛管理系统

计算机/JAVA毕业设计 【CST1016.基于Spring BootVue高校竞赛管理系统】 【项目介绍】 高校竞赛管理系统&#xff0c;基于 DeepSeek Spring AI Spring Boot Vue 实现&#xff0c;功能丰富、界面精美 【业务模块】 系统共有两类用户&#xff0c;分别是学生用户和管理员用户&a…...

编程日记 2026/1/22 16:45:59

安卓性能调优之-掉帧测试

掉帧指的是某一帧没有在规定时间内完成渲染&#xff0c;导致 UI 画面不流畅&#xff0c;产生视觉上的卡顿、跳帧现象。 Android目标帧率&#xff1a; 一般情况下&#xff0c;Android设备的屏幕刷新率是60Hz&#xff0c;即每秒需要渲染60帧&#xff08;Frame Per Second, FPS&a…...

编程日记 2026/1/22 16:45:14