前端页面主要使用JSP
1、登录页面，index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Title</title>
<style>
#box{
position: relative;
margin: 200px auto;
border-radius: 20px;
width: 400px;
height: 300px;
background-color: darkturquoise;
}
.a{
width: 200px;
height: 40px;
}
#box2{
position: absolute;
top: 210px;
left: 70px;
}
#a{
width: 260px;
}
table{
position: absolute;
left: 70px;
top:70px;
}
p{
position: absolute;
top: -15px;
right: 72px;
}
</style>
</head>
<body>
<%
Cookie[] cookies = request.getCookies();
if(cookies!=null){
for (Cookie c : cookies){
if("username".equals(c.getName())){
pageContext.setAttribute("username",c.getValue());
}
if("password".equals(c.getName())){
pageContext.setAttribute("password",c.getValue());
}
}
}
%>
<div id="box">
<form action="hello">
<table height="120px" align="center" cellspacing="0">
<tr align="right">
<td>账号：</td>
<td><input type="text" name="username" value="${username}" class="a"></td>
</tr>
<tr align="right">
<td>密码：</td>
<td><input type="password" name="password" value="${password}" class="a"></td>
</tr>
</table>
<div id="box2">
<input type="checkbox" value="checkon" name="save" id=""
<c:if test="${!empty username}">
checked
</c:if>
>记住密码<p>没有账号？<a href="register.jsp">注册</a></p>
<input type="submit" value="登录" class="a" id="a">
</div>
</form>
</div>
</body>
</html>
2、注册页面，register.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<style>
input{
width: 200px;
height: 30px;
}
#box{
width: 350px;
height: 400px;
border-radius: 30px;
background-color:dodgerblue;
position: relative;
margin: 200px auto;
}
table{
position: absolute;
top: 40px;
left: 30px;
}
#a{
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<div id="box">
<form action="register" >
<table height="300px">
<tr>
<td align="right">用户名：</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<td align="right">名字：</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td align="right">电话：</td>
<td><input type="text" name="tel"></td>
</tr>
<tr>
<td align="right">出生日期：</td>
<td><input type="date" name="bir"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册" id="a"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
3.主页面，stuservlet.jsp
<%@ page import="java.util.List" %>
<%@ page import="com.offcn.entity.Student" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Title</title>
<style>
#in{
width: 50px;
height: 30px;
position: relative;
background-color: chartreuse;
top: 30px;
left: 1100px;
}
</style>
</head>
<body>
<jsp:include page="top.jsp"></jsp:include>
<div id="in"><a href="insert.jsp">添加</a></div>
<center>
<form action="student">
姓名：<input type="text" name="name" style="width: 80px">
性别：<select name="sex" id="">
<option value="-1">请选择</option>
<option value="0">男</option>
<option value="1">女</option>
</select>
<input type="submit" value="搜索">
</form>
</center>
<table border="1px" width="60%" align="center" cellspacing="0">
<caption><b style="font-size: 50px">学生信息表</b></caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
<th>生日</th>
<th>头像</th>
<th colspan="2">操作</th>
</tr>
<c:forEach items="${list}" var="s" varStatus="i">
<tr align="center">
<td>${s.sid}</td>
<td>${s.name}</td>
<td>${s.age}</td>
<td>${s.sex}</td>
<td>${s.tel}</td>
<td>${s.bir}</td>
<td>
<img src="/pic/${s.spic}" height="50px" alt="">
</td>
<td><a href="delete?id=${s.sid}">删除</a></td>
<td><a href="update?id=${s.sid}">修改</a></td>
</tr>
</c:forEach>
</table>
<center>
<a href="student?curPage=1&name=${name}&sex=${sex}">首页</a>
<a href="student?curPage=${p.prevPage}&name=${name}&sex=${sex}">上一页</a>
<c:forEach begin="1" end="${p.endPage}" var="n">
<a href="student?curPage=${n}&name=${name}&sex=${sex}">${n}</a>
</c:forEach>
<a href="student?curPage=${p.nextPage}&name=${name}&sex=${sex}">下一页</a>
<a href="student?curPage=${p.endPage}&name=${name}&sex=${sex}">尾页</a>
<span>${p.curPage}/${p.endPage}</span>
<span>总记录数：${p.rows}</span>
<input size="3" id="pageNum"/>
<input type="button" value="跳转" onclick="jumpPage(${p.endPage})"/>
</center>
</body>
<script>
function jumpPage(n){
var num = document.getElementById("pageNum").value;
if(num>=1&&num<=n){
location.href="student?curPage="+num+"&name=${name}&sex=${sex}";
}else {
alert("请输入有效页码");
}
}
</script>
</html>
4、添加学生页面，insert.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input{
width: 200px;
height: 30px;
}
#box{
width: 350px;
height: 400px;
border-radius: 30px;
background-color:dodgerblue;
position: relative;
margin: 200px auto;
}
table{
height: 300px;
position: absolute;
top: 40px;
left: 30px;
}
</style>
</head>
<body>
<jsp:include page="top.jsp"></jsp:include>
<div id="box">
<form action="insert" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>姓名：</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>年龄：</td>
<td><input type="text" name="age"></td>
</tr>
<tr>
<td>性别：</td>
<td><select name="sex">
<option value="0">男</option>
<option value="1">女</option>
</select></td>
</tr>
<tr>
<td>电话：</td>
<td><input type="text" name="tel"></td>
</tr>
<tr>
<td>生日：</td>
<td><input type="date" name="bir"></td>
</tr>
<tr>
<td>头像：</td>
<td><input type="file" name="spic"></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" value="提交" ></td>
</tr>
</table>
</form>
</div>
</body>
</html>
5、修改页面，update.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<style>
input{
width: 200px;
height: 30px;
}
#box{
width: 350px;
height: 400px;
border-radius: 30px;
background-color:dodgerblue;
position: relative;
margin: 200px auto;
}
table{
height: 300px;
position: absolute;
top: 40px;
left: 30px;
}
#a{
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<div id="box">
<form action='update2' method="post" enctype="multipart/form-data">
<table>
<tr>
<td>学号：</td>
<td><input type="text" name="id" value="${s1.sid}" readonly="readonly"></td>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text" name="name" value="${s1.name}"></td>
</tr>
<tr>
<td>年龄：</td>
<td><input type="text" name="age" value="${s1.age}"></td>
</tr>
<tr>
<td>性别：</td>
<td><select name="sex" value="${s1.sex}">
<option value="0">男</option>
<option value="1">女</option>
</select></td>
</tr>
<tr>
<td>电话：</td>
<td><input type="text" name="tel" value="${s1.tel}"></td>
</tr>
<tr>
<td>生日：</td>
<td><input type="text" name="bir" value="${s1.bir}"></td>
</tr>
<tr>
<td>头像：</td>
<td><img src="/pic/${s1.spic}" alt="" width="50px"><input type="file" name="newspic"><br></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" value="提交" ></td>
</tr>
</table>
</form>
<input type="hidden" name="spic" value="${s1.spic}">
</div>
</body>
</html>
7、登录失败页面 ，login_fail.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
登录失败<a href="index.jsp">重新登录</a>
</body>
</html>
8、顶部展示, top.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>顶部页面</title>
</head>
<body>
<div style="width: 100%;height: 50px;background-color: darkturquoise">
<p style="text-align: right;position: relative;top: 15px;right: 60px">
欢迎【${user.name}】<a href="logout">安全退出</a>
</p>
</div>
</body>
</html>
这是一个关于前后端交互的实例，包括登录、注册和学生信息管理的页面。用户可以通过JSP进行登录和注册操作，其中登录页面会检查Cookie以填充用户名和密码。注册页面允许用户输入个人信息并提交。主页面展示了学生信息表，支持搜索、分页和操作功能。添加学生页面让用户可以输入新学生的详细信息，而更新页面允许修改已有学生的信息。登录失败页面则提示用户重新登录。
扫一扫
939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
