Freemarker使用详解

最新推荐文章于 2024-05-17 23:56:31 发布

程序猿二鍋頭

最新推荐文章于 2024-05-17 23:56:31 发布

阅读量9.5k

点赞数 5

分类专栏：模板引擎文章标签： freemarker java

本文链接：https://blog.csdn.net/qq_45441466/article/details/116209936

版权

模板引擎专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.什么是网页静态化技术

随着用户访问量以及数据量的增大，网页静态化技术方案如今越来越流行。什么是网页静态化技术呢？简单来说就是将网页以纯静态方式的形式展现。

2.网页静态化技术与缓存技术的比较

共同点：都可以减小数据库的访问压力。

区别：

(1)缓存技术适用于小规模的数据。以及一些经常变动的数据。

(2)网页静态化技术适用于大规模但是变化不太频繁的数据。

页面静态化与缓存技术的定义:

页面静态化是指通过一些模板技术(如freemarker)将数据模型生成静态html页面并通过ajax技术实现页面的局部刷新,从而减少数据库的交互,并利用搜索引擎优化技术(SEO)来提高交互效率.

缓存技术(如ehcache):本质通过将数据存储到服务器的内存中,用户在交互时先交互内存,缓存穿透后交互数据库,利用内存交互速度比数据库交互快的原理来提高交互效率

3.网页静态化技术的应用场景

(1)新闻门户网站的文章类型频道一般都用到了网页静态化技术。点击新闻直接会跳到静态化的页面。

(2)电商网站的商品详情页也十分常用，我们在存储商品的时候会生成静态化页面，点击商品详情，会直接跳到生成的商品详情的静态化页面。

(3)网页静态化技术可以结合Nginx这种高性能web服务器来提高并发访问量。

4.什么是FreeMarker

FreeMarker是一款用Java语言编写的模板引擎，用它可以通过模板和要改变的数据来生成输出文本(例如HTML网页，配置文件，源代码等)，作为用来实现网页静态化技术的一种手段。FreeMarker的使用率大大超过其他一些技术。对于系统中频繁使用数据库进行查询但是内容更新很小的应用，都可以用FreeMarker将网页静态化，这样就避免了大量的数据库访问请求，从而提高网站的性能。

5.FreeMarker介绍

Freemarker是一个用Java语言编写的模板引擎，它基于模板来生成文本输出。FreeMarker与Web容器无关，即在Web运行时，它并不知道Servlet或HTTP。它不仅可以用作表现层的实现技术，而且还可以用于生产XML，JSP或Java等。

6、FreeMarker入门案例

6.1、环境搭建

创建maven工程并导入Freemarker的maven坐标

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

6.2、创建模板文件

模板文件中有四种元素：

1、文本，直接输出的部分

2、注释，即<#-- ... -->格式不会输出

3、插值(Interpolation)：即${...}部分，将使用数据模型中的部分替代输出

4、FTL指令：FreeMarker指令，和HTML标记类似，名字前加#予以区分，不会输出

Freemarker的模板文件后缀可以任意，一般建议为ftl.

在当前项目目录下创建名称为testTemplate.ftl的模板文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h1>Freemarker入门测试</h1>
${name} -----  ${message}

</body>
</html>

6.3、生成文件

使用步骤：

第一步：创建一个Configuration对象，直接new一个对象。构造方法的参数就是freemarker的版本号。

第二步：设置模板文件所在的路径。

第三步：设置模板文件使用的字符集。一般就是utf-8.

第四步：加载一个模板，创建一个模板对象。

第五步：创建一个模板使用的数据集，可以是pojo也可以是map。一般是Map。

第六步：创建一个Writer对象，一般创建FileWriter对象，指定生成的文件名。

第七步：调用模板对象的process方法输出文件。

第八步：关闭流。

package com.panghl.test;

import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;

import java.io.File;
import java.io.FileWriter;
import java.io.IOException;
import java.io.Writer;
import java.util.HashMap;
import java.util.Map;

/**
 * @Author panghl
 * @Date 2021/4/27 21:16
 * @Description TODO
 **/
public class FreemarkerTest {

