springboot模板（thymeleaf和freemarker）

最新推荐文章于 2024-03-11 18:17:25 发布

易心i

最新推荐文章于 2024-03-11 18:17:25 发布

阅读量298

点赞数

分类专栏： springboot

本文链接：https://blog.csdn.net/weixin_45111741/article/details/103744571

版权

springboot 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.thymeleaf模板

thymeleaf就是html网页
如何使用thymeleaf模板呢？？
首先导入pom依赖

		<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

Spring Boot官方文档建议在开发时将缓存关闭，正式环境要将缓存开启的
那就在application.yml文件中加入下面这行

spring.thymeleaf.cache=false

配置完之后，下面代码来展示了
首先先写一个实体类User

package com.wr.springboot01.entity;

/**
 * @author ruirui
 * @site www.haha.com
 * @company 哈哈公司
 * @create 2019-12-28 14:10
 */
public class User {

    private Integer uid;
    private String uname;
    private String upwd;

    public Integer getUid() {
        return uid;
    }

    public void setUid(Integer uid) {
        this.uid = uid;
    }

    public String getUname() {
        return uname;
    }

    public void setUname(String uname) {
        this.uname = uname;
    }

    public String getUpwd() {
        return upwd;
    }

    public void setUpwd(String upwd) {
        this.upwd = upwd;
    }

    public User(Integer uid, String uname, String upwd) {
        this.uid = uid;
        this.uname = uname;
        this.upwd = upwd;
    }


    public User() {

    }
}

UserController

package com.wr.springboot01.controller;

import com.wr.springboot01.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 ruirui
 * @site www.haha.com
 * @company 哈哈公司
 * @create 2019-12-28 14:09
 * <p>
 * <p>
 * 介绍thymeleaf模板
 */
@Controller
@RequestMapping("/thymeleaf")
public class UserController {

    @RequestMapping("/list")
    public ModelAndView list() {
        ModelAndView mv = new ModelAndView();
        mv.addObject("title", "员工列表");
        List<User> list = new ArrayList<>();

        list.add(new User(1, "zs", "123"));
        list.add(new User(2, "ls", "456"));
        list.add(new User(3, "ww", "789"));
        mv.addObject("users", list);
        mv.addObject("msg", "<span style='color:red'>优秀员工wr</span>");
        mv.setViewName("list");  //跳页面

        return mv;
    }


}

前台HTML页面 list.html
先在网页上写一个提示thymeleaf语法的代码

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

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1" cellpadding="0" cellspacing="0" width="60%" >

    <caption th:text="${title}"></caption>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>密码</th>
    </tr>
    <tr th:each="u:${users}">
        <td th:text="${u.uid}"></td>
        <td th:text="${u.uname}"></td>
        <td th:text="${u.upwd}"></td>
    </tr>


</table>

<p th:utext="${msg}"></p>

</body>

</html>

最后网页显示
在这里插入图片描述

后台主要传了三个东西到前端
mv.addObject("title", "员工列表");  //一段文字
mv.addObject("users", list);  	   //一个集合
mv.addObject("msg", "<span style='color:red'>优秀员工wr</span>");  //一个标签

前端展示主要用了三个语法
th:text   显示一般的文字
th:each  循环遍历集合
th:utext  转义HTML的

thymeleaf展示包含公共页面的两种方案

commen.html
th:fragment

<div th:fragment="h1">
第一部分内容
</div>
<div th:fragment="h2">
    第2部分内容
</div>
<div th:fragment="h3">
    第3部分内容
</div>


<!--展示thymeleaf包含公共页面的方案-->
① th:include
<div th:include="commen.html"></div>
②th:replace   可以选择包含不同的内容
<div th:replace="commen::h2"></div>
<div th:replace="commen::h1"></div>

2.Freemarker模板

学习网站：http://freemarker.foofun.cn/
先配置一下freemarker

在这里插入图片描述
配置好之后就可以直接创建文件了

导入pom依赖

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-freemarker</artifactId>
   </dependency>

<!--可以不加，但是做项目的时候可能会用-->
 <resources>
            <!--解决mybatis-generator-maven-plugin运行时没有将XxxMapper.xml文件放入target文件夹的问题-->
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml</include>
                </includes>
            </resource>
            <!--freemarker模板也读取需要注释标红地方-->
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <!--<include>*.properties</include>-->
                    <!--<include>*.xml</include>-->
                    <!--<include>*.yml</include>-->
                </includes>
            </resource>
        </resources>

application.yml文件的默认配置

spring:
  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/**

前端
list.ftl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>讲解freemarker</title>
</head>
<body>
<h2>取值</h2>
<h3>提供默认值</h3>
welcome 【${name!'未知'}】 to freemarker!

<h3>exists用在逻辑判断</h3>
<#if name?exists>
    ${name}
</#if>

<h2>条件</h2>
<#if sex=='girl'>
		女
<#elseif sex=='boy'>
		男
<#else>
		保密
</#if>

<h2>循环</h2>
<table border="1px" width="600px">
    <thead>
    <tr>
        <td>ID</td>
        <td>角色名</td>
    </tr>
    </thead>
    <tbody>
    <#list roles as role>
    <tr>
        <td>${role.rid}</td>
        <td>${role.rolename}</td>
    </tr>
    </#list>
    </tbody>
</table>

<h2>include</h2>
<#include 'foot.ftl'>

<h2>局部变量(assign)/全局变量(global)</h2>
<#--显示全路径名-->
 <#assign ctx1>
     ${springMacroRequestContext.contextPath}
 </#assign>

<#global ctx2>
    ${springMacroRequestContext.contextPath}
</#global>

${ctx1}和${ctx2}
</body>
</html>

foot.ftl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部</title>
</head>
<body>
所有权归wr所有
</body>
</html>

后台
RoleController

package com.wr.springboot01.controller;

import com.wr.springboot01.entity.Role;
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 ruirui
 * @site www.haha.com
 * @company 哈哈公司
 * @create 2019-12-28 14:09
 * <p>
 * <p>
 * 介绍thymeleaf模板
 */
@Controller
@RequestMapping("/freemarker")
public class RoleController {

    @RequestMapping("/list")
    public ModelAndView list() {
        ModelAndView mv = new ModelAndView();
        mv.addObject("name","zs");
        mv.addObject("sex","guy");
        List<Role> list=new ArrayList<>();
        list.add(new Role(1,"haha1"));
        list.add(new Role(2,"haha2"));
        list.add(new Role(3,"haha3"));
        mv.addObject("roles",list);

        mv.setViewName("list");

        return mv;
    }


}

实体类Role

package com.wr.springboot01.entity;

/**
 * @author ruirui
 * @site www.haha.com
 * @company 哈哈公司
 * @create 2019-12-28 15:23
 */
public class Role {
    private Integer rid;
    private String rolename;

    public Integer getRid() {
        return rid;
    }

    public void setRid(Integer rid) {
        this.rid = rid;
    }

    public String getRolename() {
        return rolename;
    }

    public void setRolename(String rolename) {
        this.rolename = rolename;
    }

    public Role(Integer rid, String rolename) {
        this.rid = rid;
        this.rolename = rolename;
    }

    public Role() {
    }
}

最后显示的页面效果
在这里插入图片描述