03-SpringBoot之WEB(一)——整合Freemarker与Thymeleaf


主要记录 Spring Boot 与 Web 开发相关的知识,包括整合Freemarker 和 Thymeleaf。

1. 整合 Freemarker

1.1 添加Freemarker依赖

在pom.xml中添加Freemarker依赖,如下:

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

1.2 添加 Freemarker 模板配置

在application.yml中spring节点下添加Freemarker配置,如下:

  #freemarker 配置
  freemarker:
    allow-request-override: false
    cache: true
    check-template-location: true
    charset: utf-8
    content-type: text/html
    expose-session-attributes: false
    expose-spring-macro-helpers: false
    expose-request-attributes: false
    prefix:
    suffix: .ftl

1.3 案例开发

新建controller包,在 controller 包中创建 FreemarkerController:

import com.springboot.web.model.User;
import com.springboot.web.utils.UUIDUtil;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

@Controller
public class FreemarkerController {
    @RequestMapping("/freemarker")
    public String hello(Map<String, Object> map) {
        User u1 = new User(UUIDUtil.getUUID(), "张三", 23);
        User u2 = new User(UUIDUtil.getUUID(), "李四", 28);
        User u3 = new User(UUIDUtil.getUUID(), "王五", 25);
        List<User> uList = new ArrayList<User>();
        uList.add(u1);
        uList.add(u2);
        uList.add(u3);
        map.put("uList", uList);
        map.put("msg", "Hello Freemarker");
        return "freemarker";
    }

}

在 templates 目录中创建名为 freemarker.ftl 文件,内容如下:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div class="container">
    <h2>${msg}</h2>

    <table border="2">
        <tr>
            <td>UUID</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>

    <#list uList as user>
        <tr>
            <td>${user.id}</td>
            <td>${user.name}</td>
            <td>${user.age}</td>
        </tr>
    </#list>
    </table>
</div>

</body>
</html>

运行结果如下:

在这里插入图片描述

2. 整合 Thymeleaf

2.1 添加Thymeleaf依赖

在pom.xml中添加Thymeleaf依赖,如下:

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

2.2 添加 thymeleaf 模板配置

在application.yml中spring节点下添加thymeleaf配置,如下:

  #thymeleaf 配置
  thymeleaf:
    cache: true
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: UTF-8
    servlet:
      content-type: text/html

2.3 案例开发

新建controller包,在 controller 包中创建 ThymeleafController:

import com.springboot.web.model.User;
import com.springboot.web.utils.UUIDUtil;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

@Controller
public class ThymeleafController {

    @RequestMapping("/thymeleaf")
    public String hello(Map<String, Object> map) {
        User u1 = new User(UUIDUtil.getUUID(), "张三", 23);
        User u2 = new User(UUIDUtil.getUUID(), "李四", 28);
        User u3 = new User(UUIDUtil.getUUID(), "王五", 25);
        List<User> uList = new ArrayList<User>();
        uList.add(u1);
        uList.add(u2);
        uList.add(u3);
        map.put("uList", uList);
        map.put("msg", "Hello Thymeleaf");
        return "thymeleaf";
    }
}


在 templates 目录中创建名为 thymeleaf.html文件,内容如下:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div class="container">
    <h2 th:text="${msg}"></h2>
    <table border="2">
        <tr>
            <td>UUID</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
            <tr th:each="user:${uList}">
                <td th:text="${user.id}"></td>
                <td th:text="${user.name}"></td>
                <td th:text="${user.age}"></td>
            </tr>

    </table>
</div>
</body>
</html>

运行结果如下:

在这里插入图片描述

3. 源码下载

源码下载地址https://download.csdn.net/download/huangjun0210/10769734

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

逍遥俊子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值