简单的图书管理系统---SpringBoot+mysql通过前后端分离实现增删查改

最新推荐文章于 2024-03-03 00:05:08 发布
最新推荐文章于 2024-03-03 00:05:08 发布
阅读量1.7k 收藏 20
点赞数 5
分类专栏： Spring入门 文章标签： mysql spring boot java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46946002/article/details/121219759
版权

SpringBoot+mysql通过前后端分离实现增删查改

上篇文章介绍了如何写后端接口
SpringBoot连接MySQL获取数据写后端接口
这篇文章，我们就介绍一下怎么写前端
在这里插入图片描述
点击修改跳出修改界面，点击添加书籍跳出添加书籍界面
在这里插入图片描述
点击删除，直接删除一行数据

其他的也没什么解释了，直接上代码（看不懂的可以私聊我哟）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图书管理信息</title>
		<script src="js/v3.2.8/vue.global.prod.js" charset="utf-8"></script>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
	</head>
	<body>
		<div id="bookInfo" style="margin: 20px;">
			<div>
				<table border="1" style="margin: auto;">
					<thead>
						<tr>
							<th>书籍名称</th>
							<th>书籍数量</th>
							<th>书籍作者</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody v-for="list in newlist">
						<tr>
							<td>{{list.name}}</td>
							<td>{{list.number}}</td>
							<td>{{list.author}}</td>
							<td>
								<button type="button" v-on:click="updateclickShow(list)">修改</button>&nbsp; 
								<button type="button" v-on:click="deleteclick(list)">删除</button>
							</td>
						</tr>
					</tbody>
				</table>
				<div> 
					<button type="button" v-on:click="addclickShow" style="display:block;margin:0 auto">添加书籍</button> 
				</div>
				<div id="addclick" v-show="addIsShow">
					<h3>添加书籍</h3>
					<div>书籍名称：<input type="text" v-model="addName" placeholder="请输入需添加书籍名称"></div>
					<div>书籍数量：<input type="text" v-model="addNumber" placeholder="请输入需添加书籍数量"></div>
					<div>书籍作者：<input type="text" v-model="addAuthor" placeholder="请输入需添加书籍作者"></div>
					<div>
						<button type="button" v-on:click="addclick">提交</button>
						<button type="button" v-on:click="addclickShow">关闭</button>
					</div>
				</div>
				<div id="updateclick" v-show="updateIsShow">
					<h3>修改书籍</h3>
					<div>书籍名称：<input type="text" v-model="updateName" placeholder="请输入需修改书籍名称"></div>
					<div>书籍数量：<input type="text" v-model="updateNumber" placeholder="请输入需修改书籍数量"></div>
					<div>书籍作者：<input type="text" v-model="updateAuthor" placeholder="请输入需修改书籍作者"></div>
					<div>
						<button type="button" v-on:click="updateclick">提交</button>
						<button type="button" v-on:click="updateclickShow1">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<script>
		const requstVueAPP = {
			data() {
				return{
					deleteName:'',
					updateName:'',
					updateNumber:'',
					updateAuthor:'',
					addName:'',
					addNumber:'',
					addAuthor:'',
					newlist:[{}],
					addIsShow:false,//添加书籍是否显示
					updateIsShow:false,//更改书籍时候显示
				}
			},
			mounted() {
				//页面加载时启动
				 var that = this
				 axios.post("http://localhost:8080/springboot/getbookList")
					.then(function(res){
						console.log(res.data)
						that.newlist = res.data
						console.log("获取成功")
					}).catch(function(err){
						console.log("查询失败")
					})
				},
			methods:{
				deleteclick(list){//删除书籍
					var that = this
					//console.log(list.name)
					axios.post("http://localhost:8080/springboot/deleteBook",{
						deleteName:list.name,
					})
					.then(function(res){
						console.log("删除成功")
						that.newlist = res.data
						}).catch(function(err){
							console.log("删除失败")
						})
					},
				updateclick(){//修改书籍
					var that = this
					axios.post("http://localhost:8080/springboot/updateBook",{
						updateName: this.updateName,
						updateNumber:this.updateNumber,
						updateAuthor: this.updateAuthor,
						}).then(function(res){
							console.log("更新成功")
							that.newlist = res.data
						}).catch(function(err){
							console.log("更新失败")
						})
						this.updateName=''
						this.updateNumber=''
						this.updateAuthor=''
						this.updateIsShow = false
					},
				addclick(){//添加书籍
					var that = this
					console.log(this.addName)
					axios.post("http://localhost:8080/springboot/addBook",{
						addName: this.addName,
						addNumber: this.addNumber,
						addAuthor: this.addAuthor,
						}).then(function(res){
							console.log("添加成功")
							that.newlist = res.data
						}).catch(function(err){
							console.log("添加失败")
						})
						this.addName=''
						this.addNumber=''
						this.addAuthor=''
						this.addIsShow = false
					},
				addclickShow(){
					this.addIsShow = !this.addIsShow;
					this.updateIsShow = false;
				},
				updateclickShow(list){
					if(this.updateIsShow == false)
					this.updateIsShow =true
					this.addIsShow = false
				},
				updateclickShow1(){
					this.updateIsShow=false
				}
			}	
		}
		Vue.createApp(requstVueAPP).mount("#bookInfo")
		</script>
	</body>
