图书管理系统 Axios 源码__新增图书

目录

功能介绍

核心代码解析

源码:新增图书功能

总结


本项目基于 HTML、Bootstrap、JavaScript 和 Axios 开发,实现了图书的增删改查功能。以下是新增图书的功能实现,适合前端开发学习和项目实践。


功能介绍

用户可以通过 模态框(Modal) 添加新图书,提交数据后,使用 Axios 发送 POST 请求 将数据存储到服务器,并实时更新图书列表。


核心代码解析

  • 控制模态框:使用 bootstrap.Modal 控制新增图书窗口的显示与隐藏。
  • 收集表单数据:利用 serialize 方法获取表单数据并转换为对象。
  • 发送 Axios POST 请求:提交书名、作者、出版社等信息到服务器。
  • 数据提交成功后处理
    • 刷新图书列表,显示最新数据;
    • 重置表单,清空输入框内容;
    • 关闭模态框,返回主界面。

源码:新增图书功能(index.js)

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.serializeJSON/3.2.1/jquery.serializejson.min.js"></script><script>// 目标:获取并渲染图书列表function getBookList() {axios({url: "http://hmajax.itheima.net/api/books",method: "get",params: { creator: "小宁" },}).then((result) => {const bookList = result.data.data;const htmlStr = bookList.map((item, index) => {return `<tr><td>${index + 1}</td><td>${item.bookname}</td><td>${item.author}</td><td>${item.publisher}</td><td><span class="btn btn-danger btn-sm del">删除</span><span class="btn btn-warning btn-sm edit">编辑</span></td></tr>`;}).join("");document.querySelector(".list").innerHTML = htmlStr;});}// 页面加载时获取并渲染列表getBookList();// 新增图书功能const addModalDom = document.querySelector(".add-modal");const addModal = new bootstrap.Modal(addModalDom);document.querySelector(".save-btn").addEventListener("click", () => {const addForm = document.querySelector(".add-form");const bookData = $(addForm).serializeJSON(); // 序列化表单数据axios({url: "http://hmajax.itheima.net/api/books",method: "post",data: {bookname: bookData.bookname,author: bookData.author,publisher: bookData.publisher,creator: "小宁",},}).then(() => {getBookList(); // 重新渲染列表addForm.reset(); // 重置表单addModal.hide(); // 关闭模态框});});</script>

总结

1. 使用技术

  • HTML + Bootstrap:构建界面
  • JavaScript:处理交互
  • Axios:发送 AJAX 请求

2. 主要功能

  • 通过模态框(Modal)新增图书
  • 发送 POST 请求,将数据提交至服务器
  • 提交成功后,自动更新图书列表

3. 适用场景

  • 适用于 前端初学者项目开发者,可用于 学习 AJAX、Axios、Bootstrap 组件应用 等知识。
  • 可直接修改代码,扩展功能,如 删除、编辑、搜索 等。

本项目适合作为 图书管理系统前端示例,可用于学习 前后端交互 相关技术,有助于理解 前端数据请求和动态渲染 的基本原理。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/894421.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DeepSeek Janus-Pro:多模态AI模型的突破与创新

近年来&#xff0c;人工智能领域取得了显著的进展&#xff0c;尤其是在多模态模型&#xff08;Multimodal Models&#xff09;方面。多模态模型能够同时处理和理解文本、图像等多种类型的数据&#xff0c;极大地扩展了AI的应用场景。DeepSeek(DeepSeek-V3 深度剖析&#xff1a;…

AJAX XML

AJAX XML 引言 随着互联网技术的不断发展,Web应用对用户交互性和实时性的要求越来越高。AJAX(Asynchronous JavaScript and XML)技术的出现,为Web应用开发提供了强大的支持。AJAX技术允许Web应用在不重新加载整个页面的情况下,与服务器进行异步通信。XML作为数据传输格式…

OpenGL学习笔记(五):Textures 纹理

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

代理模式——C++实现

目录 1. 代理模式简介 2. 代码示例 1. 代理模式简介 代理模式是一种行为型模式。 代理模式的定义&#xff1a;由于某些原因需要给某对象提供一个代理以控制该对象的访问。这时&#xff0c;访问对象不适合或者不能直接访问引用目标对象&#xff0c;代理对象作为访问对象和目标…

Vue3 表单:全面解析与最佳实践

Vue3 表单&#xff1a;全面解析与最佳实践 引言 随着前端技术的发展&#xff0c;Vue.js 已经成为最受欢迎的前端框架之一。Vue3 作为 Vue.js 的最新版本&#xff0c;带来了许多改进和新的特性。其中&#xff0c;表单处理是 Vue 应用中不可或缺的一部分。本文将全面解析 Vue3 …

C++11新特性之范围for循环

1.介绍 C11标准之前&#xff0c;使用for循环遍历数组或容器&#xff0c;只能使用以下结构&#xff1a; for&#xff08;表达式1&#xff1b;表达式2&#xff1b;表达式3&#xff09;{ 循环体 } 那么在C11标准中&#xff0c;除了上面的方法外&#xff0c;又引入了一种全新的语…

攻防世界 fileclude