    public static void main(String[] args) throws IOException, TemplateException {
        //1.创建freemarker的配置对象
        Configuration configuration = new Configuration(Configuration.getVersion());
        //2.设置模板文件所在目录
        configuration.setDirectoryForTemplateLoading(new File("D:\\IdeaProjects\\Java-projects\\freemarkerdemo\\"));
        //3.设置字符集
        configuration.setDefaultEncoding("utf-8");
        //4.加载模板
        Template template = configuration.getTemplate("testTemplate.ftl");
        //5.准备模板文件中所需的数据，一般通过map构造
        Map<String,String> map = new HashMap<>();
        map.put("name","panghl");
        map.put("message","你好啊！！！freemarker");
        //6.创建Writer对象,用于输出静态文件
        Writer out = new FileWriter(new File("D:/IdeaProjects/Java-projects/freemarkerdemo/test.ftl"));
        //7.输出文件
        template.process(map,out);
        //8.关闭流
        out.close();

    }
}

7、Freemarker指令

7.1、assign 指令

assign指令用于在页面上定义一个变量

（1）定义简单类型

<#assign linkman="周先生">

联系人: ${linkman}

(2)定义对象类型

<#assign info={"mobile":"1999999999","address":"sc省cd市。。。"}>
手机号:${info.mobile} - 地址: ${info.address}

7.2、include指令

include指令用于模板文件的嵌套

（1）创建模板文件head.ftl

<h1>我是程序猿-head</h1>

（2）修改入门案例中的test.ftl ，在test.ftl模板文件中使用include指令引入上面的模板文件

<#include "./head.ftl"/>

7.3、if指令

if指令用于判断

（1）在模板文件中使用if指令进行判断

<#if success==true>

成功

<#else>

失败

</#if>

（2）在java代码中为success变量赋值

map.put("success",true);

在freemarker的判断中，可以使用= 也可以使用==

7.4、list指令

list指令用于遍历

（1）在模板文件中使用list指令进行遍历

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

（2）在java代码中为goodsList赋值

List goodsList = new ArrayList();
        Map goods1 = new HashMap();
        goods1.put("price","1.00");
        goods1.put("name","ppp");
        goodsList.add(goods1);
        Map goods2 = new HashMap();
        goods2.put("price","2.00");
        goods2.put("name","ppp2");
        goodsList.add(goods2);
        map.put("goodsList",goodsList);

更多freemarker详细指令可看我另一篇播客：https://blog.csdn.net/qq_45441466/article/details/113084450

8、生成移动端静态页面

前面我们已经学习了Freemarker的基本使用方法，下面我们就可以将Freemarker应用到项目中，帮我们生成移动端套餐列表静态页面和套餐详情静态页面。接下来我们需要思考几个问题：

（1）什么时候生成静态页面比较合适呢？

（2）将静态页面生成到什么位置？

（3）应该生成几个静态页面呢？

对于第一个问题，应该是当套餐数据发生改变时，需要生成静态页面，即我们通过后台系统修改套餐数据(包括新增、删除、编辑)时。

对于第二个问题，如果是在开发阶段可以将文件生成到项目工程中，如果上线后可以将文件生成到移动端系统运行的tomcat中。

对于第三个问题，套餐列表只需一个页面就可以了，在这个页面中展示所有的套餐列表数据即可。套餐详情页面需要有多个，即一个套餐应该对应一个静态页面。

8.1、环境搭建

在health_common工程pom文件中导入freemarker的maven坐标。

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

8.2、创建模板文件

在health_service_provider工程的WEB-INF目录中创建ftl目录，在ftl目录中创建模板文件mobile_setmeal.ftl和mobile_setmeal_detail.ftl文件，前者是用于生成套餐列表页面的模板文件，后者是生成套餐详情页面的模板文件。

（1）mobile_setmeal.ftl

<#--判断一些模板数据是否为空-->
<#--<#if setmealList?? and setmealList.size > 0></#if>>-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="../img/asset-favico.ico">
  <title>预约</title>
  <link rel="stylesheet" href="../css/page-health-order.css" />
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div class="app" id="app">
  <!-- 页面头部 -->
  <div class="top-header">
    <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
    <span class="center">传智健康</span>
    <span class="f-right"><i class="icon-more"></i></span>
  </div>
  <!-- 页面内容 -->
  <div class="contentBox">
    <div class="list-column1">
      <ul class="list">
        <#list setmealList as setmeal>
          <li class="list-item">
            <a class="link-page" href="setmeal_detail_${setmeal.id}.html">
              <img class="img-object f-left"
                   src="http://qrp7t16xj.hn-bkt.clouddn.com/${setmeal.img}"
                   alt="">
              <div class="item-body">
                <h4 class="ellipsis item-title">${setmeal.name}</h4>
                <p class="ellipsis-more item-desc">${setmeal.remark}</p>
                <p class="item-keywords">
                                    <span>
                                        <#if setmeal.sex == '0'>
                                          性别不限
                                        <#else>
                                          <#if setmeal.sex == '1'>
                                            男
                                          <#else>
                                            女
                                          </#if>
                                        </#if>
                                    </span>
                  <span>${setmeal.age}</span>
                </p>
              </div>
            </a>
          </li>
        </#list>
      </ul>
    </div>
  </div>
