模板引擎快速入门【合集】-蒲公英云

模板引擎快速入门【合集】

1 模板引擎概述

模板引擎：模型+数据=输出

早期我们采用的jsp技术就是一种模板引擎技术，如下图:

在这里插入图片描述

模板引擎工作过程：
1、浏览器请求web服务器
2、服务器渲染页面，渲染的过程就是向jsp页面(模板)内填充数据(模型)。
3、服务器将渲染生成的页面返回给浏览器。
所以模板引擎就是：模板+数据=输出，Jsp页面就是模板，页面中嵌入的jsp标签就是数据，两者相结合输出html网页。

常用的java模板引擎还有哪些？

Jsp、Freemarker、Thymeleaf 、Velocity 等。
本文章采用Freemarker作为模板引擎技术。

Freemarker官方地址：http://freemarker.foofun.cn/

FreeMarker 是一款模板引擎：即一种基于模板和要改变的数据，并用来生成输出文本(HTML网页，电子邮件，配置文件，源代码等)的通用工具。它不是面向最终用户的，而是一个Java类库，是一款程序员可以嵌入他们所开发产品的组件。FreeMarker 是免费的，基于Apache许可证2.0版本发布。

2 Freemarker快速入门

2.1 导入依赖

<!-- Spring Boot 对结果视图 Freemarker 集成 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-freemarker</artifactId>
    <version>2.6.7</version>
</dependency>

2.2 静态模板页编写

在resources页面下，创建template目录，并创建test.ftl模板页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello World!</title>
</head>
<body>
Hello ${name}!
</body>
</html>

模板引擎标签页面文档：http://freemarker.foofun.cn/ref\_directives.html

部分用法讲解：

controller传入：
modelAndView.addObject("model", coursePreviewInfo);

取对象中的属性

${
model.courseBase.name}

if-else用法

<#if model.courseBase.charge==’201000’>

<span class="new-pic">免费</span>

<#else>

<span class="new-pic">特惠价格￥${
model.courseBase.price!''}</span>
<span class="old-pic">原价￥${
model.courseBase.originalPrice!''}</span>

</#if>

list用法

<#list model.teachplans as firstNode>

 <div class="title act"><i class="i-chevron-top"></i>${
firstNode.pname}<span class="time">x小时</span></div>
 <div class="drop-down" style="height: 260px;">
     <ul class="list-box">
         <#list firstNode.teachPlanTreeNodes as secondNode>
             <li><a href="http://www.xuecheng-plus.com/course/preview/learning.html?id=${model.courseBase.id}&chapter=${secondNode.teachplanMedia.teachplanId!''}" target="_blank">${
secondNode.pname}</a></li>
         </#list>
     </ul>
 </div>

</#list>

2.3 application.yml编写

server:
  port: 8080
  # 为每个controller设置统一访问路径
#  servlet:
#    context-path: /content
spring:
  freemarker:
    enabled: true
    cache: false   #关闭模板缓存，方便测试
    settings:
      template_update_delay: 0
    suffix: .ftl   #页面模板后缀名
    charset: UTF-8
    template-loader-path: classpath:/templates/   #页面模板位置(默认为 classpath:/templates/)
    resources:
      add-mappings: false   #关闭项目中的静态资源映射(static、resources文件夹下的资源)

2.4 Controller编写

注意：因为是要返回视图而不是json数据，因此需要使用@Controller，而不是@RestController

@Controller
public class FreeMarkController {
    @GetMapping("/testFreeMark")
    public ModelAndView test(){
        ModelAndView modelAndView = new ModelAndView();
        //设置视图名称：resources/templates目录下的test.ftl
        modelAndView.setViewName("test");
        //设置模型数据
        modelAndView.addObject("name", "jack");
        return modelAndView;
    }
}