freemarker模板引擎的使用教程

最新推荐文章于 2024-08-26 20:18:56 发布

清浅 | 旧时光

最新推荐文章于 2024-08-26 20:18:56 发布

阅读量2.1k

点赞数 2

分类专栏：前端开发文章标签： spring boot html freemarker

本文链接：https://blog.csdn.net/weixin_46258682/article/details/121866202

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在Spring Boot项目中集成Freemarker模板引擎，包括添加依赖、配置模板路径、动态传值、基本属性使用以及传集合的方法。通过实例演示了模板引擎在页面渲染中的应用和控制层的配合。

摘要由CSDN通过智能技术生成

1、添加依赖

在pom.xml依赖文件中以下添加freemarker的依赖，当然也可以在新建springboot项目时直接选择

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

2、设置freemarker的配置

在springboot项目中的配置文件（application.yml）中设置freemarker的相关配置

spring:
  #freemarker配置
  freemarker:
    template-loader-path: classpath:/templates/
    suffix: .ftl
    cache: false
    charset: UTF-8
    expose-request-attributes: true
    expose-session-attributes: true

我们的页面都是放在templates这个目录下的，static目录放置一些静态资源，css，img，js等，而且使用freemarker模板引擎必须将页面的后缀修改为.ftl 这样才能使用。而且这种文件我们是无法在浏览器直接打开的，所以我建议在前端页面全部修改完成之后再将html修改成ftl文件类型。

3、freemarker的传值方式

我们既然将页面放在了templates这个目录下，那我们在项目启动之后，是无法通过路径直接访问的，必须要经过控制层的跳转，而不像静态资源那样可以通过路径直接访问。举个栗子，我在templates目录下新建admin文件夹，在文件夹下新增了一个ces.ftl这样的文件，并且在body中间添加了文字

<body>
<h1>这里是测试页</h1>
</body>

然后我们在控制层写以下代码

@Controller
public class IndexController {
    @RequestMapping("/ces")
    public String ces(){
        return "admin/ces";
    }
}

@RequestMapping("/ces")引号里面的内容自定义

接下来我们运行项目，因为idea内置tomcat，我们使用默认端口8080.我们就可以看到以下内容

测试页

当页面可以正确跳转时，我们再继续以下步骤。

我们在刚才的控制层中添加一部分代码

@Controller
public class IndexController {

    @RequestMapping("/ces")
    public String ces(Model model){
        model.addAttribute("name","小明");
        return "admin/ces";
    }
}

然后我们在ces页面中添加一个h3标签

<body>
<h1>这里是测试页</h1>

<h3>你好，${name}</h3>
</body>

我们重新启动项目，接下来我们会看到这样的内容

测试内容

怎么样，是不是挺神奇的，我在ces.ftl文件中并没有写出小明这两个字，但是在访问页面时却出现了对吗？这就是freemarker的传值方式。传集合也是同理，不过在前端页面有所修改。

<#list name as blog>
	${blog}
</list>

我们再来测试一次：

@Controller
public class IndexController {

    @RequestMapping("/ces")
    public String ces(Model model){
        Map<String,String> map = new HashMap<>();
        map.put("name","小王");
        map.put("age","20");
        map.put("phone","12345678");
        model.addAttribute("user",map);
        return "admin/ces";
    }
}

<body>
<h1>这里是测试页</h1>

<h3>姓名：${user.name}</h3>
<h3>年龄：${user.age}</h3>
<h3>手机：${user.phone}</h3>
</body>

重启之后我们可以看到以下内容：

4、freemarker的基本属性

这是为了保证name为空时，页面不会报错，使用以下方式

<#if name??>
	${name}
</if>

这是freemarker的条件判断

<#if name??>
	${name}
	<#else>
	<h3>name的值为空</h3>
</if>

如果name传的是时间，那么我们要给他一个格式

${name?string("yyyy-MM-dd  HH:mm")}

如果name传的是数字，我们不想它被逗号分割

${name?c}

如果传递的值为布尔型（boolean），我们可以使用这样的方式来输出

${name?string("是","否")}

如果name==true输出是，name为false则输出否

当然freemarker的使用指令远远不止这些，如果英语好的伙伴们，可以通过freemarker官网学习哦。

今天的内容就分享到这里啦，我们下次见。

原文来自：https://www.lovelin.space/blog/16/detail

更多内容请关注：
在这里插入图片描述

清浅 | 旧时光

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录