簡單的利用Layui來實現登錄功能

本文轉載自查看原文 2021-04-12 20:46 673

“管理子系統”效果如下：

主頁：

管理員功能頁：

注冊界面（此界面僅是一個界面，暫無功能的實現）

今天只寫了這些效果，具體代碼情況如下：

前端目錄結構如下：

代碼如下：

 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包均可在網上下載

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 登錄注冊功能的簡單實現 layui 簡單登錄頁面 AppCan學習筆記----Request和登錄功能簡單實現 react+antd+springmvc 實現簡單的登錄功能 vue+springboot+mybatis 實現簡單的登錄功能 layui實現數據分頁功能 SpringBoot + Layui + JustAuth +Mybatis-plus實現可第三方登錄的簡單后台管理系統登錄功能實現一、Vue登錄功能的實現 php之登錄功能實現。