SrpingBoot（六）——深入实践Thymeleaf

旧城等待， 2022-02-14 08:28 156阅读 0赞

# SpringBoot深入实践Thymeleaf #

> 上一篇大致介绍了Thymeleaf的简单语法规则，这一篇就来对Thymeleaf进行使用。下边都是我通过实战测试后写出来的。

Thymeleaf是一个很强大的模板引擎，它基本可以替换所有的HTML标签的属性，因此我们可以在HTML的基础上进行修改，下边就说一说我在一次简单整合中遇到的一些常用的属性。

> Thymeleaf的属性是覆盖在HTML上的

1.  超链接（th：href），链接使用@\{\}，可以看出在Thymeleaf中 / 就可以表示当前项目

<a class="nav-link" href="/crud/emps" th:href="@{/emps}"

1.  class属性（th：class），使用$\{\}的原因是activeUri是自定义在Context中的需要用 $\{\} 取出来，并且在下面例子可以看出使用了**三元运算**

1.  name属性（th：name）

1.  select标签的name，值得注意的是，option的value和使用模板引擎来遍历，depts是我们在后台在Model中放的属性,dep是遍历depts的单个并且指定dep的id为value。

//来到员工添加的页面
        @GetMapping(value = "/emp")
        public String addPage(Model model) {
    
            Collection<Department> departments = departmentDao.getDepartments();
            model.addAttribute("depts", departments);
            return "emp/add";
        }

1.  单行显示，取出session的userKey属性

<a class="navbar-brand col-sm-3 col-md-2 mr-0" th:href="@{/main.html}">[[${session.userKey}]]</a>

package com.wrial.demo.controller;
    
    @Controller
    @RequestMapping(value = "/user")
    public class UserController {
    
        @PostMapping(value = "/login")
        public String login(@RequestParam("username") String username,
                            @RequestParam("password") String password,
                            Map<String, Object> map, HttpSession session) {
            if (!StringUtils.isEmpty(username) && !StringUtils.isEmpty(password) &&
                    username.equals("wrial") && password.equals("123")) {
                map.put("msg", "登陆成功！");
                //配置拦截器进行安全检测
                session.setAttribute("userKey", username);
                //为了防止重复提交请求，使用重定向
                return "redirect:/main.html";
            } else {
                map.put("msg", "登陆失败，请重试");
                return "login";
            }
        }
    }

1.  公共模块抽取  
    （1）使用feagment实现公共模块抽取

<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
        <a class="navbar-brand col-sm-3 col-md-2 mr-0" th:href="@{/main.html}">[[${session.userKey}]]</a>
        <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
        <ul class="navbar-nav px-3">
            <li class="nav-item text-nowrap">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign out</a>
            </li>
        </ul>
    </nav>

使用公共抽取页面,必须使用div包裹，第一种是插入因此外层还是div包裹，第二个是替代，外层就没有这个div包裹了（一般会使用第二种）

引入的格式~\{\},然后commons/bar（template目录下）是我的html页面的目录（Thymeleaf会自动解析为指定的HTMl），然后topbar也就是我上边feagment的值。

（2）使用id选择器实现公共模块抽取

使用id选择器,格式也是~\{\},commons/bar是template下的指定html文件，使用\#选择在bar中的id为sidebar的模块，并且可以在小括号中传入属性。

1.  使用put方式修改员工数据,必须是post请求然后根据指定的命名规则SpringBoot自动识别为是put请求。

<form action="/crud/addemp" method="post" th:value="${employee!=null}">
                    <input type="hidden" name="_method" value="put" th:if="${employee!=null}"/>
    
                    <input type="hidden" name="id" th:if="${employee!=null}" th:value="${employee.id}">
                    <div class="form-group">
                        <label>LastName</label>
                        
                        <input th:name="lastName" type="text" class="form-control"
                               th:value="${employee.lastName!=null}?${employee.lastName}" placeholder="wrail">
                    </div>
                    <div class="form-group">
                        <label>Email</label>
                        <input th:name="email" type="email" class="form-control"
                               th:value="${employee.email!=null}?${employee.email}" placeholder="wrial.qq.com">
                    </div>
                    <div class="form-group">
                        <label>Gender</label><br/>
                        <div class="form-check form-check-inline">
                            
                            <input th:name="gender" class="form-check-input" type="radio" name="gender" value="1"
                                   th:checked="${employee.gender!=null}?${employee.gender==1}">
                            <label class="form-check-label">男</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input th:name="gender" class="form-check-input" type="radio" name="gender" value="0"
                                   th:checked="${employee.gender!=null}?${employee.gender==0}">
                            <label class="form-check-label">女</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>department</label>
                        <select class="form-control" th:name="department.id">
                            
                            <option th:selected="${employee.department.id!=null}?${dep.id==employee.department.id}"
                                    th:value="${dep.id}" th:each="dep:${depts}" th:text="${dep.departmentName}">1
                            </option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Birth</label>
                        <input th:name="birth" th:type="date" class="form-control"
                               th:value="${employee.birth!=null}?${#dates.format(employee.birth,'yyyy-mm-dd ')}"
                               placeholder="zhangsan">
                    </div>
                    
                    <button type="submit" class="btn btn-primary" formaction="/crud/emp" formmethod="post">添加</button>
                    <button type="reset" class="btn btn-primary">重置</button>
                </form>

