freemark ftl 的使用

WEB-INF目录下的freemark文件加载外部css、js、image文件解决方法

使用spring+freemark做项目的时候，经常碰到放在WEB-INF目录下的freemark文件加载外部css、js和image的时候失效，因为css、js和image路径不正确。

造成以上结果的原因有：

原因1（环境问题）、在web.xml文件中配置org.springframework.web.servlet.DispatcherServlet的时候url-pattern配置成了拦截所有(/*)，或者配置成了包含有.css/.js/.jpg........等等后缀的拦截方式。

原因2（人为因素）、在ftl文件中导入css或者js或者image的时候，没有加上相对路径

              错误： yyy/xxx.css

              正确：${webApp的根}/ ${css/js/image文件存放目录}/yyy/xxx.css

 

解决方法：

假如有：如下配置

WEB-INF目录如下：在WEB-INF/template文件下有四个freemark文件，其中list.ftl用于列表显示数据

外部css、js及其image文件目录如下：

 

这时候，WEB-INF/template/list.ftl文件需要引入list.css文件样式，

首先要确保spring的拦截方式不包括css、js和image文件，这里配置成只拦截后缀是.sc的url请求

 

然后配置好freemark的全局变量

application-freemark.properties文件配置如下：

 

applicationContext-freemark.xml配置如下：

在WEB-INF/template/list.ftl文件引入list.css文件样式

css文件内容如下：

 

最终list.ftl的显示结果如下：

===================================================================================

同理，导入js文件

 

效果：

===========================================================================

加载图片的例子：

效果：