</html>

相对来说，代码很简单

攀上一座高山后,你才会发现,原来还有更多的山头等着你。 ——曼德拉

爱笑君吖
关注
  • 5
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
spring boot+react 前后端分离实现增删改查
11-29
前端react，后端Java spring boot，数据库mysql连接，前后端分离实现数据库的增删改查
SpringBoot_实现基本增删改查（前后端分离版）
灯火入眉的博客
04-14 317
转载:SpringBoot_实现基本增删改查（前后端分离版）_YHSevenWater的博客-CSDN博客_springboot增删改查https://blog.csdn.net/qq_37530429/article/details/119912702 遇到问题: 项目启动时,出现错误,百度查询此类问题是由于项目JDK版本不一致,但查看自己的jdk均配置的1.8: Caused by: java.lang.UnsupportedClassVersionError: org/springframew.
前、后端分离的图书管理系统
最新发布
Unique0309的博客
03-03 1146
定义Java实体类（pojo），与数据库表结构相对应。如果导入了Lombok依赖，我们这里可以通过注解简化getter和setter的编写。
Springboot入门：实现简单的增删改查（前后端分离）前端使用vue框架
qq_44156131的博客
12-06 4171
Spring Boot简介 Spring是java企业版的轻量级代替品，为企业java开发提供了一种相对简单的方法，通过依赖注入和面向切面编程，用简单的java对象实现EJB的功能 Spring的组件代码是轻量级的，但他的配置却是重量级的。 第一阶段： 在spring1.X时代，使用Spring开发全部都是xml配置的bean，随着项目的扩大，我们需要把xml配置到不同的配置文件里边，需要频繁的在...
SpringBoot实现简单的图书增删查改
AKALI822的博客
09-02 747
Springboot增删查改新手练习
MySQL的增删改查3（图书管理系统）
question_mark的博客
11-07 1708
我们用四张表来表示一个图书管理系统 图书管理系统： 1.图书表 2.学生表 3.图书分类表 4.图书借阅信息表 图书管理系统 ============================== --1.图书表 create table book( id int primary key, name varchar(20), author varchar(20), price decimal(11,...
前后端分离vue前端项目---员工管理系统（vue+springboot+redis）
06-28
vue前端项目---员工管理系统 前端技术栈：ES6、vue、vuex、vue-router、vue-cli、axios、element-ui 后端技术栈：SpringBoot、MyBatis、Spring Security、Jwt 系统划分了超级管理员、HR人事、经理与普通员工四大角色...
springboot+security+jwt+mybaits-plus+mysql实现权限管理
03-13
1.传统spring boot框架 2.security框架 3.jwt取代session 4.mybatis-plus+mysql【sql文件项目中有】 5.不想下载，可以看博客，博客中有写
SpringBoot+vue+mysql前后端分离的社区养老管理系统的开发
02-20
SpringBoot+vue+mysql前后端分离的社区养老管理系统的开发 此项目是一款采用SpringBoot+vue+mysql前后端分离的项目，用于社区养老登记造册、服务管理、服务发布、志愿者招募等。 资料中包含，系统部署文档，sql等，...
springboot+mybatis-plus+gradle+mysql+swagger基础增删改查、树形查询
02-20
springboot+mybatis-plus+gradle+mysql+swagger基础增删改查、树形查询，含SQL脚本
基于springboot+vue前后端分离的校园失物招领系统源码+数据库（毕业设计）.zip
02-07
基于springboot+vue前后端分离的校园失物招领系统源码+数据库（毕业设计）.zip 高分毕设项目，下载即用无需修改，代码完整确保可以直接运行。 基于springboot+vue前后端分离的校园失物招领系统源码+数据库（毕业...
基于SpringBoot的图书管理系统【项目源码+数据库脚本】(毕设)
07-04
一、项目简介 本项目是一套基于SpringBoot的图书管理系统，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的Java学习者。 包含：项目源码、数据库脚本、软件工具、项目说明等，该项目可以直接作为毕设使用。 项目都经过严格调试，确保可以运行！ 二、技术实现 ​后台框架：SpringBoot ​数据库：MySQL 开发环境：JDK、IDEA、Tomcat 三、系统功能 本图书管理系统主要包含两种角色：读者和管理员。读者只能对个人信息的查阅、修改，图书的查询，而管理员则可以进行图书信息及借阅信息的管理。 具体实现功能如下: （1）系统登录。分为普通读者登录和管理员登录。 （2）系统管理。系统管理包括管理员设置，以及图书类别设置。管理员设置包括管理员信息的设置以及密码的设置。图书类别的设置只有管理员才可以对他进行新增，修改和删除。 （3）图书管理。包括图书信息管理，图书信息查询。只有管理员才可以对图书进行管理，图书查询是帮助读者方便查找图书信息。 （4）读者管理。读者管理包括读者信息管理，以及读者信息的查询。读者信息查询可以根据读者的姓名和编号进行查询。读者信息管理只对管理员有用，只有管理员可以添加读者，修改和删除读者的信息。 （5）图书借阅管理。图书借阅包括图书的借阅，归还以及续借。图书的借阅以及归还只对管理员起作用，只有通过管理员才可以进行图书的借阅以及归还。读者只能对图书进行续借的操作。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。
Java编写的简单的图书管理系统(增删改查)
05-25
Java开发的, 没用使用框架, 主要用到了JavaScript, jQuery, MySQL, jsp, servlte
2.3 网站开发全流程体验 | springboot项目实现增删改查，mysql数据库增删改查，前后端分离项目实战，网站开发全流程
qq_32371095的博客
08-25 405
springboot项目实现增删改查，mysql数据库增删改查，前后端分离项目实战，网站开发全流程
SpringBoot+VUE前后端分离项目学习笔记 - 【07 SpringBoot实现增删改查】
一只菜鸟夹
12-30 602
SpringBoot+Mybatis动态SQL 实现User类的增删改查，补充了Mybatis动态SQL的一些内容
VUE+Spring Boot前后端分离开发实战(五)：基于shiro鉴权的角色增删改查(CURD)-封装分页组件和所有增删改查模块化
xuemeng2016的专栏
12-03 442
本文在上文基础上把查询、增加、修改以及删除的请求封装在table.js中，实现了所有用到增删改查页面代码复用，对于当前每个功能页面只需要简单几行代码就行。文中以角色增删改查为主，给出对应的代码内容。后端实现只给出如下图接口类和如下完整代码块 前端实现 后端实现主要包含了3个内容：分页组件封装、增删改查封装以及角色页面实现。该组件位置如下： 实现代码如下： 增删改查模块化 文件位置如下： 代码实现如下 角色管理页面 文件位置如下： 代码试下如下： 实现效果 1.初始页面 2.查询结果 3.修改页面
SpringBoot+VUE前后端分离项目学习笔记 - 【10 Vue实现增删改查】
一只菜鸟夹
01-04 636
前端实现增删改查，后端增加批量删除接口
图书管理系统，增，删，改，查 后台实现
m0_62356365的博客
04-11 2306
四、案例 采用三层架构设计程序架构 表现层： MVC设计模式，主要用于与用户交互 业务层 ： 处理具体业务 数据访问层 ： 对数据库进行操作 数据库： MySQL关系型数据库 JDBC： 操作数据库 功能需求： 图书管理系统 增、删、改、查功能 定义存放实体类的包 （数据bean） com.xxx.pojo | com.xxx.beans | com.xxx.domain package com.xxx.pojo; import java...
spring boot mysql_SpringBoot、Mybatis、mysql 实现用户的增删改查
weixin_30927801的博客
02-11 276
本文主要是搭建了一个SpringBoot 的框架，集成Mybatis、MySql、Pagehelper来实现用户表的增删(单条、多条)改查(单条、列表、分页)等功能一、环境配置、导入依赖1、新建一个SpringBoot项目，写入依赖mysqlmysql-connector-javamysqlmysql-connector-javaorg.mybatis.spring.bootmybatis-spr...
springboot连接mysql数据库实现增删改查
06-28
### 回答1： Spring Boot连接MySQL数据库实现增删改查的步骤如下： 1. 在pom.xml文件中添加MySQL数据库驱动依赖。 2. 在application.properties文件中配置MySQL数据库连接信息，包括数据库URL、用户名、密码等。 3. 创建实体类，用于映射数据库表结构。 4. 创建DAO层接口，定义增删改查等操作方法。 5. 创建DAO层实现类，实现DAO层接口中定义的方法。 6. 在Service层中调用DAO层中的方法，实现业务逻辑。 7. 在Controller层中调用Service层中的方法，处理HTTP请求。 8. 编写测试类，测试增删改查等操作是否正确。 以上就是Spring Boot连接MySQL数据库实现增删改查的基本步骤。 ### 回答2： SpringBoot是一个非常流行的JavaWeb开发框架，它是基于Spring框架的，可以让我们更快速地开发Web应用程序。为了让我们更好地使用SpringBoot开发应用，我们需要学习如何通过SpringBoot连接MySQL数据库，并实现对其进行增删改查。 首先，我们需要在pom.xml文件中添加MySQL数据库的依赖： ``` <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.22</version> </dependency> ``` 然后，我们还需要在 application.properties 文件中添加数据库的配置信息： ``` spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/test?serverTimezone=UTC&characterEncoding=UTF-8&useSSL=false spring.datasource.username=root spring.datasource.password=root ``` 在以上配置中，spring.datasource.driver-class-name 指定了MySQL的驱动类，spring.datasource.url 指定了连接MySQL数据库的URL，spring.datasource.username 和 spring.datasource.password 则分别指定了数据库的用户名和密码。 在连接MySQL数据库之后，我们可以通过 Spring Data JPA 来操作数据库。首先，我们需要在 pom.xml 文件中添加Spring Data JPA依赖： ``` <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> ``` 然后，我们需要定义一个实体类，用于与数据库中的表进行映射。例如，下面是一个名为User的实体类： ``` @Entity @Table(name = "user") public class User implements Serializable { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private Integer age; // 省略getter和setter方法 } ``` 在上述代码中，@Entity 注解表示这个类是一个实体类，@Table 注解则指定了映射到的数据表名。@Id 和 @GeneratedValue 注解用于指定主键的生成方式。 接下来，我们需要定义一个 Repository 接口，用于执行增删改查操作。例如，下面是一个名为UserRepository的接口： ``` public interface UserRepository extends JpaRepository<User, Long> {} ``` 在上述代码中，我们继承了 JpaRepository 接口，并指定了要操作的实体类 User 和主键类型 Long。 最后，我们就可以在SpringBoot应用程序中依赖注入 UserRepository 接口，并通过它来进行增删改查操作了。例如，下面是一个名为UserController的类，用于处理增删改查请求： ``` @RestController @RequestMapping("/users") public class UserController { @Autowired private UserRepository userRepository; @GetMapping("/") public List<User> getUserList() { return userRepository.findAll(); } @PostMapping("/") public User saveUser(User user) { return userRepository.save(user); } @PutMapping("/") public User updateUser(User user) { return userRepository.save(user); } @DeleteMapping("/{id}") public void deleteUser(@PathVariable("id") Long id) { userRepository.deleteById(id); } } ``` 在上述代码中，我们使用 @Autowired 注解将 UserRepository 接口注入到 UserController 类中，并实现了以下四个方法： - getUserList()：用于查询所有用户信息。 - saveUser()：用于新增用户信息。 - updateUser()：用于修改用户信息。 - deleteUser()：用于删除指定ID的用户信息。 通过以上步骤，我们就可以在SpringBoot应用程序中连接MySQL数据库，并实现对其进行增删改查操作了。 ### 回答3： Spring Boot是一种快速开发框架，它可以轻松地连接MySQL数据库以实现增删改查等功能。以下是如何使用Spring Boot连接MySQL数据库实现增删改查。 1. 添加MySQL驱动 Spring Boot默认支持连接H2数据库，但要连接MySQL数据库，需要在pom.xml文件中添加MySQL驱动。在dependencies标签中添加以下代码： ``` xml <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.18</version> </dependency> ``` 这将在Maven仓库中搜索最新版本的MySQL驱动，并将其添加到项目中。 2. 配置数据源 数据源是连接MySQL数据库的关键。在application.properties或application.yml文件中，添加以下代码来配置数据源： ``` yaml spring.datasource.driverClassName=com.mysql.cj.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/test?serverTimezone=UTC spring.datasource.username=root spring.datasource.password=123456 ``` 这将配置一个数据源，其中MySQL URL和MySQL的用户名和密码被指定。这里采用的是jdbc:mysql://localhost:3306/test?serverTimezone=UTC这个地址，其中test是数据库名称，serverTimezone指定时区，这个可以不用加。 3. 实现增删改查 通过添加Spring Boot的Data JPA依赖来实现增删改查功能。在pom.xml文件中添加以下代码： ``` xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> ``` 通过创建实体类，这里以User实体为例： ``` java @Entity @Table(name = "user") public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String username; private String password; // 省略setter和getter方法 } ``` 其中@Id和@GeneratedValue用于定义实体的主键，并自动创建一个自增的主键。 实现增删改查需要创建一个JpaRepository接口： ``` java @Repository public interface UserRepository extends JpaRepository<User, Long> { } ``` JpaRepository是Spring Boot中用于实现CRUD操作的接口，其中User是对应的实体类，Long是对应的主键类型。 通过定义Repository接口，在Service或Controller中实现增删改查功能： ``` java @Service public class UserService { @Autowired private UserRepository userRepository; public User getUserById(Long id) { return userRepository.findById(id).orElse(null); } public void addUser(User user) { userRepository.save(user); } public void updateUser(User user) { userRepository.save(user); } public void deleteUser(Long id) { userRepository.deleteById(id); } } ``` 这里UserRepository是使用@Autowired自动注入的，getUserById方法用于查询用户，addUser、updateUser和deleteUser方法用于添加、更新和删除用户。 以上就是使用Spring Boot连接MySQL数据库实现增删改查的详细步骤。如果您按照上述步骤进行操作，即可成功连接MySQL数据库并实现增删改查等功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱笑君吖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值