[JavaWeb] Implémentez la connexion basée sur les expressions JSP et EL, et utilisez des filtres et des écouteurs

---

Aperçu des missions

Nous avons implémenté la fonction de connexion de l'utilisateur plus tôt. À cette époque, nous demandions à l'utilisateur d'accéder à la page success.html après une connexion réussie
[Article de blog associé : HTML, Servlet, JDBC implémentent la connexion à la page]

Nous devons maintenant répéter les exigences :
1. Une fois que l'utilisateur s'est connecté avec succès, il doit accéder à la page success.jsp. Cette page affiche le nom de l'utilisateur après une connexion réussie. Le format est : Bienvenue, XXX, Sortie
2. Lorsque l'utilisateur clique sur le bouton Quitter, effacez la session et revenez à la page de connexion

Après avoir implémenté la fonction ci-dessus, vous devez ajouter un filtre et un écouteur :
Filtre : Après avoir terminé la fonction ci-dessus, le projet peut accéder directement à success.jsp, que l'utilisateur se connecte avec succès ou non, utilisez donc le filtre pour que les utilisateurs ne puissent que accès réussi après la connexion.
Écouteur de page .jsp : surveille les modifications de la session. Si la session stocke les informations utilisateur dans la session à chaque fois, l'écouteur est appelé pour surveiller les modifications des données de session.

---

exigence spécifique

Écrire l'interface de connexion et effectuer la vérification du formulaire

Implémenter l'envoi de données du client au serveur

Utilisez la base de données via le code Java pour déterminer si le nom d'utilisateur et le mot de passe sont corrects

Créer des filtres et des auditeurs

---

Impliquant des points de connaissances

1. Langage SQL et opérations de base

2. JDBC (Connexion à la base de données Java)

3. Utilisation de classes d'outils personnalisées et de fichiers de configuration de propriétés

4. Pool de connexions JDBC

5. Principe de fonctionnement et cycle de vie du servlet

6. Demande et réponse du servlet

7. Connaissance de base de JSP

---

Processus de tâche

1. Créez une base de données et enregistrez le nom d'utilisateur et le mot de passe

2. Créez une page de connexion qui demande aux utilisateurs de saisir leur nom d'utilisateur et leur mot de passe

3. Recevez le nom d'utilisateur et le mot de passe soumis par l'utilisateur et transférez les données vers la base de données pour vérification après les avoir reçus.

4. Selon les résultats de la vérification, accédez à différentes pages de résultats (passez avec succès à success.html, échec
   passez à false.html)

5. Implémenter le filtrage des fichiers

6. Mettre en œuvre la surveillance des sessions

---

Idées et mise en œuvre du code

1. Boîte à outils

Créez un package utils, créez une nouvelle classe DBUtils et créez un nouveau fichier de configuration db.properties

fichier de configuration des propriétés

Utilisez ResourceBundle pour accéder aux ressources locales et lire les valeurs dont nous avons besoin

driver=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=GMT
username=root
password=123456

DBUtils.java

La classe d'outils JDBC encapsule les méthodes d'exploitation de SQL, les méthodes statiques sont donc recommandées.

• Définitions des variables

	//定义需要的工具类对象（变量定义）
    protected static Connection connection = null;
    protected static PreparedStatement pps = null;//后续都是用预状态通道来实现
    protected static ResultSet rs = null;//结果集
    protected static int count = 0;//受影响的行数
    //登录的用户名和密码
    private static String username;
    private static String password;
    private static String url;
    private static String driverName;
    //Druid连接池
    private static DruidDataSource druidDataSource = new DruidDataSource();

• Charger le pilote

	//加载驱动
    static {
    
    
        //Druid
        ResourceBundle bundle = ResourceBundle.getBundle("db");//参数只写属性文件名，不需要写后缀
        //加载属性文件
        driverName = bundle.getString("driver");
        url = bundle.getString("url");
        username = bundle.getString("username");
        password = bundle.getString("password");

        druidDataSource.setUsername(username);
        druidDataSource.setPassword(password);
        druidDataSource.setUrl(url);
        druidDataSource.setDriverClassName(driverName);
    }

• obtenir le lien

    protected static Connection getConnection() {
    
    
        try {
    
    
            connection = druidDataSource.getConnection();
        } catch (SQLException e) {
    
    
            e.printStackTrace();
        }
        return connection;
    }

