Java單體應用 - 常用框架 - 05.綜合實例(iot-admin)

原創 wx5e577d05bfe60 2020-03-21 13:38

原文地址：http://www.work100.net/training/monolithic-frameworks-example.html
更多教程：光束雲 - 免費課程

綜合實例

序號 文內章節 視頻
1 概述 -
2 創建項目 -
3 使用AdminLTE模板 -
4 創建登錄頁 -
5 登錄功能實現 -
6 提升用戶體驗 -
7 實例源碼 -

請參照如上章節導航進行閱讀

1.概述

本節將把「Java單體應用」課程做一個階段性的總結，通過一個綜合的案例將所學知識完整實踐一下。

我們後續階段的課程還有：

爲了後續課程的連續性，我們的 綜合實例 將搭建一個簡單的 IoT管理後臺 項目 iot-admin，實現用戶的登錄功能。

學習的過程要跟着練習並做好筆記！

2.創建項目

2.1.構建項目結構

創建項目文件夾

通過 IntelliJ IDEA 打開前述章節的項目結構，新增一個項目文件夾 iot-admin

創建 POM

添加一個 pom.xml 文件，文件內容如下:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>net.work100.training.stage2</groupId>
    <artifactId>iot-admin</artifactId>
    <version>1.0.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <dependencies>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>5.2.3.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
        </dependency>      
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-log4j12</artifactId>
            <version>1.7.25</version>
        </dependency>
    </dependencies>
</project>

然後將 pom.xml 託管到 Maven。

完善Maven結構

完善下表的目錄結構：

目錄或文件 說明
pom.xml POM文件
src/main/java 源碼文件夾
src/main/resources 資源文件夾
src/main/webapp 網站文件夾
src/main/webapp/WEB-INF 網站配置文件夾
src/main/webapp/WEB-INF/web.xml 網站配置文件
src/test/java 測試源碼文件夾

項目結構如下圖：

項目結構 - 光束雲 - work100.net

完善 src/main/webapp/WEB-INF/web.xml 文件，內容如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

</web-app>

完善項目架構

結合三層架構及MVC架構，在 src/main/java 下構建項目的類包結構，如下表：

類包 說明
net.work100.training.stage2.iot.admin 項目總的類包
net.work100.training.stage2.iot.admin.dao 數據訪問層
net.work100.training.stage2.iot.admin.service 服務層
net.work100.training.stage2.iot.admin.web Web層

項目結構如下圖：

項目結構 - 光束雲 - work100.net

配置 Spring 和 Log4j

在 src/main/resources 下添加 spring-context.xml 和 log4j.properties 文件：

spring-context.xml 代碼如下：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="
       http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">

</beans>

log4j.properties 代碼如下：

log4j.rootLogger=INFO, console, file

log4j.appender.console=org.apache.log4j.ConsoleAppender
log4j.appender.console.layout=org.apache.log4j.PatternLayout
log4j.appender.console.layout.ConversionPattern=%d %p [%c] - %m%n

log4j.appender.file=org.apache.log4j.DailyRollingFileAppender
log4j.appender.file.File=logs/log.log
log4j.appender.file.layout=org.apache.log4j.PatternLayout
log4j.appender.A3.MaxFileSize=1024KB
log4j.appender.A3.MaxBackupIndex=10
log4j.appender.file.layout.ConversionPattern=%d %p [%c] - %m%n

構建前端框架結構

參照 Bootstrap - 環境搭建 - 實例 中的步驟構建 Bootstrap 的目錄結構：

目錄 說明
src/main/webapp/assets/ 靜態資源文件目錄
src/main/webapp/assets/css/ 自定義樣式
src/main/webapp/assets/images/ 自定義圖片
src/main/webapp/assets/js/ 自定義JS
src/main/webapp/assets/plugins/ 插件
src/main/webapp/assets/plugins/bootstrap/ Bootstrap插件
src/main/webapp/assets/plugins/bootstrap/css/ Bootstrap 樣式表文件
src/main/webapp/assets/plugins/bootstrap/font-awesome/ 第三方字體
src/main/webapp/assets/plugins/bootstrap/js/ Bootstrap JS文件
src/main/webapp/assets/plugins/bootstrap/jquery-3.4.1.min.js jQuery

在 src/main/webapp 下新建 index.jsp 文件，代碼如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>IoT-Admin</title>
</head>
<body>
    Hello IoT-Admin
