Web教程---学生管理系统->教师端
学生管理系统->教师端
- 一、创建TeacherLogin.jsp
- 实现的内容：
- 效果图：
- 代码：
- 二、创建Teacher.jsp
- 三、创建TeacherLoginServlet.java
一、创建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("");
out.println("");
out.println("");
out.println("");
out.println("二、创建Teacher.jsp
主要实现学生信息管理，可进行学生信息删除(暂未连接数据库)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<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>18td>
<td>大三td>
<td><a id="stu3" href="javascript:removeTr(1)">删除a>td>
tr>
<tr id="tr2">
<td>刘某人td>
<td>22td>
<td>大二td>
<td><a id="stu3" href="javascript:removeTr(2)">删除a>td>
tr>
<tr id="tr3">
<td>刁某人td>
<td>87td>
<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);
}
}
}