//信息修改
        @PutMapping("/emp")
        public String updateEmp(Employee employee) {
    
            //修改方法（是一个懒方法，在内部进行id判断，如果有id就是修改，没id就是增加）
            employeeDao.save(employee);
            System.out.println("update:" + employee);
            return "redirect:/emps";
        }

1.  自定义属性，使用attr自定义属性

1.  使用delete请求，必须为post请求，然后创建hidden属性，value是delete

<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除 </button>

使用Jquery删除

@DeleteMapping("/emp/{id}")
        public String deleteEmp(@PathVariable("id") Integer id) {
            employeeDao.delete(id);
            return "redirect:emps";
        }

1.  读取配置文件，$\{name\}是读的是Model中的name属性，\#\{success.mes\}读的是配置文件中的属性（properties），因此一般可使用配置文件来做国际化页面。

![在这里插入图片描述][20190426093232314.png]

1.  if标签判断,not 是否定，使用\#可以调用strings库来对msg进行判空判断

1.  国际化  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjA1OTY4_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjA1OTY4_size_16_color_FFFFFF_t_70 1]  
    下面是使用国际化进行登陆操作使用前面说过的\#\{\}来取出国际化的值，也可以在请求的时候加上l属性标示是那个地区。

配置文件

server.port=8081
    
    spring.thymeleaf.cache=false
    server.servlet.context-path=/crud
    spring.messages.basename=i18n.login
    #指定日期格式化，也可以加上分和秒
    spring.mvc.date-format=yyyy-MM-dd

<form class="form-signin" action="/crud/user/login" method="post">
    			<img class="mb-4" th:src="@{/asserts/img/bootstrap-solid.svg}" src="../static/asserts/img/bootstrap-solid.svg" alt="" width="72" height="72">
    			
    			<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign in</h1>
    			
    			
    			<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
    			
    			<label class="sr-only" th:text="#{login.username}">Username</label>
    			
    			<input type="text" name="username" class="form-control" th:placeholder="#{login.username}" placeholder="Username" required="" autofocus="">
    			
    			<label class="sr-only" th:text="#{login.password}">Password</label>
    			
    			<input type="password" name="password" class="form-control" th:placeholder="#{login.password}" placeholder="Password" required="">
    			
    			<div  class="checkbox mb-3">
    				<label>
    					
              <input type="checkbox" value="remember-me" />  [[#{login.remember}]]
    
            </label>
    			</div>
    			<button class="btn btn-lg btn-primary btn-block"  th:text="#{login.btn}" type="submit">Sign in</button>
    			<p class="mt-5 mb-3 text-muted">©2019</p>
    
    			
    			<a class="btn btn-sm" th:href="@{/(l='zh_CN')}">中文</a>
    			<a class="btn btn-sm" th:href="@{/(l='en_US')}">English</a>
    		</form>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjA1OTY4_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjA1OTY4_size_16_color_FFFFFF_t_70 3]

> 这就是一些常用的标签，还有一些没说是因为用法都一样，就不多重复了！

[20190426093232314.png]: /images/20220214/699467f5c7e34a79b432682f6cc083b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjA1OTY4_size_16_color_FFFFFF_t_70]: /images/20220214/efebc79ea2c045939523ae96ef64eb14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjA1OTY4_size_16_color_FFFFFF_t_70 1]: /images/20220214/0c667b02470c46848177f51027bf592c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjA1OTY4_size_16_color_FFFFFF_t_70 2]: /images/20220214/41f02112c445408d8bb9ffdf6d1b755d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjA1OTY4_size_16_color_FFFFFF_t_70 3]: /images/20220214/0a912f8741334cf98b1531bd9a90c40b.png