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

最新推荐文章于 2023-12-16 22:07:21 发布

是镜子阿

最新推荐文章于 2023-12-16 22:07:21 发布

阅读量2k

点赞数 6

分类专栏： SpringBoot 文章标签： SpringBoot+JPA 前端页面 JavaWeb

本文链接：https://blog.csdn.net/weixin_42158633/article/details/89743568

版权

SpringBoot 专栏收录该内容

3 篇文章 3 订阅

订阅专栏

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

(一)目录结构：

(二)前端静态页面代码

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>