</div>
<!-- 页面 css js -->
<script src="../plugins/vue/vue.js"></script>
<script src="../plugins/vue/axios-0.18.0.js"></script>
</body>

（2）mobile_setmeal_detail.ftl

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="../img/asset-favico.ico">
  <title>预约详情</title>
  <link rel="stylesheet" href="../css/page-health-orderDetail.css" />
  <script src="../plugins/vue/vue.js"></script>
  <script src="../plugins/vue/axios-0.18.0.js"></script>
  <script src="../plugins/healthmobile.js"></script>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div id="app" class="app">
  <!-- 页面头部 -->
  <div class="top-header">
    <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
    <span class="center">传智健康</span>
    <span class="f-right"><i class="icon-more"></i></span>
  </div>
  <!-- 页面内容 -->
  <div class="contentBox">
    <div class="card">
      <div class="project-img">
        <img src="http://qrp7t16xj.hn-bkt.clouddn.com/${setmeal.img}"
             width="100%" height="100%" />
      </div>
      <div class="project-text">
        <h4 class="tit">${setmeal.name}</h4>
        <p class="subtit">${setmeal.remark}</p>
        <p class="keywords">
                    <span>
						<#if setmeal.sex == '0'>
							性别不限
                        <#else>
                            <#if setmeal.sex == '1'>
								男
                            <#else>
								女
                            </#if>
        </#if>
        </span>
        <span>${setmeal.age}</span>
        </p>
      </div>
    </div>
    <div class="table-listbox">
      <div class="box-title">
        <i class="icon-zhen"><span class="path1"></span><span class="path2"></span></i>
        <span>套餐详情</span>
      </div>
      <div class="box-table">
        <div class="table-title">
          <div class="tit-item flex2">项目名称</div>
          <div class="tit-item  flex3">项目内容</div>
          <div class="tit-item  flex3">项目解读</div>
        </div>
        <div class="table-content">
          <ul class="table-list">
            <#list setmeal.checkGroups as checkgroup>
            <li class="table-item">
              <div class="item flex2">${checkgroup.name}</div>
              <div class="item flex3">
                <#list checkgroup.checkItems as checkitem>
                <label>
                  ${checkitem.name}
                </label>
              </#list>
        </div>
        <div class="item flex3">${checkgroup.remark}</div>
        </li>
      </#list>
      </ul>
    </div>
    <div class="box-button">
      <a @click="toOrderInfo()" class="order-btn">立即预约</a>
    </div>
  </div>
</div>
</div>
</div>
<script>
  var vue = new Vue({
    el:'#app',
    methods:{
      toOrderInfo(){
        window.location.href = "orderInfo.html?id=${setmeal.id}";
      }
    }
  });
</script>
</body>

8.3、配置文件

（1）在health_service_provider工程中创建属性文件freemarker.properties

out_put_path=D:/JavaStudy/RealProject/ssm_heima_health/health_parent/health_mobile/src/main/webapp/pages

通过上面的配置可以指定将静态HTML页面生成的目录位置

（2）在health_service_provider工程的Spring配置文件中配置

    <!--配置 FreeMarkerConfigurer 对象, 用于生成静态页面-->
    <bean id="freeMarkerConfigurer" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
        <property name="templateLoaderPath" value="/WEB-INF/ftl/"/>     <!--模板文件所在目录-->
        <property name="defaultEncoding" value="utf-8"/>                <!--指定字符集-->
    </bean>

    <!--导入文件的输出路径 out_put_path-->
    <context:property-placeholder location="classpath:freemarker.properties"/>

8.4、生成静态页面

修改health_service_provider工程中的SetmealServiceImpl类的add方法，加入生成静态页面的逻辑。

package com.itheima.service.impl;

import com.alibaba.dubbo.config.annotation.Service;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.itheima.constant.RedisConstant;
import com.itheima.dao.SetmealDao;
import com.itheima.entity.PageResult;
import com.itheima.entity.QueryPageBean;
import com.itheima.pojo.Setmeal;
import com.itheima.service.SetmealService;
import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer;
import redis.clients.jedis.JedisPool;

