模板引擎技术——Freemarker和js、html里的使用_freemarker js_shelleyHLX的博客

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
JSP与Freemarker

Freemarker入门

1 FTL取值
Freemarkersample1.java
 1 package com.imooc.freemarker;
 3 import java.io.IOException;
 4 import java.io.OutputStreamWriter;
 5 import java.util.Date;
 6 import java.util.HashMap;
 7 import java.util.Map;
 9 import com.imooc.freemarker.entity.Computer;
11 import freemarker.core.ParseException;
12 import freemarker.template.Configuration;
13 import freemarker.template.MalformedTemplateNameException;
14 import freemarker.template.Template;
15 import freemarker.template.TemplateException;
16 import freemarker.template.TemplateNotFoundException;
18 public class FreemarkerSample1 {
20     public static void main(String[] args) throws TemplateNotFoundException, MalformedTemplateNameException, ParseException, IOException, TemplateException {
21         //1. 加载模板
22         //创建核心配置对象
23         Configuration config = new Configuration(Configuration.VERSION_2_3_28);
24         //设置加载的目录
25         config.setClassForTemplateLoading(FreemarkerSample1.class, "");
26         //得到模板对象
27         Template t = config.getTemplate("sample1.ftl");
28         //2. 创建数据
29         Map<String,Object> data = new HashMap<String,Object>();
30         data.put("site", "新浪");
31         data.put("url", "http://www.sina.com");
32         data.put("date", new Date());
33         data.put("number", 837183.883217);
34         Map info = new HashMap();
35         info.put("cpu", "i5");
36         Computer c1 = new Computer("1234567" , "ThinkPad" , 1 , "李四" , new Date() , 12900f , info);
37         data.put("computer", c1);
38         //3. 产生输出
39         t.process(data, new OutputStreamWriter(System.out));
40     }
sample1.ftl 
 1 <#-- Freemarker取值 -->
 2 ${site}
 3 ${url}
 4 <#-- !默认值 -->
 5 ${author!"不存在的属性"}
 6 <#-- ?string格式化输出 -->
 7 ${date?string("yyyy年MM月dd日 HH:mm:ss SSS")}
 8 ${number?string("0.00")}
 9 <#if computer.sn == "1234567">
10 重要设备
11 </#if>
12 SN:${computer.sn}
13 型号:${computer.model}
14 <#if computer.state == 1>
15 状态:正在使用
16 <#elseif computer.state == 2>
17 状态:闲置
18 <#elseif computer.state == 3>
19 状态:已作废
20 </#if>
22 <#switch computer.state>
23     <#case 1>
24         状态:正在使用
25         <#break>
26     <#case 2>
27         状态:闲置
28         <#break>
29     <#case 3>
30         状态:已作废
31         <#break>
32     <#default>
33         状态:无效状态
34 </#switch>
35 <#-- ??代表判断对象是否为空,true不为空,false为空 -->
36 <#if computer.user??>
37 用户:${computer.user}
38 </#if>
39 采购时间:${computer.dop?string("yyyy年MM月dd日")}
40 采购价格:${computer.price?string("0.00")}
41 配置信息:
42 --------------
43 CPU:${computer.info["cpu"]}
44 内存:${computer.info["memory"]!"无内存信息"} 
Computer.java 
 1 package com.imooc.freemarker.entity;
 3 import java.util.Date;
 4 import java.util.Map;
 6 public class Computer {
 7     private String sn; //序列号
 8     private String model; //型号
 9     private int state; //状态 1-在用 2-闲置 3-报废
10     private String user; //使用人
11     private Date dop; //采购日期
12     private Float price; //购买价格
13     private Map info; //电脑配置信息
15     public Computer() {
17     }
19     public Computer(String sn, String model, int state, String user, Date dop, Float price, Map info) {
20         super();
21         this.sn = sn;
22         this.model = model;
23         this.state = state;
24         this.user = user;
25         this.dop = dop;
26         this.price = price;
27         this.info = info;
28     }
29     public String getSn() {
30         return sn;
31     }
32     public void setSn(String sn) {
33         this.sn = sn;
34     }
35     public String getModel() {
36         return model;
37     }
38     public void setModel(String model) {
39         this.model = model;
40     }
41     public int getState() {
42         return state;
43     }
44     public void setState(int state) {
45         this.state = state;
46     }
47     public String getUser() {
48         return user;
49     }
50     public void setUser(String user) {
51         this.user = user;
52     }
53     public Date getDop() {
54         return dop;
55     }
56     public void setDop(Date dop) {
57         this.dop = dop;
58     }
59     public Float getPrice() {
60         return price;
61     }
62     public void setPrice(Float price) {
63         this.price = price;
64     }
65     public Map getInfo() {
66         return info;
67     }
68     public void setInfo(Map info) {
69         this.info = info;
70     }
2 if 分支判断 和switch分支判断 
3 list 迭代 
1)list迭代列表 
2)list迭代map 
3)list数字序列迭代 
Freemarkersample2.java 
 1 package com.imooc.freemarker;
 3 import java.io.IOException;
 4 import java.io.OutputStreamWriter;
 5 import java.util.ArrayList;
 6 import java.util.Date;
 7 import java.util.HashMap;
 8 import java.util.LinkedHashMap;
 9 import java.util.List;