</body>
</html>

項目結構如下圖：

項目結構 - 光束雲 - work100.net

配置 Tomcat

參考 架構模式 - 實踐練習 中所述的 Tomcat 配置方式將運行環境配好，並運行驗證效果：

運行 - 光束雲 - work100.net

3.使用AdminLTE模板

3.1.下載 AdminLTE

AdminLTE 是一個基於 Bootstrap 的後端模板引擎，最新版本基於 Bootstrap 4 構建，高度可定製且易於使用，適合從小型移動設備到大型臺式機的多種屏幕分辨率。
官網地址爲 <https://adminlte.io/&gt; ，AdminLTE爲開源軟件，可以前往 <https://github.com/ColorlibHQ/AdminLTE&gt; 獲取源碼。

本實例將使用 AdminLTE-3.0.2 版本進行演示，源碼包已經上傳至QQ羣，請在 門戶首頁 下方加入QQ羣獲取。

AdminLTE 下載後解壓縮，文件夾結構如下：

AdminLTE 文件夾結構 - 光束雲 - work100.net

將目錄下的文件 index.html 用瀏覽器打開運行，效果如下：

AdminLTE Demo - 光束雲 - work100.net

請在使用 AdminLTE 框架前詳細瀏覽各頁面的展示效果，並參照 HTML 源碼瞭解 AdminLTE 的使用方法。

3.2.重構項目

因爲 AdminLTE-3.0.2 是基於 Bootstrap 4 構建的，所以接下來我們重構我們的項目。

首先，刪除項目中的如下目錄：

  • src/main/webapp/assets/plugins
  • src/main/webapp/assets/css
  • src/main/webapp/assets/images
  • src/main/webapp/assets/js

然後，將 AdminLTE-3.0.2 下的文件夾複製到項目中，對應位置爲：

AdminLTE-3.0.2 目錄 項目中目錄
AdminLTE-3.0.2/plugins src/main/webapp/assets/plugins
AdminLTE-3.0.2/dist/css src/main/webapp/assets/css
AdminLTE-3.0.2/dist/images src/main/webapp/assets/images
AdminLTE-3.0.2/dist/js src/main/webapp/assets/js

重構後的目錄結構爲：

重構後的目錄結構 - 光束雲 - work100.net

4.創建登錄頁

我們參照 AdminLTE-3.0.2/pages/examples/login.html 源碼示例構建一個 iot-amdin 項目的登錄頁。

重構 index.jsp 頁面，代碼如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>IoT-Admin</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="assets/plugins/fontawesome-free/css/all.min.css">
    <!-- icheck bootstrap -->
    <link rel="stylesheet" href="assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="assets/css/adminlte.min.css">
</head>
<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        IoT-Admin 登錄
    </div>
    <!-- /.login-logo -->
    <div class="card">
        <div class="card-body login-card-body">
            <p class="login-box-msg">請輸入ID和密碼登錄</p>

            <form action="/login" method="post">
                <div class="input-group mb-3">
                    <input name="loginId" type="text" class="form-control" placeholder="登錄ID">
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-user"></span>
                        </div>
                    </div>
                </div>
                <div class="input-group mb-3">
                    <input name="loginPwd" type="password" class="form-control" placeholder="登錄密碼">
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-lock"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-8">
                        <div class="icheck-primary">
                            <input type="checkbox" id="remember">
                            <label for="remember">
                                記住我
                            </label>
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-4">
                        <button type="submit" class="btn btn-primary btn-block">登錄</button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>
        </div>
        <!-- /.login-card-body -->
    </div>
</div>
<!-- /.login-box -->

<!-- jQuery -->
<script src="assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="assets/js/adminlte.min.js"></script>

</body>
</html>

運行 Tomcat ，啓動項目，效果如下：

啓動項目 - 光束雲 - work100.net

5.登錄功能實現

後端代碼實現和 架構模式 - 實踐練習 章節所述方式類似，我們將其實現代碼進行改造。

5.1.創建 User 類

在包 net.work100.training.stage2.iot.admin 下新建一個包 entity，然後在其下新增一個 User 類

User.java 文件代碼如下：

package net.work100.training.stage2.iot.admin.entity;

import java.io.Serializable;

/**
 * <p>Title: User</p>
 * <p>Description: </p>
 *
 * @author liuxiaojun
 * @date 2020-02-13 13:21
 * ------------------- History -------------------
 * <date>      <author>       <desc>
 * 2020-02-13   liuxiaojun     初始創建
 * -----------------------------------------------
 */
