spring boot系列02--Thymeleaf+Bootstrap構建頁面

時間 2019-12-02

標籤 spring boot 系列 thymeleaf+bootstrap thymeleaf bootstrap 構建頁面欄目 Spring 简体版

原文原文鏈接

上一篇說了一下怎麼構建spring boot 項目javascript

接下來咱們開始講實際應用中須要用到的先從頁面提及css

頁面側打算用Thymeleaf+Bootstrap來作html

先共通模板頁java

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<body>
    <!-- Header -->
    <div th:fragment="header(title)">
        <div>
            <h2>Guaishushu</h2>
        </div>
    </div>
    
    <!-- Footer -->
    <div th:fragment="footer" class="navbar-fixed-bottom">
        <div class="container text-center">
            Copyright © GuaiShuShu
        </div>
         
    </div>
</body>
</html>

暫且定義兩個共通 Header 和 Footer 以後還會再有好比 menu 的jquery

這裏能說的就是th:fragment 開始說了頁面用 Thymeleaf+Bootstrap 來作 git

th就是Thymeleaf的縮寫了它用【th:】來告訴解析器這裏是Thymeleaf的東西了 github

（關於Thymeleaf的東西這裏打算是用哪兒寫哪兒不打算系統寫以後可能會系統寫一個Thymeleaf的系列）web

說一下代碼裏的兩個兩個模板 spring

th:fragment="header(title) 是表示名叫 header 有參的模板bootstrap

th:fragment="footer" 這個就是無參的了

接下來看看調用的地方 L21，L79

模板畫面名(common)+模板名（header）+參數( 'login')

 1 <!DOCTYPE HTML>
 2 <!-- thymeleaf 導入 -->
 3 <html xmlns:th="http://www.thymeleaf.org">
 4 <head>
 5 <title>登陸</title>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 7 <script type="text/javascript" src="../static/js/jquery-3.2.1.min.js"></script>
 8 <link rel="stylesheet" href="../static/css/bootstrap.min.css"
 9     type="text/css"></link>
10 <script type="text/javascript">
11     $(function() {
12     })
13 </script>
14 <body>
15     <!-- common 的 定義好的 header模板 引用  參數 title  -->
16     <!-- 
17      Bootstrap的容器Class使用 
18      container ：用於固定寬度並支持響應式佈局的容器 
19      container-fluid ：用於 100% 寬度，佔據所有視口（viewport）的容器。
20     -->
21     <div class="container" th:replace="common :: header('login') "></div>
22     <div class="container">
23         <!--Bootstrap
24             .row:行控制  一行有12列
25             .clo-md-4:列控制 表示 佔 4列
26             .md-offfset-4:向右側偏移4
27          -->
28         <div class="row">
29             <div class="col-md-4 col-md-offset-4">
30                 <div class="panel panel-default">
31                     <div class="panel-heading">
32                         <h3 class="panel-title">Login</h3>
33                     </div>
34                     <div class="panel-body">
35                         <form th:action="@{'/login'}" method="post" th:object="${userDto}">
36                             <div class="form-group form-inline">
37                                 <label for="txtUserName" class="col-md-3 control-label"
38                                     style="text-align: right;">用戶名</label>
39                                 <div class="col-md-9">
40                                     <input type="text" class="col-md-9 form-control" id="txtUserName"
41                                         placeholder="請輸入用戶名" th:field="*{userName}"
42                                         required="required" />
43                                 </div>
44                             </div>
45                             <div class="form-group form-inline" style="padding-top:45px">
46                                 <label for="txtUserPwd" class="col-sm-3 control-label"
47                                     style="text-align: right;">密碼</label>
48                                 <div class="col-md-9">
49                                     <input type="password" class="col-sm-9 form-control" id="txtUserPwd"
50                                         placeholder="請輸入密碼" th:field="*{userPsw}" />
51                                 </div>
52                             </div>
53                             <div class="form-group">
54                                 <div class="col-md-offset-3 col-md-9">
55                                     <div class="checkbox">
56                                         <label> <input type="checkbox" />請記住我
57                                         </label>
58                                     </div>
59                                 </div>
60                             </div>
61                             <div class="form-group">
62                                 <div class="col-md-offset-3 col-md-5">
63                                     <button class="btn btn-primary btn-block" type="submit" name="action"
64                                         value="login">登陸</button>
65                                 </div>
66 
67                             </div>
68                             <div class="alert alert-danger" th:if="${loginError}">
69                                 <strong>用戶名或者用戶密碼不正確，請從新輸入</strong>
70                             </div>
71                         </form>
72                     </div>
73                 </div>
74             </div>
75         </div>
76     </div>
77 
78     <!-- common 的 定義好的 fotter模板引用  無參  -->
79     <div class="container" th:replace="common :: footer"></div>
80 </body>
81 </head>
82 </html>

說一下thymeleaf使用的地方

L35 使用或者說定義了一個userDto對象

說使用是由於這個對象你得重後臺傳給它不然報錯

說定義是由於在當前from做用於域內像L41那樣去訪問使用userDto這個對象內屬性/方法

關於Bootstrap的部分我基本都在代碼的註釋裏寫了

這裏就不贅述了看一下Controller

 1 package com.sts.springboot.controller;
 2 
 3 import org.springframework.stereotype.Controller;
 4 import org.springframework.ui.Model;
 5 import org.springframework.web.bind.annotation.ModelAttribute;
 6 import org.springframework.web.bind.annotation.RequestMapping;
 7 import org.springframework.web.bind.annotation.RequestMethod;
 8 import org.springframework.web.bind.annotation.RequestParam;
 9 import org.springframework.web.servlet.mvc.support.RedirectAttributes;
10 
11 import com.sts.springboot.dto.UserDto;
12 
13 @Controller
14 public class LoginController {
15     
16     //初期化
17     @RequestMapping(value = "/login", method = RequestMethod.POST)
18     public String login(Model model) {
19         UserDto userDto = new UserDto();
20         model.addAttribute("userDto",userDto);
21         return "login";
22     }
23     
24     //登陸
25     @RequestMapping(value = "/login",params="action=login", method = RequestMethod.POST)
26     public String login(@RequestParam(value = "userName") String userName,
27             @RequestParam(value = "userPsw") String userPsw,Model model,RedirectAttributes redirectAttributes ) {
28         UserDto userDto = new UserDto();
29         if(userName.equals(userPsw)) {
30             redirectAttributes.addFlashAttribute("userName",userName); 
31             return "redirect:index";
32         } else {
33             model.addAttribute("loginError",true);
34             model.addAttribute("userDto",userDto);
35             return "login";
36         }
37     }
38     @RequestMapping("/index")
39     public String welcomeIndex(@ModelAttribute("userName") String userName,Model model) {
40         model.addAttribute("userName",userName);
41         return "index";
42     }
43 
44 }

簡單說一下,先說參數部分

@RequestParam 使用來接收前臺穿過來的參數不用贅述有一點 @RequestParam的value 是要和頁面上 th:field="*{userPsw}" 的保持一致的

Model model 這是頁面的對象返回時做爲傳參的載體使用

RedirectAttributes 是重定向傳參用的像L30那樣 set進去 L39 接受 L40 set 到新頁面的model裏

而後

主要邏輯是判斷用戶名是否等於用戶密碼

是重定向到 index 頁面顯示

否想頁面返回error 提示

貼一下index 的代碼

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>
    <div class="container"  th:replace="common :: header('login') "></div>
    <div class="container">
    歡迎,<span th:text="${userName}"></span>登陸
    </div>
    <div class="container" th:replace="common :: footer"></div>
</body>
</html>