SpringBoot入门建站全系列（八）集成模板引擎(thymeleaf)渲染页面

SpringBoot入门建站全系列（八）集成模板引擎(thymeleaf)渲染页面

说到页面渲染，这里不得不给大家科普一下：

• 1. html文件负责显示页面，后台数据可以通过ajax方式获取，如果数据完全使用ajax获取，这样页面和后端就没什么联系，这时候就可以成为前后端分离。

• 2. jsp页面是一种页面渲染方式，它是对jsp文件解析后，将后台数据填充到html页面并返回到前端，这种方式是非前后端分离的，所以，脱离了容器，jsp页面啥都不是，根本打不开。jsp可以写java代码，可以写逻辑，功能很强大，但是也是它逐渐被抛弃的原因。

• 3. 模板引擎, 目前是比较流行的一种写法，或许你会问：前后端分离已经很好用了，为啥还要用模板引擎？原因是这样的，前后端分离的页面，是不经过容器控制的，所以安全框架不能对它进行过滤，这是其一，其二、前后端分离的页面，数据是ajax异步获取的，所以首次打开页面时（比如爬虫爬取页面，未执行js等），获取到的只是一些html元素，没有数据填充，而模板引擎可以在获取html文件时就将数据填充进去。

• 4. 模板引擎也是依赖于后端容器，页面中的内容使用标签进行替换。

本文不讲前后端分离，先讲下模板引擎，Springboot支持很多模板引擎，thymeleaf算是比较好用的一种。

项目地址：
品茗IT-同步发布

品茗IT 提供在线支持：

一键快速构建Spring项目工具

一键快速构建SpringBoot项目工具

一键快速构建SpringCloud项目工具

一站式Springboot项目生成

Mysql一键生成Mybatis注解Mapper

如果大家正在寻找一个java的学习环境，或者在开发中遇到困难，可以加入我们的java学习圈，点击即可加入，共同学习，节约学习时间，减少很多在学习中遇到的难题。

一、Maven依赖

需要引入spring-boot-starter-thymeleaf和spring-boot-starter-web。

    4.0.0
    
        com.cff
        springbootwork
        0.0.1-SNAPSHOT
    
    Thymeleaf
    Thymeleaf
    http://maven.apache.org

    
        UTF-8
        UTF-8
        1.8
    

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

父pom管理了所有依赖jar包的版本，地址： https://www.pomit.cn/spring/SpringBootWork/pom.xml

二、thymeleaf配置

SpringBoot对thymeleaf做了很好的整合，隐藏了大部分细节，所以，我们只需要在Springboot的配置文件（一般是用application.properties）中加入以下配置即可：

spring.thymeleaf.cache=false
spring.thymeleaf.enabled=true
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

这里，

• spring.thymeleaf.cache是对页面不缓存，这样修改了模板文件，立即生效。

• spring.thymeleaf.prefix指明了模板文件的地址

• spring.thymeleaf.suffix 指明了模板文件后缀。

另外三个参数就不说了，顾名思义。

三、thymeleaf的模板页面

这里建了一个模板文件detail.html文件。乍一看，它和html没啥区别，其实区别真不大，只是里面有thymeleaf的标签。

里面的th:开头的都是thymeleaf的标签，如th:href、th:onclick、th:text等。

    
    
    
    
    

    
    
    
    
    
    




    

        
    



    

        

            

                

                    

                        
Spring序列化布尔类型错误
                    
                    

                        【软件使用】
                        2019-03-06
                        未知
                        
                        匿名
                        点赞：1
                        
                        编辑
                    
                    

                    

                        

                            
                        
                    
                    
                
               
            
            

            

                favorite_border赞
            
        
    




    

        

            

                
网站简介.
                

                    本站提供多领域的技术解决方案，包括web网站、小程序、开源项目、h5等。
                
            
            

        
    
    

        

            Copyright (c) 2018-present, 陈付菲.
            
        
    

四、thymeleaf的页面控制器

使用模板引擎，需要我们自己控制ModelAndView。这里的ModelAndView的viewName是detail，结合thymeleaf的配置，就是找spring.thymeleaf.prefix + viewName + spring.thymeleaf.suffix 指定的这个文件。

package com.cff.springbootwork.thymeleaf.web;

import java.util.Date;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import com.cff.springbootwork.thymeleaf.dto.FQuestionInfo;
import com.cff.springbootwork.thymeleaf.dto.ResultCode;
import com.cff.springbootwork.thymeleaf.dto.ResultModel;

@RestController
@RequestMapping("/thymeleaf")
public class ThymeleafRest {
    @RequestMapping("/page")
    public  ModelAndView getThymeleaf() {
        ModelAndView modelAndView = new ModelAndView("detail");

        try {
            FQuestionInfo fQuestionInfo = new FQuestionInfo();
            fQuestionInfo.setAuthor("cff");
            fQuestionInfo.setCatory("大爷");
            fQuestionInfo.setId(123123123L);
            fQuestionInfo.setOpen(1);
            fQuestionInfo.setStar(123);
            fQuestionInfo.setTitle("我就是一个测试模板引擎的实体而已。");

            fQuestionInfo.setCreateTime(new Date());

            ResultModel retOk = ResultModel.ok(fQuestionInfo);
            modelAndView.addObject("data", retOk);
        } catch (Exception e) {
            e.printStackTrace();
            modelAndView.addObject("data", new ResultModel(ResultCode.CODE_00004));
        }

        return modelAndView;
    }
}

这里面，FQuestionInfo 是保存数据的一个实体，ResultModel是一个统一返回的实体，其实可以写成一个实体，都是作为返回数据的。

modelAndView使用addObject("data", retOk);将数据传递给viewName指定的模板文件，解析后返回一个html文件给浏览器。

页面如下：

在这里插入图片描述

五、过程中使用到的实体

详细完整的实体，可以访问品茗IT-博客《SpringBoot入门建站全系列（八）集成模板引擎(thymeleaf)渲染页面》

快速构建项目

Spring组件化构建

喜欢这篇文章么，喜欢就加入我们的Java学习圈(点击加入或下方扫码)一起讨论SpringBoot技术吧!

品茗IT交流群