1、在昨天的项目的pom.XML中添加依赖：内容在前一篇springboot中

<dependency>

    <groupId>org.springframework.boot</groupId>

    <artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>　　

　　2、application.properties中添加thymeleaf的配置信息：

spring.thymeleaf.prefix=classpath:/templates/　　　　　　　　　　　　//视图解析器的前缀放在这个文件夹

spring.thymeleaf.suffix=.html　　　　　　　　　　　　　　　　　　　 //后缀

spring.thymeleaf.mode=HTML5　　　　　　　　　　　　　　　　　　//模式

spring.thymeleaf.encoding=UTF-8　　　　　　　　　　　　　　　　  //编码格式

spring.thymeleaf.content-type=text/html　　　　　　　　　　　　　　 //文本html语言

spring.thymeleaf.cache=false　　　　　　　　　　　　　　　　　　  //不用缓存

spring.resources.chain.strategy.content.enabled=true

spring.resources.chain.strategy.content.paths=/**

　　3、测试：修改控制器

　　　　1）@RestController改为@Controller

　　　　添加：

　　　　   @RequestMapping("/demo01")

    　　　　public String demo01(Model model){

      　　　　  return "index/demo01";

  　　　　  }

　　　　2）因为设置了前缀，所以在templates中创建index文件夹，并在中间创建demo01.html。

　　　　3）maven  update project，打开网址localhost:8080/index/demo01/，显示页面，测试成功。

　　4、thymeleat的使用：

　　　　1）替换文本，使用 th:text="${name}" 语句

　　　　　　a、控制器中：

　　　　　　　　model.addAttribute("name","赵一");

　　　　　　b、demo01中

　　　　　　<div th:text="${name}">我是div1</div>。

　　　　　　刷新页面，测试成功。

　　　　2）替换HTML，使用 th:utext="${name}"语句，HTML中会把控制器中设置的html格式显示出来。

　　　　　　a、控制器中

　　　　　　model.addAttribute("name","<b><font size='+2' color='red'>赵一</font></b>");

　　　　　　b、demo01中

　　　　　　<div th:utext="${name}">我是div2</div>

　　　　　　刷新页面，测试成功。

　　　　3）循环，使用 th:each="iterator:${Collection}"语句

　　　　　　a、创建Product表，是domain，有produceId、produceName、producePrice三个成员属性。

　　　　　　b、控制器中：创建商品的集合，将集合添加到model中。

　　　　　　@RequestMapping("/demo01")

  　　　　　 public String demo01(Model model){　

       　　　  　　 List<Product>list=new ArrayList<Product>();

       　　     　　 for(int i=0;i<10;i++){

           　　　　  　　Product product=new Product(i,"猫"+i,i+2.00);

          　　 　　　　  list.add(product);

       　　　　　  }

      　　　　      model.addAttribute("productList", list);

        　　　　    return "index/demo01";

    　　　　  }

　　　　　　c、demo01中，创建表格：

　　<table border="1px"  class="table">

            <thead>

                <tr>

                    <th>商品Id</th>

                    <th>商品名称</th>

                    <th>商品价格</th>                

                </tr>

               </thead>

               <tbody>

                   <tr th:each="iterator:${productList}">

                       <td th:text="${iterator.produceId}">商品Id</td>

                       <td th:text="${iterator.produceName}">商品名称</td>　　　　　

                       <td th:text="${iterator.producePrice}">商品价格</td> 

                   </tr>              

               </tbody>

        </table>

刷新页面，测试成功。

　　　　4）循环路径：比如图片等等。${}和字符串拼接需“+”号，所以下面有个+号，又因为“/”是特殊符号，所以下面/img/外面添加@{}。

　　　　<img th:src="@{/img/}+${iterator.produceImage}"

　　　　5）判断：

　　　　　　th:text="logic?true:false"

　　　　　　a、使用三元运算符

　　　　　　<td th:text="${iterator.producePrice}>6?10.0:1.00">商品价格</td>　　//大于6，显示10.0，小于等于6显示1.00，三元运算符。

　　　　　　b、th:if="logic"，当表达式成立显示这一栏。

　　　　　　　　<td th:if="${iterator.producePrice}>6">热销商品</td>

　　　　　　　　如果价格>6，显示热销商品，小于6，不显示这一栏。

 

　　　　6）替换class：外面引用了bootstrap

　　　　　　<lable class="lable lable-sucess">

　　　　　　　　<td th:class="${iterator.producePrice>6?'lable lable-sucess':'lable lable-danger'}">商品价格</td>

　　　　　　<lable>