FreeMarker与Servlet整合

up:: FreeMarker内建函数

这篇博客是Freemarker核心重点！！！不过以后在实际开发中，较少使用Servlet，而是使用Spring等高级框架；所以以后的重点是Freemarker和这些高级框架的整合！！！

注： 实际中是使用JSP还是Freemarker，哪个更好用，见仁见智，按需选用；；不同的人可能有不同的看法，但目前FreeMarker似乎比JSP接受度高点。

---

一：freemarker与Servlet环境的整合

FreeMarker默认对JavaWeb有良好的支持；

1.引入freemarker.jar

2.在web.xml中配置FreemarkerServlet（核心重点）

在Eclipse中使用【ctrl+shift+t】快捷键查找类文件：

即，引入的freemarker.jar中的FreemarkerServlet这个Servlet类是关键！！！

\

在web.xml中配置：要想使freemarker在web项目中起作用，需要对freemarker.jar中的FreemarkerServlet的这个Servlet类进行配置：

 
    <?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>freemarkerppppp</servlet-name>
      	<!-- FreemarkerServlet这个类就是freemarker提供的一个Servlet，来简化web程序的开发 -->
      	<servlet-class>freemarker.ext.servlet.FreemarkerServlet</servlet-class>
      	<init-param>
      		<!-- 设置ftl加载目录 -->
      		<param-name>TemplatePath</param-name>
      		<!-- 以后的ftl文件都会放在 /WEB-INF/ftl目录下-->
      		<param-value>/WEB-INF/ftl</param-value>
      	</init-param>
      </servlet>
      <servlet-mapping>
      	<servlet-name>freemarkerppppp</servlet-name>
      	<!-- *.ftl的意思是，浏览器输入的url如果是以.ftl结尾的话，就会被 FreemarkerServlet这个Servlet处理-->
      	<!-- 即只要客户端浏览器输入的地址是以.ftl结尾的，这个FreemarkerServlet就会自动的到/WEB-INF/ftl目录中去查找对应名字的文件，并且将其进行输出 -->
      	<url-pattern>*.ftl</url-pattern>
      </servlet-mapping>
    </web-app>

---

web.xml配置分析：

FreemarkrServlet这个类的作用就是：只要客户端浏览器输入的地址是以.ftl结尾的，这个FreemarkerServlet就会自动的到/WEB-INF/ftl目录中去查找对应名字的文件，并且将其进行输出！！！！！

---

3.查看是否整合成功

为了演示是否配置成功，观察效果，在/WEB-INF目录下创建ftl目录，并添加一个test.ftl文件：

启动应用：

---

注解：

可以这样认为，对freemarker.jar中的FreemarkerServlet的这个Servlet类进行配置是基础；；；；当引入freemarker.jar的jar包，并且对其中的FreemarkerServlet进行配置后，这个web应用（的处理业务）的Servlet就可以识别ftl脚本文件了。背后是freemarker在做支撑！！！

---

二：案例：开发员工信息表

1.准备css等前端静态资源；创建ftl文件（将原html中文件复制进去）

可以发现， 本来是employee.html，现在变成了employee.ftl了 ！！！

启动应用，访问emloyee.ftl：

浏览器显示了employee.ftl这个静态html页面的内容，那么这个静态页面的数据如何从死的变成活的？

2.准备数据，编写后台逻辑代码：

ListServlet：（1）接受并处理客户端浏览器请求准备数据；（2）准备数据；（3）请求转发到employee.ftl，将数据以更好的方式显示出来； （注意看注释）

 
    package com.imooc.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<Employee> empList = new ArrayList<Employee>();
    		empList.add(new Employee(7733,"刘芳","销售部","销售经理",8500f));
    		empList.add(new Employee(7733,"李四","研发部","工程师",7000f));
    		// So，这两个员工放在哪里，才能被脚本读取到呐？
    		// 在web环境下中使用freemarker，其会自动从当前的请求会话(ServletRequest)，或者是ServletContext中自动进行查找；
    		// 这儿我们将empList放在了ServletRequest对象中；一会访问的时候，模板引擎(即FreeMarker)就会自动的从当前请求中获取数据了；
    		request.setAttribute("employee_list",empList);
    		// 数据添加好了，如何跳转到employee.ftl那个界面上呐？？？
    		// 利用请求转发，跳转到employee.ftl
    		request.getRequestDispatcher("/employee.ftl").forward(request, response);
    	}
 
    }
 

Servlet数据创建好了，并且已经请求转发到了employee.ftl，那么employee.ftl文件如何获取到这些数据并显示出来呐？？？

3.前端employee.ftl文件，加载数据

employee.ftl：加载数据：（1）获取到Servlet中准备的数据；将数据组织到html中；

初始的employee.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>
                    <tr>
                        <td>1</td>
                        <td>7782</td>
                        <td>张晓涛</td>
                        <td>研发部</td>
                        <td>研发工程师</td>
                        <td style="color: red;font-weight: bold">￥7,780.00</td>
 
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>7839</td>
                        <td>张丽</td>
                        <td>研发部</td>
                        <td>运维工程师</td>
                        <td style="color: red;font-weight: bold">￥8,820.00</td>
 
                    </tr>
 
                    <tr>
                        <td>3</td>
                        <td>5243</td>
                        <td>张倩</td>
                        <td>市场部</td>
                        <td>客户经理</td>
                        <td style="color: red;font-weight: bold">￥6,000.00</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
 
    </body>
    </html>
 
**修改后的employee.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>

4.效果：

---

5.注解：employee.ftl获取数据是依此从：请求对象，会话对象，全局对象获取的；

---

注：

● View（视图）部分，需要提取后台的数据，和html组合在一起，这个工作需要模板引擎，JSP是一种模板引擎，FreeMarker也是一种模板引擎！！！

● 自然JSP这种模板引擎是JEE的标准，Tomcat是厂商的实现中已经内置了JSP的实现了，可以直接用；文件是.jsp；

● FreeMarker这种模板引擎并不是JEE的标准，想要使用FreeMarker需要导入jar包，并进行配置；文件是.ftl；

● 虽然JSP和FreeMarker的使用策略和具体语法存在差异，但是二者的整体使用套路是十分类似的；JSP核心是el和jstl表达式，FreeMarker核心是freemarker语法和内建函数；