简单的利用Layui来实现登录功能
“管理子系统”效果如下：
主页：
管理员功能页：
注册界面（此界面仅是一个界面，暂无功能的实现）
今天只写了这些效果，具体代码情况如下：
前端目录结构如下：
代码如下：
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包均可在网上下载
