为了复习之前学习的相关的html，javaweb等知识。自己有重新编写了一遍学生选课系统。
下面主要展示登录界面的代码，以及各个大的主页面的相关jsp。
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <title>登录</title> <style type="text/css"> *{ padding:0px; margin:0px; } .header{ 100%; height:120px; background-color:#D2E9FF; text-align:center; } .container{ 100%; height:552px; position:relative; background-color:#A6FFFF; } .login{ 500px; height:auto; background-color:white; position:absolute; top:50px; left:320px; border-radius:8px; } label{ float:left; 100px; margin-top:7px; margin-right:5px; } .form-control{ 60%; } .logtip{ padding-top:20px; padding-bottom:20px; border-bottom:2px solid red; text-align:center; } .form-group{ margin-left:33px; margin-top:33px; } .btn{ height:50px; 100px; float:left; border-radius:10px; } .logbtn{ margin-right:20px; } .btnbag{ margin-left:140px; margin-right:140px; height:50px; overflow:hidden; margin-top:30px; margin-bottom:40px; } </style> </head> <body> <div class="header"><h2>学生选课系统</h2></div> <div class="container"> <div class="login"> <h2 class="logtip">登录</h2> <form action="login_do" method="post"> <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username" name="username"> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password" name="password"> </div> <div class="form-group"> <label for="name">类型</label> <select name="leibie" id="leibie" required="required" class="form-control" > <option value="管理员">管理员</option> <option value="学生">学生</option> <option value="老师">老师</option> </select> </div> <div class="btnbag"> <input type="button" class="btn btn-primary logbtn" onclick="login()" value="登录"> <input type="button" class="btn btn-primary mangbtn" onclick="entermang()" value="进入管理"> </div> </form> </div> </div> <div class="footer"></div> </body> <script> function login() { var username=$("#username").val(); var password=$("#password").val(); var leibie=$("#leibie").val(); if(username==""||password=="") alert("请将信息填写完整！"); else { $.post( "registecheck", {"name":username, "password":password, "role":leibie}, function(data){ if(data=="yes") { if(leibie=="学生") { alert("学生身份验证成功登陆！"); window.location="TheWord1.jsp?value="+username; } else if(leibie=="老师") { alert("老师身份验证成功登陆！"); window.location="TheWord2.jsp?value="+username; } else { alert("管理员登录，请点击进入管理按钮"); } } else alert("用户名或密码错误,登录失败！"); }, "text" ); } } function entermang() { var username=$("#username").val(); var password=$("#password").val(); var leibie=$("#leibie").val(); if(username==""||password=="") alert("请将信息填写完整！"); else { $.post( "registecheck", {"name":username, "password":password, "number":leibie}, function(data){ if(data=="yes") { if(leibie=="管理员") { alert("管理员进入管理成功！"); window.location="TheWord3.jsp?value="+username; } } else alert("用户名或密码错误！"); }, "text" ); } } </script> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script> function onload() { <% String value=""; value=request.getParameter("value"); %> $("#informationshow").text("当前登录账户：<%=value %>"); } function exitlog(event) { var msg = "您确定要注销吗？"; if (confirm(msg)==true){ event.href="index.jsp"; } else{ alert("操作取消！"); } } </script> </head> <body onload="onload()"> <div class="header"> <h2>欢迎来到学生选课系统</h2> <div class="loginfoshow" id="userinfor"> <p id="informationshow"></p> <a href="" onclick="exitlog(this)">[注销]</a> </div> </div> <div class="contain"> <div class="list-group"> <a id="1" href="lookmessage?name=<%=value %>" class="list-group-item list-group-item-aciton" target="operation">查看个人信息</a> <a id="2" href="updatamessage?name=<%=value %>" class="list-group-item list-group-item-aciton" target="operation">修改基本信息</a> <a id="3" href="changepassword.jsp?name=<%=value %>" class="list-group-item list-group-item-aciton" target="operation">修改密码</a> <a id="4" href="choiceclass?name=<%=value %>" class="list-group-item list-group-item-aciton" target="operation">进行选课</a> <a id="5" href="lookclass?name=<%=value %>" class="list-group-item list-group-item-aciton" target="operation">查看已选课程</a> </div> <div class="operation"> <iframe name="operation" src="" width="100%" height="100%" style="background-color: gray;"></iframe> </div> </div> <div class="footer"></div> </body> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script> function onload() { <% String value=""; value=request.getParameter("value"); %> $("#informationshow").text("当前登录账户：<%=value %>"); } function exitlog(event) { var msg = "您确定要注销吗？"; if (confirm(msg)==true){ event.href="index.jsp"; } else{ alert("操作取消！"); } } </script> </head> <body onload="onload()"> <div class="header"> <h2>欢迎来到老师课程系统</h2> <div class="loginfoshow" id="userinfor"> <p id="informationshow"></p> <a href="" onclick="exitlog(this)">[注销]</a> </div> </div> <div class="contain"> <div class="list-group"> <a id="1" href="lookmessage?name=<%=value %>" class="list-group-item list-group-item-aciton" target="operation">查看个人信息</a> <a id="2" href="updatamessage?name=<%=value %>" class="list-group-item list-group-item-aciton" target="operation">修改基本信息</a> <a id="3" href="changepassword.jsp?name=<%=value %>" class="list-group-item list-group-item-aciton" target="operation">修改密码</a> <a id="4" href="lookclassall?name=<%=value %>" class="list-group-item list-group-item-aciton" target="operation">查看本人课程</a> <a id="5" href="lookclassseach?name=<%=value %>" class="list-group-item list-group-item-aciton" target="operation">课程操作</a> <a id="6" href="addclass.jsp?name=<%=value %>" class="list-group-item list-group-item-aciton" target="operation">增加新的课程</a> </div> <div class="operation"> <iframe name="operation" src="" width="100%" height="100%" style="background-color: gray;"></iframe> </div> </div> <div class="footer"></div> </body> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script> function onload() { <% String value=""; value=request.getParameter("value"); %> $("#informationshow").text("当前登录账户：<%=value %>"); } function exitlog(event) { var msg = "您确定要注销吗？"; if (confirm(msg)==true){ event.href="index.jsp"; } else{ alert("操作取消！"); } } </script> </head> <body onload="onload()"> <div class="header"> <h2>欢迎来到老师课程系统</h2> <div class="loginfoshow" id="userinfor"> <p id="informationshow"></p> <a href="" onclick="exitlog(this)">[注销]</a> </div> </div> <div class="contain"> <div class="list-group"> <a id="1" href="lookmessage?name=<%=value %>" class="list-group-item list-group-item-aciton" target="operation">查看个人信息</a> <a id="2" href="updatamessage?name=<%=value %>" class="list-group-item list-group-item-aciton" target="operation">修改基本信息</a> <a id="3" href="changepassword.jsp?name=<%=value %>" class="list-group-item list-group-item-aciton" target="operation">修改密码</a> <a id="4" href="addnewuser.jsp?name=<%=value %>" class="list-group-item list-group-item-aciton" target="operation">增加用户</a> <a id="5" href="updatausermessage?name=<%=value %>" class="list-group-item list-group-item-aciton" target="operation">修改用户信息</a> </div> <div class="operation"> <iframe name="operation" src="" width="100%" height="100%" style="background-color: gray;"></iframe> </div> </div> <div class="footer"></div> </body> </body> </html>
其中的登录界面的截图如下：