代码审计 WRONG WAY! <?php include("flag.php"); highlight_file(__FILE__);//高亮显示文件的源代码 if(isset($_GET["file1"]) && isset($_GET["file2"]))//检查file1和file2参数是否存在 {$file1 $_GET["file1"];$fi…

图书管理系统 Axios 源码__获取图书列表

目录 核心功能 源码介绍 1. 获取图书列表 技术要点 适用人群 本项目是一个基于 HTML Bootstrap JavaScript Axios 开发的图书管理系统&#xff0c;可用于 添加、编辑、删除和管理图书信息&#xff0c;适合前端开发者学习 前端交互设计、Axios 数据请求 以及 Bootstrap 样…

Vue 响应式渲染 - 列表布局和v-html

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 响应式渲染 - 列表布局和v-html 目录 列表布局 简单渲染列表 显示索引值 点击变色 V-html 作用 注意 采用策略 应用 总结 列表布局 简单渲染列表 Data中设置状态&#xff0c;是一个数组格式的默认信息。 然后…

如何实现一个CLI命令行功能 | python 小知识

如何实现一个CLI命令行功能 | python 小知识 在现代软件开发中&#xff0c;命令行界面&#xff08;CLI&#xff09;的设计与交互至关重要。Click是一个强大的Python库&#xff0c;专门用于快速创建命令行界面&#xff0c;以其简单易用性和丰富的功能赢得了开发者的青睐。本文将…

[SAP ABAP] Debug Skill

SAP ABAP Debug相关资料 [SAP ABAP] DEBUG ABAP程序中的循环语句 [SAP ABAP] 静态断点的使用 [SAP ABAP] 在ABAP Debugger调试器中设置断点 [SAP ABAP] SE11 / SE16N 修改标准表(慎用)

kamailio-Core 说明书 版本:Kamailio SIP Server v6.0.x(稳定版)

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

.Net / C# 繁体中文 与 简体中文 互相转换, 支持地方特色词汇

版本号 Nuget 搜索 “OpenCCNET”, 注意别找错, 好多库的名字都差不多 支持 “繁,简” 的互相转换, 支持多个地区常用词汇的转换, 还支持 日文的新旧转换. OpenCC 在 .Net 中的实现 https://github.com/CosineG/OpenCC.NET <PackageReference Include"OpenCCNET"…

Redis脑裂问题详解及解决方案

Redis是一种高性能的内存数据库&#xff0c;广泛应用于缓存、消息队列等场景。然而&#xff0c;在分布式Redis集群中&#xff0c;脑裂问题&#xff08;Split-Brain&#xff09;是一个需要特别关注的复杂问题。本文将详细介绍Redis脑裂问题的成因、影响及解决方案。 一、什么是…

LLMs之OpenAI o系列:OpenAI o3-mini的简介、安装和使用方法、案例应用之详细攻略

LLMs之OpenAI o系列&#xff1a;OpenAI o3-mini的简介、安装和使用方法、案例应用之详细攻略 目录 相关文章 LLMs之o3&#xff1a;《Deliberative Alignment: Reasoning Enables Safer Language Models》翻译与解读 LLMs之OpenAI o系列&#xff1a;OpenAI o3-mini的简介、安…

女生年薪12万,算不算属于高收入人群

在繁华喧嚣的都市中&#xff0c;我们时常会听到关于收入、高薪与生活质量等话题的讨论。尤其是对于年轻女性而言&#xff0c;薪资水平不仅关乎个人价值的体现&#xff0c;更直接影响到生活质量与未来的规划。那么&#xff0c;女生年薪12万&#xff0c;是否可以被划入高收入人群…

AI开发学习之——PyTorch框架

PyTorch 简介 PyTorch &#xff08;Python torch&#xff09;是由 Facebook AI 研究团队开发的开源机器学习库&#xff0c;广泛应用于深度学习研究和生产。它以动态计算图和易用性著称&#xff0c;支持 GPU 加速计算&#xff0c;并提供丰富的工具和模块。 PyTorch的主要特点 …

Python安居客二手小区数据爬取(2025年)

目录 2025年安居客二手小区数据爬取观察目标网页观察详情页数据准备工作&#xff1a;安装装备就像打游戏代码详解&#xff1a;每行代码都是你的小兵完整代码大放送爬取结果 2025年安居客二手小区数据爬取 这段时间需要爬取安居客二手小区数据&#xff0c;看了一下相关教程基本…

OpenCV:开运算

目录 1. 简述 2. 用腐蚀和膨胀实现开运算 2.1 代码示例 2.2 运行结果 3. 开运算接口 3.1 参数详解 3.2 代码示例 3.3 运行结果 4. 开运算应用场景 5. 注意事项 6. 总结 相关阅读 OpenCV&#xff1a;图像的腐蚀与膨胀-CSDN博客 OpenCV&#xff1a;闭运算-CSDN博客 …

JavaWeb入门-请求响应(Day3)

(一)请求响应概述 请求(HttpServletRequest):获取请求数据 响应(HttpServletResponse):设置响应数据 BS架构:Browser/Server,浏览器/服务器架构模式。客户端只需要浏览器就可访问,应用程序的逻辑和数据都存储在服务端(维护方便,响应速度一般) CS架构:Client/ser…