模板引擎与Freemarker
模板引擎的目标是“数据+模板=结果”
模板引擎将数据与展现有效“解耦”
文章目录
模板引擎
主流模板引擎
- Java Server Page(JSP)
- Freemarker
- Beetle
Freemarker
Freemarker是免费开源的模板引擎技术
Freemarker脚本为Freemarker Template Language
Freemarker提供了大量内建函数来简化开发
JSP与Freemarker
| JSP | Freemarker | |
|---|---|---|
| 官方标准 | 是 | 否 |
| 执行方式 | 编译型 | 解释型 |
| 执行效率 | 高 | 低 |
| 开发效率 | 低 | 高 |
| 扩展能力 | 弱 | 强 |
| 数据提取 | JSTL+EL | 内置标签 |
Freemarker快速上手
freemarker中文在线手册：http://freemarker.foofun.cn/
新建一个普通的java project，新建lib文件夹导入jar包freemarker.jar，在freemarker包下新建一个FreemarkerSample1.java类和sample1.ftl文件，双击sample1.ftl文件Eclipse会弹出提示安装ftl文件的编辑插件，安装插件后只是文件代码会高亮显示等，如果不安装也不影响开发。entity包下创建Computer类作为后续的测试数据类。
FTL取值
${属性名} 取值，可对属性进行计算
${属性名!默认值} 如果属性不存在，使用默认值
${属性名?string} 格式化输出
分支判断
if分支判断
switch分支判断
freemarker.FreemarkerSample1.java
package freemarker;
import java.io.IOException;
import java.io.OutputStreamWriter;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import entity.Computer;
import freemarker.core.ParseException;
import freemarker.template.Configuration;
import freemarker.template.MalformedTemplateNameException;
import freemarker.template.Template;
import freemarker.template.TemplateException;
import freemarker.template.TemplateNotFoundException;
public class FreemarkerSample1 {
public static void main(String[] args) throws TemplateNotFoundException, MalformedTemplateNameException, ParseException, IOException, TemplateException {
//1. 加载模板 注意传入构造参数指定使用freemarker的版本号，不同版本的freemarker解析语法不同
//创建核心配置对象
Configuration config = new Configuration(Configuration.VERSION_2_3_31);
//设置加载目录 在FreemarkerSample1.class类中加载指定的ftl文件，第二个参数空字符串代表当前包
config.setClassForTemplateLoading(FreemarkerSample1.class, "");
//得到模板对象
Template t = config.getTemplate("sample1.ftl");
//2. 创建数据
Map<String,Object> data = new HashMap<String,Object>();
data.put("site", "百度");
data.put("url", "http://www.baidu.com");
data.put("date", new Date());
data.put("number", 2165464.565465);
//还可以使用复杂数据类型
Map info = new HashMap();
info.put("cpu", "i5");
Computer c1 = new Computer("1234567","ThinkPad",2,null,new Date(),12900f,info);
data.put("computer",c1);
//3. 产生输出 System.out是输出的字节流,而process需要传入的是字符流，使用OutputStreamWriter将字节流转换为字符流
t.process(data, new OutputStreamWriter(System.out));
}
}
sample1.ftl
<#-- Freemarker取值 -->
${site}
${url}
<#-- 默认值 -->
${author!"不存在的属性"}
<#-- 格式化输出 -->
${date?string("yyyy年MM月dd日 HH:mm:ss SSS")}
${number?string("0.00")}
<#-- Freemarker中判断字符串相等只需要"==" 而不像java用equals -->
<#if computer.sn=="1234567">
重要设备
</#if>
SN:${computer.sn}
型号:${computer.model}
<#if computer.state==1>
状态:正在使用
<#elseif computer.state==2>
状态:闲置
<#elseif computer.state==2>
状态:报废
</#if>
<#switch computer.state>
<#case 1>状态:正在使用
<#break>
<#case 2>状态:闲置
<#break>
<#case 3>状态:报废
<#break>
<#default>状态:无效状态
</#switch>
<#-- ??代表判断对象是否为null返回true/false -->
<#if computer.user??>
用户:${computer.user}
</#if>
采购时间:${computer.dop?string("yyyy年MM月dd日")}
采购价格:${computer.price?string("0.00")}
-----------------------
CPU:${computer.info["cpu"]}
内存:${computer.info["memory"]!"无内存信息"}
entity.Computer.java
package entity;
import java.util.Date;
import java.util.Map;
public class Computer {
private String sn; //序列号
private String model;
private int state; //状态1-在用 2-闲置 3-报废
private String user; //使用人
private Date dop; //采购日期
private Float price;
private Map info; //电脑配置信息
public Computer() {}
public Computer(String sn, String model, int state, String user, Date dop, Float price, Map info) {
super();
this.sn = sn;
this.model = model;
this.state = state;
this.user = user;
this.dop = dop;
this.price = price;
this.info = info;
}
public String getSn() {return sn;}
public void setSn(String sn) {this.sn = sn;}
public String getModel() {return model;}
public void setModel(String model) {this.model = model;}
public int getState() {return state;}
public void setState(int state) {this.state = state;}
public String getUser() {return user;}
public void setUser(String user) {this.user = user;}
public Date getDop() {return dop;}
public void setDop(Date dop) {this.dop = dop;}
public Float getPrice() {return price;}
public void setPrice(Float price) {this.price = price;}
public Map getInfo() {return info;}
public void setInfo(Map info) {this.info = info;}
}
list迭代列表、Map
迭代变量+下划线index 可以获取到当前循环的索引值
list迭代Map
将FreemarkerSample1.java第2步中数据替换
//2. 创建数据
//迭代list的测试数据
Map<String,Object> data = new HashMap<String,Object>();
List<Computer> computers = new ArrayList();
computers.add(new Computer("1234567","ThinkPad",2,null,new Date(),12900f,new HashMap()));
computers.add(new Computer("1234565","HP",2,"百六",new Date(),12900f,new HashMap()));
computers.add(new Computer("1234568","DELL",2,"小A",new Date(),12900f,new HashMap()));
data.put("computers", computers);
//迭代Map的测试数据
//HashMap是乱序的,LinkedHashMap可以保证数据安存放顺序进行提取
Map computerMap = new LinkedHashMap();
for(Computer c:computers) {
computerMap.put(c.getSn(), c);
}
data.put("computer_map", computerMap);
sample1.ftl
<#list computers as computer>
序号:${computer_index+1} <#-- 迭代变量_index保存了循环的索引 -->
SN:${computer.sn}
型号:${computer.model}
<#switch computer.state>
<#case 1>
状态:正在使用
<#break>
<#case 2>
状态:闲置
<#break>
<#case 3>
状态:报废
<#break>
<#default>
状态:无效状态
</#switch>
<#if computer.user??>
用户:${computer.user}
</#if>
采购时间:${computer.dop?string("yyyy年MM月dd日")}
采购价格:${computer.price?string("0.00")}
CPU:${computer.info["cpu"]!"无CPU信息"}
内存:${computer.info["memory"]!"无内存信息"}
-----------------------
</#list>
=================================
<#list computer_map?keys as k>
${k}-${computer_map[k].model}
${computer_map[k].price?string("0.00")}
<#-- 其他以此类推不写了 -->
-----------------------
</#list>
内建函数(常用)
freemarker中文在线手册：http://freemarker.foofun.cn/
将FreemarkerSample1.java第2步中数据替换
//2. 创建数据
Map<String,Object> data = new HashMap<String,Object>();
data.put("name", "jackson");
data.put("brand", "bmw");
data.put("words", "first blood");
data.put("n", 34324.3432);
data.put("date", new Date());
List<Computer> computers = new ArrayList();
computers.add(new Computer("1234567","ThinkPad",2,null,new Date(),12900f,new HashMap()));
computers.add(new Computer("1234565","HP",2,"百六",new Date(),14900f,new HashMap()));
computers.add(new Computer("1234568","DELL",2,"小A",new Date(),12000f,new HashMap()));
data.put("computers", computers);
sample1.ftl
${name?cap_first}
${brand?upper_case}
${brand?length}
${words?replace("blood","*****")}
${words?index_of("blood")}
<#-- 利用?string实现三目运算符的操作 -->
${(words?index_of("blood")!=-1)?string("包含敏感词汇","不包含敏感词汇")}
${n?round}
${n?floor}
${n?ceiling}
公司共有${computers?size}台电脑
第一台:${computers?first.model}
最后一台:${computers?last.model}
<#-- 集合排序函数sort_by(),加上reverse反转即降序排序 -->
<#list computers?sort_by("price")?reverse as c>
${c.sn}-${c.price}
</#list>
Freemarker与Servlet整合
项目结构如下：
WEB-INF/lib文件夹下导入freemarker.jar包
ftl文件夹下新建employee.ftl,将准备好的html代码复制进去，css,fonts,js等静态资源与WEB-INF同级存放即可
web.xml 配置freemarker
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>fm-web</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<!-- servlet与freemarker整合是由FreemarkerServlet类实现的 -->
<servlet>
<servlet-name>freemarker</servlet-name>
<servlet-class>freemarker.ext.servlet.FreemarkerServlet</servlet-class>
<!-- 脚本文件存放目录，访问以.ftl结尾的文件映射到/WEB-INF/ftl -->
<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>
</web-app>
Employee.java 员工数据模板类
package freemarker.servlet;
public class Employee {
private Integer empno;
private String ename;
private String department;
private String job;
private Float salary;
public Employee() {}
public Employee(Integer empno, String ename, String department, String job, Float salary) {
super();
this.empno = empno;
this.ename = ename;
this.department = department;
this.job = job;
this.salary = salary;
}
public Integer getEmpno() {
return empno;
}
public void setEmpno(Integer empno) {
this.empno = empno;
}
public String getEname() {
return ename;
}
public void setEname(String ename) {
this.ename = ename;
}
public String getDepartment() {
return department;
}
public void setDepartment(String department) {
this.department = department;
}
public String getJob() {
return job;
}
public void setJob(String job) {
this.job = job;
}
public Float getSalary() {
return salary;
}
public void setSalary(Float salary) {
this.salary = salary;
}
}
ListServlet.java 后台提供数据
package freemarker.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class ListServlet
*/
@WebServlet("/list")
public class ListServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ListServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List list = new ArrayList();
list.add(new Employee(7332,"小王","市场部","客户代表",5654f));
list.add(new Employee(8832,"小B","研发部","运维工程师",7000f));
request.setAttribute("employee_list", list);
// 请求转发跳转
request.getRequestDispatcher("/employee.ftl").forward(request,response);
}
}
employee.ftl list迭代列表展示数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>员工列表</title>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet"></link>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<style type="text/css">
.pagination {
margin: 0px
}
.pagination > li > a, .pagination > li > span {
margin: 0 5px;
border: 1px solid #dddddd;
}
.glyphicon {
margin-right: 3px;
}
.form-control[readonly] {
cursor: pointer;
background-color: white;
}
#dlgPhoto .modal-body{
text-align: center;
}
.preview{
max-width: 500px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<h1 style="text-align: center">员工信息表</h1>
<div class="panel panel-default">
<div class="clearfix panel-heading ">
<div class="input-group" style="width: 500px;">
</div>
</div>
<table border=1 class="table table-bordered table-hover">
<thead>
<tr>
<th>序号</th>
<th>员工编号</th>
<th>姓名</th>
<th>部门</th>
<th>职务</th>
<th>工资</th>
<th> </th>
</tr>
</thead>
<tbody>
<#-- employee_list取值范围是从请求，会话，servletContext依次查找的 -->
<#list employee_list as emp>
<tr>
<td>${emp_index+1}</td>
<td>${emp.empno?string("0")}</td>
<td>${emp.ename}</td>
<td>${emp.department}</td>
<td>${emp.job}</td>
<td style="color: red;font-weight: bold">￥${emp.salary?string("0.00")}</td>
</tr>
</#list>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
网页访问/list即可通过请求转发到employee.ftl显示网页，并动态绑定后台数据
177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
