简单的利⽤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="apps.bdimg/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" >
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" >
43 <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
44 <a href="forget.html" class="layadmin-user-jump-change layadmin-link" >忘记密码？</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 der();
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" >
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">htmlradio的text出不来
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=(Attribute("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 ></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
1public class Admin {
2
3private String name;
4private String password;
5public String getName() {
6return name;
7 }
8public void setName(String name) {
9this.name = name;
10 }
11public String getPassword() {
12return password;
13 }
14public void setPassword(String password) {
15this.password = password;
16 }
17
18 }
DBUtil.java
1import java.sql.Connection;
2import java.sql.DriverManager;
3import java.sql.PreparedStatement;
4import java.sql.ResultSet;
5import java.sql.SQLException;
6
7public class DBUtil {
8public static final String url="jdbc:mysql://localhost:3306/manager";//URL,manager为新建的数据库名 9public static final String user="⽤户名";//⽤户名
10public static final String password="密码";//密码
11
12/**
13 * 连接数据库
14 * @return
15*/
16public static Connection getConnection(){
17 Connection conn=null;
18try {
19 Class.forName("sql.jdbc.Driver");//加载数据库驱动
20 Connection(url, user, password);
21 System.out.println("数据库连接成功！");
22 }catch(Exception e) {
23 e.printStackTrace();
24 }
25return conn;
26 }
27
28/**
29 * 关闭数据库
30*/
31public static void close(Connection conn,PreparedStatement pstm) {
32
33 System.out.println("关闭SQL(conn,pstm)");
34if(pstm!=null) {
35try {
36 pstm.close();
37 }catch(SQLException e) {
38 e.printStackTrace();
39 }
40 }
41
42if(conn!=null) {
43try {
44 conn.close();
45 }catch(SQLException e) {
46 e.printStackTrace();
47 }
48 }
49
50 }
51
52public static void close(Connection conn,PreparedStatement pstm,ResultSet rs) {
53
54 System.out.println("关闭SQL(conn,pstm,rs)");
55if(pstm!=null) {
56try {
57 pstm.close();
58 }catch(SQLException e) {
59 e.printStackTrace();
60 }
61 }
62
63if(conn!=null) {
64try {
65 conn.close();
66 }catch(SQLException e) {
67 e.printStackTrace();
68 }
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论