• Obtenez le canal pré-état et les paramètres de liaison

	//得到预状态通道
    protected static PreparedStatement getPps(String sql) {
    
    
        try {
    
    
            getConnection();
            pps = connection.prepareStatement(sql);
        } catch (SQLException e) {
    
    
            e.printStackTrace();
        }
        return pps;
    }
    
    //绑定参数，给占位符赋值，list中保存的是给占位符所赋的值
    private static void setParams(List list) {
    
    
        try {
    
    
            if (list != null && list.size() > 0) {
    
    //集合中有内容
                for (int i = 0; i < list.size(); i++) {
    
    
                    pps.setObject(i + 1, list.get(i));//赋值，位置从1开始所以为i+1
                }
            }
        } catch (SQLException e) {
    
    
            e.printStackTrace();
        }
    }

• ajout, suppression, modification

    protected static int update(String sql, List list) {
    
    
        try {
    
    
            getPps(sql);//得到预状态通道
            setParams(list);//绑定参数
            count = pps.executeUpdate();//pps.executeUpdate()执行sql语句，返回受影响的行数
        } catch (SQLException e) {
    
    
            e.printStackTrace();
        }
        return count;//返回受影响的行数
    }

• requête de données

	protected static ResultSet query(String sql, List list) {
    
    
        try {
    
    
            getPps(sql);//得到预状态通道
            setParams(list);//绑定参数
            rs = pps.executeQuery();//pps.executeUpdate()执行sql语句，返回结果集
            return rs;//返回结果集
        } catch (SQLException e) {
    
    
            e.printStackTrace();
        }
        return null;
    }

• Fermer la ressource

    protected static void closeAll() {
    
    
        try {
    
    
            if (rs != null) {
    
    
                rs.close();
            }
            if (pps != null) {
    
    
                pps.close();
            }
            if (connection != null) {
    
    
                connection.close();
            }
        } catch (SQLException e) {
    
    
            e.printStackTrace();
        }
    }

---

2. Créer une base de données

Créez une démo de base de données, créez l'utilisateur de la table et enregistrez le nom d'utilisateur et le mot de passe

---

3. Objet

Créez un package pojo et créez un nouvel utilisateur de classe

L'utilisateur de la table de données correspondant à la classe User, doncNom de l'attribut de classe = nom du champ de la table

Utilisateur.java

• Définir les propriétés et définir et obtenir des valeurs avec des setters et des getters

    private String username;
    private String userpassword;
    
    public String getUsername() {
    
    
        return username;
    }

    public void setUsername(String username) {
    
    
        this.username = username;
    }

    public String getUserpassword() {
    
    
        return userpassword;
    }

    public void setUserpassword(String userpassword) {
    
    
        this.userpassword = userpassword;
    }

• Définir des constructeurs sans paramètre et avec paramètres complets

    public User() {
    
    
    }

    public User(String username, String userpassword) {
    
    
        this.username = username;
        this.userpassword = userpassword;
    }

• remplacer la méthode toString()

    @Override
    public String toString() {
    
    
        return "User{" +
                "username='" + username + '\'' +
                ", userpassword='" + userpassword + '\'' +
                '}';
    }

---

4. Créez une page de connexion

Connexion.jsp

Demander à l'utilisateur de saisir son nom d'utilisateur et son mot de passe

• La page du navigateur affiche principalement

<body>
	<section>
	    <div class="box">
	        <div class="color"></div>
	        <div class="color"></div>
	        <div class="color"></div>
	        <div class="color"></div>
	        <div class="container">
	            <div class="form">
	                <h2>用户登录</h2><br />
	                <!--        <form action="test" method="post">  -->
	                <form id="myForm" class="form-horizontal" role="form" action="/login" method="post">
	                    <div>
	                        <input id="username" class="inputStyle" name="username" type="text" placeholder="用户名" onblur="validateName()"/>
	                    </div>
	                    <span id="nameMsg"></span>
	                    <div>
	                        <input id="password" class="inputStyle" name="userpassword" type="password" placeholder="密码" onblur="validatePassword()"/>
	                    </div>
	                    <span id="passwordMsg"></span>
	                    <div>
	                        <input class="buttomStyle" type="submit" value="登录" />
	                    </div>
	                </form>
	            </div>
	        </div>
	    </div>
	</section>
