springboot-模板引擎

566 阅读1分钟

这是我参与8月更文挑战的第25天,活动详情查看:8月更文挑战

模板引擎

什么是模板引擎

是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档 ,比如JSP就是一个模板引擎。

有时候经常需要根据后端返回的json数据,然后来生成html,再渲染页面。 ,模板引擎就是写一个页面模板,将一些动态的值也能通过表达式填充到指定位置

导入依赖

           org.springframework.boot            spring-boot-starter-thymeleaf

源码

ThymeleafProperties.class

相当于视图解析器,为资源加上前缀后缀

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {
​
private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;
​
   //指定的路径为templates,前缀即为路径
public static final String DEFAULT_PREFIX = "classpath:/templates/";
​
   //文件后缀为html
public static final String DEFAULT_SUFFIX = ".html";

资源位置 tempates

通过controller跳转资源,需要把资源放到templates目录下

而且templates的资源只允许controller访问

image.png

controller

视图名:classpath:/templates/文件名.html

//   templates目录下的所有资源,只有controller才能访问
//   因为没有视图解析器,所以需要模板引擎的支持 thymeleaf
@Controller
public class IndexController {
​
   
//   设置首页
   @RequestMapping("/index")
   public String index(){
       return "index";
  }
   
  @RequestMapping("/test")
   public String test(Model model){
       model.addAttribute("message","YY");
       List<Object> lists = new ArrayList();
       lists.add("YZY");
       lists.add("YY");
//       模板引擎将视图名拼接成classpath:/templates/test.html
       return "test";
  }
}

获取参数

<h1>test</h1>
<!--直接输出可能不会显示-->
${message}

image.png

改良版

<html lang="en" xmlns:th="http://www.thymeleaf.org"><!--使用thymeleaf语法,类似vue
           th:属性-->
<p th:text="${message}"></p>

image.png

语法

image.png

<!--遍历集合-->
<h2 th:each="list:${lists}" th:text="${list}"></h2>
<!--也可以写在内容中-->
<h2 th:each="list:${lists}" >[[ ${list} ]]</h2>

获取静态资源需要@{路径}

// src的默认路径是static路径下(起手加/) static
th:src = "@{/img/ss.png}"
th:href = "@{/css/**}"

复用代码:

复用组件放在一个公用文件内,并用th:fragment标记

<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0"th:fragment="navBar">

调用common文件夹的common文件中的sideBar组件

th:insert = '@{common/common::sideBar}'

判断

<td th:text="${employee.getGender()==0?'女':'男'}"></td>