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

谁践踏了优雅 2024-03-26 12:57 80阅读 0赞

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

### 1 模板引擎概述 ###

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

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

![在这里插入图片描述][0a6e4579f50947b3a15fa5b4ebdc8cf5.png]

> 模板引擎工作过程：  
> 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 导入依赖 ####

<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);`

*  取对象中的属性

<p>${
        model.courseBase.name}</p>

*  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="item">
         <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>
     </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;
        }
    }

> 浏览器中输入访问路径：`localhost:8080/freeMark`

结果：  
![在这里插入图片描述][953ccc61d2b24129b972c602bf47e123.png]

查看页面源代码：  
![在这里插入图片描述][7b9aae9546634b7391ceab15593fb543.png]

[0a6e4579f50947b3a15fa5b4ebdc8cf5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/241106f73f634bfa8ae5d52b92a05d91.png
[953ccc61d2b24129b972c602bf47e123.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/30ec0cbad7eb40bf9065d5f2dde01466.png
[7b9aae9546634b7391ceab15593fb543.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4d8a2be66cd643e998a57735b05eb1f4.png