</body>

• validation du formulaire

    <script>
        function validateName(){
      
      
            var name = document.getElementById("username").value;
            var msg = document.getElementById("nameMsg");
            var reg = /^[\u4E00-\u9FA5]{2,4}$/;
            var res = reg.test(name);
            if(name == null || name == ""){
      
      
                msg.innerHTML = "用户名不能为空";
                msg.style.color = "red";
                return false;
            }else if(res == false){
      
      
                msg.innerHTML = "用户名格式错误";
                msg.style.color = "red";
                return false;
            }
            return true;
        }
        function validatePassword(){
      
      
            var name = document.getElementById("password").value;
            var msg = document.getElementById("passwordMsg");
            if(name == null || name == ""){
      
      
                msg.innerHTML = "密码不能为空";
                msg.style.color = "red";
                return false;
            }
            return true;
        }
    </script>

• Utiliser des styles externes

    <link rel="stylesheet" href="MyCSS.css">

---

MonCSSss.css

article de référence sur les styles CSS

• Emplacement général de l'interface de connexion

/**
 * 显示水平居中
 */
section {
    
    
    position: relative;
    overflow: hidden;
    display: flex;   /*垂直居中对齐*/
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}

.box {
    
    
    position: relative;
}

• Couleur de l'arrière plan

/* 背景颜色 */
.color {
    
    
    /* 绝对定位 */
    position: absolute;
    /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
    filter: blur(200px);
}

/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */
.color:nth-child(1) {
    
    
    top: -350px;
    width: 600px;
    height: 600px;
    background:#FFC0CB;
}

.color:nth-child(2) {
    
    
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: #FFFFE0;
}

.color:nth-child(3) {
    
    
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background:#DDA0DD;
}
.color:nth-child(4) {
    
    
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background:#FFFFFF;
}

• Style de boîte de connexion

/* 登录框样式 */
.container {
    
    
    position: relative;
    width: 400px;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

• Style de zone de saisie

/* 输入框样式 */
.inputStyle{
    
    
    width: 100%;
    padding: 10px 20px;
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    border: none;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 16px;
    letter-spacing: 1px;
    color: #000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

• Style du bouton de connexion

/* 登录按钮样式 */
.buttomStyle{
    
    
    width: 100%;
    padding: 10px 20px;
    max-width: 100px;
    margin-top: 30px;
    margin-left: 10px;
    margin-bottom: 20px;
    border-radius: 30px;
    font-size: 16px;
    letter-spacing: 1px;
    background: #fff;
    color: #666;
    font-weight: 600;
    cursor: pointer;
}

---

5. Connexion Internet

Recevoir les données client LoginServlet .java

Créez un package Web, créez une nouvelle classe LoginServlet, héritez de HttpServlet et recevez le nom d'utilisateur et le mot de passe saisis par le client.

• remplacer la méthode doGet

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        doPost(req, resp);//当method为get时，依旧执行doPost
    }

• remplacer la méthode doPost reçoit des données

	 @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
    
	    req.setCharacterEncoding("utf-8");
        //取值
        String username = req.getParameter("username");
        System.out.println("用户输入的用户名："+username);
        String userpassword = req.getParameter("userpassword");
        System.out.println("用户输入的密码："+userpassword);
        if(dao.checkLogin(username,userpassword)){
    
    
            System.out.println("登陆成功");
            resp.sendRedirect("/Success.html");
            //req.getRequestDispatcher("/Success.html").forward(req,resp);
        }else{
    
    
            System.out.println("登录失败");
            resp.sendRedirect("/Fail.html");
            //req.getRequestDispatcher("/fail.html").forward(req,resp);
        }
    }

---

Revenez à l'interface de connexion après avoir quitté LogoutServlet.java

• La méthode override doPost gère la suppression des données et le passage à la page

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        super.doPost(req, resp);
        req.getSession().invalidate();
        Enumeration em = req.getSession().getAttributeNames();
        while(em.hasMoreElements()){
    
    
            req.getSession().removeAttribute(em.nextElement().toString());
        }
//        //req.getRequestDispatcher("index.jsp").forward(req,resp);
        resp.sendRedirect("/login.jsp");//login.jsp
    }

