微服务[学成在线] day04：页面静态化

最新推荐文章于 2020-07-26 03:09:07 发布

cory_lin

最新推荐文章于 2020-07-26 03:09:07 发布

阅读量390

点赞数

分类专栏：微服务项目学习文章标签： java spring boot freemarker mongodb

本文链接：https://blog.csdn.net/codeyee/article/details/107558407

版权

本文详细介绍了使用FreeMarker进行页面静态化的流程，从需求分析到实战应用，包括FreeMarker的快速入门、基础语法以及模板管理。通过FreeMarker与Spring Boot结合，实现了数据模型和模板的融合，生成静态HTML页面。同时探讨了页面数据模型的获取、远程接口调用以及MongoDB中的GridFS用于存储模板文件。最后，提到了页面预览的开发与测试，包括Nginx代理配置。

摘要由CSDN通过智能技术生成

😎 知识点概览

为了方便后续回顾该项目时能够清晰的知道本章节讲了哪些内容，并且能够从该章节的笔记中得到一些帮助，所以在完成本章节的学习后在此对本章节所涉及到的知识点进行总结概述。

本章节为【学成在线】项目的 day04 的内容

页面静态化的基本概念
Freemarker 框架基础入门
使用 MongoDB 提供的 GridFS 来实现页面数据的分布式储存
使用 freemarker 框架实现页面静态化以及发布

一、页面静态化需求

概述

为什么要进行页面管理？

本项目的 cms 系统的功能就是根据运营的需要，对门户等子系统的部分页面进行管理，从而实现快速的根据用户需求修改页面的内容并上线需求。
如何修改页面的内容？

在开发中修改页面的内容是需要人工编写 html 以及 js 文件， cms 系统是通过程序自动化的对页面的内容进行修改，通过页面静态化技术生成 html 页面。
如何对页面进行静态化？

一个页面等于 模板 + 数据，在添加页面的时候我们选择了页面的模板。
页面静态化以及页面发布的流程

业务流程

业务流程如下

获取模型数据
制作模板
对页面进行静态化
将静态化生成的 html 页面存放在文件系统中
将存放在文件系统的 html 页面发布到服务器

二、FreeMarker研究

0x01 FreeMarker介绍

freemarker 是一个用 Java 开发的模板引擎

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

Jsp、Freemarker、Thymeleaf、Velocity 等
模板+数据模型 = 输出

freemarker 并不关心数据的来源，只是根据模板的内容，将数据模型在模板中显示并输出具体的（通常为 html ，也可以生成其他格式的文件）
1. 数据模型
  
  数据模型在 java 中可以是基本类型也可以是 List、Map、Pojo 等复杂类型
2. 来自官方的例子：（https://freemarker.apache.org/docs/dgui_quickstart_basics.html）
  
  数据模型：
  
  模板：
  
  输出：

0x02 FreeMark 快速入门

freemarker 作为 Springmvc 一种视图的格式，默认情况下， SpringMvc 支持 freemarker 视图格式。

需要创建 Spring boot + Freemarker工程用于测试的模板。

1、创建测试工程

我们在原有的工程下，创建一个test-freemarker 的 maven 模块，测试工程专门用于freemarker的功能测试与模板的测试。

pom如下

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>xc-framework-parent</artifactId>
        <groupId>com.xuecheng</groupId>
        <version>1.0-SNAPSHOT</version>
        <relativePath>../xc-framework-parent/pom.xml</relativePath>
    </parent>
    <modelVersion>4.0.0</modelVersion>
    <artifactId>test-freemarker</artifactId>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <dependency>
            <groupId>com.squareup.okhttp3</groupId>
            <artifactId>okhttp</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-io</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>
    </dependencies>
</project>

2、配置文件

配置 application.yml 和 logback-spring.xml，从 cms 工程拷贝这两个文件，进行更改， logback-spring.xml 无需更改，application.yml 内容如下：

server:
  port: 8088 #服务端口
spring:
  application:
    name: test‐freemarker #指定服务名
  freemarker:
    cache: false #关闭模板缓存，方便测试
    settings:
      template_update_delay: 0 #检查模板更新延迟时间，设置为0表示立即检查，如果时间大于0会有缓存不方便

3、创建模型类

在 freemarker 的测试工程下创建模型类型用于测试；

创建 com.xuecheng.test.freemarker.model 包，并构建一个 Student 模型类用于后面的测试

package com.xuecheng.test.freemarker.model;
import lombok.Data;
import lombok.ToString;
import java.util.Date;
import java.util.List;

@Data
@ToString
public class Student {
   
