前言

上一篇给大家介绍了springboot整合Thymeleaf,于是这一篇给大家带来如何整合另一种模板引擎:freemarker。freemarker和thymeleaf是模板引擎。在早前我们使用Struts或者SpringMVC等框架的时候,使用的都是jsp,jsp的本质其实就是一个Servlet,其中的数据需要在后端进行渲染,然后再在客户端显示,效率比较低下。而模板引擎恰恰相反,其中的数据渲染是在客户端,效率方面比较理想一点。前后端不分离的话用模板引擎比较好,前后端分离的话其实用处并不大很大。

一、介绍

  • FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写。FreeMarker被设计用来生成HTMLWeb页面,特别是基于MVC模式的应用程序。
  • 所谓模板,就是一份已经写好了基本内容,有着固定格式的文档,其中空出或者用占位符标识的内容,由使用者来填充,不同的使用者给出的数据是不同的。在模板中的占位符,在模板运行时,由模板引擎来解析模板,并采用动态数据替换占位符部分的内容。
  • FreeMarker不是一个Web应用框架,而适合作为Web应用框架一个组件,FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP。它不仅可以用作表现层的实现技术,而且还可以用于生成XML,JSP或Java文件等。

二、目录示意图

image.png

三、整合步骤

3.1、依赖

compile("org.springframework.boot:spring-boot-starter-freemarker:$springbootStarterfreemarkerVersion")

3.2、配置

# web port
server:
  port: 8098

spring:
  freemarker:
    tempalte-loader-path: classpath=/templates
    #        关闭缓存,及时刷新,上线生产环境需要修改为true
    cache: false
    charset: UTF-8
    check-template-location: true
    content-type: text/html
    expose-request-attributes: true
    expose-session-attributes: true
    request-context-attribute: request
    suffix: .ftl

  mvc:
    static-path-pattern: /static/**

com:
  haozz:
    opensource:
      name: wangshu
      website: www.haozz.top:18158/
      language: chinese

3.3、编写访问类Controller

@Controller
@RequestMapping(value = "/ftl")
public class FreeMarkerController {

    @Autowired
    private Resource resource;

    @RequestMapping(value = "index")
    public String index(ModelMap map) {
        map.addAttribute("resource", resource);
        return "freemarker/index";
    }

    @RequestMapping(value = "center")
    public String center(ModelMap map) {
        map.put("users", parseUsers());
        map.put("title", "用户列表");
        return "freemarker/center/center";
    }
	// 我这里展示表格,用到初始化数据
    private List<Map> parseUsers() {
        List<Map> list = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            Map map = new HashMap();
            map.put("name", "kevin_" + i);
            map.put("age", 10 + i);
            map.put("phone", "1860291105" + i);
            list.add(map);
        }
        return list;
    }
}

3.4、表格中用到的bean (不用表格可忽略和上面controller)

//表示这个类是一个读取配置文件的类
@Configuration
//指定配置的一些属性,其中的prefix表示前缀
@ConfigurationProperties(prefix = "com.haozz.opensource")
//指定所读取的配置文件的路径
@PropertySource(value = "classpath:application.yml")
@Data
public class Resource {

    private String name;
    private String website;
    private String language;

}

3.5、前端页面

  • templates目录下index
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title></title>
</head>
<body>
FreeMarker模板引擎
我是首页,默认index页面
</body>
</html>
  • templates目录下的freemarker目录下的index文件
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title></title>
</head>
<body>
FreeMarker模板引擎
<h1>${resource.name}</h1>
<h1>${resource.website}</h1>
<h1>${resource.language}</h1>
</body>
</html>
  • freemarker目录下的center下的center文件
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>${title}</title>
    <style>
        table {
            width: 50%;
            font-size: .938em;
            border-collapse: collapse;/*边框合并*/
        }
        th {
            text-align: left;
            padding: .5em .5em;
            font-weight: bold;
            background: #66677c;color: #fff;
        }

        td {
            padding: .5em .5em;
            border-bottom: solid 1px #ccc;
        }

        table,table tr th, table tr td { border:1px solid #0094ff; }/*设置边框*/
    </style>
</head>
<body>
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Phone</th>
    </tr>
    <#list users as user>
        <tr>
            <td>${user.name}</td>
            <td>${user.age}</td>
            <td>${user.phone}</td>
        </tr>
    </#list>
</table>
</body>
</html>

至此就结束了,现在来验证一下子

四、访问

好了到这里就真的结束了,不过有个注意的值得注意

五、注意:

  • a.这里不是走HTTP + JSON模式,使用了@Controller而不是先前的@RestController
  • b.方法返回值是String类型,和application.properties配置的Freemarker文件配置路径下的各个* .ftl文件名一致。这样才会准确地把数据渲染到ftl文件里面进行展示。
  • c.用Model类,向Model加入数据,并指定在该数据在Freemarker取值指定的名称。
打赏
支付宝 微信
上一篇 下一篇