当前位置：首页 > 网络教程 > php > jsp期末作业设计

jsp期末作业设计

一叶知秋2024-01-31 07:14:12php11

目录

一.设计类型

二.具体要求：

三版本配置要求

四.项目效果截图

​编辑

五.项目部分代码(链接在最后)

一.设计类型

jsp设计学生信息管理项目

二.具体要求：

  1. 设计注册功能，注册用户的信息不少于6项，需设计主键和注册时间；
  2. 受用手机号和电子邮件地址登录，记录登录时间，每次登录时更新登陆时间；
  3. 密码修改和密码找回功能；
  4. 修改个人资料功能；
  5. 用户注销功能，注销的用户的注册信息移动到注销表中，表中必须记录注销时间，注销用户重新注册之后从注销表中删除；
  6. 管理员登陆后可查看全部注册用户信息，对二年以上未登陆的用户移动到注销表中；
  7. 管理员登陆后可以查看全部注销用户；
  8. 使用MVC模式；
  9. 使用表达式和核心标签；
  10. 使用预处理语句；
  11. 查询记录较多时，使用分页功能；

三版本配置要求

jdk版本:1.8；

tomcat版本：8.5；

四.项目效果截图

管理员界面

数据库界面

登录界面

注册界面

五.项目部分代码

login.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%> 
    
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
</head>
<style>
 * {
     padding: 0;
     margin: 0;
     transition: .3s;
 }

 body {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     background-image: url(static/img/03.jpg);
     background-size: cover;
 }

 .shell {
     width: 350px;
     padding: 40px;
     display: flex;
     align-items: center;
     flex-direction: column;
     background-color: #ffffff49;
     border-radius: 50px;
     box-shadow: 0 0 30px rgba(255, 255, 255, 0.5) inset;
     transform: translateY(-50px);
 }

 .title {
     font-size: 80px;
     margin-bottom: 30px;
     color: #fff;
     text-shadow: 0 0 10px #ff9dff80;
 }

 input[type="text"],
 input[type="password"] {
     width: 100%;
     height: 50px;
     margin: 10px 0;
     box-sizing: border-box;
     color: rgb(0, 0, 0);
     border: 5px solid transparent;
     background: rgba(255, 255, 255, .5);
     border-radius: 100px;
     padding: 5px 20px 0 20px;
     transition: 0.3s;
     font-size: 18px;
     outline: none
 }

 input[type="text"]:hover,
 input[type="password"]:hover {
     background: rgba(255, 255, 255, 0);
     border: 5px solid #ffffff;
 }

 input[type="submit"] {
     width: 100%;
     height: 50px;
     padding: 10px;
     margin: 15px 0;
     border-radius: 100px;
     border: none;
     background-color: #007bff;
     color: #fff;
     cursor: pointer;
     font-size: 20px;
     letter-spacing: 3px;
 }

 input::placeholder {
     color: #92A7E8;
 }

 .footer {
     display: flex;
     <!--平均分配空白空间 -->
     justify-content: space-between;
     align-items: center;
     width: 100%;
     margin-top: 20px;
 }

 .Remember {
     opacity: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 18px;
     color: #7597ff;
 }

 input[type="checkbox"] {
     display: block;
     width: 25px;
     height: 25px;
     margin-right: 10px;
     background-color: #007bff;
 }

 #Password {
     border: none;
     background-color: #ffffff00;
     color: #7597ff;
     font-size: 18px;
 }
</style>
<body>
    <form action="/sys" method="post">
        <input type="hidden" name="type" value="login" />
        <div class="shell">
            <h2 class="title" id="myModalLabel">Login</h2>
            <input type="text" required="required" name="phone" class="form-control" placeholder="手机号"
                autocomplete="off">
            <input type="password" required="required" name="password" class="form-control" placeholder="密码"
                autocomplete="off">
            <input type="submit" value="登录" id="loginBtn">
            <div class="footer">
                <div class="Remember">
                    <input type="checkbox" id="rememberMe">
                    <label for="rememberMe">记住我</label>
                </div>
                <button type="button" onclick="location.href='/sys?type=register'" id="Password">注册</button>
            </div>
        </div>
    </form>