10 import java.util.Map;
12 import com.imooc.freemarker.entity.Computer;
14 import freemarker.core.ParseException;
15 import freemarker.template.Configuration;
16 import freemarker.template.MalformedTemplateNameException;
17 import freemarker.template.Template;
18 import freemarker.template.TemplateException;
19 import freemarker.template.TemplateNotFoundException;
21 public class FreemarkerSample2 {
23     public static void main(String[] args) throws TemplateNotFoundException, MalformedTemplateNameException, ParseException, IOException, TemplateException {
24         //1. 加载模板
25         //创建核心配置对象
26         Configuration config = new Configuration(Configuration.VERSION_2_3_28);
27         //设置加载的目录
28         config.setClassForTemplateLoading(FreemarkerSample2.class, "");
29         //得到模板对象
30         Template t = config.getTemplate("sample2.ftl");
31         //2. 创建数据
32         Map<String,Object> data = new HashMap<String,Object>();
33         List<Computer> computers = new ArrayList();
34         computers.add(new Computer("1234567" , "ThinkPad X1" , 2 , null , new Date() , 12999f , new HashMap() ));
35         computers.add(new Computer("1234568" , "HP XXX" , 1 , "张三" , new Date() , 7500f , new HashMap() ));
36         computers.add(new Computer("1234569" , "DELL XXX" , 3 , "李四" , new Date() , 8500f , new HashMap() ));
37         computers.add(new Computer("1234570" , "ACER XXX" , 1 , "王五" , new Date() , 6300f , new HashMap() ));
38         computers.add(new Computer("1234571" , "MSI XXX" , 1 , "赵六" , new Date() , 9300f , new HashMap() ));    
39         data.put("computers", computers);
40         //LinkedHashMap可以保证数据按存放顺序进行提取
41         Map computerMap = new LinkedHashMap();
42         for(Computer c : computers) {
43             computerMap.put(c.getSn(), c);
44         }
45         data.put("computer_map", computerMap);
46         //3. 产生输出
47         t.process(data, new OutputStreamWriter(System.out));
48     }
sample2.ftl 
 1 <#list computers as c>
 2 序号:${c_index + 1} <#-- 迭代变量_index保存了循环的索引,从0开始 -->
 3 SN:${c.sn}
 4 型号:${c.model}
 5 <#switch c.state>
 6 <#case 1>
 7 状态:使用中
 8 <#break>
 9 <#case 2>
10 状态:闲置
11 <#break>
12 <#case 3>
13 状态:已作废
14 <#break>
15 </#switch>
16 <#if c.user??>
17 用户:${c.user}
18 </#if>
19 采购日期:${c.dop?string("yyyy-MM-dd")}
20 采购价格:${c.price?string("0.00")}
21 -------------------------------------------
22 </#list>
24 ==========================================
25 <#list computer_map?keys as k >
26 ${k}-${computer_map[k].model}
27 ${computer_map[k].price?string("0.00")}
28 </#list> 
4 内建函数 
Freemarkersample3.java 
 1 package com.imooc.freemarker;
 3 import java.io.IOException;
 4 import java.io.OutputStreamWriter;
 5 import java.util.ArrayList;
 6 import java.util.Date;
 7 import java.util.HashMap;
 8 import java.util.LinkedHashMap;
 9 import java.util.List;
10 import java.util.Map;
12 import com.imooc.freemarker.entity.Computer;
14 import freemarker.core.ParseException;
15 import freemarker.template.Configuration;
16 import freemarker.template.MalformedTemplateNameException;
17 import freemarker.template.Template;
18 import freemarker.template.TemplateException;
19 import freemarker.template.TemplateNotFoundException;
21 public class FreemarkerSample3 {
23     public static void main(String[] args) throws TemplateNotFoundException, MalformedTemplateNameException, ParseException, IOException, TemplateException {
24         //1. 加载模板
25         //创建核心配置对象
26         Configuration config = new Configuration(Configuration.VERSION_2_3_28);
27         //设置加载的目录
28         config.setClassForTemplateLoading(FreemarkerSample3.class, "");
29         //得到模板对象
30         Template t = config.getTemplate("sample3.ftl");
31         //2. 创建数据
32         Map<String,Object> data = new HashMap<String,Object>();
33         data.put("name", "jackson");
34         data.put("brand", "bmw");
35         data.put("words", "first blood");
36         data.put("n", 37981.83);
37         data.put("date", new Date());
38         List<Computer> computers = new ArrayList();
39         computers.add(new Computer("1234567" , "ThinkPad X1" , 2 , null , new Date() , 12999f , new HashMap() ));
40         computers.add(new Computer("1234568" , "HP XXX" , 1 , "张三" , new Date() , 7500f , new HashMap() ));
41         computers.add(new Computer("1234569" , "DELL XXX" , 3 , "李四" , new Date() , 8500f , new HashMap() ));
42         computers.add(new Computer("1234570" , "ACER XXX" , 1 , "王五" , new Date() , 6300f , new HashMap() ));
43         computers.add(new Computer("1234571" , "MSI XXX" , 1 , "赵六" , new Date() , 9300f , new HashMap() ));    
44         data.put("computers", computers);
45         //3. 产生输出
46         t.process(data, new OutputStreamWriter(System.out));
47     }
sample3.ftl 
 1 ${name?cap_first}
 2 ${brand?upper_case}
 3 ${brand?length}
 4 ${words?replace("blood" , "*****")}
 5 ${words?index_of("blood")}
 6 <#-- 利用?string实现三目运算符的操作 -->
 7 ${(words?index_of("blood") != -1)?string("包含敏感词汇","不包含敏感词汇")}
 9 ${n?round}
10 ${n?floor}
11 ${n?ceiling}
13 公司共有${computers?size}台电脑
14 第一台:${computers?first.model}
15 最后一台:${computers?last.model}
17 <#list computers?sort_by("price")?reverse as c>
18     ${c.sn}-${c.price}
19 </#list> 
5 Freemarker与Servlet整合  
web.xml配置freemarker 
<servlet>
    <servlet-name>freemarker</servlet-name>
    <servlet-class>freemarker.ext.servlet.FreemarkerServlet</servlet-class>
    <init-param>
      <param-name>TemplatePath</param-name>
      <param-value>/WEB-INF/ftl</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>freemarker</servlet-name>
    <url-pattern>*.ftl</url-pattern>
  </servlet-mapping> 
实际项目中 
将前端静态页面放入webcontent目录下.html文件未来会变成ftl模板文件(将里面代码复制到ftl目录中相应的ftl文件中,并通过freemarker将动态数据填充到页面中) 
ftl模板文件 
访问servlet 
js 里的使用 
<script type="text/javascript">
　　//freemarker在js中的应用：
    var newOrganizations = [];
    <#list pageOrganizations as item>
        newOrganizations.push({
            id:   '${item.id}',
            name: '${item.name}'
    </#list>
</script> 
需求：商品详情页面添加“***购买了该商品”，滚动列表 
实现：①：获取信息列表数据postListData 
           ②：循环该列表数据，获取其中用户名，时间 
           ③：先做JS判断用户名name----超过两个字符用**，时间time计算----距离当前时间多久（如下） 
//判断姓名
  
 if(name.length > 2){
    name= name.slice(0,2);
    $("#li_${postListData.id}").children(".name").text(name+"***");
 }
  
  
 //判断时间
  
 var nowDate = new Date();
 var nowTime = nowDate.getTime();
 var endTime = ${postListData.time};
 var leftTime = nowTime - endTime;
 var m = Math.floor(leftTime / 1000 / 60 % 60);  //获取分钟
 $("#li_${postListData.id}").children("i").children(".min").text(m);
  
  
 在JS中使用freemarker模板和在HTML中使用方法是一样的。 
<ul id="userBuy">
    [#if postListData?has_content]
      [#list postListData as postListData]
          <li id="li_${postListData.id}"><text class="text-red name"></text>购买了该商品</li>
       [/#list]
    [/#if]
 </ul>
 [#if productBuyDataList?has_content]
    [#list productBuyDataList as productBuyData]
      var memberName = "${productBuyData.memberName}";
      if(memberName.length > 2){
      memberName = memberName.slice(0,2);
      $("#li_${productBuyData.id}").children(".user-buy-name").text(memberName+"***");
           }
      // var nowDate = new Date();
      // var nowTime = nowDate.getTime();
      // var endTime = ${productBuyData.buyTimeTwo};
      // var leftTime = nowTime - endTime;
      // var m = Math.floor(leftTime / 1000 / 60 % 60);
      // $("#li_${productBuyData.id}").children("i").children(".min").text(m);
    [/#list]
 [/#if]
  
 ————————————————
 版权声明：本文为CSDN博主「ansheng02」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
 原文链接：https://blog.csdn.net/ansheng02/article/details/90403838 
                    什么是模板引擎?- 模板引擎的目标是“数据+模板=结果”- 模板引擎将数据与展现有效“解耦”主流模板引擎- Java Server Page（JSP）- Freemarker- BeetlFreemarker介绍Freemarker官方网站：https://freemarker.apache.org/Freemarker中文参考手册：http://freemarker.foofun.cn/两种安装方式：自己下载jar包导入或通过maven导入...
				FreeMarker是一个模板引擎，一个基于模板生成文本输出的通用工具，使用纯Java编写。FreeMarker被设计用来生成HTML Web页面，特别是基于MVC模式的应用程序。虽然FreeMarker具有一些编程的能力，但通常由Java程序准备要显示的数据，由FreeMarker生成页面，通过模板显示准备的数据。
FreeMarker不是一个Web应用框架，而适合作为Web应用框架一个组件。FreeMarker与容器无关，因为它并不知道HTTP或Servlet；FreeMarker同样可以应用于非Web应用程序环境。FreeMarker更适合作为Model2框架（如Struts）的视图组件，你也可以在模板中使用JSP标记库。而且你还可以通过Eclipse的插件来编辑FreeMarker，经过验证，FreeMarker 最好的 Eclipse 编辑插件是 JBoss Tools。
FreeMarker是免费的。
FreeMarker特性：
1、通用目标
能够生成各种文本：HTML、XML、RTF、Java源代码等等
易于嵌入到你的产品中：轻量级；不需要Servlet环境
插件式模板载入器：可以从任何源载入模板，如本地文件、数据库等等
你可以按你所需生成文本：保存到本地文件；作为Email发送；从Web应用程序发送它返回给Web浏览器
2、强大的模板语言
所有常用的指令：include、if/elseif/else、循环结构
在模板中创建和改变变量
几乎在任何地方都可以使用复杂表达式来指定值
命名的宏，可以具有位置参数和嵌套内容
名字空间有助于建立和维护可重用的宏库，或者将一个大工程分成模块，而不必担心名字冲突
输出转换块：在嵌套模板片段生成输出时，转换HTML转义、压缩、语法高亮等等；你可以定义自己的转换
3、通用数据模型
FreeMarker不是直接反射到Java对象，Java对象通过插件式对象封装，以变量方式在模板中显示
你可以使用抽象（接口）方式表示对象（JavaBean、XML文档、SQL查询结果集等等），告诉模板开发者使用方法，使其不受技术细节的打扰
4、为Web准备
在模板语言中内建处理典型Web相关任务（如HTML转义）的结构
能够集成到Model2 Web应用框架中作为JSP的替代
支持JSP标记库
为MVC模式设计：分离可视化设计和应用程序逻辑；分离页面设计员和程序员
5、智能的国际化和本地化
字符集智能化（内部使用UNICODE）
数字格式本地化敏感
日期和时间格式本地化敏感
非US字符集可以用作标识（如变量名）
多种不同语言的相同模板
6、强大的XML处理能力
<#recurse> 和<#visit>指令（2.3版本）用于递归遍历XML树
在模板中清楚和直觉的访问XML对象模型
开源论坛 JForum 就是使用了 FreeMarker 做为页面模板。




    

				在项目中难免和各种数据报表打交道，如导出XX申请表，登记表，推荐表之类。就可以通过现有信息导出Word文档。基于Java语言来导出Word文档的方式也有很多种，如Jacob，Apache POI，Freemarker，PageOffice，java2word 等等。。。。
在这里将通过Freemarker这个模板引擎来实现导出 Word，项目不限于Swing，SSH，SSM，Spring Boot 之类的
—————————————
Spring Boot，Freemarker
编辑好格式的Word文档 1份
将Word文档里需要填充的地方加上占位符${xxxx}
将编辑好占位符的文档另存为XML格式Word 2003 XML文档，并重命名，用英文命名
利用文本编辑器打开该XML文件检查，搜索第二步编辑的占位符，遇到$和 { } 分离的情况则进行修改。检查完毕后保存退出。
将检查完成的XML文件修改后缀名为 xxx.ftl
模板编辑完成
建立Java项目，引入jar包
编写对应数据的实体类
编写测试页面
编写导出的工具类（核心），并修改模板对应的占位符，有需要的话
编写控制层
				什么是页面静态化
将动态页面转化成静态的html，降低与数据库的交互次数，提高页面的访问速度。就是服务器在请求来之前把已经固定好的东西先编译好了，等请求来了再动态的填数据，不要等请求来了什么都没做忙得半死。
为什么要使用网页静态化技术
网页静态化技术和缓存技术的共同点都是为了减轻数据库的访问压力。而网页静态化比较适合大规模且相对变化不太频繁的数据。另外网页静态化还有利于SEO(搜索引擎优化)。将网页以纯静态化的形式展现，就可以使用Nginx这样的高性能的web服务器来部署。
Nginx可以承载5万的并发，而
				1 FreeMarker 简介
1.1 java模板引擎之一
FreeMarker 是一款 模板引擎： 即一种基于模板和要改变的数据， 并用来生成输出文本(HTML网页，电子邮件，配置文件，源代码等)的通用工具。 它不是面向最终用户的，而是一个Java类库，是一款程序员可以嵌入他们所开发产品的组件。
模板编写为FreeMarker Template Language (FTL)。它是简单的，专用的...
2. 创建模板文件
在模板文件中，您可以使用Freemarker的语法来定义HTML表格的结构和样式。例如，以下是一个简单的模板文件，它定义了一个包含表头和表格数据的HTML表格：
<table>
  <thead>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
  </thead>
  <tbody>
    <#list users as user>
        <td>${user.name}</td>
        <td>${user.age}</td>
        <td>${user.email}</td>
    </#list>
  </tbody>
</table>
在模板文件中，`${user.name}`、`${user.age}`和`${user.email}`是Freemarker表达式，它们将在渲染模板时被替换为实际的用户数据。
3. 准备数据
在Java代码中，您需要准备数据以便在模板中使用。您可以将数据放在一个Map对象中，其中每个键值对表示模板中的一个变量和它的值。例如，以下是一个包含三个用户的Map对象：
Map<String, Object> data = new HashMap<>();
List<User> users = Arrays.asList(
  new User("Alice", 30, "alice@example.com"),
  new User("Bob", 25, "bob@example.com"),
  new User("Charlie", 35, "charlie@example.com")
data.put("users", users);
在这里，User是一个自定义的Java类，它具有三个属性：name、age和email。
4. 渲染模板
最后，您需要将数据应用于模板并生成HTML表格。以下是一个简单的方法，使用Freemarker的Template和TemplateExceptionHandler类来完成这个任务：
public String generateTable(Map<String, Object> data) throws Exception {
  Configuration cfg = new Configuration(Configuration.VERSION_2_3_31);
  cfg.setClassForTemplateLoading(getClass(), "/templates");
  cfg.setDefaultEncoding("UTF-8");
  cfg.setTemplateExceptionHandler(TemplateExceptionHandler.RETHROW_HANDLER);
  Template template = cfg.getTemplate("table.ftl");
  StringWriter out = new StringWriter();
  template.process(data, out);
  return out.toString();
在这里，“/templates”是存放模板文件的目录，table.ftl是您之前创建的模板文件的名称。当process方法被调用时，Freemarker将使用data中的数据替换模板文件中的表达式，并将结果写入StringWriter对象中。最后，该方法将返回生成的HTML表格字符串。
希望这个简单的例子能帮助您入门Fre