使用SpringBoot2.x+Themleaf3.0完成用戶登陸的開發

首先建立一個SpringBoot的web項目，並添加themleaf的依賴 & webjars：

<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <!--引入jquery-webjar--> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.3.1</version> </dependency> <!--引入bootstrap--> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.0.0</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency>

指望前端經過一個form提交表單的形式，進行登陸驗證，POST請求 /user/login

<div class="body">
    <form class="form-auth-small" action="index.html" th:action="@{/user/login}" method="post">
        <p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
        <div class="form-group">
            <label for="signin-email" class="control-label sr-only" th:text="#{login.username}">username</label>
            <input type="text" name="username" class="form-control" id="signin-email" value=""
                   placeholder="User Name" th:placeholder="#{login.username}">
        </div>
        <div class="form-group">
            <label for="signin-password" class="control-label sr-only" th:text="#{login.password}">Password</label>
            <input type="password" name="password" class="form-control" id="signin-password" value=""
                   placeholder="Password" th:placeholder="#{login.password}">
        </div>
        <div class="form-group clearfix">
            <label class="fancy-checkbox element-left">
                <input type="checkbox">
                <span>Remember me</span>
            </label>
        </div>
        <button type="submit" class="btn btn-primary btn-lg btn-block" th:text="#{login.btn}">LOGIN</button>
    </form>
</div>

服務端經過Controller層的接口進行Mapping

@PostMapping(value = "/user/login")
public String login(@RequestParam("username") String username, @RequestParam("password") String password,
                    Map map, HttpSession session) {

    if (this.userName.equals(username) && this.password.equals(password)) {
        //用戶名和密碼完成校驗
        session.setAttribute("userLogin", username); //緩存session
        return "redirect:/main.html"; //跳轉至main.html
    } else {
       //用戶名和密碼未完成校驗
        map.put("msg", "用戶名或密碼錯誤");
        return "light/page-login";
    }
}

經過實現接口WebMvcConfigurer，完成對SpringMVC的擴展，實現對Controller到View的映射，以及對URL的攔截，而index.html和靜態資源不進行攔截。

@Configuration
public class UserMvcConfigure implements WebMvcConfigurer {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("light/page-login");
        registry.addViewController("/index.html").setViewName("light/page-login");
        registry.addViewController("/main.html").setViewName("light/index");
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**")
                .excludePathPatterns("/", "/index.html", "/user/login", "/assets/**", "/light/assets/**", "/webjars/**");
    }

    @Bean
    public LocaleResolver getLocaleResolver() {
        return new UserLocaleResolver();
    }
}

具體攔截代碼實現爲：

public class LoginHandlerInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        Object userLogin = request.getSession().getAttribute("userLogin");
        if (userLogin == null) {
            request.setAttribute("msg", "沒有權限請先登陸");
            request.getRequestDispatcher("/index.html").forward(request, response);
            return false;
        } else {
            return true;
        }
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {

    }
}

至此，能夠完成一個簡單的登陸驗證。

備註：

        resources/static目錄：存放靜態資源文件，即*.js *.css *.jpg等

        resources/templates目錄：存放themleaf的模板文件，即*.html

        前端代碼中使用webjars的@引入靜態資源的好處是：訪問路徑改變以後，前段代碼會自動添加該路徑。