public class User implements Serializable {
    private String userName;
    private String loginId;
    private String loginPwd;

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getLoginId() {
        return loginId;
    }

    public void setLoginId(String loginId) {
        this.loginId = loginId;
    }

    public String getLoginPwd() {
        return loginPwd;
    }

    public void setLoginPwd(String loginPwd) {
        this.loginPwd = loginPwd;
    }

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

5.2.創建 UserDao 接口及其實現 UserDaoImpl

在包 net.work100.training.stage2.iot.admin.dao 下新建一個接口 UserDao

UserDao.java 文件代碼如下：

package net.work100.training.stage2.iot.admin.dao;

import net.work100.training.stage2.iot.admin.entity.User;

/**
 * <p>Title: UserDao</p>
 * <p>Description: </p>
 *
 * @author liuxiaojun
 * @date 2020-02-13 13:16
 * ------------------- History -------------------
 * <date>      <author>       <desc>
 * 2020-02-13   liuxiaojun     初始創建
 * -----------------------------------------------
 */
public interface UserDao {
    /**
     * 根據ID及密碼獲取用戶信息
     *
     * @param loginId  登錄ID
     * @param loginPwd 登錄密碼
     * @return
     */
    User getUser(String loginId, String loginPwd);
}

在包 net.work100.training.stage2.iot.admin.dao 下新增一個類包 impl，然後在 impl 包下新建一個類 UserDaoImpl

UserDaoImpl.java 文件代碼如下：

package net.work100.training.stage2.iot.admin.dao.impl;

import net.work100.training.stage2.iot.admin.dao.UserDao;
import net.work100.training.stage2.iot.admin.entity.User;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

/**
 * <p>Title: UserDaoImpl</p>
 * <p>Description: </p>
 *
 * @author liuxiaojun
 * @date 2020-02-13 13:23
 * ------------------- History -------------------
 * <date>      <author>       <desc>
 * 2020-02-13   liuxiaojun     初始創建
 * -----------------------------------------------
 */
public class UserDaoImpl implements UserDao {

    private static final Logger logger = LoggerFactory.getLogger(UserDaoImpl.class);

    public User getUser(String loginId, String loginPwd) {
        logger.debug("調用方法 getUser(loginId:{}, loginPwd:{})", loginId, loginPwd);

        // 根據 loginId 查詢出用戶信息
        User user = getUserByLoginId(loginId);
        if (user != null) {
            // 驗證 loginPwd 是否正確（區分大小寫）
            if (user.getLoginPwd().equals(loginPwd)) {
                return user;
            }
        }
        return null;
    }

    /**
     * 獲取模擬的用戶數據
     *
     * @param loginId 登錄ID
     * @return
     */
    private User getUserByLoginId(String loginId) {
        // 模擬 DB 存在的用戶數據
        User dbUser = new User();
        dbUser.setUserName("Xiaojun");
        dbUser.setLoginId("admin");
        dbUser.setLoginPwd("admin");

        // 判斷是否存在 loginId 的用戶（忽略大小寫）
        if (dbUser.getLoginId().equalsIgnoreCase(loginId)) {
            logger.info("匹配上用戶：{}", dbUser);
            return dbUser;
        }
        logger.warn("未匹配任何用戶，將返回 null");
        return null;
    }
}

5.3.創建 UserService 接口及其實現 UserServiceImpl

在包 net.work100.training.stage2.iot.admin.service 下新建一個接口 UserService

UserService.java 文件代碼如下：

package net.work100.training.stage2.iot.admin.service;

import net.work100.training.stage2.iot.admin.entity.User;

/**
 * <p>Title: UserService</p>
 * <p>Description: </p>
 *
 * @author liuxiaojun
 * @date 2020-02-13 13:25
 * ------------------- History -------------------
 * <date>      <author>       <desc>
 * 2020-02-13   liuxiaojun     初始創建
 * -----------------------------------------------
 */
public interface UserService {
    /**
     * 登錄驗證
     *
     * @param loginId  登錄ID
     * @param loginPwd 登錄密碼
     * @return
     */
    User login(String loginId, String loginPwd);
}

在包 net.work100.training.stage2.iot.admin.service 下新增一個類包 impl，然後在 impl 包下新建一個類 UserServiceImpl

UserServiceImpl.java 文件代碼如下：

package net.work100.training.stage2.iot.admin.service.impl;

import net.work100.training.stage2.iot.admin.dao.UserDao;
import net.work100.training.stage2.iot.admin.dao.impl.UserDaoImpl;
import net.work100.training.stage2.iot.admin.entity.User;
import net.work100.training.stage2.iot.admin.service.UserService;

/**
 * <p>Title: UserServiceImpl</p>
 * <p>Description: </p>
 *
 * @author liuxiaojun
 * @date 2020-02-13 13:26
 * ------------------- History -------------------
 * <date>      <author>       <desc>
 * 2020-02-13   liuxiaojun     初始創建
 * -----------------------------------------------
 */
public class UserServiceImpl implements UserService {

