thymeleaf的简单使用_thymeleaf头文件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_55653761/article/details/137607497

本文详细介绍了如何在SpringBoot项目中集成Thymeleaf进行前端开发，包括添加依赖、配置SpringMVC与Thymeleaf视图解析，以及使用Thymeleaf的标签进行页面渲染、数据绑定和条件控制等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.依赖

ssm

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>

springboot

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

2.html头文件

<html lang="en" xmlns:th="http://www.thymeleaf.org">

3.配置springmvc

注意如果有jsp的resourceViewResolver，吧那个注释掉

<bean id="templateResolver"
      class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver">
    <property name="prefix" value="/WEB-INF/templates/"/>
    <property name="suffix" value=".html"/>
    <property name="characterEncoding" value="UTF-8"/>
    <property name="order" value="1"/>
    <property name="templateMode" value="HTML5"/>
    <property name="cacheable" value="false"/>
</bean>

<bean id="templateEngine"
      class="org.thymeleaf.spring5.SpringTemplateEngine">
    <property name="templateResolver" ref="templateResolver"/>
</bean>

<bean id="viewResolver" class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
    <property name="templateEngine" ref="templateEngine"/>
    <property name="characterEncoding" value="UTF-8"/>
</bean>

4.使用

4.1a标签发送请求

<a th:href="@{/hello}">HelloWorld</a><br/>
<a th:href="@{/user/insertUser.do}">HelloWorld</a><br/>

4.2标签获得后端域中的值

<p th:text="${aaaa}"></p>

4.3 each循环

employee:代表循环变量,${allEmployee}:代表获取响应域中的值 th:each=“循环变量:响应域中的值”

<tr th:each="employee:${allEmployee}">
    <td th:text="${employee.id}"></td>
    <td th:text="${employee.lastName}"></td>
    <td th:text="${employee.email}"></td>
    <td th:text="${employee.gender}"></td>
<tr>

4.4修改，查询，删除携带id

路径用 ’ ’ 参数前带+

<a th:href="@{'employee/'+${employee.id}}">update</a>

4.5单选框

th:field=“ ${employee.gender}" th:field="$ {响应域中的值.值的属性}”

<input type="radio" name="gender" value="1" th:field="${employee.gender}">男
<input type="radio" name="gender" value="0" th:field="${employee.gender}">女

4.6条件判断

<a th:if="${page.hasPreviousPage}" th:href="@{/employee/page/1}">首页</a>

如果${page.hasPreviousPage}为true，则该a标签显示，反之，不显示

4.7 请求拼接

1.RESTful风格

<a th:if="${page.pageNum == num}" th:href="@{'/employee/page/'+${num}}" th:text="'['+${num}+']'"></a>

th:href="@{‘/employee/page/’+ $KaTeX parse error: Expected 'EOF', got '}' at position 6: {num}}̲" 在jsp：href=$ {APP_H}/employee/page?page=num

后端接受

@RequestMapping(value = "/employee/page/{pageNum}",method = RequestMethod.GET)
public String getAllEmployeeByfenye(@PathVariable("pageNum")Integer pageNum, Model model){
    PageInfo<Employee> page = employeeService.getAllEmployee(pageNum);
    model.addAttribute("page",page);
    return "emploeelist";
}

2.普通类型

<a  th:href="@{'/test1?username='+'张三'+'&age=12'}">test3</a>

后端接受

@RequestMapping(value = "/test1")
public String test2(@RequestParam("username") String username, @RequestParam("age") Integer age){
    System.out.println(username);
    System.out.println(age);
    return "index";
}

请添加图片描述