---

6. Traitement des données

Module principalement responsable du traitement des données

Créez un package dao, créez une nouvelle classe Dao, héritez de la classe DBUtils et utilisez JDBC pour effectuer les opérations de base de données correspondantes

Dao.java

    public static User login(String username, String password){
    
    
        System.out.println("进入check in");
        String sql = "select* from user where username = ? and userpassword = ?";
        ArrayList param = new ArrayList();
        param.add(username);
        param.add(password);
        ResultSet query = query(sql, param);
        try {
    
    
            if(!query.next()){
    
    
                System.out.println("dao:false");
                return null;
            }else{
    
    
                User user = new User();
                user.setUsername(query.getString("username"));
                user.setUserpassword(query.getString("userpassword"));

                System.out.println("dao:true");
                return user;
            }
        } catch (SQLException throwables) {
    
    
            System.out.println(throwables.getMessage());
            return null;
        }finally {
    
    
            closeAll();
        }
    }

---

7. Page de résultats de connexion

Succès.jsp

<%--
  Created by IntelliJ IDEA.
  User: ss
  Date: 2021/9/26
  Time: 19:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>登陆成功</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="MyCSS.css">
</head>
<body>
	<section>
	    <div class="box">
	        <div class="color"></div>
	        <div class="color"></div>
	        <div class="color"></div>
	        <div class="color"></div>
	        <div class="container">
	            <div>
	                <h2 style="color:#8B008B">欢迎登录！</h2>
	                <div  style="margin-top: 50px ;margin-left: 90px" >
	                    <a href="/logOut">点击退出登录</a>
	                </div>
	            </div>
	            <div class="progress progress-striped active">
	                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40"
	                     aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	                </div>
	            </div>
	        </div>
	    </div>
	</section>
</body>
</html>

---

Échec.jsp

<html>
<head>
    <title>登录失败</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="MyCSS.css">
    <script>
        //基本弹框
        alert("用户名或密码错误，登录失败！");
    </script>
</head>
<body>
	<section>
	    <div class="box">
	        <div class="color"></div>
	        <div class="color"></div>
	        <div class="color"></div>
	        <div class="color"></div>
	        <div class="container">
	            <div>
	                <a href="/logOut">点击重新登录</a>
	            </div>
	            <div class="progress progress-striped active">
	                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40"
	                     aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	                </div>
	            </div>
	        </div>
	    </div>
	</section>
</body>
</html>

---

8. Filtrer

Créez une nouvelle classe LoginFilter dans util et héritez de la classe Filter

ConnexionFilter.java

• Implémenter des filtres d'initialisation dans init en remplacement

    public void init(FilterConfig filterConfig) throws ServletException {
    
    
        System.out.println("init Filter");
    }

• Implémentez la méthode de filtrage dans doFilter en remplacement

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    
    
        //判断请求是否是 可以放过的某一个请求，或者在session中已经保存了登录状态的数据
        //Login.jsp ，login请求 ，fail页面，session中持有了数据（在登陆成功的状态下存进去的）
        HttpServletRequest req = (HttpServletRequest)servletRequest;
        HttpServletResponse resp = (HttpServletResponse)servletResponse;
        if(ignore(req) || req.getSession().getAttribute("username") != null){
    
    
            filterChain.doFilter(req,resp);
        }else {
    
    //跳转 重定向到登录页面
            resp.sendRedirect("/login.jsp");//login.jsp
        }
    }

    private boolean ignore(HttpServletRequest req){
    
    
        String[] uris = {
    
    "login","login.jsp","fail.jsp","MyCSS.css","css","js"};
        for (String u:uris) {
    
    
            if(req.getRequestURI().endsWith(u)){
    
    
                return true;
            }
        }
        return false;
    }

• Implémenter le filtre de destruction lors de la destruction en remplacement

    @Override
    public void destroy() {
    
    
        System.out.println("destroy Filter");
    }

9. Surveiller

Créez une nouvelle classe MySessionListener dans util et héritez de la classe HttpSessionListener

MySessionListener.java

• Créer une session dans la sessionCréé en remplacement

    @Override
    public void sessionCreated(HttpSessionEvent httpSessionEvent) {
    
    
        System.out.println("session created!");
        httpSessionEvent.getSession().setMaxInactiveInterval(5);
    }