    private UserDao userDao = new UserDaoImpl();

    public User login(String loginId, String loginPwd) {
        return userDao.getUser(loginId, loginPwd);
    }
}

5.4.創建 LoginController

實現 Servlet

在包 net.work100.training.stage2.iot.admin.web 下新增一個類包 controller，然後在 controller 包下新建一個類 LoginController

LoginController.java 文件代碼如下：

package net.work100.training.stage2.iot.admin.web.controller;

import net.work100.training.stage2.iot.admin.entity.User;
import net.work100.training.stage2.iot.admin.service.UserService;
import net.work100.training.stage2.iot.admin.service.impl.UserServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * <p>Title: LoginController</p>
 * <p>Description: </p>
 *
 * @author liuxiaojun
 * @date 2020-02-13 13:28
 * ------------------- History -------------------
 * <date>      <author>       <desc>
 * 2020-02-13   liuxiaojun     初始創建
 * -----------------------------------------------
 */
public class LoginController extends HttpServlet {

    private UserService userService = new UserServiceImpl();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        User user = userService.login("admin", "admin");
        System.out.println("--------------doGet test(begin)-----------------");
        System.out.println(user);
        System.out.println("--------------doGet test(end)-----------------");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String loginId = req.getParameter("loginId");
        String loginPwd = req.getParameter("loginPwd");

        User user = userService.login(loginId, loginPwd);

        // 登錄成功
        if (user != null) {
            // 重定向到首頁
            resp.sendRedirect("/main.jsp");
        }
        // 登錄失敗
        else {
            // 跳轉回登錄頁
            req.getRequestDispatcher("/index.jsp").forward(req, resp);
        }
    }
}

配置 Servlet 映射

修改 src/main/webapp/WEB-INF/web.xml 文件，內容如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <servlet>
        <servlet-name>loginController</servlet-name>
        <servlet-class>net.work100.training.stage2.iot.admin.web.controller.LoginController</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>loginController</servlet-name>
        <url-pattern>/login</url-pattern>
    </servlet-mapping>
</web-app>

新建登錄成功後展示頁面 main.jsp

爲了模擬登錄驗證後的效果，我們在文件夾 src/main/webapp/ 下新建文件 main.jsp，登錄成功後將跳轉至此頁面，代碼如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首頁</title>
</head>
<body>
這裏是首頁
</body>
</html>

5.5.運行

啓動 Tomcat 進行登錄驗證，表單輸入以下正確的登錄數據：

名稱 值
用戶名 admin
密碼 admin

頁面將跳轉至 main.jsp，如下圖：

頁面將跳轉至 - 光束雲 - work100.net

輸入錯誤登錄數據時，重新返回到登錄頁。

5.6.使用 Spring IoC

新建 SpringContext 類

新建一個類包 net.work100.training.stage2.iot.admin.commons.context，然後在其下創建 SpringContext 類

SpringContext.java 文件代碼如下：

package net.work100.training.stage2.iot.admin.commons.context;

import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

/**
 * <p>Title: SpringContext</p>
 * <p>Description: </p>
 *
 * @author liuxiaojun
 * @date 2020-02-13 14:31
 * ------------------- History -------------------
 * <date>      <author>       <desc>
 * 2020-02-13   liuxiaojun     初始創建
 * -----------------------------------------------
 */
public final class SpringContext {

    public Object getBean(String beanId) {
        ApplicationContext context = new ClassPathXmlApplicationContext("spring-context.xml");
        return context.getBean(beanId);
    }

}

配置 spring-context.xml

