从零开始完成一个SpringBoot+JPA的学生管理系统Web案例((三)前端实现)

最新推荐文章于 2024-06-24 15:42:47 发布
最新推荐文章于 2024-06-24 15:42:47 发布
阅读量2k 收藏 20
点赞数 6
分类专栏： SpringBoot 文章标签： SpringBoot+JPA 前端页面 JavaWeb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42158633/article/details/89743568
版权

标题是前端实现，实际是前端和后端的共同实现。下面开始粘贴代码（太真实了）：

(一)目录结构：

(二)前端静态页面代码

2.1 创建css，img，js目录后到https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js 下载js文件，命名为jquery.js放置在js目录下。

2.2 页面源码：

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>主页</title>
		<script src="js/jquery.js" type="text/javascript" charset="UTF-8"></script>
		
		<script type="text/javascript">
			
 			var page = 1;
			var tablePage = 0;
			
			
			$(function(){
				showData();
			});
			//上一页
			function upPage(){		
				if(page > 1)
					page --;	
				showData();
			}
			// 下一页
			function downPage()
			{
				if(page < tablePage)
					page ++;	
				showData();
			}
			
			function showData(){
				
				$.ajax({
					url:'http://localhost:8888/kude/stu/query?page='+page,
					success:function(result){
						console.log(result.content);
						var rel = result.content;
						tablePage = result.totalPages; //总页数
						
						var htmlstr = "<table style='margin:0 auto;' width='80%' algin='center' border='1'>"+
									"<tr><th>ID</th><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th></tr>";
						
						for(var i=0;i<rel.length;i++){
							var stu = rel[i];
							htmlstr += "<tr><td>"+stu.id+"</td><td>"+stu.name+"</td><td>"+stu.age+"</td><td>"+stu.sex+"</td>"+
							"<td><a href='update.html'>编辑</a>&nbsp;<a href='http://localhost:8888/kude/stu/delete/"+stu.id+"'>删除</a></td></tr>";
						}
						
						htmlstr +="<tr><td colspan='5' align ='right' style='padding-right: 360px'><a href='add.html'>添加学生</a>&emsp;&emsp;<a href='javascript:upPage();'>上一页</a>&emsp;&emsp;<a href='javascript:downPage();'>下一页</a></td></tr>"
						htmlstr += "</table>";
						
						$("#show").html(htmlstr);
						
					}
				});
				
			}
			
		</script>
	</head>
	<body>
		
		<h1 style="text-align: center;" >学生管理系统</h1>
		<hr>
		<div id = "show" ></div>

	</body>
</html>

为了解决AJAX跨域请求问题 在StudentControllar的findPage方法，添加HttpServletResponse response参数

代码块中添加： response.setHeader("Access-Control-Allow-Origin","*");

add.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>添加学生</h1>
		<hr>
		<form action="http://localhost:8888/kude/stu/add" method="post">
			<p>
				姓名：<input type="text" name="name" />
			</p>
			<p>
				年龄：<input type="text" name="age" />
			</p>
			<p>
				性别：
				<input type="radio" name="sex" value="男"  checked />男
				<input type="radio" name="sex" value="女" />女
			</p>
			<p>
				<input type="submit" value="保存" />
			</p>
		</form>
	</body>
</html>

update.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>修改</h1>
		<hr>
		<form action="http://localhost:8888/kude/stu/update" method="post">
			
			<p>
				id：&emsp;<input type="text" name="id" />
			</p>
			
			<p>
				姓名：<input type="text" name="name" />
			</p>
			<p>
				年龄：<input type="text" name="age" />
			</p>
			<p>
				性别：
				<input type="radio" name="sex" value="男"  checked />男
				<input type="radio" name="sex" value="女" />女
			</p>
			<p>
				<input type="submit" value="保存" />
			</p>
		</form>
	</body>
</html>

(三)测试

3.1 启动项目后，在地址栏输入 http://localhost:8888/kude/ 进入到index.html页面，通过AJAX执行了后台的分页查询方法。

点击上一页，下一页可以进入到对应的页面。

3.2 添加学生

点击保存后返回json数据

数据库：

3.3 删除

点击“阿杰"行的删除。

页面输出删除成功信息

3.4 修改

修改id为1的数据

成功

看到这里辛苦了：

项目源码已经发布到gitee 公开可供下载

链接 https://gitee.com/kluadias/springbootdemo 

 

