什么是模板引擎?
- 模板引擎的目标是“数据+模板=结果”
- 模板引擎将数据与展现有效“解耦”
主流模板引擎
- Java Server Page（JSP）
- Freemarker
- Beetl
Freemarker介绍
Freemarker官方网站：https://freemarker.apache.org/
Freemarker中文参考手册：http://freemarker.foofun.cn/
两种安装方式：自己下载jar包导入或通过maven导入
将jar包复制到工程的lib目录中（若没有，自己新建） ，
在jar包上点右键，将该jar包加载
加载后，创建java文件以及ftl文件
当打开sample.ft1文件后,过了一会,可能会弹出下图面板
选择第一项,点击ok
点击安装即可👉finish👉install anyway
如果没有提示安装这个,在ftl文件点击鼠标右键,下图方式打开即可
区别只是上面安装的编辑器可以高亮显示相应关键字.
FreemarkerSample1.java
1 package com.imooc.freemarker;
2
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;
8
9 import com.imooc.freemarker.entity.Computer;
10
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;
17
18 public class FreemarkerSample1 {
19
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 //3. 产生输出
33 t.process(data, new OutputStreamWriter(System.out));
34 }
35 }
sample.ftl 模板脚本文件
1 ${site}
2 ${url}
JSP与Freemarker
Freemarker入门
1 FTL取值
Freemarkersample1.java
1 package com.imooc.freemarker;
2
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;
8
9 import com.imooc.freemarker.entity.Computer;
10
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;
17
18 public class FreemarkerSample1 {
19
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 }
41 }
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>
21
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;
2
3 import java.util.Date;
4 import java.util.Map;
5
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; //电脑配置信息
14
15 public Computer() {
16
17 }
18
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 }
71
72 }
2 if 分支判断 和switch分支判断
3 list 迭代
1)list迭代列表
2)list迭代map
3)list数字序列迭代
Freemarkersample2.java
1 package com.imooc.freemarker;
2
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;
11
12 import com.imooc.freemarker.entity.Computer;
13
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;
20
21 public class FreemarkerSample2 {
22
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 }
49 }
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>
23
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;
2
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;
11
12 import com.imooc.freemarker.entity.Computer;
13
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;
20
21 public class FreemarkerSample3 {
22
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 }
48 }
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("包含敏感词汇","不包含敏感词汇")}
8
9 ${n?round}
10 ${n?floor}
11 ${n?ceiling}
12
13 公司共有${computers?size}台电脑
14 第一台:${computers?first.model}
15 最后一台:${computers?last.model}
16
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
6296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