import java.io.File;
import java.io.FileWriter;
import java.io.IOException;
import java.io.Writer;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @Author panghl
 * @Date 2021/4/17 23:30
 * @Description 套餐服务实现类
 **/
@Service(interfaceClass = SetmealService.class)
@Transactional
public class SetmealServiceImpl implements SetmealService {

    @Autowired
    private SetmealDao setmealDao;

    @Autowired
    private JedisPool jedisPool;

    @Autowired
    private FreeMarkerConfigurer freeMarkerConfigurer;

    @Value("${out_put_path}") //从属性文件读取输出目录的路径
    private String outputpath;


    @Override
    public void add(Setmeal setmeal, Integer[] checkgroupIds) {
        setmealDao.insert(setmeal);
        jedisPool.getResource().sadd(RedisConstant.SETMEAL_PIC_DB_RESOURCES, setmeal.getImg());
        setmealDao.insertCheckGroup(setmeal.getId(), checkgroupIds);

        //当添加套餐后需要重新生成静态页面(套餐列表页面，套餐详情页面)
        generateMobileStaticHtml();
    }

    /**
     * 用于生成当前方法所需的静态页面
     */
    public void generateMobileStaticHtml(){
        //在生成静态页面之前需要查询数据
        List<Setmeal> list = setmealDao.findAll();

        //需要生成套餐列表静态页面
        generateMobileSetmealListHtml(list);
        //需要生成套餐详情静态页面
        generateMobileSetmealDetailHtml(list);
    }

    /**
     * 生成套餐列表静态页面
     */
    public void generateMobileSetmealListHtml(List<Setmeal> list){
        Map map = new HashMap();
        map.put("setmealList",list);
        genarateHtml("mobile_setmeal.ftl","m_setmeal.html",map);
    }

    /**
     * 生成套餐详情静态页面
     */
    public void generateMobileSetmealDetailHtml(List<Setmeal> list){
        for (Setmeal setmeal : list) {
            Setmeal resSetmeal = setmealDao.findById(setmeal.getId());
            Map map = new HashMap();
            map.put("setmeal",resSetmeal);
            genarateHtml("mobile_setmeal_detail.ftl","setmeal_detail_"+setmeal.getId()+".html",map);
        }
    }

    /**
     * 用于生成静态页面---通用模板
     */
    public void genarateHtml(String templateName, String htmlPageName, Map map) {
        try {
            //获取配置对象
            Configuration configuration = freeMarkerConfigurer.getConfiguration();
            Template template = configuration.getTemplate(templateName);
            //构造输出流
            Writer out = new FileWriter(new File(outputpath + "/" + htmlPageName));
            //输出文件
            template.process(map, out);
            out.close();
        } catch (Exception e) {
            e.printStackTrace();
        }

    }

    @Override
    public PageResult pageQuery(QueryPageBean queryPageBean) {
        PageHelper.startPage(queryPageBean.getCurrentPage(), queryPageBean.getPageSize());
        List<Setmeal> list = setmealDao.findByCondition(queryPageBean.getQueryString());
        PageInfo<Setmeal> pageInfo = new PageInfo<>(list);
        return new PageResult(pageInfo.getTotal(), pageInfo.getList());
    }

    @Override
    public List<Setmeal> getSetmeal() {
        return setmealDao.findAll();
    }

    @Override
    public Setmeal findById(Integer id) {
        return setmealDao.findById(id);
    }
}

想要详细的demo可以加群获取资料：qq群（1164437770）黑马尚硅谷等等项目资料都有！！

程序猿二鍋頭

关注

5
点赞
踩
59

收藏

觉得还不错? 一键收藏
1
评论
Freemarker使用详解

1.什么是网页静态化技术随着用户访问量以及数据量的增大，网页静态化技术方案如今越来越流行。什么是网页静态化技术呢？简单来说就是将网页以纯静态方式的形式展现。2.网页静态化技术与缓存技术的比较共同点：都可以减小数据库的访问压力。区别：(1)缓存技术适用于小规模的数据。以及一些经常变动的数据。(2)网页静态化技术适用于大规模但是变化不太频繁的数据。页面静态化与缓存技术的定义:页面静态化是指通过一些模板技术(如freemarker)将数据模型生成静态html页面并通过..
复制链接

扫一扫