1. 搜索页面Thymeleaf渲染实战

1.1 介绍一下Thymeleaf模板引擎

Thymeleaf 是一种模板语言，它包含数据模型（Data）、模板（Template）、模板引擎（Template Engine）和结果文档（Result Documents）。

数据模型数据是信息的表现形式和载体，可以是符号、文字、数字、语音、图像、视频等。数据和信息是不可分离的，数据是信息的表达，信息是数据的内涵。数据本身没有意义，数据只有对实体行为产生影响时才成为信息。
模板模板，是一个蓝图，即一个与类型无关的类。编译器在使用模板时，会根据模板实参对模板进行实例化，得到一个与类型相关的类。
模板引擎模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
结果文档一种特定格式的文档，比如用于网站的模板引擎就会生成一个标准的HTML文档。

Thymeleaf 是一款用于渲染XML/XHTML/HTML5内容的模板引擎。类似JSP，Velocity，FreeMaker等，它也可以轻易的与Spring MVC等Web框架进行集成作为Web应用的模板引擎。与其它模板引擎相比， Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用。

1.2 SpringBoot整合Thymeleaf

1.2.1 工程创建

在mall-web下创建搜索页面渲染工程mall-search-web坐标如下：

<groupId>com.xz</groupId>
<version>0.0.1-SNAPSHOT</version>
<artifactId>mall-search-web</artifactId>

在mall-web中引入如下依赖：

<dependencies>
    <!--web起步依赖-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

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

    <!--Nacos-->
    <dependency>
        <groupId>com.alibaba.cloud</groupId>
        <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
    </dependency>
    <dependency>
        <groupId>com.alibaba.cloud</groupId>
        <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
    </dependency>
</dependencies>

bootstrap.yml:

server:
  port: 8085
spring:
  application:
    name: mall-websearch
  cloud:
    nacos:
      config:
        file-extension: yaml
        server-addr: xx.xx.xx.xx:8848
      discovery:
        #Nacos的注册地址
        server-addr: xx.xx.xx.xx:8848
  thymeleaf:
    cache: false
    suffix: .html
    encoding: UTF-8
    prefix: classpath:/templates/
#日志配置
logging:
  pattern:
    console: "%msg%n"

创建启动类com.xz.mall.WebSearchApplication:

@SpringBootApplication
public class WebSearchApplication {

    public static void main(String[] args) {
        SpringApplication.run(WebSearchApplication.class, args);
    }

}

1.2.2 访问一个静态网页

我们会把所有样式、图片、js放在/resources/static下，对应的html放到/resources/templates目录下。

注意将search.html中所有相对路径换成绝对路径，也就是将"./"换成"/",把search.html中头部的<html>换成<html xmlns:th="http://www.thymeleaf.org">

创建控制器com.xz.mall.search.controller.SearchController，代码如下:

@Controller
@RequestMapping(value = "/web/search")
public class SearchController {

    /**
     * 搜索页面跳转
     */
    @GetMapping
    public String search() {
        return "search";
    }

}

tips: 注意一定要是@Controller，不能是@RestController 注解，如果写成了@RestController注解的话，会直接返回 search 字符串，不会返回对应的html页面的。

最后访问http://localhost:8085/web/search，即可查看你的静态页面。

总结：

本篇主要介绍了一下什么是Thymeleaf模板引擎，它能干什么，以及简单的一个SpringBoot整合Thymeleaf的示范。

SpringCloudAlibaba云商场-商品详情页实现（一）

1. 搜索页面Thymeleaf渲染实战

1.1 介绍一下Thymeleaf模板引擎

1.2 SpringBoot整合Thymeleaf

1.2.1 工程创建

1.2.2 访问一个静态网页

总结：