“管理子系统”效果如下：
主页：
管理员功能页：
注册界面（此界面仅是一个界面，暂无功能的实现）
今天只写了这些效果，具体代码情况如下：
前端目录结构如下：
代码如下：
1 <%@ page language="java" contentType="text/html; charset=utf-8"
2 pageEncoding="utf-8"%>
3 <!DOCTYPE html>
4 <html>
5 <head>
6 <meta charset="utf-8">
7 <title>登录界面</title>
8 <script src=".//layui/layui.js"></script>
9 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
10 <meta name="renderer" content="webkit">
11 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
12 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
13 <link rel="stylesheet" href=".//layui/css/layui.css" media="all">
14 <link rel="stylesheet" href=".//style/admin.css" media="all">
15 <link rel="stylesheet" href=".//style/login.css" media="all">
16 </head>
17 <body>
18 <form action="LoginServlet" method="post">
19 <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
20
21 <div class="layadmin-user-login-main">
22 <div class="layadmin-user-login-box layadmin-user-login-header">
23 <h2>管理子系统</h2>
24 </div>
25 <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
26 <div class="layui-form-item">
27 <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
28 <input type="text" name="username" id="username" lay-verify="required" placeholder="用户名" class="layui-input">
29 </div>
30 <div class="layui-form-item">
31 <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
32 <input type="password" name="password" id="password" lay-verify="required" placeholder="密码" class="layui-input">
33 </div>
34 <form action="" class="layui-form">
35 <div class="layui-input-item">
36 <lable class="layui-form-label">身份：</lable>
37 <input type="radio" name="entity" value="管理员" title="管理员" checked="">
38 <input type="radio" name="entity" value="学生" title="学生">
39 <input type="radio" name="entity" value="教师" title="教师">
40 </div>
41 </form>
42 <div class="layui-form-item" style="margin-bottom: 20px;">
43 <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
44 <a href="forget.html" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a>
45 </div>
46 <div class="layui-form-item">
47 <input class="layui-btn layui-btn-fluid" type="submit" value="登录">
48 </div>
49 <div class="layui-trans layui-form-item layadmin-user-login-other">
50 <a href="Zhuce.jsp" class="layadmin-user-jump-change layadmin-link">注册帐号</a>
51 </div>
52 </div>
53 </div>
54 </div>
55 </form>
56 <script>
57 layui.use('form',function(){
58 var form = layui.form;
59 form.render();
60 });
61 </script>
62 </body>
63 </html>
Zhuce.jsp
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset="utf-8"> 7 <title>注册界面</title> 8 <script src=".//layui/layui.js"></script> 9 <meta name="renderer" content="webkit"> 10 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 11 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> 12 <link rel="stylesheet" href=".//layui/css/layui.css" media="all"> 13 <link rel="stylesheet" href=".//style/admin.css" media="all"> 14 <link rel="stylesheet" href=".//style/login.css" media="all"> 15 </head> 16 <body> 17 18 19 <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;"> 20 <div class="layadmin-user-login-main"> 21 <div class="layadmin-user-login-box layadmin-user-login-header"> 22 <h2>新用户注册界面</h2> 23 </div> 24 <div class="layadmin-user-login-box layadmin-user-login-body layui-form"> 25 <div class="layui-form-item"> 26 <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-nickname"></label> 27 <input type="text" name="nickname" id="LAY-user-login-nickname" lay-verify="nickname" placeholder="用户名" class="layui-input"> 28 </div> 29 <div class="layui-form-item"> 30 <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label> 31 <input type="password" name="password" id="LAY-user-login-password" lay-verify="pass" placeholder="密码" class="layui-input"> 32 </div> 33 <div class="layui-form-item"> 34 <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-repass"></label> 35 <input type="password" name="repass" id="LAY-user-login-repass" lay-verify="required" placeholder="确认密码" class="layui-input"> 36 </div> 37 <div class="layui-form-item"> 38 <input type="checkbox" name="agreement" lay-skin="primary" title="同意用户协议" checked> 39 </div> 40 <div class="layui-form-item"> 41 <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-reg-submit">注 册</button> 42 </div> 43 <div class="layui-trans layui-form-item layadmin-user-login-other"> 44 <a href="Login.jsp" class="layadmin-user-jump-change layadmin-link layui-hide-xs">用已有帐号登入</a> 45 <a href="Login.jsp" class="layadmin-user-jump-change layadmin-link layui-hide-sm layui-show-xs-inline-block">登入</a> 46 </div> 47 </div> 48 </div> 49 50 </div> 51 </body> 52 </html>
Admin.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html>
4 <html>
5 <head>
6 <meta charset="UTF-8">
7 <title>管理员功能页</title>
8 <link rel="stylesheet" href=".//layui/css/layui.css" media="all">
9 <script src=".//layui/layui.all.js"></script>
10 <script src=".//layui/layui.js"></script>
11 <script type="text/javascript">
12
13 //JavaScript代码区域
14 layui.use('element', function(){
15 var element = layui.element;
16 });
17
18 </script>
19 </head>
20 <body class="layui-layout-body">
21
22 <div class="layui-layout layui-layout-admin">
23 <div class="layui-header">
24 <div class="layui-logo">
25 <%
26 String username=(String)session.getAttribute("username");
27 out.print(username);
28 %>
29 </div>
30 </div>
31
32 <div class="layui-side layui-bg-black">
33 <div class="layui-side-scroll">
34 <!-- 左侧导航 -->
35 <ul class="layui-nav layui-nav-tree" >
36 <li class="layui-nav-item"><a href="HTALC.html" target="frame">增加</a></li>
37 <li class="layui-nav-item"><a href="Visual.html" target="frame">删除</a></li>
38 </ul>
39 </div>
40 </div>
41 <div class="layui-body">
42 <!-- 内容主体区域 -->
43 <iframe name="frame" width="100%" height="100%"
44 style="border: 1px solid #CCC;"></iframe>
45 </div>
46 <div>
47 <div>
48 <input type="text" id="date" />
49 </div>
50 </div>
51 </div>
52
53 </body>
54 </html>
后端目录结构：
代码如下：
Admin.java
1 public class Admin {
2
3 private String name;
4 private String password;
5 public String getName() {
6 return name;
7 }
8 public void setName(String name) {
9 this.name = name;
10 }
11 public String getPassword() {
12 return password;
13 }
14 public void setPassword(String password) {
15 this.password = password;
16 }
17
18 }
DBUtil.java
1 import java.sql.Connection;
2 import java.sql.DriverManager;
3 import java.sql.PreparedStatement;
4 import java.sql.ResultSet;
5 import java.sql.SQLException;
6
7 public class DBUtil {
8 public static final String url="jdbc:mysql://localhost:3306/manager";//URL,manager为新建的数据库名
9 public static final String user="用户名";//用户名
10 public static final String password="密码";//密码
11
12 /**
13 * 连接数据库
14 * @return
15 */
16 public static Connection getConnection(){
17 Connection conn=null;
18 try {
19 Class.forName("com.mysql.jdbc.Driver");//加载数据库驱动
20 conn=DriverManager.getConnection(url, user, password);
21 System.out.println("数据库连接成功！");
22 }catch(Exception e) {
23 e.printStackTrace();
24 }
25 return conn;
26 }
27
28 /**
29 * 关闭数据库
30 */
31 public static void close(Connection conn,PreparedStatement pstm) {
32
33 System.out.println("关闭SQL(conn,pstm)");
34 if(pstm!=null) {
35 try {
36 pstm.close();
37 }catch(SQLException e) {
38 e.printStackTrace();
39 }
40 }
41
42 if(conn!=null) {
43 try {
44 conn.close();
45 }catch(SQLException e) {
46 e.printStackTrace();
47 }
48 }
49
50 }
51
52 public static void close(Connection conn,PreparedStatement pstm,ResultSet rs) {
53
54 System.out.println("关闭SQL(conn,pstm,rs)");
55 if(pstm!=null) {
56 try {
57 pstm.close();
58 }catch(SQLException e) {
59 e.printStackTrace();
60 }
61 }
62
63 if(conn!=null) {
64 try {
65 conn.close();
66 }catch(SQLException e) {
67 e.printStackTrace();
68 }
69 }
70
71 if(rs!=null) {
72 try {
73 rs.close();
74 }catch(SQLException e) {
75 e.printStackTrace();
76 }
77 }
78
79 }
80
81 public static void main(String[] args) {
82 getConnection();
83 }
84 }
LoginServlet.java
1 import java.io.IOException;
2 import javax.servlet.ServletException;
3 import javax.servlet.annotation.WebServlet;
4 import javax.servlet.http.HttpServlet;
5 import javax.servlet.http.HttpServletRequest;
6 import javax.servlet.http.HttpServletResponse;
7 import javax.servlet.http.HttpSession;
8
9 import dao.LoginDao;
10 import util.Admin;
11 import util.Student;
12 import util.Teacher;
13
14
15 /**
16 * Servlet implementation class LoginServlet
17 */
18 @WebServlet("/LoginServlet")
19 public class LoginServlet extends HttpServlet {
20 private static final long serialVersionUID = 1L;
21
22 /**
23 * @see HttpServlet#HttpServlet()
24 */
25 public LoginServlet() {
26 super();
27 // TODO Auto-generated constructor stub
28 }
29
30 LoginDao loginDao = new LoginDao();
31
32 /**
33 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
34 */
35 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
36 // TODO Auto-generated method stub
37 //response.getWriter().append("Served at: ").append(request.getContextPath());
38 doPost(request,response);
39 }
40
41 /**
42 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
43 */
44 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
45 // TODO Auto-generated method stub
46 //doGet(request, response);
47 request.setCharacterEncoding("utf-8");
48 response.setCharacterEncoding("utf-8");
49 System.out.println("进入LoginServlet");
50 String username=request.getParameter("username");
51 String password=request.getParameter("password");
52 String entity=request.getParameter("entity");
53 System.out.println(username+"的密码是:"+password+",身份是:"+entity);
54
55 //使用request对象的getSession()获取session，如果session不存在则创建一个
56 HttpSession session = request.getSession();
57 //将数据存储到session中
58 session.setAttribute("username", username);
59 //将数据取出
60 String name=(String)session.getAttribute("username");
61 //输出数据
62 System.out.println("session name;"+name);
63
64 if(entity.equals("管理员")) {
65 Admin admin=new Admin();
66 admin=loginDao.LoginAdmin(username, password);
67 System.out.println("验证成功");
68 System.out.println(admin.getName()+":"+admin.getPassword());
69 request.getRequestDispatcher("Admin.jsp").forward(request,response);
70 }else {
71 System.out.println("entity Error!");
72 request.getRequestDispatcher("Login.jsp").forward(request,response);
73 }
74 }
75 }
LoginDao.java
1 import java.sql.Connection;
2 import java.sql.PreparedStatement;
3 import java.sql.ResultSet;
4
5 import db.DBUtil;
6 import util.Admin;
7 import util.Student;
8 import util.Teacher;
9
10 public class LoginDao {
11 public Admin LoginAdmin(String name,String password) {
12 Connection conn=null;
13 PreparedStatement pstm=null;
14 ResultSet rs=null;
15 try {
16 conn=DBUtil.getConnection();
17 String sql="select * from s_admin where name=? and password=?";//其中s_admin为数据库的表名
18 System.out.println(sql);
19 pstm=conn.prepareStatement(sql);
20 pstm.setString(1, name);
21 pstm.setString(2, password);
22 rs=pstm.executeQuery();
23 Admin admin=new Admin();
24 while(rs.next()) {
25 admin.setName(rs.getString("name"));
26 admin.setPassword(rs.getString("password"));
27 System.out.println("Admin-Name:"+admin.getName());
28 System.out.println("Admin-Password:"+admin.getPassword());
29 return admin;
30 }
31 }catch(Exception e) {
32 e.printStackTrace();
33 }finally {
34 //SQL执行完成后释放相关资源
35 DBUtil.close(conn,pstm,rs);
36 }
37 return null;
38 }
39 }
其中所需要的Layui包、style包及mysql包均可在网上下