    private String name;//姓名
    private int age;//年龄
    private Date birthday;//生日
    private Float money;//钱包
    private List<Student> friends;//朋友列表
    private Student bestFriend;//最好的朋友
}

4、创建模板

在 src/main/resources 下创建 templates，此目录为 freemarker 的默认模板存放目录；

在 templates 下创建模板文件 test1.ftl，模板中的 ${name} 最终会被freemarker 替换成具体的数据。

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

5、创建 controller

创建 Controller 类，向 Map 中添加 name，最后返回模板文件。

@RequestMapping("/freemarker")
@Controller  //这里主要不要使用RestController,RestController默认返回json数据,使模板引擎失效
public class FreemarkerController {
   

    /**
     * 测试1
     * @param map freemarker引擎会自动从Map形参中读取变量进行渲染
     * @return
     */
    @RequestMapping("/test1")
    public String freemarker(Map<String,Object> map){
   
        map.put("name", "黑马程序员");
        //返回模板文件名称
        return "test1";
    }
}

6、创建启动类

package com.xuecheng.test.freemarker;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class FreemarkerTestApplication {
   
    public static void main(String[] args) {
   
        SpringApplication.run(FreemarkerTestApplication.class,args);
    }
}

7、测试

访问 http://localhost:8088/freemarker/test1 测试

0x03 Freemarker 基础语法

1、核心指令

数据模型

Freemarker 静态化依赖数据模型和模板，下边定义数据模型；

下边方法形参 map 即为 freemarker 静态化所需要的数据模型，在 map 中填充数据：

package com.xuecheng.test.freemarker.controller;
import com.xuecheng.test.freemarker.model.Student;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

@RequestMapping("/freemarker")
@Controller  //这里主要不要使用RestController,RestController默认返回json数据,使模板引擎失效
public class FreemarkerController {
   

    /**
     * 测试1
     * @param map freemarker引擎会自动从Map形参中读取变量进行渲染
     * @return
     */
    @RequestMapping("/test1")
    public String freemarker(Map<String,Object> map){
   
        map.put("name", "黑马程序员");
        //学生对象1
        Student stu1 = new Student();
        stu1.setName("小明");
        stu1.setAge(18);
        stu1.setMoney(1888.123f);
        stu1.setBirthday(new Date());
        //学生对象2
        Student stu2 = new Student();
        stu2.setName("小红");
        stu2.setAge(22);
        stu2.setMoney(1888.123f);
        stu2.setBirthday(new Date());
        //创建一个List对象，用于储存上面这两个学生对象
        ArrayList<Object> stus = new ArrayList<>();
        stus.add(stu1);
        stus.add(stu2);
        //向数据模型中放入List
        map.put("stus",stus);
        //返回模板文件名称
        return "test1";
    }
}

List指令

本节定义freemarker模板，模板中使用freemarker的指令，关于freemarker的指令需要知道：

1、注释，即<#‐‐和‐‐>，介于其之间的内容会被freemarker忽略

2、插值（Interpolation）：即${..}部分,freemarker会用真实的值代替${..}

3、FTL指令：和HTML标记类似，名字前加#予以区分，Freemarker会解析标签中的表达式或逻辑。

4、文本，仅文本信息，这些不是freemarker的注释、插值、FTL指令的内容会被freemarker忽略解析，直接输出内容

在 test1.ftl 模板中使用list指令遍历数据模型中的数据：

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

<p>在test1.ftl模板中使用list指令遍历数据模型中的数据：</p>
<table>
    <thead>
        <td>序号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>钱包</td>
    </thead>
    <#list stus as stu>
        <tr>
            <#--使用 _index 来遍历的序号-->
            <td>${
   stu_index + 1}</td>
            <td>${
   stu.name}</td>
            <td>${
   stu.age}</td>
            <td>${
   stu.money}</td>
        </tr>
    </#list>
</table>

</body>
</html>

效果

LIST输出效果

遍历Map数据

1、数据模型

在controller 内使用map指令遍历数据模型中的 stuMap。

//准备map数据
HashMap<Object, Object> stuMap = new HashMap<>();
stuMap.put("stu1",stu1);
stuMap.put("stu2",stu2);
//像数据模型内放数据
map.put("stu1",stu1);
//向数据模型放入stuMap
map.put("stuMap", stuMap);

2、模板

通过Map输出stu1的学生信息：<br/>
姓名：${stuMap['stu1'].name}<br/>
年龄：${stuMap['stu1'].age}<br/>

通过Map输出stu1的学生信息：<br/>
姓名：${stuMap.stu1.name}<br/>
年龄：${stuMap.stu1.age}<br/>


<p