一、創建TeacherLogin.jsp
注意創建在WebContent文件夾下
實現的內容：
1.四張狗兒子圖片的輪播（對，就是我們宿舍那四個狗兒子）
2.一個登錄界面
3.對輸入框進行美化
4.對登錄按鈕進行美化
5.在賬號或密碼錯誤時彈窗出：請檢查你的賬號或密碼！！！然後跳轉回TeacherLogin.jsp
效果圖：
輸入錯誤時彈窗：
輸入成功時跳轉：
代碼：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>教師端學生管理系統</title>
<style>
img{
width: 570px;
height: 765px;
display: none;/*圖片消失*/
}
#header{
background-color: #EEEEEE;
color: black;
text-align: center;
padding: 5px;
width:400px;
heigh:100px;
position: absolute;
left: 870px;
top: 200px;
}
#windows{
position: absolute;
left: 900px;
top: 350px;
}
input{
border: 1px solid #ccc;
padding: 7px 0px;
border-radius: 3px;
padding-left:5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
input:focus{
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
</style>
</head>
<body onload="showImg(1)">
<div>
<img id="myImg1" src="img/img1.jpg" border="1"/>
<img id="myImg2" src="img/img2.jpg" border="1"/>
<img id="myImg3" src="img/img3.jpg" border="1"/>
<img id="myImg4" src="img/img4.jpg" border="1"/>
</div>
<%
Object msg=request.getAttribute("msg");
if(msg!=null){
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<meta charset=\"UTF-8\">");
out.println("<title></title>");
out.println("</head>");
out.println("<body>");
out.println("</body>");
out.println("<script>");
out.println("alert(\"請檢查你的賬號或密碼\")");
out.println("</script>");
out.println("</html>");
}
%>
<div id="header">
<h1>學生管理系統教師端</h1>
</div>
<div id="windows">
<form action="TeacherLoginServlet" method="post">
賬號： <input style="width:250px;height:30px" id="username" type="text" name="username" placeholder="請輸入用戶名"/><br/>
<br/>
密碼： <input style="width:250px;height:30px" id="pass" type="password" name="pass" placeholder="請輸入密碼"/><br/>
<br/>
<input id="anniu" style="width:70px;height:35px" type="submit" value="登錄"/>
</form>
</div>
</body>
<script>
var nowshow=1; //當前顯示的圖片
var sid; //聲明sid用來接收serTimeOut返回值
function showImg(index){
if(Number(index)){
clearTimeout(sid); //清除定時調用
nowshow=index;
}
for (var i=1;i<5;i++) {
if (i==nowshow) {
document.getElementById("myImg"+nowshow).style.display="block";
} else{
document.getElementById("myImg"+i).style.display="none";
}
}
if(nowshow>=4){
nowshow=1;
}else{
nowshow++;
}
sid=setTimeout("showImg()",2000);//每隔3秒鐘執行
}
</script>
</html>
二、創建Teacher.jsp
主要實現學生信息管理，可進行學生信息刪除(暫未連接數據庫)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>學生信息管理</title>
<style>
#header{
background-color: black;
color: white;
text-align: center;
padding: 5px;
}
#nav{
background-color: #EEEEEE;
line-height: 30px;/*行高*/
height: 560px;
width: 120px;
text-align: center;
padding: 5px;
float: left;/*不僅影響自己*/
}
#section{
width: 800px;
float: left;
padding: 20px;
}
#footer{
background-color: black;
color: white;
text-align: center;
padding: 5px;
clear: both;/*清除浮動*/
height: 30px;
}
#nav2{
list-style-type: none;
margin: 0; /*外邊距*/
padding: 0; /*內邊距*/
}
/*塊狀*/
a{
display: block;
width: 100px;
color: black;
background-color: #BEBEBE;
text-decoration: none; /*去掉下劃線*/
text-align: center;
font-size: 20px;
padding: 6px;
}
a:hover{
color: white;
background-color: black;
}
#stu3{
color: black;
background-color: white;
font-size:18px;
}
</style>
</head>
<body>
<div id="header">
<h1>學生管理系統後臺</h1>
</div>
<div id="nav">
<ul id="nav2">
<li><a href="#">學生管理</a></li>
<li><a href="#">學生成績</a></li>
<li><a href="#">修改密碼</a></li>
<li><a href="#">系統統計</a></li>
<li><a href="#">退出系統</a></li>
</ul>
</div>
<div id="section">
<table>
<tr>
<td>姓名</td>
<td>年齡</td>
<td>年級</td>
<td> 操作</td>
</tr>
<tr id="tr1">
<td>呂某人</td>
<td>18</td>
<td>大三</td>
<td><a id="stu3" href="javascript:removeTr(1)">刪除</a></td>
</tr>
<tr id="tr2">
<td>劉某人</td>
<td>22</td>
<td>大二</td>
<td><a id="stu3" href="javascript:removeTr(2)">刪除</a></td>
</tr>
<tr id="tr3">
<td>刁某人</td>
<td>87</td>
<td>幼兒園</td>
<td><a id="stu3" href="javascript:removeTr(3)">刪除</a></td>
</tr>
</table>
</div>
<div id="footer">
Copyright ©
<font color="white">青島大學天軟軟件基地實訓</font>
</div>
</body>
<script src="js/jquery-1.11.0.js"></script>
<script>
function removeTr(index){
var flag=confirm("請問確認刪除嘛？");
if(flag){
$("#tr"+index).remove();
}
}
</script>
</html>
三、創建TeacherLoginServlet.java
主要負責將用戶名與密碼與數據庫中的進行對比
package org.lanqiao.servlet;
import java.io.IOException;
//import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.lanqiao.bean.Student;
import org.lanqiao.util.DBUtil;
/**
* Servlet implementation class TeacherLoginServlet
*/
@WebServlet("/TeacherLoginServlet")
public class TeacherLoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//處理請求中中文亂碼
request.setCharacterEncoding("utf-8");
//獲取用戶名和密碼
String name=request.getParameter("username");
String pass=request.getParameter("pass");
//使用gdbc連接數據庫判斷用戶名和密碼是否正確
//創建數據庫連接
Connection conn=DBUtil.getConn();
String sql="select * from tea_tab where name=? and pass=?";
//參數
Object[] objs={name,pass};
ResultSet rs=DBUtil.excuteQuery(sql, objs);
//封裝用戶
Student stu=null;
try {
if(rs.next()) {
String stuName=rs.getString("name");
String stuPass=rs.getString("pass");
stu=new Student(stuName,stuPass);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
if(stu!=null) {
//登錄成功，放入用戶名，跳轉到成功頁
response.sendRedirect("TeacherHouTai.jsp");
}else {
//登陸失敗，重定向到登錄項
request.setAttribute("msg", "請檢查你的賬號或密碼是否正確！！！");
request.getRequestDispatcher("TeacherLogin.jsp").forward(request, response);
}
}
}