如今又了vue这样的前后台分离的好用神奇，为什么还要用 thymeleaf，这种Java渲染的框架呢？
VUE虽然好，但是也有不完美的，对于SEO也不是很友好，所以我这里采用了thymeleaf作为渲染引擎

第一步：pom引入thymeleaf 对应依赖
springboot的其他依赖这里不再列举

        <!--thymeleaf 模板引擎-layout母版使用 -->
        <dependency>
            <groupId>nz.net.ultraq.thymeleaf</groupId>
            <artifactId>thymeleaf-layout-dialect</artifactId>
            <version>2.3.0</version>
        </dependency>

        <!--thymeleaf 模板引擎-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
		    <!--lombak插件(减少代码)-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <scope>provided</scope>

第二部：编写配置

spring:
  thymeleaf:
    cache: false
      # 以下是默认配置
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: UTF-8

第三步：编写base.html母版

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:fragment="head">
    <meta charset="UTF-8">
    <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">模板</title>
</head>
<body>
<div>我是header</div>
<ul>
    <li th:each="c:${menus}" th:text="${c.title}"></li>
</ul>
<div layout:fragment="content">
    neirong
</div>
<div>footer</div>
</body>
</html>

第四步：编写article.html文件

<!DOCTYPE html>
<html lang="en"  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>[[${article.title}]]</title>
    <meta name="description" th:content="@{article.description}" content=""/>
    <meta name="keywords" th:content="@{article.keywords}"/>
</head>
<body>
<div layout:fragment="content">
    <div>
        作者：[[${article.auth}]]
        时间：[[${article.createTime}]]
        标题：[[${article.title}]]
        <br/>
        两个中括号相当于th:text，对含有 HTML 标签的内容自动进行字符转义。
        内容：[[${article.content}]]
         <br/>
        一个中括号加一个小括号相当于th:utext，对含有 HTML 标签的内容不进行字符转义。
        内容：[(${article.content})]
    </div>
    <div>
        相关文章1
        <p th:inline="text">
            [# th:each="a : ${list}"]
                [(${a.title})]
            [/]
        </p>
    </div>
    <div>
        相关文章2
        <p th:inline="text">
            [# th:each="a : ${article.list}"]
            [(${a.title})]
            [/]
        </p>
    </div>
</div>
</body>
</html>

第五步：编写ArticleController文件
5.1、Article实体
 

import lombok.Builder;
import lombok.Data;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

/**
 * TODO
 *
 * @author
 * @date
 */
@Data
@Builder
public class Article {
    private Integer id;
    private String title;
    private String auth;
    private String description;
    private String keywords;
    private Date createTime;
    private String content;
    private List<Article> list = new ArrayList<>();
}

5.2、Menus实体


import lombok.Builder;
import lombok.Data;
@Data
@Builder
public class Menus {
    private Integer id;
    private String title;
}



import com.fdas.openplat.common.annotation.PassToken;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.servlet.ModelAndView;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
@Controller
public class ArticleController {

    @PassToken
    @GetMapping("/article/{sub}")
    public ModelAndView article(ModelAndView model, @PathVariable(value="sub") String sub){
        Article buildRel1 = Article.builder().auth("zhangs").description("描述").content("文章内容").title("相关文章1").keywords("关键词").createTime(new Date()).id(1).build();
        Article buildRel2 = Article.builder().auth("zhangs").description("描述").content("文章内容").title("相关文章2").keywords("关键词").createTime(new Date()).id(1).build();
        List<Article> list = new ArrayList<>();
        list.add(buildRel1);
        list.add(buildRel2);
        Article build = Article.builder().auth("zhangs").description("描述").content("<ap>文章内容</p>").title("标题").keywords("关键词").createTime(new Date()).id(1).list(list).build();
        model.addObject("article", build);
        model.addObject("list", list);
        // templates下的文件名
        model.setViewName("article");
        return model;
    }
}

第六步：编写 GlobalController 文件


import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ModelAttribute;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 页面公共部分数据定义
 */
@ControllerAdvice
public class GlobalController {

    @ModelAttribute(name = "categories")
    public Map<String,Object> categories(){
        Map map = new HashMap<>();
        map.put("title","tile");
        return map;
    }
    @ModelAttribute(name = "menus")
    public List<Menus> menus(){
        List<Menus> list = new ArrayList<>();
        Menus men = Menus.builder().id(1).title("菜单1").build();
        Menus men2 = Menus.builder().id(2).title("菜单2").build();
        list.add(men);
        list.add(men2);
        return list;
    }
}

相关推荐
https://fanlychie.github.io/post/thymeleaf.html
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

文档

https://www.docs4dev.com/docs/zh/thymeleaf/3.0/reference/using_thymeleaf.html#standard-expression-syntax
    

最后修改于 2022-03-16 11:31:49
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
上一篇