修改 src/main/resources/spring-context.xml 文件，內容如下：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="
       http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">

    <!-- DAO -->
    <bean id="userDao" class="net.work100.training.stage2.iot.admin.dao.impl.UserDaoImpl" />

    <!-- Service -->
    <bean id="userService" class="net.work100.training.stage2.iot.admin.service.impl.UserServiceImpl" />
</beans>

修改 UserServiceImpl

修改 UserServiceImpl.java 代碼，如下：

package net.work100.training.stage2.iot.admin.service.impl;

import net.work100.training.stage2.iot.admin.commons.context.SpringContext;
import net.work100.training.stage2.iot.admin.dao.UserDao;
import net.work100.training.stage2.iot.admin.entity.User;
import net.work100.training.stage2.iot.admin.service.UserService;

/**
 * <p>Title: UserServiceImpl</p>
 * <p>Description: </p>
 *
 * @author liuxiaojun
 * @date 2020-02-13 13:26
 * ------------------- History -------------------
 * <date>      <author>       <desc>
 * 2020-02-13   liuxiaojun     初始創建
 * -----------------------------------------------
 */
public class UserServiceImpl implements UserService {

    private SpringContext context = new SpringContext();

    public User login(String loginId, String loginPwd) {
        UserDao userDao = (UserDao) context.getBean("userDao");
        return userDao.getUser(loginId, loginPwd);
    }
}

修改 LoginController

修改 LoginController.java 代碼，如下：

package net.work100.training.stage2.iot.admin.web.controller;

import net.work100.training.stage2.iot.admin.commons.context.SpringContext;
import net.work100.training.stage2.iot.admin.entity.User;
import net.work100.training.stage2.iot.admin.service.UserService;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * <p>Title: LoginController</p>
 * <p>Description: </p>
 *
 * @author liuxiaojun
 * @date 2020-02-13 13:28
 * ------------------- History -------------------
 * <date>      <author>       <desc>
 * 2020-02-13   liuxiaojun     初始創建
 * -----------------------------------------------
 */
public class LoginController extends HttpServlet {

    private SpringContext context = new SpringContext();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        UserService userService = (UserService) context.getBean("userService");
        User user = userService.login("admin", "admin");
        System.out.println("--------------doGet test(begin)-----------------");
        System.out.println(user);
        System.out.println("--------------doGet test(end)-----------------");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        UserService userService = (UserService) context.getBean("userService");
        String loginId = req.getParameter("loginId");
        String loginPwd = req.getParameter("loginPwd");

        User user = userService.login(loginId, loginPwd);

        // 登錄成功
        if (user != null) {
            // 重定向到首頁
            resp.sendRedirect("/main.jsp");
        }
        // 登錄失敗
        else {
            // 跳轉回登錄頁
            req.getRequestDispatcher("/index.jsp").forward(req, resp);
        }
    }
}

重新運行

重啓 Tomcat 驗證運行效果。

6.提升用戶體驗

當用戶輸入錯誤的ID或密碼時驗證會失敗，然後頁面會跳轉回登錄頁。

從用戶體驗角度考慮，需要給用戶一個 提示信息，告知其登錄驗證失敗了，下面我們來實現這個功能。

6.1.改造 LoginController

登錄驗證失敗後增加返回錯誤信息 req.setAttribute("message", "登錄ID或登錄密碼錯誤"); ，完整代碼如下：

package net.work100.training.stage2.iot.admin.web.controller;

import net.work100.training.stage2.iot.admin.commons.context.SpringContext;
import net.work100.training.stage2.iot.admin.entity.User;
import net.work100.training.stage2.iot.admin.service.UserService;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * <p>Title: LoginController</p>
 * <p>Description: </p>
 * <p>Url: http://www.work100.net/training/monolithic-frameworks-example.html</p>
 *
 * @author liuxiaojun
 * @date 2020-02-13 13:28
 * ------------------- History -------------------
 * <date>      <author>       <desc>
 * 2020-02-13   liuxiaojun     初始創建
 * -----------------------------------------------
 */
public class LoginController extends HttpServlet {

    private SpringContext context = new SpringContext();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        UserService userService = (UserService) context.getBean("userService");
        User user = userService.login("admin", "admin");
        System.out.println("--------------doGet test(begin)-----------------");
        System.out.println(user);
        System.out.println("--------------doGet test(end)-----------------");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        UserService userService = (UserService) context.getBean("userService");
        String loginId = req.getParameter("loginId");
        String loginPwd = req.getParameter("loginPwd");