<% String errorMsg = (String) request.getAttribute("errorMsg");
       if (errorMsg != null && !errorMsg.isEmpty()) { %>
        <p style="color: red;text-align:center;"><%= errorMsg %></p>
    <% } %>
</body>
</html>

register.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<link href="static/css/register.css" rel="stylesheet">
</head>
<style>
 * {
     padding: 0;
     margin: 0;
     transition: .3s;
 }

 body {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     background-image: url(static/img/06.jpg);
     background-size: cover;
        background-color: #25d698;
   
 }

 .shell {
     width: 350px;
     padding: 40px;
     display: flex;
     align-items: center;
     flex-direction: column;
     background-color: #ffffff49;
     border-radius: 50px;
     box-shadow: 0 0 30px rgba(255, 255, 255, 0.5) inset;
     transform: translateY(-50px);
 }

 .title {
     font-size: 80px;
     margin-bottom: 30px;
     color: #fff;
     text-shadow: 0 0 10px #ff9dff80;
 }

 input[type="text"], input[type="email"], input[type="tel"], select[class="form-control"],
 input[type="password"] {
     width: 100%;
     height: 40px;
     margin: 10px 0;
     box-sizing: border-box;
     color: rgb(0, 0, 0);
     border: 5px solid transparent;
     background: rgba(255, 255, 255, .5);
     border-radius: 100px;
     padding: 5px 20px 0 20px;
     transition: 0.3s;
     font-size: 18px;
     outline: none
 }

 input[type="text"]:hover,input[type="email"]:hover, input[type="tel"]:hover,select[class="form-control"]:hover,
 input[type="password"]:hover {
     background: rgba(255, 255, 255, 0);
     border: 5px solid #ffffff;
 }

 input[type="submit"] {
     width: 100%;
     height: 40px;
     padding: 10px;
     margin: 15px 0;
     border-radius: 100px;
     border: none;
     background-color: #007bff;
     color: #fff;
     cursor: pointer;
     font-size: 20px;
     letter-spacing: 3px;
 }

 input::placeholder {
     color: #92A7E8;
 }

 .footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     margin-top: 20px;
 }

 .Remember {
     opacity: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 18px;
     color: #7597ff;
 }

 input[type="checkbox"] {
     display: block;
     width: 25px;
     height: 20px;
     margin-right: 10px;
     background-color: #007bff;
 }

 #Password {
     border: none;
     background-color: #ffffff00;
     color: #7597ff;
     font-size: 18px;
 }
     .error {
      color: red;
      font-weight: bold;
    }
</style>
<body>
<div class="container">
<form action="/sys" method="post" id="myForm">
	 <div class="shell">
         <input type="hidden" name="type" value="register" /> 
          <h2 class="title">Register</h2>
       <input type="text" required="required" class="form-control" id="username" name="username" placeholder="请输入用户名">
       <input type="password" required="required" class="form-control" id="password" name="password" placeholder="请输入密码">
       <input type="email" required="required" class="form-control" id="email" name="email" placeholder="请输入邮箱">
       <input type="tel" required="required" class="form-control" id="phone" name="phone" placeholder="请输入电话">
              
       <select required="required" class="form-control" id="gender" name="gender">
           <option value="M">男</option>
           	<option value="F">女</option>
        </select>
        <select required="required" class="form-control" id="role" name="role">
           	 <option value="0">学生用户</option>
       </select>
        <input type="submit" value="Login" id="loginBtn">
        <div class="footer">
            <div class="Remember">
                <input type="checkbox" id="rememberMe">
                <label for="rememberMe">记住我</label>
            </div>
        </div>
    </div>

</form>
<% String errorMsg = (String) request.getAttribute("errorMsg");
       if (errorMsg != null && !errorMsg.isEmpty()) { %>
        <p style="color: red;text-align:center;"><%= errorMsg %></p>
    <% } %>
</div>

