FreeMarker

什么是模板引擎？

模板引擎的目标是——> “数据+模板 = 结果”
模板引擎将数据与展示 有效的解耦

主流模板引擎

• Java Server Page
• FreeMarker
• Beetl

FreeMarker

• FreeMarker是免费开源的模板引擎技术
• FreeMarker脚本为FreeMarker Template Language
• FreeMarker 提供了大量的内建函数来简化开发

JSP与FreeMarker

FTL取值

• ${属性名} 取值，可对属性进行计算
• ${属性名!默认值} 使用默认值
• ${属性名？String} 格式化输出

FTL内置函数

FTL取值，迭代，分支判断示例：

import java.io.IOException;
import java.io.OutputStreamWriter;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;

import com.freemarker.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 FreemarkerSample2 {

	public static void main(String[] args) throws TemplateNotFoundException, MalformedTemplateNameException, ParseException, IOException, TemplateException {
		//1. 加载模板
		//创建核心配置对象
		Configuration config = new Configuration(Configuration.VERSION_2_3_28);
		//设置加载的目录
		config.setClassForTemplateLoading(FreemarkerSample2.class, "");
		//得到模板对象
		Template t = config.getTemplate("sample2.ftl");
		//2. 创建数据
		Map<String,Object> data = new HashMap<String,Object>();
		List<Computer> computers = new ArrayList();
		computers.add(new Computer("1234567" , "ThinkPad X1" , 2 , null , new Date() , 12999f , new HashMap() ));
		computers.add(new Computer("1234568" , "HP XXX" , 1 , "张三" , new Date() , 7500f , new HashMap() ));
		computers.add(new Computer("1234569" , "DELL XXX" , 3 , "李四" , new Date() , 8500f , new HashMap() ));
		computers.add(new Computer("1234570" , "ACER XXX" , 1 , "王五" , new Date() , 6300f , new HashMap() ));
		computers.add(new Computer("1234571" , "MSI XXX" , 1 , "赵六" , new Date() , 9300f , new HashMap() ));	
		data.put("computers", computers);
		//LinkedHashMap可以保证数据按存放顺序进行提取
		Map computerMap = new LinkedHashMap();
		for(Computer c : computers) {
			computerMap.put(c.getSn(), c);
		}
		data.put("computer_map", computerMap);
		//3. 产生输出
		t.process(data, new OutputStreamWriter(System.out));
	}
}

<#list computers as c>
序号:${c_index + 1} <#-- 迭代变量_index保存了循环的索引,从0开始 -->
SN:${c.sn}
型号:${c.model}
<#switch c.state>
<#case 1>
状态:使用中
<#break>
<#case 2>
状态:闲置
<#break>
<#case 3>
状态:已作废
<#break>
</#switch>
<#if c.user??>
用户:${c.user}
</#if>
采购日期:${c.dop?string("yyyy-MM-dd")}
采购价格:${c.price?string("0.00")}
-------------------------------------------
</#list>

==========================================
<#list computer_map?keys as k >
${k}-${computer_map[k].model}
${computer_map[k].price?string("0.00")}
</#list>

servlet与FTL整合

示例代码：
web.xml:

<?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>
    <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>
</web-app>

servlet:

package com.imooc.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;
	}
	
}

FTL文件：

<!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">IMOOC员工信息表</h1>
        <div class="panel panel-default">
            <div class="clearfix panel-heading ">
                <div class="input-group" style="width: 500px;">
                    
                </div>
            </div>

            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>员工编号</th>
                    <th>姓名</th>
                    <th>部门</th>
                    <th>职务</th>
                    <th>工资</th>
                    <th>&nbsp;</th>
                </tr>
                </thead>
                <tbody>
                <#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>

效果：