本文共 6058 字，大约阅读时间需要 20 分钟。

thymeleaf模板

关于Thymeleaf的优点，我只说一条：它就是html页面。

下面直接上代码 导入相关pom依赖

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

Spring Boot官方文档建议在开发时将缓存关闭，那就在application.properties文件中加入下面这行

spring.thymeleaf.cache=false

正式环境还是要将缓存开启的 补充：在企业开发中一般不采用默认的.properties文件，一般采用.yml文件,原因是yml文件所展现的树形结构展示。 thymeleaf模板引擎的应用语法 UserController

package com.zxp.springboot1.controller;import com.zxp.springboot1.entity.User;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.servlet.ModelAndView;import java.util.ArrayList;import java.util.List;/** * @author笑笑 * @site www.xiaoxiao.com * @company * @create 2019-11-30 16:29 * * 介绍thymeleaf模板引擎的应用 * 连接到HTML页面 * 介绍三个常用的 * 字符串 * 集合 *前台HTML代码 */@Controller@RequestMapping("/thymeleaf")public class UserController {
       @RequestMapping("/list")    public  ModelAndView list(){
   //        System.out.println("list...");        ModelAndView mv=new ModelAndView();        mv.addObject("title","员工列表");//        造数据        List
   
     list=new ArrayList<>();        list.add(new User(""+1,"zs",123+""));        list.add(new User(""+1,"ls",456+""));        list.add(new User(""+1,"ww",789+""));//        返数据到页面        mv.addObject("users",list);//        为啥需要讲解HTML转义  通过th:utext渲染，在后台就可以让前台有效果        mv.addObject("msg","
    优秀员工zs");        mv.setViewName("list");        return mv;    }}
   

User

package com.zxp.springboot1.entity;import lombok.Data;/** * @author笑笑 * @site www.xiaoxiao.com * @company * @create 2019-12-27 20:14 * * 模拟一些数据 */@Datapublic class User {
       private  String uid;    private  String uname;    private  String pwd;    public User(String uid, String uname, String pwd) {
           this.uid = uid;        this.uname = uname;        this.pwd = pwd;    }    public User() {
       }}

HTML:el表达式已经不可行

    
       
   ${
   title}

thymeleaf如何得到值

    
       
   
   
   
   
        
            
     
              
id
              
姓名
              
密码
         
         
                    
              
              
         
    
   
   

提示标签

Freemarker模板

导入pom依赖

   	
    
     org.springframework.boot
    	
    
     spring-boot-starter-freemarker
       
   

application.yml文件的默认配置

server:  port: 80  servlet:#    Freemarker设置局部变量(assign)/全局变量(global)  获取的是项目名    context-path: /xiaoxiao    #    去除浏览器缓存  默认为truespring:  thymeleaf:    cache: false  freemarker:    # 设置模板后缀名    suffix: .ftl    # 设置文档类型    content-type: text/html    # 设置页面编码格式    charset: UTF-8    # 设置页面缓存    cache: false    # 设置ftl文件路径，默认是/templates，为演示效果添加role    template-loader-path: classpath:/templates/role  mvc:        static-path-pattern: /static/**

补充

对其后 测试application.yml文件的默认配置 list.ftl

    
       Freemarker知识点

RloeController

package com.zxp.springboot1.controller;import com.zxp.springboot1.entity.User;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.servlet.ModelAndView;import java.util.ArrayList;import java.util.List;/** * @author笑笑 * @site www.xiaoxiao.com * @company * @create 2019-11-30 16:29 * * */@Controller@RequestMapping("/freemarker")public class RloeController {
       @RequestMapping("/list")    public  ModelAndView list(){
           System.out.println("list...");        ModelAndView mv=new ModelAndView();        mv.setViewName("list");        return mv;    }}

讲解Freemarker 补充 Freemarker .ftl文件原来是没有的 步骤 或者自己手动修改后缀名 对应前台代码 list.ftl

    
       
如何取值
提供默认值
welcome 【${
   name!'未知'}】 to freemarker!
exists用在逻辑判断
<#if name?exists>    ${
   name}
   
条件
<#if sex=='girl'>		女<#elseif sex=='boy'>		男<#else>		保密
   
循环
   
         <#list roles as role>    
        
         
              
ID
              
角色名
         
        
        
     
              
${
   role.rid}
              
${
   role.rname}
         
                 
   
include 包含
<#include 'foot.ftl'>
设置局部变量(assign)/全局变量(global)
<#--获取的是项目名--> <#assign ctx1>     ${
   springMacroRequestContext.contextPath} 
   <#global ctx2>    ${
   springMacroRequestContext.contextPath}
   ${
   ctx1}和${
   ctx2}

foot.ftl

    
       备案号：湘ICP备xxxxxxx号Copyright © 2018-2019 xiaoxiap 版权所有

对应的后台代码

Role

package com.zxp.springboot1.entity;import lombok.Data;/** * @author笑笑 * @site www.xiaoxiao.com * @company * @create 2019-12-27 21:36 */@Datapublic class Role {
       private  String rid;    private  String rname;    public Role(String rid, String rname) {
           this.rid = rid;        this.rname = rname;    }    public Role() {
       }}

RloeController

package com.zxp.springboot1.controller;import com.zxp.springboot1.entity.Role;import com.zxp.springboot1.entity.User;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.servlet.ModelAndView;import java.util.ArrayList;import java.util.List;/** * @author笑笑 * @site www.xiaoxiao.com * @company * @create 2019-11-30 16:29 * *讲解Freemarker知识点 *如何取值 *提供默认值 *exists用在逻辑判断 *条件 *循环 *include 包含 *设置局部变量(assign)/全局变量(global) */@Controller@RequestMapping("/freemarker")public class RloeController {
       @RequestMapping("/list")    public  ModelAndView list(){
           System.out.println("list...");        ModelAndView mv=new ModelAndView();        mv.setViewName("list");//        如何取值        mv.addObject("name","zs");//        条件 exists用在逻辑判断        mv.addObject("sex","gay");//        循环        List
   
     list=new ArrayList<>();        list.add(new Role("1","超管"));        list.add(new Role("1","财务"));        list.add(new Role("1","仓管"));        mv.addObject("roles",list);        return mv;    }}
   

运行结果

=使用功能成功运行 取值、提供默认值 逻辑 前台 后台

无法得到取值

条件逻辑 前台

后台

无法得到取值平且没有默认值 循环逻辑 前台 后台 无法得到循环 包含逻辑 前台 后台 无法得到包含的页面直接报错 设置局部变量(assign)/全局变量(global)逻辑 前台 后台 没有得到项目名（设置局部变量(assign)/全局变量(global)

补充thymeleaf包含公共区域的方案

比较方便好用

代码演示

创建common.html

   
    公共区域1
   
   
   
    公共区域2
   
   
    公共区域3
   

list.html

结果演示

方案一 方案二

转载地址：http://ourzi.baihongyu.com/