1.pom.xml文件
- "1.0" encoding="UTF-8"?>
- <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
- <modelVersion>4.0.0modelVersion>
- <parent>
- <groupId>org.springframework.bootgroupId>
- <artifactId>spring-boot-starter-parentartifactId>
- <version>2.7.3version>
- <relativePath/>
- parent>
- <groupId>com.itgroupId>
- <artifactId>028-thymeleaf-courseartifactId>
- <version>0.0.1-SNAPSHOTversion>
-
- <properties>
- <java.version>1.8java.version>
- properties>
- <dependencies>
-
-
- <dependency>
- <groupId>org.springframework.bootgroupId>
- <artifactId>spring-boot-starter-thymeleafartifactId>
- dependency>
-
- <dependency>
- <groupId>org.springframework.bootgroupId>
- <artifactId>spring-boot-starter-webartifactId>
- dependency>
-
- <dependency>
- <groupId>org.springframework.bootgroupId>
- <artifactId>spring-boot-starter-testartifactId>
- <scope>testscope>
- dependency>
- dependencies>
-
- <build>
- <plugins>
- <plugin>
- <groupId>org.springframework.bootgroupId>
- <artifactId>spring-boot-maven-pluginartifactId>
- plugin>
- plugins>
- build>
-
- project>
- server.port=9001
- server.servlet.context-path=/myboot
-
- #在开发阶段,关闭模板缓存,让修改立即生效
- spring.thymeleaf.cache=false
-
- #编码格式
- spring.thymeleaf.encoding=UTF-8
-
- #模板的类型(默认是html)
- spring.thymeleaf.mode=HTML
-
- #模板的前缀:类路径的classpath:/templates/
- spring.thymeleaf.prefix=classpath:/templates/
-
- #后缀
- spring.thymeleaf.suffix=.html
3.resources/static目录下新建index.html
- html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>index.htmltitle>
- head>
- <body>
- <h3>index.html------学习模板thymeleaf的语法h3>
- <a href="tpl/expression1">标准变量表达式a>
- <br/>
- <a href="tpl/expression2">选择变量表达式a>
- <br/>
- <a href="tpl/link">链接表达式a>
- body>
- html>
4.新建SysUser实体类
- package com.it.entity;
-
- public class SysUser {
- private Integer id;
- private String name;
- private String sex;
- private Integer age;
-
- public SysUser() {
- }
-
- public SysUser(Integer id, String name, String sex, Integer age) {
- this.id = id;
- this.name = name;
- this.sex = sex;
- this.age = age;
- }
-
- @Override
- public String toString() {
- return "SysUser{" +
- "id=" + id +
- ", name='" + name + '\'' +
- ", sex='" + sex + '\'' +
- ", age=" + age +
- '}';
- }
-
- public Integer getId() {
- return id;
- }
-
- public void setId(Integer id) {
- this.id = id;
- }
-
- public String getName() {
- return name;
- }
-
- public void setName(String name) {
- this.name = name;
- }
-
- public String getSex() {
- return sex;
- }
-
- public void setSex(String sex) {
- this.sex = sex;
- }
-
- public Integer getAge() {
- return age;
- }
-
- public void setAge(Integer age) {
- this.age = age;
- }
- }
5.ThymeleafController类
- package com.it.controller;
-
- import com.it.entity.SysUser;
- import org.springframework.stereotype.Controller;
- import org.springframework.ui.Model;
- import org.springframework.web.bind.annotation.GetMapping;
- import org.springframework.web.bind.annotation.RequestMapping;
- import org.springframework.web.bind.annotation.ResponseBody;
-
- import javax.jws.WebParam;
-
- @Controller
- @RequestMapping("/tpl")
- public class ThymeleafController {
-
-
- //标准变量表达式
- @GetMapping("/expression1")
- public String expression1(Model model){
- //添加数据到model
- model.addAttribute("site","www.baidu.com");
- model.addAttribute("myuser",new SysUser(1001,"小绿","女",22));
-
- //指定视图
- return "expression1";
- }
-
- //选择变量表达式
- @GetMapping("/expression2")
- public String expression2(Model model){
- //添加数据到model
- model.addAttribute("site2","www.bibili.com");
- model.addAttribute("myuser2",new SysUser(1002,"小王","男",26));
-
- //指定视图
- return "expression2";
- }
-
-
- //链接表达式
- @GetMapping("/link")
- public String link(Model model){
- model.addAttribute("userId",1003);
- return "link";
- }
-
- //测试链接表达式的地址
- @GetMapping("/queryAccount")
- @ResponseBody
- public String queryAccount(Integer id){
- return "queryAccount,参数id="+id;
- }
-
- //测试链接表达式有两个参数的地址
- @GetMapping("queryUser")
- @ResponseBody
- public String queryUser(String name,Integer age){
- return "queryUser,有两个参数:name="+name+",age="+age;
- }
-
-
-
- }
6.resources/template目录下新建expression1.html文件
- html>
- <html lang="en" xmlns:th="http://www.thymeleaf.org">
- <head>
- <meta charset="UTF-8">
- <title>标准变量表达式title>
- head>
- <body>
- <h3>标准变量表达式: ${key}h3>
- <div>
- <p th:text="${site}">p>
- <br/>
- <p>获取SysUser对象的属性值p>
- <p th:text="${myuser.id}">idp>
- <p th:text="${myuser.name}">namep>
- <p th:text="${myuser.sex}">sexp>
- <p th:text="${myuser.age}">agep>
- div>
- body>
- html>
resources/template目录下新建expression2.html文件
- html>
- <html lang="en" xmlns:th="http://www.thymeleaf.org">
- <head>
- <meta charset="UTF-8">
- <title>选择变量表达式title>
- head>
- <body>
- <h3>选择变量表达式: *{key}h3>
-
- <p>------------------------------------------------------p>
-
- <p>使用*{}获取SysUser的属性值p>
- <div th:object="${myuser2}">
- <p th:text="*{id}">idp>
- <p th:text="*{name}">namep>
- <p th:text="*{sex}">sexp>
- <p th:text="*{age}">agep>
- div>
-
- body>
- html>
resources/template目录下新建link.html文件
- html>
- <html lang="en" xmlns:th="http://www.thymeleaf.org">
- <head>
- <meta charset="UTF-8">
- <title>链接表达式title>
- head>
- <body>
-
- <h3>链接绝对路径h3>
- <a th:href="@{http://www.baidu.com}">链接到百度a>
-
- <h3>链接的是相对地址h3>
- <a th:href="@{/tpl/queryAccount}">相对地址,没有参数a>
-
- <h3>链接的相对地址,使用字符串链接传递参数h3>
- <a th:href="@{'/tpl/queryAccount?id='+${userId}}">获取model中数据a>
-
- <h3>推荐使用的传参数的方式h3>
- <a th:href="@{/tpl/queryAccount(id=${userId})}">传递一个参数a>
- <a th:href="@{/tpl/queryUser(name='lisi',age='20')}">传递多个参数a>
-
- body>
- html>
7.运行主函数入口类ThymeleafApplication,测试项目
点击链接到百度
链接的是相对地址
链接的相对地址,使用字符串链接传递参数
点击传递一个参数
点击传递多个参数