基于web的学生管理系统（三）前端页面
2024-05-20 13:49:55
前端页面主要使用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>
基于web的学生管理系统（三）前端页面相关推荐
- 基于web的学生管理系统（一）简介
一.功能需求 (一)登录 1.登录页面 2.记住密码功能 3.注册 4.用户跟踪,防止跳过登录程序 (二)主页面 1.分页显示全部信息 2.添加学生按钮 3.删除学生信息按钮 4.修改学生信息按钮 5 ...
- 基于WEB的学生考勤管理系统
技术:Java.JSP等 摘要: 随着计算机科学的发展,各种Web技术也随之不断的发展,Internet的应用越来越广泛.在高校校园信息化过程中,有效地借助网络.数据库等技术成为提高工作和管理效率的关 ...
- 超市管理系统的html页面,基于WEB的超市管理系统_站内搜索_Web开发网
Web开发网 > 站内搜索 > 基于WEB的超市管理系统 系统ctrl+alt+del调出系统任务管理器后,发现没有用户选项卡,如下图 这是因为电脑上Windows用户登录或注销的方式配置 ...
- （附源码）计算机毕业设计SSM基于web的学生社团管理系统
(附源码)计算机毕业设计SSM基于web的学生社团管理系统 项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe ...
- 基于mysql的高校学生管理系统_基于Web的学生考勤管理系统的设计与实现(Struts2,MySQL)...
基于Web的学生考勤管理系统的设计与实现(Struts2,MySQL)(任务书,开题报告,中期检查表,文献综述,外文翻译,毕业论文13000字,程序代码,MySQL数据库) 考勤管理系统对于各个高校来 ...
- 毕业设计-基于web实现药房管理系统
毕业设计的流程 第一步先确定毕业选题,选好导师.在这里说明一下,不同的导师带毕业设计的学生要求不同,有些导师可能会比较严格,具体选择导师这块根据自己的经验或者咨询本校的学长学姐. 选好毕业题目之后,就 ...
- 基于Web的仓库管理系统的设计与实现（论文+PPT+源码）
摘 要 仓库物品的管理是与我们的日常生活息息相关的一个重大问题.随着我国经济飞速的发展,改革开放的不断深入,企业要想在激烈的市场竞争中立于不败之地,要想继续的发展与生存,没有现代化的管理方式与方法是万 ...
- 基于ssm的学生管理系统
基于ssm的学生管理系统 开发环境 开发软件 idea 也可以用eclipse导入 前端 lyaui 后端 spring springmvc mybatis 分页用的pagehelper maven管 ...
- 1.0 java_Mybatis_oracle基于WEB的仓库管理系统的设计与实现(源码+数据库sql+论文+视频齐全)----库管理系统---源码在底部
基于Web的仓库管理系统的设计与实现 摘 要 仓库物品的管理是与我们的日常生活息息相关的一个重大问题.随着我国经济飞速的发展,改革开放的不断深入,企业要想在激烈的市场竞争中立于不败之地,要想继续的发展 ...
最新文章
- matlab模拟风场竖桥向时程,索梁结构应急桥抖振响应分析
- 网站优化之如何筛选更正确高质量的关键词？
- bzoj3277 串 (后缀数组+二分答案+ST表)
- COM原理及应用之可连接对象
- spring mvc学习（44）：springMVC运行原理
- 建立远程桌面连接计算机无密码,win7远程桌面空密码的步骤_win7系统如何设置让远程桌面登录无需密码-win7之家...
- Kafka单机安装Version1.0.1(自带Zookeeper)
- 划重点丨详解Java流程控制语句知识点
- 新乡学院2019计算机报名,新乡学院2019年招生章程
- duble 和 float 小数的位数
- Socket套接字，一个简单的聊天室案例！
- 充满正能量阳光活的生日祝福语
- 什么是嵌入式服务器?为什么要使用嵌入式服务器? -- java面试
- 远程服务器用户多开,服务器安全之修改远程桌面限制同一用户使用同一个会话。一个用户只开一个会话禁止多开。...
- HBuilder发行App（Android和ios）
- Bzoj4763 雪辉
- PDF签名失败（深圳市市场监督管理局）
- java卸载不了_java卸载不了怎么处理?卸载时总出现这个
- js添加、删除DOM元素
- OceanBase迷你版集群安装记录