springboot之thymeleaf与freemarker模板

1、springboot之thymeleaf模板:

关于Thymeleaf的优点,我只说一条:它就是html页面。下面直接上代码

1-1、相关pom依赖:
<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
1-2、关于缓存:

Spring Boot官方文档建议在开发时将缓存关闭,那就在application.properties文件中加入下面这行
spring.thymeleaf.cache=false
正式环境还是要将缓存开启的

1-3、使用:表格的使用

在html头部加入一行代码,便于编写代码的时候有自动提示:

<html xmlns:th="http://www.thymeleaf.org">

1-3-1:页面代码:

<table border="1px" width="600">
    <thead>
        <tr>
            <td>用户id</td>
            <td>用户姓名</td>
            <td>用户描述</td>
        </tr>
    </thead>
    <tbody>
        <tr th:each="user:${users}">
            <td th:text="${user.userid}"></td>
            <td th:text="${user.userName}"></td>
            <td th:text="${user.desc}"></td>
        </tr>
    </tbody>
</table>

1-3-2:controller代码:

   @RequestMapping("/user/list")
    public ModelAndView list(){
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("user/list");
        modelAndView.addObject("title","用户列表");
        List list = new ArrayList();
        list.add(new User(1,"张三","神经兮兮"));
        list.add(new User(2,"李四","正正经经"));
        modelAndView.addObject("users",list);
        return modelAndView;
    }

1-3-3:运行结果
在这里插入图片描述

1-4、下拉框的使用:

th:each:存放集合
th:value:存放值
th:text:页面展示

<select>
    <option th:each="user:${users}" th:value="${user.userid}" th:text="${user.userName}"></option>
</select>

2:springboot之freemarker模板

2-1:导入pom依赖
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-freemarker</artifactId>
   </dependency>
2-2:application.yml文件的默认配置
reemarker:
    # 设置模板后缀名
    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/**
	
	
2-3:使用

controller后台代码:


    @RequestMapping("/role/list")
    public ModelAndView roleList(){
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("list");
        modelAndView.addObject("name",null);
        modelAndView.addObject("sex","giry");
        List list = new ArrayList();
        list.add(new role(1,"经理","办公吩咐"));
        list.add(new role(2,"秘书","服从命令"));
        modelAndView.addObject("roles",list);

        return modelAndView;
    }


2-3-1:取值

注:! 很重要,如果没有加上,则遇到null类型的就会报错。

welcome 【${name!"未知内容"}】 to page
2-3-2:非空判断:
<h3>exists用在逻辑判断</h3>
<#if name?exists>
    ${name}
</#if>
<#if name??>
    hhh
</#if>
2-3-3:条件表达式
<#if sex="boy">
    男
<#elseif sex="giry">
女
<#else>
保密
</#if>

在这里插入图片描述

2-3-4:循环

页面代码:

<table border="1px" width="600">
<thead>
<tr>
    <td>角色id</td>
    <td>角色姓名</td>
    <td>角色描述</td>
</tr>
</thead>
<tbody>
<#list roles as role>
<tr>
     <td>${role.roleid}</td>
    <td>${role.roleName}</td>
    <td>${role.desc}</td>
</tr>
</#list>
</tbody>
</table>

在这里插入图片描述

2-3-5:设置局部变量(assign)、全局变量(global)
<#--<h5>将项目名赋值给cxt1这个变量。这边的作用域是当前页面</h5>-->
<#assign ctx1>
    ${springMacroRequestContext.contextPath}
</#assign>
<#--<h5>将项目名赋值给cxt2这个变量。这边的作用域是整个项目</h5>-->
<#global ctx2>
    ${springMacroRequestContext.contextPath}
</#global>

${ctx1}和${ctx2}

在这里插入图片描述

2-3-6:includ包含
<#include 'foot.ftl'>

在这里插入图片描述
foot.ftl代码:
在这里插入图片描述controller代码:
在这里插入图片描述

3、thymeleaf与freemarker的区别:

3-1: thymeleaf遍历集合的方式是:

th:each=" 自定义的键 : ${集合的键}"

且遍历值的时候是放在标签里:

<td th:text="${自定义的键.属性}"></td>

3-2:freemarker遍历方式:

<#list 集合 as 自定义键> </#list>

且遍历值的时候是放在标签的中间,和原始的jsp一样:

<td> th:text="${自定义的键.属性}"</td>

猜你喜欢

转载自blog.csdn.net/qq_41320105/article/details/87549160