Freemarker网页静态化技术

最新推荐文章于 2021-08-27 19:50:58 发布

家里有只mini猫

最新推荐文章于 2021-08-27 19:50:58 发布

阅读量178

点赞数

分类专栏：知识的宝库文章标签： freemarker

本文链接：https://blog.csdn.net/qq_41256238/article/details/108036540

版权

知识的宝库专栏收录该内容

100 篇文章 1 订阅

订阅专栏

定义

Freemarker是一个模板搜索引擎，一个基于模板生成文本输出的工具，采用纯java编写；虽然Freemarker具有一定的编程能力，但是通常还是需要由java程序提供需要显示的数据。

核心：模板+数据模型=输出

在这里插入图片描述

使用场景及作用

动态页面

模板引擎可以让程序实现界面与数据分离，业务代码与逻辑代码的分离，这就提升了开发效率，良好的设计也使得代码复用变得更加容易。在模板中可以专注如果展示数据，而在模板之外，可以更专注要展示哪些数据。
页面静态化

使用模板+数据模型，就能能够实现数据的展示，快速将两者进行组合，生成一个完成渲染的静态化html页面。
代码生成器

能够根据提前编写好的模板，使用Freemarker提供的指定，配合数据模型，达到生成代码的功能。

使用

导入maven依赖

<dependency>
    <groupId>org.freemarker</groupId>
    <artifactId>freemarker</artifactId>
    <version>2.3.23</version>
</dependency>

创建模板文件

模板中一般包含4中元素：
- 文本：直接输出的部分。
- 注释：使用<#--注释内容-->注释符号中的数据不会输出。
- 插值：使用${}，表达式，就能够使用数据模型中的对应数据，替换插值表达式中的变量，进行数据输出。
- FTL指令：Freemarker指令，类似于HTML标记，指令前会加#井号进行区分。
注意：freemarker模板文件的后缀名可以任意，但是一般使用ftl作为后缀名。

在本地磁盘创建
```
<html>
    <head>
        <meta charset="utf-8">
        <title>Freemarker入门</title>
    </head>
    <body>
        <#--我只是一个注释，我不会有任何输出  -->
        ${name}你好，${message}
    </body>
</html>
```

编写java类

public static void main(String[] args) throws IOException, TemplateException {

    /*
        1.设置配置，加载模板
         */
    //创建一个Configuration对象，参数为freemarker的版本号
    Configuration configuration = new Configuration(Configuration.getVersion());
    //配置模板文件所在目录
    configuration.setDirectoryForTemplateLoading(new File("D:/ftl"));
    //设置编码
    configuration.setDefaultEncoding("UTF-8");
    //加载模板文件，注意加载的模板文件名，必须要在配置的目录下
    Template template = configuration.getTemplate("freemarker.ftl");

    /*
        2.设置数据模型
         */
    //设置数据模型，注意的是，添加的key要和模板中取数据时所用的key相同
    Map map = new HashMap();
    map.put("name", "张三");
    map.put("message", "哈哈");

    /*
        3.将数据模型与模板进行组合输出
         */

    //定数据输出的文件，并获取该文件的字符输出流
    FileWriter writer = new FileWriter("D:/ftl/test.html");
    //将模板输出
    template.process(map, writer);
    //关闭流
    writer.close();
}

注意
1. freemarker再与spring进行整合，生成静态页面时，如果出现乱码问题，可以使用记事本软件打开静态页面，如果在记事本中出现乱码，那么就需要指定数据库的编码格式。
  
  jdbc.url=jdbc:mysql://192.168.242.130:3306/hse?characterEncoding=UTF-8&serverTimezone=UTC
2. 如果记事本中正常显示，但是静态网页本身出现乱码，那么就需要设置使用模板生成页面时的输出流，设置输出流的编码。
```
OutputStreamWriter writer = new OutputStreamWriter(new FileOutputStream(
    new File(outPath + "/" + fileName)), "utf-8");
template.process(data, writer);
```
  采用OutputStreamWriter字符转换流，该流对象是字符流到字节流的桥梁，使用该流对象的时候指定编码格式为utf-8。
