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

 

相关文章