        User user = userService.login(loginId, loginPwd);

        // 登錄成功
        if (user != null) {
            // 重定向到首頁
            resp.sendRedirect("/main.jsp");
        }
        // 登錄失敗
        else {
            // 跳轉回登錄頁
            req.setAttribute("message", "登錄ID或登錄密碼錯誤");
            req.getRequestDispatcher("/index.jsp").forward(req, resp);
        }
    }
}

6.2.改造 index.jsp

引入 JSTL 依賴

這裏我們會用到 JSTL 表達式，所以需要先在 pom.xml 文件中引入依賴：

<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
</dependency>

增加 taglib 指令

在 index.jsp 文件頭增加如下代碼：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

增加錯誤提示

在 index.jsp 文件的 form 表單上方增加如下代碼：

<c:if test="${message != null}">
    <div class="alert alert-danger alert-dismissible">
       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
          ${message}
    </div>
</c:if>

完整 index.jsp 文件代碼如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>IoT-Admin</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="assets/plugins/fontawesome-free/css/all.min.css">
    <!-- icheck bootstrap -->
    <link rel="stylesheet" href="assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="assets/css/adminlte.min.css">
</head>
<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        IoT-Admin 登錄
    </div>
    <!-- /.login-logo -->
    <div class="card">
        <div class="card-body login-card-body">
            <p class="login-box-msg">請輸入ID和密碼登錄</p>
            <c:if test="${message != null}">
                <div class="alert alert-danger alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        ${message}
                </div>
            </c:if>
            <form action="/login" method="post">
                <div class="input-group mb-3">
                    <input name="loginId" type="text" class="form-control" placeholder="登錄ID">
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-user"></span>
                        </div>
                    </div>
                </div>
                <div class="input-group mb-3">
                    <input name="loginPwd" type="password" class="form-control" placeholder="登錄密碼">
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-lock"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-8">
                        <div class="icheck-primary">
                            <input type="checkbox" id="remember">
                            <label for="remember">
                                記住我
                            </label>
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-4">
                        <button type="submit" class="btn btn-primary btn-block">登錄</button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>
        </div>
        <!-- /.login-card-body -->
    </div>
</div>
<!-- /.login-box -->

<!-- jQuery -->
<script src="assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="assets/js/adminlte.min.js"></script>

</body>
</html>

6.3.驗證效果

運行 Tomcat ，輸入錯誤的登錄數據，頁面效果如下：

頁面效果 - 光束雲 - work100.net

7.實例源碼

實例源碼已經託管到如下地址：

上一篇：Log4j

下一篇：Spring Web

如果對課程內容感興趣，可以掃碼關注我們的 公衆號 或 QQ羣，及時關注我們的課程更新

公衆號
QQ交流羣

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

mybatis開啓MapperScannerConfigurer導致properties不生效

背景 spring和mybatis集成過程中，我們可以通過MapperFactoryBean的方式配置Mapper接口。但是這樣需要在配置文件中，爲每個mapper配置相同的代碼塊，浪費時間。關鍵對於代碼潔癖的人來說，一點不能忍。 <bea

原創 2024-02-07 13:55:41

Java字符串的一些理解

爲什麼要研究字符串？ 人機交互的過程中，文字、數字、字母、符號都是字符表現形式，這部分內容佔了人機信息交互的大部分內容，所以有必要明確一些基本問題。因此大部分數據類型都應該有字符串表達形式，我們在定義新類型的時候可以根據需要來定義新類型的

原創 2023-10-31 09:11:32

（二）java版spring boot 社交電子商務平臺-security簡單使用

security的簡單原理： 使用衆多的攔截器對url攔截，以此來管理權限。但是這麼多攔截器，不可能對其一一來講，主要講裏面核心流程的兩個。 首先，權限管理離不開登陸驗證的，所以登陸驗證攔截器AuthenticationProcessing

原創 2023-10-10 11:05:06

（三）java版spring cloud+spring boot+redis多租戶社交電子商務平臺-Spring Cloud實戰隨機端口

我們經常會需要啓動多個實例的情況來測試註冊中心、配置中心等基礎設施的高可用，也會用來測試客戶端負載均衡的調用等。但是，我們一個應用只能有一個端口號，這就使得在本機測試的時候，不得不爲同一個服務設置不同的端口來進行啓動。 在本地用不同端口啓動

