遇一山,过一山,处处有风景;只要勇敢向前,一路尽是繁花盛开。 | (点击查看→)【测试干货】python/java自动化、持续集成、性能、测开、简历、笔试面试等

SpringBoot整合Thymeleaf

Thymeleaf简介

模板引擎就是一个网页模板,本质就是静态页面,但是可以嵌套动态的内容

可以替代jsp,因为jsp是动态页面,最终翻译成java代码,笨重且耗性能

另外,模板引擎是同步操作,适合写后台管理系统

Thymeleaf官网:http://www.thymeleaf.org

 

语法

常用属性

th:text、th:utext
  设置元素中的文本内容
  th:text对特殊字符进行转义,等价于内联方式[[${  }]]
  th:utext对特殊字符不进行转义,等价于内联方式[(${  })]

th:html原生属性
  用来替换指定的html原生属性的值

th:if、th:unless、th:switch、th:case
  条件判断,类似于c:if

th:each
  循环,类似于c:forEach

  

表达式

${} 变量表达式
  获取对象的属性、方法
  使用内置的基本对象,如session、application等
  使用内置的工具对象,如#strings、#dates、#arrays、#lists、#maps等

*{}选择表达式(星号表达式)
  需要和th:object配合使用,简化获取对象的属性

@{} url表达式
  定义url

运算符
  eq  gt le   ==  !=   三目运算符

 

Thymeleaf整合SpringBoot

在pom中加入依赖

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

  

配置文件

在application.properties(application.yml)文件中配置thymeleaf

# 页面模板的位置,默认就是classpath:/templates/
spring.thymeleaf.prefix=classpath:/templates/
# 模板引擎的后缀,默认就是.html
spring.thymeleaf.suffix=.html
# 编码格式,默认就是UTF-8
spring.thymeleaf.encoding=UTF-8
# 文件类型,默认就是text/html
spring.thymeleaf.servlet.content-type=text/html
# 语法检测标准HTML5检测,默认是HTML
spring.thymeleaf.mode=HTML5
# 禁用模板页面缓存,默认是true
spring.thymeleaf.cache=false

  

创建控制层

package com.qzcsbj.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;


/**
 * @公众号 : 全栈测试笔记
 * @博客 : www.cnblogs.com/uncleyong
 * @微信 : ren168632201
 * @描述 : <>
 */
@Controller
public class TestThymeleafController {
    @RequestMapping("/test")
    public String test(Model model){
        String msg = "模板引擎";
        model.addAttribute("msg",msg);
        return "first";
    }
}

 

创建模板引擎页面

在resources文件夹下的templates目录,新增first.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>测试模板引擎</title>
</head>
<body>
    <!--页面渲染的时候,会把test替换为实际值-->
   <h1 th:text="${msg}">test</h1>
</body>
</html>

说明:上面必须加xmlns:th="http://www.thymeleaf.org,表示是引入thymeleaf的命名空间

 

测试

启动springboot,请求:localhost:8081/test

结果:

 

同步请求应用

这里演示一个用户管理系统的查询用户功能

接上一个示例:https://www.cnblogs.com/uncleyong/p/17065293.html

 

创建模板引擎页面

templates下,添加user_list.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
     <center>
         <h1>用户列表</h1>
         <hr/>
         <table>
             <tr>
                 <td>ID</td>
                 <td>用户名</td>
                 <td>真实名</td>
                 <td>性别</td>
                 <td>生日</td>
                 <td>手机</td>
                 <td>用户类型</td>
             </tr>
             <!--th:each是遍历,要遍历${users},循环变量是u}-->
             <tr th:each="u:${users}">
                 <!--th:text是填充值,都是调用对象的get方法-->
                 <td th:text="${u.id}">XXX</td>
                 <td th:text="${u.username}">XXX</td>
                 <td th:text="${u.realName}">XXX</td>
                 <td th:text="${u.sex}">XXX</td>
                 <td th:text="${u.birthday}">XXX</td>
                 <td th:text="${u.phone}">XXX</td>
                 <td th:text="${u.utype}">XXX</td>
             </tr>
         </table>
     </center>
</body>
</html>

 

控制器实现

package com.qzcsbj.demo.controller;

import com.qzcsbj.demo.pojo.User;
import com.qzcsbj.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletResponse;
import java.util.List;

/**
 * @公众号 : 全栈测试笔记
 * @博客 : www.cnblogs.com/uncleyong
 * @微信 : ren168632201
 * @描述 : <>
 */
@Controller
public class UserThymeleafController {

    @Autowired
    UserService userService;

    // 查所有
    @GetMapping("/users")
    public String list(Model model){
        System.out.println(">>>>>> 查询所有用户");
        List<User> users = userService.findAll();
        model.addAttribute("users",users);
        return "user_list";  // 模板引擎user_list页面
    }
}

 

测试

重启springboot,请求:http://localhost:8081/users

 

【bak】

原文已更新:https://www.cnblogs.com/uncleyong/p/17071382.html

 

posted @ 2023-01-28 22:05  全栈测试笔记  阅读(371)  评论(0编辑  收藏  举报
浏览器标题切换
浏览器标题切换end