• SessionDestroyed en remplacement détruit la session

    @Override
    public void sessionDestroyed(HttpSessionEvent httpSessionEvent) {
    
    
        System.out.println("session distroyed");
    }

---

Le code complet est le suivant

1. Boîte à outils

fichier de configuration des propriétés

driver=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=GMT
username=root
password=123456

DBUtils.java

public class DBUtils {
    
    
    //1.定义需要的工具类对象（变量定义）
    protected static Connection connection = null;
    protected static PreparedStatement pps = null;//后续都是用预状态通道来实现
    protected static ResultSet rs = null;//结果集
    protected static int count = 0;//受影响的行数

    //登录的用户名和密码
    private static String username;
    private static String password;
    private static String url;
    private static String driverName;
    //Druid
    private static DruidDataSource druidDataSource = new DruidDataSource();

    //2.加载驱动
    static {
    
    
        //Druid
        ResourceBundle bundle = ResourceBundle.getBundle("db");//参数只写属性文件名，不需要写后缀
        //加载属性文件
        driverName = bundle.getString("driver");
        url = bundle.getString("url");
        username = bundle.getString("username");
        password = bundle.getString("password");

        druidDataSource.setUsername(username);
        druidDataSource.setPassword(password);
        druidDataSource.setUrl(url);
        druidDataSource.setDriverClassName(driverName);

    }


    //3.获得连接
    protected static Connection getConnection() {
    
    
        try {
    
    
            connection = druidDataSource.getConnection();
        } catch (SQLException e) {
    
    
            e.printStackTrace();
        }
        return connection;
    }


    //4.得到预状态通道
    protected static PreparedStatement getPps(String sql) {
    
    
        try {
    
    
            getConnection();//insert into users values(?,?,?,?,)
            pps = connection.prepareStatement(sql);
        } catch (SQLException e) {
    
    
            e.printStackTrace();
        }
        return pps;
    }


    //5.绑定参数，给占位符赋值，list中保存的是给占位符所赋的值
    private static void setParams(List list) {
    
    
        try {
    
    
            if (list != null && list.size() > 0) {
    
    //集合中有内容
                for (int i = 0; i < list.size(); i++) {
    
    
                    pps.setObject(i + 1, list.get(i));//赋值，位置从1开始所以为i+1
                }
            }
        } catch (SQLException e) {
    
    
            e.printStackTrace();
        }
    }


    //6.增删改
    protected static int update(String sql, List list) {
    
    
        try {
    
    
            getPps(sql);//得到预状态通道
            setParams(list);//绑定参数
            count = pps.executeUpdate();//pps.executeUpdate()执行sql语句，返回受影响的行数
        } catch (SQLException e) {
    
    
            e.printStackTrace();
        }
        return count;//返回受影响的行数
    }


    //7.查询
    protected static ResultSet query(String sql, List list) {
    
    
        try {
    
    
            getPps(sql);//得到预状态通道
            setParams(list);//绑定参数
            rs = pps.executeQuery();//pps.executeUpdate()执行sql语句，返回结果集
            return rs;//返回结果集
        } catch (SQLException e) {
    
    
            e.printStackTrace();
        }
        return null;
    }


    //8.关闭资源
    protected static void closeAll() {
    
    
        try {
    
    
            if (rs != null) {
    
    
                rs.close();
            }
            if (pps != null) {
    
    
                pps.close();
            }
            if (connection != null) {
    
    
                connection.close();
            }
        } catch (SQLException e) {
    
    
            e.printStackTrace();
        }
    }


}

---

2. Objet

Utilisateur.java

public class User {
    
    
    private String username;
    private String userpassword;

    public User() {
    
    
    }

    public User(String username, String userpassword) {
    
    
        this.username = username;
        this.userpassword = userpassword;
    }

    public String getUsername() {
    
    
        return username;
    }

    public void setUsername(String username) {
    
    
        this.username = username;
    }

    public String getUserpassword() {
    
    
        return userpassword;
    }

    public void setUserpassword(String userpassword) {
    
    
        this.userpassword = userpassword;
    }

    @Override
    public String toString() {
    
    
        return "User{" +
                "username='" + username + '\'' +
                ", userpassword='" + userpassword + '\'' +
                '}';
    }
}