<!-- 进行格式判断 -->
 
    <script>
        // 获取表单元素
        var phoneInput = document.getElementById('phone');
        var emailInput = document.getElementById('email');

        // 手机号正则表达式
        var phoneRegex = /^1[3456789]\d{9}$/;
        // 邮箱正则表达式
        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        // 添加表单提交事件监听
        document.getElementById('myForm').addEventListener('submit', function(event) {
            // 阻止表单默认的提交行为
            event.preventDefault();
          
            // 获取用户输入的手机号和邮箱
            var phoneNumber = phoneInput.value;
            var emailAddress = emailInput.value;

            // 验证手机号格式
            if (!phoneRegex.test(phoneNumber) || phoneNumber.length !== 11) {
                alert('请输入有效的11位手机号码');
                return;
            }

            // 验证邮箱格式
            if (!emailRegex.test(emailAddress)) {
                alert('请输入有效的电子邮件地址');
                return;
            }

            // 执行表单提交操作
            this.submit();
        });
    </script>
</body>
</html>

index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="static/css/material-design-iconic-font.min.css">
<link rel="stylesheet" href="static/css/style.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<!DOCTYPE html>
<html>
<head>
  <title>主页</title>
  <meta charset="utf-8">
</head>
<style>
</style>
<body>
<div id="viewport">
  <!-- Sidebar -->
  <div id="sidebar">
    <header>
      <a href="#">后台管理</a>
    </header>
    <ul class="nav">
    <!-- 当是管理员用户时候，左边侧边栏显示查看所有用户的一个链接 -->
    	<c:if test="${sessionScope.user.role == 1 }">
    		<li>
        <a href="#" data-src="/sys?type=checkUser">
          <i class="zmdi zmdi-view-dashboard"></i> 查看所有用户
        </a>
      </li>
         <!-- 当是学生用户时候，左边侧边栏显示修改个人资料的一个链接 -->
    	</c:if>
    	<c:if test="${sessionScope.user.role == 0 }">
    		<li>
        <a href="#" data-src="/sys?type=modify">
          <i class="zmdi zmdi-view-dashboard"></i> 修改个人资料
        </a>
      </li>
    	</c:if>
      
      
    </ul>
  </div>
  
  <!-- Content -->
  <div id="content">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
      <ul class="nav navbar-nav navbar-left">
          <li><a href="#">当前用户[${sessionScope.user.username }]</a></li>
          <li><a href="sys?type=modifyPwd">修改密码</a></li>
          <li><a href="sys?type=findPwd">密码找回</a></li>
          <li><a href="sys?type=cancelUser">注销账户</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="sys?type=logout">注销/退出登录</a></li>
        </ul>
      </div>
    </nav>
    <div class="container-fluid">
      <p>
         <iframe frameborder="0" scrolling="yes" style="width:100%;height:100%" src="" id="aa"></iframe>
      </p>
    </div>
  </div>

</div>
<script>
<!-- 当用户点击导航链接时，获取链接对应的页面地址，并将该地址设置为 iframe 的 src 属性，加载相应的页面内容-->
$(function(){
    $(".nav li a").on("click",function(){
      var address =$(this).attr("data-src");
      console.log(address);
      $("#aa").attr("src",address);
   });
});
</script>
</body>
</html>

扫描二维码推送至手机访问。

版权声明：本站部分文章来自AI创作、互联网收集，请查看免责申明

本文链接：https://www.yyzq.team/post/309211.html

标签: 课程设计
分享给朋友：
返回列表

上一篇：数据库Schema设计详解与实例

下一篇：软件数据库设计说明书

“jsp期末作业设计” 的相关文章

php压缩html函数，利于SEO2022-12-13
简单的php开发cms需求(php语言编写的CMS系统有哪些？)2023-01-13
仓管软件开发 仓管系统软件2023-07-12
武汉软件开发电话 武汉软件开发电话号码多少2023-07-12
软件开发接项目单 软件项目的开发流程2023-07-12
uml应用软件开发 uml开发过程2023-07-12
软件开发培训宣传单 软件开发宣传文案2023-07-12
招行软件开发中心杭州 杭州招行软件开发中心待遇2023-07-12
软件开发 税点 软件开发适用税率2023-07-12
手机可以做软件开发吗 手机能不能做软件2023-07-12
软件开发环境设计方案 软件开发环境设计方案模板2023-07-12
软件开发原型是什么意思 软件开发原型图实例2023-07-12

Copyright ©一叶知秋网络科技工作室 苏ICP备2024092970号-1 www.yyzq.team