原創 2023-10-10 11:05:04

如何使用 Java 反射？反射的用法及案例

簡介     Java Reflection，稱爲 Java 反射，是Java基礎部分的一個比較難的點。Reflection（反射）是被視爲動態語言的關鍵，通過反射機制，我們可以在運行時（runtime）獲取類的完整結構。例如，可以獲取到

原創 2023-10-10 02:23:57

最新美團面試集合（一面+二面+三面+重點技術面試題）附面試解析

一面 1. 簡短自我介紹 2. 事務的ACID，其中把事務的隔離性詳細解釋一遍 3. 髒讀、幻影讀、不可重複讀 4. 紅黑樹、二叉樹的算法 5. 平常用到哪些集合類？ArrayList和LinkedList區別？HashMap內部數據結構

原創 2023-10-10 01:43:49

Java程序員不想被裁員困擾，應該怎樣築基、發展才能越走越遠？

  當我們站在技術之路的原點，未來可能充滿了迷茫，也存在着很多不同的可能。在這個知識爆炸與終身學習/碎片化學習爲主的時代，我們面臨的問題之一就是如何進行有效學習，不僅能有效平衡廣度與深度，並且能真正的積澱下來，提升自己的研發效能。於筆者而

原創 2023-10-10 01:43:34

阿里巴巴Java開發手冊 梳理筆記 - finally 塊必須對資源對象、流對象進行關閉

阿里巴巴Java開發手冊 梳理筆記 - finally 塊必須對資源對象、流對象進行關閉 規約內容： 2.1 異常處理 6. 【強制】 finally 塊必須對資源對象、流對象進行關閉，有異常也要做 try - catch 。 說明：如果

原創 2023-08-02 10:29:06

java併發-CAS的理解

在Java方面，能夠實現多線程安全修改對象值得方法只有2個 1.原子操作 2.互斥方法 而在Java當中，或是其他語言中，基本上也都是使用CAS實現。CAS是比較並交換的意思，這個操作包含2個連續的操作，比較，還有賦值，因爲2個操作在cpu

原創 2023-05-29 01:40:21

java併發-Timer類的使用和原理

單線程輪詢並執行任務，有可能會導致飢餓。比較適合於一些具有一個任務的週期調度。 任務列表用數組存儲，元素最前面的元素是最先被執行的任務。 schedule方法是固定間隔執行，根據上一次執行的結束時間來定義間隔的開始時間 scheduleAt

原創 2023-03-28 01:52:22

java併發-ReadWriteLock代碼理解

創建的ReadWriteLock需要使用兩個方法來繼續創造2個對象，分別是ReadLock和WriteLock。 這兩個鎖對象的方法調用都會匯聚到ReadWriteLock的Sync類中。多個對象的方法調用匯聚到一個對象上面，這個設計模式是

原創 2023-03-28 01:52:20

java併發-synchronized關鍵字

synchronized關鍵字可以修飾普通方法，靜態方法，當修飾普通方法，鎖對象是當前對象，當修飾靜態方法，鎖對象是當前類的class synchroinzed關鍵字可以使用同步代碼塊實現同步，此時可以指定鎖對象。 同步方法的實現方式 同步

原創 2023-03-28 01:52:18

java併發-AQS總結-原理

AQS是Java多線程編程的重入鎖，管程，工具類的基礎類，是必須要掌握的。不掌握這個類，根本不能稱之爲合格的Java程序員。 即使是把這個類所有的代碼都背會，也是值得的。 如何標識已經有線程在執行呢？ 有兩個變量，一個state變量，一個e

原創 2023-03-28 01:52:16

java併發-緩存一致性協議和內存屏障的思考和理解

################這是之前的思考 內存屏障只是保證清空流水線，如何保證高速緩存的內容更新到最新或刷新到主存呢？這個問題突然想到了，不知道這個需要怎回答。 內存屏障保證的CPU執行執行序列能夠順序執行，而不是亂序執行。當然，前提

原創 2023-03-28 01:52:14

Java併發-volidate關鍵字

使用volidate關鍵字修飾的成員變量，保證可見性，也就是當一個線程修改這樣的成員變量後，其他的線程能夠立即看到這次的修改。有兩個方面的原因： 1.編譯器不優化對這樣的關鍵字修飾變量的一些訪問操作 2.對讀，寫這個關鍵字修飾的變量前後，會

原創 2023-03-28 01:52:13