简介
FreeMarker是一款模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页、电子邮件、配置文件、源代码等)的通用工具。 它不是面向最终用户的,而是一个Java类库,是一款程序员可以嵌入他们所开发产品的组件
官网手册
JavaEE中的两种开发方式
前后端不分离
要求程序员要掌握js,为了简化页面开发,引入页面模板,页面模板整体上来说又可以分为两大类
前端模板
前端模板就是后缀为html的模板,代表就是Thymeleaf,这种模板有一个好处就是不需要服务端解析就能直接在浏览器中打开。
后端模板
必须经过服务端解析才能被浏览器展示出来的模板
JSP
Freemarker
velocity
前后端分离
前后端分离的时候,后端纯粹只是接口,没有任何页面。所有的页面由前端完成,前端会使用相关的模板。
Vue
AngularJS
React
HelloWorld案例
创建一个maven项目
整合spring和SpringMVC
spring整合SpringMVC
引入freemarker
1.引入freemarker依赖
<dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.28</version> </dependency> <!-- freemarker中必须依赖spring-context-support --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</artifactId> <version>4.3.21.RELEASE</version> </dependency>
2.创建freemarker变量文件
freemarker-var.properties
3.配置视图解析器
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd"> <!-- 开启注解 --> <mvc:annotation-driven></mvc:annotation-driven> <!-- 开启扫描 --> <context:component-scan base-package="com.dpb.controller"> <!-- 只扫描指定路径下的controller注解 --> <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller" /> </context:component-scan> <!-- 配置freemarker --> <!-- 1.引入freemarker属性文件 --> <bean class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer"> <property name="locations"> <list> <value>classpath:freemarker-var.properties</value> </list> </property> </bean> <!-- 2.定义模板属性 --> <bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer"> <!-- 定义模板位置 --> <property name="templateLoaderPath" value="/WEB-INF/ftl/" /> <!-- 编码方式 --> <property name="defaultEncoding" value="utf-8" /> <!-- 设置键值对 --> <property name="freemarkerVariables"> <map> <entry key="root" value="${root}"></entry> </map> </property> <!--设置属性值 --> <property name="freemarkerSettings"> <props> <prop key="template_update_delay">10</prop> <prop key="locale">zh_CN</prop> <prop key="datetime_format">yyyy-MM-dd HH:mm:ss</prop> <prop key="date_format">yyyy-MM-dd</prop> <prop key="time_format">HH:mm:ss</prop> <prop key="number_format">#.####</prop> </props> </property> </bean> <!-- 3.配置视图解析器 --> <bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver"> <!-- 生成view的类 --> <property name="viewClass" value="org.springframework.web.servlet.view.freemarker.FreeMarkerView" /> <!-- 配置后缀 --> <property name="suffix" value=".ftl" /> <!-- 支持request覆盖model --> <property name="allowRequestOverride" value="true" /> <property name="allowSessionOverride" value="true" /> <property name="exposeRequestAttributes" value="true" /> <property name="exposeSessionAttributes" value="true" /> <property name="contentType" value="text/html;charset=utf-8" /> </bean> </beans>
4.测试
在WEB-INF下创建 index.ftl
controller跳转到index.ftl页面
@Controller public class UserController { @RequestMapping("/hello") public String hello(){ return "index"; } }
http://localhost:8082/freemarker01/hello
插值规则
通用插值
字符串,数字,Boolean型,Date类型
@RequestMapping("/hello") public String hello(Model m){ m.addAttribute("name", "张三"); m.addAttribute("age", 18); m.addAttribute("enable", true); m.addAttribute("birth",new Date()); return "index"; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h1>Hello Freemarker</h1> ${root}<br> <hr> ${name}<br> ${age}<br> <#-- 转换规则 --> ${enable?string("true","false")}<br> ${birth?string("yyyy-MM-dd")}<br> </body> </html>
数字格式化插入
数字格式化插值可采用#{expr;format}形式来格式化数字,其中format可以是:
mX:小数部分最小X位
MX:小数部分最大X位
<#--定义变量--> <#assign x=3.9876543> <#assign y=6> #{x;M2}<#--显示3.99--><br> #{y;M2}<#--显示6--><br> #{x;m3}<#--显示3.988--><br> #{y;m3}<#--显示6.000--><br>
eclipse安装Freemarker插件
重启即可
注意创建项目的编码方式一定要指定为UTF-8.不然ftl中指定的常量会乱码!!!