zhi’ding
assign指令
- 作用：用于在页面上定义一个变量。
- 使用：使用${}，表达式使用定义的变量
- 定义简单类型
```
<#assign username="不知火舞">
${username}
```
- 定义对象类型
```
<#assign student={"user": "王昭君", "age": 19}>
${student.user}
${student.age}
```
include指令
- 作用：用于模板文件的嵌套
- 使用
```
<#include "要包含的模板文件名.ftl"/>
```

if指令

作用：用于在模板中进行判断。

模板文件中

<#if bl==true>
	判断为真
	<#else>
	判断为假
</#if>
    
    
<#if number==1>
	数值为1
<#elseif number==2>
	数值为2
<#else>
    数值为3
</#if>

java代码

Map map = new HashMap();
map.put("bl", true);

注意：也可以在模板文件中使用assign指令，定义变量，用作if指令的判断变量

list指令

作用：用于在模板文件中进行遍历输出

使用：

模板文件中

<#list goods as goodsList>
    商品名称：${goods.name}
    商品价格：${goods.price}
<#list>

java代码中

//创建一个list对象
List goodsList=new ArrayList();

//创建map对象，每个map封装一个商品的信息
Map goods1=new HashMap();
goods1.put("name", "苹果");
goods1.put("price", 5.8);

Map goods2=new HashMap();
goods2.put("name", "香蕉");
goods2.put("price", 2.5);

Map goods3=new HashMap();
goods3.put("name", "橘子");
goods3.put("price", 3.2);

//将每个map对象看做是一个商品对虾，k'm'k'k
goodsList.add(goods1);
goodsList.add(goods2);
goodsList.add(goods3);
map.put("goodsList", goodsList);

Spring集合firemarker

导入依赖

<dependency>
 <groupId>org.freemarker</groupId>
 <artifactId>freemarker</artifactId>
 <version>2.3.23</version>
</dependency>

编写模板文件，模板文件后缀名以.ftl结尾

在spring中配置模板文件

freemarker.properties（指定通过模板文件生成的静态页面的存放路径）

out_put_path=D:/ideaProjects/health_parent/health_mobile/src/main/webapp/pages

applicationContext-firemarker.xml（在spring初始化的时候，配置firemarker的FreeMarkerConfigurer类对象）

<bean id="freemarkerConfig"
 class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
 <!--指定模板文件所在目录-->
 <property name="templateLoaderPath" value="/WEB-INF/ftl/" />
 <!--指定字符集-->
 <property name="defaultEncoding" value="UTF-8" />
</bean>
<context:property-placeholder location="classpath:freemarker.properties"/>

编写逻辑代码根据模板生成静态页面

在逻辑代码中进行查询等操作，获取需要的数据，建立数据模型，通过与模板页面的结合进行展示，最终生成模板页面。

注意

模板页面还可以结合vue进行使用，页面上使用vue，在js中使用freemarker给数据模型赋值

模板页面

<!--页面省略-->
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            //${setMealList}是firemarker表达式，而setMealList对象是通过代码模板代码建立的数据模型
            setmealList: ${setMealList}
        },
    });
</script>
</body>

数据还是通过java代码，传递给模板页面，模板页面就能够使用${}表达式进行获取。
注意：使用freemarker与vue结合的时候，在vue中不能使用对象.属性的方式，否则会报错！

家里有只mini猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Freemarker网页静态化技术

定义Freemarker是一个模板搜索引擎，一个基于模板生成文本输出的工具，采用纯java编写；虽然Freemarker具有一定的编程能力，但是通常还是需要由java程序提供需要显示的数据。核心：模板+数据模型=输出使用场景及作用动态页面模板引擎可以让程序实现界面与数据分离，业务代码与逻辑代码的分离，这就提升了开发效率，良好的设计也使得代码复用变得更加容易。在模板中可以专注如果展示数据，而在模板之外，可以更专注要展示哪些数据。页面静态化使用模板+数据模型，就能能够实现数据的展示，快速
复制链接

扫一扫