是镜子阿
关注
  • 6
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
专栏目录
SpringBoot JPA
siriusol的博客
06-01 286
添加依赖 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <group
基于springboot+JPA+MySQL的网上借阅系统前端及后台，前端.zip
10-13
基于springboot+JPA+MySQL的网上借阅系统前端及后台，前端 基于springboot+JPA+MySQL的网上借阅系统前端及后台，前端 基于springboot+JPA+MySQL的网上借阅系统前端及后台，前端 基于springboot+JPA+MySQL的网上借阅...
从零开始完成一个SpringBoot+JPA的学生管理系统Web案例((二)后端实现)
Kluadias的博客
05-02 3315
这篇主要展示该案例的后端代码和功能实现，后端实现数据的操作功能后返回Json数组。 (一)目录结构： (二)后台代码 Entity包 1. User.java package com.example.stu.kudestu.stu.entity; import javax.persistence.*; @Entity @Table(name = "user") public ...
快速上手 Spring Boot：基础使用详解
最新发布
小林的博客
06-24 4343
Spring Boot 是一个基于 Spring 的框架，旨在简化 Spring 应用的配置和开发过程，通过自动配置和约定大于配置的原则，使开发者能够快速搭建独立、生产级别的应用程序。Spring程序缺点配置繁琐依赖设置繁琐SpringBoot程序优点自动配置起步依赖（简化依赖配置）版本锁定内置tomcat服务器辅助功能（内置服务器，……）
Spring Boot(五)：Spring Boot Jpa 的使用
weixin_33843947的博客
09-21 622
在上篇文章Spring Boot(二)：Web 综合开发中简单介绍了一下 Spring Boot Jpa 的基础性使用，这篇文章将更加全面的介绍 Spring Boot Jpa 常见用法以及注意事项。 使用 Spring Boot Jpa 开发时，发现国内对 Spring Boot Jpa 全面介绍的文章比较少案例也比较零碎，因此写文章总结一下。本人也正在翻译Spring Data JPA 参考指...
Spring Boot Jpa 的使用（转载）
黑米粥的锅
11-06 419
Spring Boot Jpa 介绍 首先了解 Jpa 是什么？ Jpa (Java Persistence API) 是 Sun 官方提出的 Java 持久化规范。它为 Java 开发人员提供了一种对象/关联映射工具来管理 Java 应用中的关系数据。它的出现主要是为了简化现有的持久化开发工作和整合 ORM 技术，结束现在 Hibernate，TopLink，JDO 等 ORM 框架各自为营的局面。 值得注意的是，Jpa是在充分吸收了现有 Hibernate，TopLink，JDO 等 ORM 框架
springboot jpa
热门推荐
zhangpan_soft的博客
08-27 1万+
前面有一篇博客说,springboot 2.0.3 jpa是存在问题的,后用springboot jpa 2.0.4 发现此问题已解决.springboot 2.0.4的jpa的sql看起来也比较容易理解,不再是日志中不再是hsql语句,而是传统sql,所以springboot jpa 2.0.4 用起来比之前版本好用的多,日志也好看懂的多,真的是开箱即用,另外,感觉springboot 2.0....
springboot-jpa
muum的博客
07-05 313
工程配置，添加maven的依赖，jpa的依赖有如下，简单的就是一个jpa和mysql：        &lt;dependency&gt; &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt; &lt;artifactId&gt;spring-boot-starter-data-jpa&lt;...
基于Thymeleaf+SpringBoot+SpringDataJPA实现的的中小医院信息管理系统
06-17
本系统是基于Thymeleaf+SpringBoot+SpringDataJPA实现的的中小医院信息管理系统。简单实现了挂号收费，门诊管理，划价收费，药房取药，体检管理，药房管理，系统维护等基础功能。就诊卡提供了手动和读卡两种方式录入...
基于SpringBoot+JPA的信息管理系统
05-31
【SpringBoot基础】 SpringBoot是由Pivotal团队提供的全新框架，其设计目标是为了简化Spring应用的初始搭建以及开发过程。...通过学习和实践，开发者可以快速掌握如何构建一个功能完善的后台管理系统。
java基于SpringBoot+freemarker实现的人事管理系统
02-27
基于SpringBoot+freemarker实现的人事管理系统分为七大模块：绩效考核，招聘管理，档案管理，工资管理，考勤管理，培训管理，系统管理。本系统最大特色是有强大和灵活的权限控制功能，所有菜单，按钮功能均可由管理...
spring boot 集成JPA
09-22
Spring Boot 集成 JPASpring Boot 集成 JPASpring Boot 集成 JPASpring Boot 集成 JPASpring Boot 集成 JPASpring Boot 集成 JPA
学生管理系统前台网页
04-24
http://blog.csdn.net/magicxqh/article/details/7493055
springboot+mybatis+mysql+thymeleaf 实现对学生信息管理小demo
03-29
利用springboot搭建项目，用mybatis的xml文件写sql语句连接mysql数据库，前端页面利用thymeleaf绑定数据。实现分页展示学生数据信息，删除学生，查看详情，添加学生，编辑学生的基本功能。适合小白学习使用。
基于spring boot的后台管理系统
01-10
Guns基于SpringBoot全面升级,完美整合springmvc + shiro + mybatis-plus + beetl!Guns项目代码简洁,注释丰富,上手容易,同时Guns包含许多基础模块(用户管理,角色管理,部门管理,字典管理等10个模块),可以直接作为一个后台管理系统的脚手架.
web课设作业--学生管理系统
07-18
web课设作业--学生管理系统,前端采用html+css,后端运用js+jsp 通过连接数据库,对数据进行增删改查.. 数据库的表在另一个资源里https://download.csdn.net/download/qq_37486501/10548745
SpringBoot+JPA+LayUI商城系统源码.zip
10-20
这是一个基于SpringBoot、Java Persistence API (JPA) 和LayUI框架开发的商城系统的源码。这个系统提供了全面的电商功能，包括商品管理、订单处理、用户管理等，旨在为开发者提供一个快速构建在线购物平台的起点。让...
springboot 之 JPA
mazhongjia的博客
08-07 430
一、说明 JPA提供了操作数据库的接口，在开发过程中继承和使用这些接口，可简化现有的持久化开发的工作。 二、JPA提供的接口 1、JpaRepository JpaRepository继承自PagingAndSortingRepository
springboot整合JPA
Demon丶冷漠
01-05 489
今天跟着王老师学习了springboot整合JPA，一上午的学习后收益匪浅啊，记录一下，方便自己后续的学习和使用！跟着我来学习一下吧: 目录 1.什么是JPA呢？ 2.借助spring data jpa整合JPA 2.1什么是Spring Data JPA 2.2代码的整合 2.2.1 pom文件的配置 2.2.2 application.properties文件配置 2.2.3 Repository编写 2.24 实体类user编写 2.2.5 Service编写 2.2.6 Con
springboot+jpa2.2.10 QueryDSL写个详细案例，从配置到查询
04-24
好的，我会为你提供一个详细的案例来展示如何使用springboot jpa2.2.10和QueryDSL进行查询。 首先，我们需要在pom.xml文件中添加相关的依赖： ```xml <dependency> <groupId>com.querydsl</groupId> <artifactId>querydsl-jpa</artifactId> <version>4.2.2</version> </dependency> <dependency> <groupId>com.querydsl</groupId> <artifactId>querydsl-apt</artifactId> <version>4.2.2</version> <scope>provided</scope> </dependency> <dependency> <groupId>com.querydsl</groupId> <artifactId>querydsl-core</artifactId> <version>4.2.2</version> </dependency> ``` 接下来，我们需要创建一个实体类，假设我们的实体类是`User`，在这个实体类中，我们需要添加一些jpa注解，例如：`@Entity`、`@Table`、`@Id`和`@GeneratedValue`等。 User.java ```java @Entity @Table(name = "user") public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private Integer age; // Getter and Setter methods } ``` 接下来，我们需要创建一个查询接口，用于定义查询方法。在这个接口中，我们需要继承`JpaRepository`接口，并且添加QueryDSL的相关注解。 UserQueryRepository.java ```java @Repository public interface UserQueryRepository extends JpaRepository<User,Long>,QuerydslPredicateExecutor<User>,QuerydslBinderCustomizer<QUser> { @Override default void customize(QuerydslBindings bindings, QUser root) { bindings.bind(String.class).first((StringPath path, String value) -> path.containsIgnoreCase(value)); } List<User> findAll(Predicate predicate); } ``` 在这个接口中，我们使用`QuerydslPredicateExecutor`接口来执行对实体类的谓语查询。同时，我们还需要实现`QuerydslBinderCustomizer<QUser>`接口来添加一些自定义的查询条件。 我们在这里添加了一个字符串类型的自定义查询条件，用于模糊查询。可以根据需要添加其他自定义查询条件。 接下来，我们需要创建一个Service类，用于调用查询接口进行数据库操作。在这个Service类中，我们需要注入这个查询接口，并且实现具体的查询方法。 UserService.java ```java @Service public class UserService { @Autowired UserQueryRepository userQueryRepository; public List<User> findAll(User user){ QUser qUser = QUser.user; BooleanBuilder builder = new BooleanBuilder(); if(user.getId()!=null){ builder.and(qUser.id.eq(user.getId())); } if(StringUtils.isNotEmpty(user.getName())){ builder.and(qUser.name.contains(user.getName())); } if(user.getAge()!=null){ builder.and(qUser.age.eq(user.getAge())); } List<User> list = userQueryRepository.findAll(builder.getValue()); return list; } } ``` 在这个Service类中，我们使用了`BooleanBuilder`来拼接查询条件。同时，我们也使用了`QUser`来代表我们的实体类。 最后，我们需要在SpringBoot的配置文件中配置JPA和QueryDSL。具体的配置内容如下： application.yaml ```yaml spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=UTC username: root password: root jpa: show-sql: true hibernate: ddl-auto: update properties: hibernate: dialect: org.hibernate.dialect.MySQL5Dialect querydsl: default-use-collection: true ``` 在这个配置文件中，我们添加了一些JPA和QueryDSL的相关配置。其中，`default-use-collection`用于将多个结果集合并成一个结果集。 到此，我们整个案例就完成了。我们可以使用类似下面的代码来测试我们的查询方法： TestUser.java ```java @SpringBootTest class TestUser { @Autowired private UserService userService; @Test void contextLoads() { User user = new User(); user.setAge(18); List<User> list = userService.findAll(user); System.out.println(list); } } ``` 通过这个案例，我相信您已经掌握了使用springboot jpa2.2.10和QueryDSL进行查询的方法。如果您还有任何疑问，可以随时向我提问。
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值