spring boot连串02–Thymeleaf+Bootstrap构建页面

 上一篇说了一晃怎么构建spring boot
项目

接下去我们开头讲实际利用中要求拔取的
先从页面说起

页面侧打算用Thymeleaf+Bootstrap来做

先共通模板页

<!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 的

此处能说的就是th:fragment初叶说了
页面用 Thymeleaf+Bootstrap 来做

th就是Thymeleaf的缩写了
它用【th:】来报告解析器那里是Thymeleaf的事物了

(关于Thymeleaf的东西这里打算是用哪个地方写哪儿不打算系统写 之后也许会系统写一个Thymeleaf的延续串)

说一下代码里的八个 多少个模板    

th:fragment=”header(title)   是表示 名叫 header 有参
的模板

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">
    欢迎,登录
    </div>
    <div class="container" th:replace="common :: footer"></div>
</body>
</html>

最后全部看一下意义

图片 1

 

GitHub:spring-boot-hello

 

相关文章