---

3. Créez une page de connexion

Connexion.jsp

<%--
  Created by IntelliJ IDEA.
  User: ss
  Date: 2021/9/27
  Time: 20:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
    <link rel="stylesheet" href="MyCSS.css">
    <script>
        function validateName(){
      
      
            var name = document.getElementById("username").value;
            var msg = document.getElementById("nameMsg");
            var reg = /^[\u4E00-\u9FA5]{2,4}$/;
            var res = reg.test(name);
            if(name == null || name == ""){
      
      
                msg.innerHTML = "用户名不能为空";
                msg.style.color = "red";
                return false;
            }else if(res == false){
      
      
                msg.innerHTML = "用户名格式错误";
                msg.style.color = "red";
                return false;
            }
            return true;
        }
        function validatePassword(){
      
      
            var name = document.getElementById("password").value;
            var msg = document.getElementById("passwordMsg");
            if(name == null || name == ""){
      
      
                msg.innerHTML = "密码不能为空";
                msg.style.color = "red";
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
	<section>
	    <div class="box">
	        <div class="color"></div>
	        <div class="color"></div>
	        <div class="color"></div>
	        <div class="color"></div>
	        <div class="container">
	            <div class="form">
	                <h2>用户登录</h2><br />
	                <!--        <form action="test" method="post">  -->
	                <form id="myForm" class="form-horizontal" role="form" action="/login" method="post">
	                    <div>
	                        <input id="username" class="inputStyle" name="username" type="text" placeholder="用户名" onblur="validateName()"/>
	                    </div>
	                    <span id="nameMsg"></span>
	                    <div>
	                        <input id="password" class="inputStyle" name="userpassword" type="password" placeholder="密码" onblur="validatePassword()"/>
	                    </div>
	                    <span id="passwordMsg"></span>
	                    <div>
	                        <input class="buttomStyle" type="submit" value="登录" />
	                    </div>
	                </form>
	            </div>
	        </div>
	    </div>
	</section>
</body>
</html>

MonCss.css

/**
 * 显示水平居中
 */
section {
    
    
    position: relative;
    overflow: hidden;
    display: flex;   /*垂直居中对齐*/
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}

/* 背景颜色 */

.color {
    
    
    /* 绝对定位 */
    position: absolute;
    /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
    filter: blur(200px);
}

/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */

.color:nth-child(1) {
    
    
    top: -350px;
    width: 600px;
    height: 600px;
    background:#FFC0CB;
}

.color:nth-child(2) {
    
    
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: #FFFFE0;
}

.color:nth-child(3) {
    
    
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background:#DDA0DD;
}
.color:nth-child(4) {
    
    
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background:#FFFFFF;
}
.box {
    
    
    position: relative;
}

/* 登录框样式 */
.container {
    
    
    position: relative;
    width: 400px;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}



/* 输入框样式 */
.inputStyle{
    
    
    width: 100%;
    padding: 10px 20px;
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    border: none;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 16px;
    letter-spacing: 1px;
    color: #000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* 登录按钮样式 */
.buttomStyle{
    
    
    width: 100%;
    padding: 10px 20px;
    max-width: 100px;
    margin-top: 30px;
    margin-left: 10px;
    margin-bottom: 20px;
    border-radius: 30px;
    font-size: 16px;
    letter-spacing: 1px;
    background: #fff;
    color: #666;
    font-weight: 600;
    cursor: pointer;
}

---

4. Connexion Web

Recevoir les données client LoginServlet .java

@WebServlet("/login")//前端action与此对应
public class LoginServlet extends HttpServlet {
    
    
    Dao dao = new Dao();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    

        req.setCharacterEncoding("utf-8");
        //取值
        String username = req.getParameter("username");
        System.out.println("用户输入的用户名："+username);
        String userpassword = req.getParameter("userpassword");
        System.out.println("用户输入的密码："+userpassword);

        User user = dao.login(username,userpassword);
        if( user != null){
    
    
            System.out.println("登陆成功");
            req.getSession().setAttribute("user",user);//登陆成功，session就有了一个凭证
            req.getRequestDispatcher("/success.jsp").forward(req,resp);
        }else{
    
    
            System.out.println("登录失败");
            resp.sendRedirect("/fail.jsp");
            //req.getRequestDispatcher("/fail.html").forward(req,resp);
        }
    }
}

Revenez à l'interface de connexion après avoir quitté LogoutServlet.java

@WebServlet("/logOut")
public class LogoutServlet extends HttpServlet {
    
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        super.doGet(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        super.doPost(req, resp);
        req.getSession().invalidate();
        Enumeration em = req.getSession().getAttributeNames();
        while(em.hasMoreElements()){
    
    
            req.getSession().removeAttribute(em.nextElement().toString());
        }
//        //req.getRequestDispatcher("index.jsp").forward(req,resp);
        resp.sendRedirect("/login.jsp");//login.jsp
    }
}

---

5. Traitement des données

Dao.java

public class Dao extends DBUtil {
    
    
    public static User login(String username, String password){
    
    
        System.out.println("进入check in");
        String sql = "select* from user where username = ? and userpassword = ?";
        ArrayList param = new ArrayList();
        param.add(username);
        param.add(password);
        ResultSet query = query(sql, param);
        try {
    
    
            if(!query.next()){
    
    
                System.out.println("dao:false");
                return null;
            }else{
    
    
                User user = new User();
                user.setUsername(query.getString("username"));
                user.setUserpassword(query.getString("userpassword"));

                System.out.println("dao:true");
                return user;
            }
        } catch (SQLException throwables) {
    
    
            System.out.println(throwables.getMessage());
            return null;
        }finally {
    
    
            closeAll();
        }
    }
}

---

6. Page de résultats de connexion

Succès.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>登陆成功</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="MyCSS.css">
</head>
<body>
<section>
    <div class="box">
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <div class="container">
            <div>
                <h2 style="color:#8B008B">欢迎登录！</h2>
                <div  style="margin-top: 50px ;margin-left: 90px" >
                    <a href="/logOut">点击退出登录</a>
                </div>

            </div>
            <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40"
                     aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                </div>
            </div>
        </div>
    </div>
</section>
</body>
</html>

Échec.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>登录失败</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="MyCSS.css">
    <script>
        //基本弹框
        alert("用户名或密码错误，登录失败！");
    </script>
</head>
<body>
<section>
    <div class="box">
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <div class="container">
            <div>
                <a href="/logOut">点击重新登录</a>
            </div>
            <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40"
                     aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                </div>
            </div>
        </div>
    </div>
</section>
</body>
</html>

---

7. Filtrer

ConnexionFilter.java

/**
 * 注册
 */
@WebFilter("*")
public class LoginFilter implements Filter {
    
    

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    
    
        System.out.println("init Filter");
    }

    /**
     * 实现过滤的方法
     * @param servletRequest
     * @param servletResponse
     * @param filterChain
     * @throws IOException
     * @throws ServletException
     */
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    
    
        //判断请求是否是 可以放过的某一个请求，或者在session中已经保存了登录状态的数据
        //Login.jsp ，login请求 ，fail页面，session中持有了数据（在登陆成功的状态下存进去的）
        HttpServletRequest req = (HttpServletRequest)servletRequest;
        HttpServletResponse resp = (HttpServletResponse)servletResponse;
        if(ignore(req) || req.getSession().getAttribute("username") != null){
    
    
            filterChain.doFilter(req,resp);
        }else {
    
    //跳转 重定向到登录页面
            resp.sendRedirect("/login.jsp");//login.jsp
        }
    }

    private boolean ignore(HttpServletRequest req){
    
    
        String[] uris = {
    
    "login","login.jsp","fail.jsp","MyCSS.css","css","js"};
        for (String u:uris) {
    
    
            if(req.getRequestURI().endsWith(u)){
    
    
                return true;
            }
        }
        return false;
    }

    @Override
    public void destroy() {
    
    
        System.out.println("destroy Filter");
    }
}

---

8. Surveiller

MySessionListener.java

public class MySessionListener implements HttpSessionListener {
    
    
    @Override
    public void sessionCreated(HttpSessionEvent httpSessionEvent) {
    
    
        System.out.println("session created!");
        httpSessionEvent.getSession().setMaxInactiveInterval(5);
    }

    @Override
    public void sessionDestroyed(HttpSessionEvent httpSessionEvent) {
    
    
        System.out.println("session distroyed");
    }
}