微服务[学成在线] day04：页面静态化
知识点概览
为了方便后续回顾该项目时能够清晰的知道本章节讲了哪些内容，并且能够从该章节的笔记中得到一些帮助，所以在完成本章节的学习后在此对本章节所涉及到的知识点进行总结概述。
本章节为【学成在线】项目的 day04 的内容
- 页面静态化的基本概念
-
Freemarker框架基础入门 - 使用
MongoDB提供的GridFS来实现页面数据的分布式储存 - 使用
freemarker框架实现页面静态化以及发布
目录
内容会比较多，小伙伴们可以根据目录进行按需查阅。
文章目录
- 知识点概览
- 目录
- 一、页面静态化需求
-
- 概述
- 业务流程
- 二、FreeMarker研究
-
- 0x01 FreeMarker介绍
- 0x02 FreeMark 快速入门
-
- 1、创建测试工程
- 2、配置文件
- 3、创建模型类
- 4、创建模板
- 5、 创建 controller
- 6、创建启动类
- 7、测试
- 0x03 Freemarker 基础语法
-
- 1、核心指令
-
- 数据模型
- List指令
- 遍历Map数据
- if指令
- 三元运算
- 2、其他指令
-
- 运算符
- 空值处理
- 内建函数
- 完整的模板
- 3、静态化测试
-
- 使用模板文件静态化
- 使用模板字符串静态化
- 0x04 章节总结
- 三、页面静态化实战
-
- 0x01 页面静态化流程
- 0x02 数据模型
-
- 1、轮播图DataUrl接口
-
- 需求分析
- 接口定义
- Dao层
- Service层
- Controller层
- 测试
- 2、远程请求接口
-
- 添加依赖
- 配置 RestTemplate
- 3、测试 RestTemplate
- 0x03 模板管理
-
- 1、模板管理业务流程
- 2、模板制作
-
- 编写模板文件
- 模板测试
- 3、GridFS 研究
-
- GridFS介绍
- GridFS 存取文件测试
- 删除文件
- 4、模板储存
-
- 1）添加模板
- 2）删除模板
- 3）修改模板信息
- 4）修改模板文件
- 0x04 静态化测试
-
- 1、填写页面 DataUrl
- 2、静态化程序
-
- 获取数据模型
- 获取页面模板
- 执行页面静态化
- 创建测试的页面
- 单元测试
- 四、页面预览
-
- 1、页面预览开发
-
- 需求分析
- 搭建环境
- Service
- Controller
- 2、页面预览测试
-
- 配置nginx代理
- 添加 “页面预览” 链接
- 认识作者
一、页面静态化需求
概述
-
为什么要进行页面管理？
本项目的
cms系统的功能就是根据运营的需要，对门户等子系统的部分页面进行管理，从而实现快速的根据用户需求修改页面的内容并上线需求。 -
如何修改页面的内容？
在开发中修改页面的内容是需要人工编写
html以及js文件，cms系统是通过程序自动化的对页面的内容进行修改，通过页面静态化技术生成html页面。 -
如何对页面进行静态化？
一个页面等于
模板+数据，在添加页面的时候我们选择了页面的模板。 -
页面静态化以及页面发布的流程
![微服务[学成在线] day04：页面静态化_第1张图片](http://img.e-com-net.com/image/info8/a2db1c1bf04645b5977364dbec881e47.jpg)
业务流程
业务流程如下
- 获取模型数据
- 制作模板
- 对页面进行静态化
- 将静态化生成的
html页面存放在文件系统中 - 将存放在文件系统的
html页面发布到服务器
二、FreeMarker研究
0x01 FreeMarker介绍
-
freemarker是一个用Java开发的模板引擎![微服务[学成在线] day04：页面静态化_第2张图片](http://img.e-com-net.com/image/info8/adc172953f344fd0ae36ca97c1a34c4b.jpg)
常用的
java模板引擎还有哪些?Jsp、Freemarker、Thymeleaf、Velocity 等
-
模板+数据模型 = 输出
freemarker并不关心数据的来源，只是根据模板的内容，将数据模型在模板中显示并输出具体的（通常为html，也可以生成其他格式的文件）-
数据模型
数据模型在
java中可以是基本类型也可以是 List、Map、Pojo 等复杂类型 -
来自官方的例子：（https://freemarker.apache.org/docs/dgui_quickstart_basics.html）
数据模型：
![微服务[学成在线] day04：页面静态化_第3张图片](http://img.e-com-net.com/image/info8/ed168fe7191c405abe2d4e6aa1ce4b59.jpg)
模板：
![微服务[学成在线] day04：页面静态化_第4张图片](http://img.e-com-net.com/image/info8/14edfb7b5752409b8e2ed802703a0d05.jpg)
输出：
![微服务[学成在线] day04：页面静态化_第5张图片](http://img.e-com-net.com/image/info8/4df0872fa53849e7bfa1c9ec076fa47c.jpg)
-
0x02 FreeMark 快速入门
freemarker 作为 Springmvc 一种视图的格式，默认情况下， SpringMvc 支持 freemarker 视图格式。
需要创建 Spring boot + Freemarker工程用于测试的模板。
1、创建测试工程
我们在原有的工程下，创建一个test-freemarker 的 maven 模块，测试工程专门用于freemarker的功能测试与模板的测试。
pom如下
<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-parentartifactId>
<groupId>com.xuechenggroupId>
<version>1.0-SNAPSHOTversion>
<relativePath>../xc-framework-parent/pom.xmlrelativePath>
parent>
<modelVersion>4.0.0modelVersion>
<artifactId>test-freemarkerartifactId>
<dependencies>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-freemarkerartifactId>
dependency>
<dependency>
<groupId>org.projectlombokgroupId>
<artifactId>lombokartifactId>
dependency>
<dependency>
<groupId>com.squareup.okhttp3groupId>
<artifactId>okhttpartifactId>
dependency>
<dependency>
<groupId>org.apache.commonsgroupId>
<artifactId>commons-ioartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-testartifactId>
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 替换成具体的数据。
<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 测试
![微服务[学成在线] day04：页面静态化_第6张图片](http://img.e-com-net.com/image/info8/ed1b558bc4e647d7b940e377950bfd9a.jpg)
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>
效果
![微服务[学成在线] day04：页面静态化_第7张图片](http://img.e-com-net.com/image/info8/4069194918914ee690d8e72e2f2ded89.jpg)
遍历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>使用map指令遍历数据模型中的stuMap。p>
<table>
<thead>
<td>序号td>
<td>姓名td>
<td>年龄td>
<td>钱包td>
thead>
<#list stuMap?keys as k>
<tr>
<td>${k_index + 1}td>
<td>${stuMap[k].name}td>
<td>${stuMap[k].age}td>
<td>${stuMap[k].money}td>
tr>
#list>
table>
3、输出
![微服务[学成在线] day04：页面静态化_第8张图片](http://img.e-com-net.com/image/info8/7e3629acfa0c446f8dc365f59e2e8dfa.jpg)
if指令
if 指令即判断指令，是常用的FTL指令，freemarker在解析时遇到if会进行判断，条件为真则输出if中间的内容，否则跳过内容不再输出。
-
数据模型：
使用list指令中测试数据模型。
-
模板
<table> <thead> <td>序号td> <td>姓名td> <td>年龄td> <td>钱包td> thead> <#list stus as stu> <tr> <#--使用 _index 来遍历的序号--> <td>${stu_index + 1}td>style="background: red" #if>>${stu.name}td> <td>${stu.age}td> <td>${stu.money}td> tr> #list> table> 通过阅读上边的代码，实现的功能是：如果姓名为 “
小明” 则背景色显示为红色。输出
![微服务[学成在线] day04：页面静态化_第9张图片](http://img.e-com-net.com/image/info8/ff6c690fb3c6468fb260b27cef597a61.png)
通过测试发现 姓名为小明的背景色为红色。
三元运算
${ (type == 'SPOT') ?string('热点词','热点搜索')}2、其他指令
运算符
-
算数运算符 FreeMarker表达式中完全支持算术运算,FreeMarker支持的算术运算符包括:+, - , * , / , %
-
逻辑运算符 逻辑运算符有如下几个: 逻辑与:&& 逻辑或:|| 逻辑非:! 逻辑运算符只能作用于布尔值,否则将产生错误
-
比较运算符 表达式中支持的比较运算符有如下几个: 1 =或者==:判断两个值是否相等. 2 !=:判断两个值是否不等. 3 >
或者gt:判断左边值是否大于右边值 -
>=或者gte:判断左边值是否大于等于右边值 -
<或者lt:判断左边值是否小于右边值 -
<=或者lte:判断左边值是否小于等于右边值，注意:=和!=可以用于字符
串,数值和日期来比较是否相等,但=和!=两边必须是相同类型的值,否则会产生错误
而且
FreeMarker是精确比较,"x","x ","X"是不等的.其它的运行符可以作用于数字和日期,但不能作用于字符串,大部分的时候,使用gt等字母运算符代替
>会有更好的效果,因为FreeMarker会把>解释成FTL标签的结束字符, 当然,也可以使 括号 来避免这种情况, 如:<#if (x>y)>空值处理
-
判断某变量是否存在使用 “??” 用法为:variable??,如果该变量存在,返回true,否则返回false
例：为防止stus为空报错可以加上判断如下：
<#if stus??> <#list stus as stu> ...... #list> #if> -
缺失变量默认值使用
“!”使用!要以指定一个默认值，当变量为空时显示默认值。例如：${name!''}表示如果name为空显示空字符串。如果是嵌套对象则建议使用（）括起来。
例： ${(stu.bestFriend.name)!’’}表示，如果stu或bestFriend或name为空默认显示空字符串。
内建函数
内建函数语法格式： 变量+?+函数名称
-
得到某个集合的大小：
${集合名?size} -
日期格式化
显示年月日: ${today?date} 显示时分秒：${today?time} 显示日期+时间：${today?datetime}
自定义格式化： ${today?string("yyyy年MM月")} -
内建函数
cmap.put("point", 102920122);point是数字型，使用${point}会显示这个数字的值，并且每三位使用逗号分隔。例如：“102,920,122”如果不想显示为每三位分隔的数字，可以使用
c函数将数字型转成字符串输出例如：
${point?c} -
将json字符串转成对象
一个例子：
其中用到了 assign标签，assign的作用是定义一个变量。
<#assign text="{'bank':'工商银行','account':'10101920201920212'}" /> <#assign data=text?eval /> 开户行：${data.bank} 账号：${data.account}
完整的模板
<html> <head> <meta charset="utf‐8"> <title>Hello World!title> head> <body> Hello ${name}! <br/> <table> 北京市昌平区建材城西路金燕龙办公楼一层 电话：400-618-9090<tr> <td>序号td> <td>姓名td> <td>年龄td> <td>钱包td> tr> <#list stus as stu> <tr> <td>${stu_index + 1}td>style="background:red;"#if>>${stu.name}td> <td>${stu.age}td> <td >${stu.money}td> tr> #list> table> <br/><br/> 输出stu1的学生信息：<br/> 姓名：${stuMap['stu1'].name}<br/> 年龄：${stuMap['stu1'].age}<br/> 输出stu1的学生信息：<br/> 姓名：${stu1.name}<br/> 年龄：${stu1.age}<br/> 遍历输出两个学生信息：<br/> <table> <tr> <td>序号td> <td>姓名td> <td>年龄td> <td>钱包td> tr> <#list stuMap?keys as k> <tr> <td>${k_index + 1}td> <td>${stuMap[k].name}td> <td>${stuMap[k].age}td> <td >${stuMap[k].money}td> tr> #list> table> br> <table> <tr> <td>姓名td> <td>年龄td> <td>出生日期td> <td>钱包td> <td>最好的朋友td> <td>朋友个数td> <td>朋友列表td> tr> <#if stus??> <#list stus as stu> <tr> <td>${stu.name!''}td> <td>${stu.age}td> <td>${(stu.birthday?date)!''}td> <td>${stu.money}td> <td>${(stu.bestFriend.name)!''}td> <td>${(stu.friends?size)!0}td> <td> <#if stu.friends??> <#list stu.friends as firend> ${firend.name!''}<br/> #list> #if> td> tr> #list> #if> table> <br/> <#assign text="{'bank':'工商银行','account':'10101920201920212'}" /> <#assign data=text?eval /> 开户行：${data.bank} 账号：${data.account} body> html> 3、静态化测试
在cms中使用freemarker将页面生成html文件，本节测试html文件生成的方法：
1、使用模板文件静态化
定义模板文件，使用freemarker静态化程序生成html文件。
2、使用模板字符串静态化
定义模板字符串，使用freemarker静态化程序生成html文件。
使用模板文件静态化
在
test下创建测试类，并且将main下的resource/templates拷贝到test下，本次测试使用之前我们在main下创建的模板文件，并创建测试类。 目录结构如下![微服务[学成在线] day04：页面静态化_第10张图片](http://img.e-com-net.com/image/info8/8ed6d21130284b25b4bda04ef0368177.jpg)
创建测试类
//基于模板生成静态文件 @Test public void testGenerateHtml() throws IOException, TemplateException { //创建配置类 Configuration configuration = new Configuration(Configuration.getVersion()); //设置模板路径 String classPath = this.getClass().getResource("/").getPath(); classPath = java.net.URLDecoder.decode(classPath,"utf-8"); //路径包含中文需要进行转码 configuration.setDirectoryForTemplateLoading(new File(classPath +"/templates")); //设置字符集 configuration.setDefaultEncoding("utf-8"); //加载模板 Template template = configuration.getTemplate("test1.ftl"); //数据模型 Map map = getMap(); //静态化 String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, map); //静态化内容 InputStream inputStream = IOUtils.toInputStream(content); //输出到文件 FileOutputStream fileOutputStream = new FileOutputStream(new File("d:/test1.html")); int copy = IOUtils.copy(inputStream, fileOutputStream); } public Map getMap(){ Map<String,Object> map = new HashMap<>(); 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); //准备map数据 HashMap<Object, Object> stuMap = new HashMap<>(); stuMap.put("stu1",stu1); stuMap.put("stu2",stu2); //像数据模型内放数据 map.put("stu1",stu1); //向数据模型放入stuMap map.put("stuMap", stuMap); return map; }运行测试，得到html模板
![微服务[学成在线] day04：页面静态化_第11张图片](http://img.e-com-net.com/image/info8/855fd9eab1724bfabd2e60ec5a58c381.png)
使用模板字符串静态化
详细代码省略，使用字符串和使用模板的区别是 这里直接定义一个
HTML的字符串变量，例如String templateString="" + "\n" + " \n" + " \n" + " 名称：${name}\n" + " \n" + "";而前面的例子是从ftl模板中获取内容
//加载模板 Template template = configuration.getTemplate("test1.ftl");0x04 章节总结
本章节主要介绍了
Freemarker模板引擎的语法介绍和基本的应用，并了解了Freemarker在进行模板渲染时的API调用过程。三、页面静态化实战
0x01 页面静态化流程
通过上边对
FreeMarker的研究我们得出：模板 + 数据模型 = 输出，页面静态化需要准备数据模型和模板，先知道数据模型的结构才可以编写模板，因为在模板中要引用数据模型中的数据，本节将系统讲解CMS页面数据模型获取、模板管理及静态化的过程。下边我们讨论一个问题：如何获取页面的数据模型？
CMS管理了各种页面，CMS对页面进行静态化时需要数据模型，但是CMS并不知道每个页面的数据模型的具体内容，它只管执行静态化程序便可对页面进行静态化，所以CMS静态化程序需要通过一种通用的方法来获取数据模型。在编辑页面信息时指定一个
DataUrl，此DataUrl便是获取数据模型的Url，它基于Http方式，CMS对页面进行静态化时会从页面信息中读取DataUrl，通过Http远程调用的方法请求DataUrl获取数据模型 。管理员怎么知道
DataUrl的内容呢？举例说明：
此页面是轮播图页面，它的
DataUrl由开发轮播图管理的程序员提供。此页面是精品课程推荐页面，它的
DataUrl由精品课程推荐的程序员提供。此页面是课程详情页面，它的
DataUrl由课程管理的程序员提供。页面静态化流程如下图：
1、静态化程序首先读取页面获取DataUrl。
2、静态化程序远程请求DataUrl得到数据模型。
3、获取页面模板。
4、执行页面静态化
![微服务[学成在线] day04：页面静态化_第12张图片](http://img.e-com-net.com/image/info8/3724eb114f574d5caffca2fd461d5de6.jpg)
0x02 数据模型
1、轮播图DataUrl接口
需求分析
CMS中有轮播图管理、精品课程推荐的功能，以轮播图管理为例说明：轮播图管理是通过可视化的操作界面由管理员指定轮播图图片地址，最后将轮播图图片地址保存在cms_config集合中，下边是轮播图数据模型![微服务[学成在线] day04：页面静态化_第13张图片](http://img.e-com-net.com/image/info8/bdc92a6beb5b48759304225e26bd99f0.jpg)
针对首页的轮播图信息、精品推荐等信息的获取统一提供一个
Url供静态化程序调用，这样我们就知道了轮播图页面、精品课程推荐页面的DataUrl，管理在页面配置中将此Url配置在页面信息中。本小节开发一个查询轮播图、精品推荐信息的接口，此接口供静态化程序调用获取数据模型 。接口定义
轮播图信息、精品推荐等信息存储在MongoDB的cms_config集合中。
cms_config有固定的数据结构，如下：
package com.xuecheng.framework.domain.cms; import lombok.Data; import lombok.ToString; import org.springframework.data.annotation.Id; import org.springframework.data.mongodb.core.mapping.Document; import java.util.List; /** * Created by admin on 2018/2/6. */ @Data @ToString @Document(collection = "cms_config") public class CmsConfig { @Id private String id; //主键 private String name; //数据模型名称 private List<CmsConfigModel> model; //数据模型项目 }数据类型项目的内容如下：
package com.xuecheng.framework.domain.cms; import lombok.Data; import lombok.ToString; import java.util.Map; /** * Created by admin on 2018/2/6. */ @Data @ToString public class CmsConfigModel { private String key; //主键 private String name; //项目名称 private String url; //项目url private Map mapValue; //项目复杂值 private String value; //项目简单值 }上边的数据结构可以对照
cms_config的数据进行分析。其中，在
mapValue中可以储存一些复杂的数据的模型内容。根据配置信息Id查询配置信息，定义接口如下：
package com.xuecheng.api.cms; import com.xuecheng.framework.domain.cms.CmsConfig; import io.swagger.annotations.Api; import io.swagger.annotations.ApiOperation; @Api(value="cms配置管理接口",description = "cms配置管理接口，提供数据模型的管理、查询接口") public interface CmsConfigControllerApi { @ApiOperation("根据id查询CMS配置信息") public CmsConfig getModel(String id); }Dao层
package com.xuecheng.manage_cms.dao; import com.xuecheng.framework.domain.cms.CmsConfig; import org.springframework.data.mongodb.repository.MongoRepository; public interface CmsConfigRepository extends MongoRepository<CmsConfig,String> { }Service层
package com.xuecheng.manage_cms.service; import com.xuecheng.framework.domain.cms.CmsConfig; import com.xuecheng.manage_cms.dao.CmsConfigRepository; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.Optional; @Service public class CmsConfigService { @Autowired CmsConfigRepository cmsConfigRepository; //根据id查询配置管理信息 public CmsConfig getConfigById(String id){ Optional optional = cmsConfigRepository.findById(id); if(optional.isPresent()){ CmsConfig cmsConfig = (CmsConfig) optional.get(); return cmsConfig; } return null; } }Controller层
package com.xuecheng.manage_cms.controller; import com.xuecheng.api.cms.CmsConfigControllerApi; import com.xuecheng.framework.domain.cms.CmsConfig; import com.xuecheng.manage_cms.service.CmsConfigService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController @RequestMapping("/cms/config") public class CmsConfigController implements CmsConfigControllerApi { @Autowired CmsConfigService cmsConfigService; @GetMapping("/getmodel/{id}") @Override public CmsConfig getModel(@PathVariable("id") String id) { CmsConfig configById = cmsConfigService.getConfigById(id); return configById; } }测试
使用postman测试接口：
get请求：http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f （轮播图信息）
2、远程请求接口
SpringMVC提供RestTemplate请求http接口，RestTemplate的底层可以使用第三方的http客户端工具实现http的请求，常用的http客户端工具有Apache HttpClient、OkHttpClient等，本项目使用OkHttpClient完成http请求，原因也是因为它的性能比较出众。添加依赖
<dependency> <groupId>com.squareup.okhttp3groupId> <artifactId>okhttpartifactId>配置 RestTemplate
在
SpringBoot启动类中配置RestTemplate... public class ManageCmsApplication { public static void main(String[] args) { SpringApplication.run(ManageCmsApplication.class,args); } @Bean public RestTemplate restTemplate(){ return new RestTemplate(new OkHttp3ClientHttpRequestFactory()); } }3、测试 RestTemplate
@SpringBootTest @RunWith(SpringRunner.class) public class RestTemplateTest { @Autowired RestTemplate restTemplate; @Test public void testRestTemplate(){ ResponseEntity<Map> forEntity = restTemplate.getForEntity("http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f", Map.class); System.out.println(forEntity); } }运行测试
![微服务[学成在线] day04：页面静态化_第14张图片](http://img.e-com-net.com/image/info8/6676890570084072baa6c6a17169f430.jpg)
0x03 模板管理
1、模板管理业务流程
CMS提供模板管理功能，业务流程如下：
![微服务[学成在线] day04：页面静态化_第15张图片](http://img.e-com-net.com/image/info8/7b34c3773dd641c0893599acff614bda.jpg)
1、要增加新模板首先需要制作模板，模板的内容就是
Freemarker ftl模板内容。2、通过模板管理模块功能新增模板、修改模板、删除模板。
3、模板信息存储在
MongoDB数据库，其中模板信息存储在cms_template集合中，模板文件存储在GridFS文件系统中。下边是一个模板的例子：
{ "_id" : ObjectId("5a962b52b00ffc514038faf7"), "_class" : "com.xuecheng.framework.domain.cms.CmsTemplate", "siteId" : "5a751fab6abb5044e0d19ea1", "templateName" : "首页", "templateParameter" : "", "templateFileId" : "5a962b52b00ffc514038faf5" }上边模板信息中
templateFileId是模板文件的ID，此ID对应GridFS文件系统中文件ID。2、模板制作
编写模板文件
轮播图页面原型
在门户的静态工程目录有轮播图的静态页面，路径是：
/include/index_banner.html。数据模型为：
通过http 获取到数据模型如下：
下图数据模型的图片路径改成可以浏览的正确路径。
{ "_id" : ObjectId("5a791725dd573c3574ee333f"), "_class" : "com.xuecheng.framework.domain.cms.CmsConfig", "name" : "轮播图", "model" : [ { "key" : "banner1", "name" : "轮播图1地址", "value" : "http://www.xuecheng.com/img/widget-bannerA.jpg" }, { "key" : "banner2", "name" : "轮播图2地址", "value" : "http://www.xuecheng.com/img/widget-bannerB.jpg" } ] }编写模板
在freemarker测试工程中新建模板
index_banner.ftl。<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <link rel="stylesheet" href="http://www.xuecheng.com/plugins/normalize-css/normalize.css" /> <link rel="stylesheet" href="http://www.xuecheng.com/plugins/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="http://www.xuecheng.com/css/page-learing-index.css" /> <link rel="stylesheet" href="http://www.xuecheng.com/css/page-header.css" /> head> <body> <div class="banner-roll"> <div class="banner-item"> <#--<div class="item" style="background-image: url(http://www.xuecheng.com/img/widget-bannerB.jpg);">div>--> <#--<div class="item" style="background-image: url(http://www.xuecheng.com/img/widget-bannerA.jpg);">div>--> <#--<div class="item" style="background-image: url(http://www.xuecheng.com/img/widget-banner3.png);">div>--> <#--<div class="item" style="background-image: url(http://www.xuecheng.com/img/widget-bannerB.jpg);">div>--> <#--<div class="item" style="background-image: url(http://www.xuecheng.com/img/widget-bannerA.jpg);">div>--> <#--<div class="item" style="background-image: url(http://www.xuecheng.com/img/widget-banner3.png);">div>--> <#--渲染轮播图--> <#if model??> <#list model as item> <div class="item" style="background-image: url(${item.value});">div> #list> #if> div> <div class="indicators">div> div> <script type="text/javascript" src="http://www.xuecheng.com/plugins/jquery/dist/jquery.js">script> <script type="text/javascript" src="http://www.xuecheng.com/plugins/bootstrap/dist/js/bootstrap.js">script> <script type="text/javascript"> var tg = $('.banner-item .item'); var num = 0; for (i = 0; i < tg.length; i++) { $('.indicators').append(''); $('.indicators').find('span').eq(num).addClass('active'); } function roll() { tg.eq(num).animate({ 'opacity': '1', 'z-index': num }, 1000).siblings().animate({ 'opacity': '0', 'z-index': 0 }, 1000); $('.indicators').find('span').eq(num).addClass('active').siblings().removeClass('active'); if (num >= tg.length - 1) { num = 0; } else { num++; } } $('.indicators').find('span').click(function() { num = $(this).index(); roll(); }); var timer = setInterval(roll, 3000); $('.banner-item').mouseover(function() { clearInterval(timer) }); $('.banner-item').mouseout(function() { timer = setInterval(roll, 3000) }); script> body> html>模板测试
在
freemarker测试工程的入口文件注册RestTemplate的Bean原讲义只在 cms工程下注册了bean，记得
freemarker测试工程下也要注册@SpringBootApplication public class FreemarkerTestApplication { public static void main(String[] args) { SpringApplication.run(FreemarkerTestApplication.class,args); } @Bean public RestTemplate restTemplate(){ return new RestTemplate(new OkHttp3ClientHttpRequestFactory()); } }在
freemarker测试工程的FreemarkerController下编写一个方法测试轮播图模板，代码如下：@Autowired RestTemplate restTemplate; /** * 用于调试banner模板 */ @RequestMapping("/banner") public String indexBanner(Map<String,Object> map){ String dataUrl = "http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f"; ResponseEntity<Map> forEntity = restTemplate.getForEntity(dataUrl, Map.class); Map body = forEntity.getBody(); map.putAll(body); //将获取到的数据赋值给map，并渲染至模板内 return "index-banner"; }请求：http://localhost:8088/freemarker/banner
![微服务[学成在线] day04：页面静态化_第16张图片](http://img.e-com-net.com/image/info8/397fe11b124d4af0bba97f39d65504c1.jpg)
3、GridFS 研究
GridFS介绍
GridFS是MongoDB提供的用于持久化存储文件的模块，CMS使用MongoDB存储数据，使用GridFS可以快速集成开发。它的工作原理是：
在
GridFS存储文件是将文件分块存储，文件会按照256KB的大小分割成多个块进行存储，GridFS使用两个集合（collection）存储文件，一个集合是chunks, 用于存储文件的二进制数据；一个集合是files，用于存储文件的元数据信息（文件名称、块大小、上传时间等信息）。从
GridFS中读取文件要对文件的各各块进行组装、合并。
详细参考：https://docs.mongodb.com/manual/core/gridfs/GridFS 存取文件测试
1、存文件
这里我们在cms工程内进行测试
使用
GridFsTemplate存储文件测试代码：
向测试程序注入GridFsTemplate。@SpringBootTest @RunWith(SpringRunner.class) public class GridFsTest { @Autowired GridFsTemplate gridFsTemplate; @Test public void testGridFs() throws FileNotFoundException { //要储存的文件 File file = new File("d:/resources/index-banner.ftl"); //定义输入流 FileInputStream fileInputStream = new FileInputStream(file); //向GridFS存储文件 ObjectId objectId = gridFsTemplate.store(fileInputStream, "index-banner"); //得到文件ID String fileId = objectId.toString(); System.out.println(fileId); } }储存结果
![微服务[学成在线] day04：页面静态化_第17张图片](http://img.e-com-net.com/image/info8/10489ab6c9314b7fabff8e211b161e46.jpg)
存储原理说明：
文件存储成功得到一个文件
id
此文件id是fs.files集合中的主键。
可以通过文件id查询fs.chunks表中的记录，得到文件的内容。2、读取文件
1）在
config包中定义Mongodb的配置类，如下：GridFSBucket用于打开下载流对象@Configuration public class MongoConfig { @Value("${spring.data.mongodb.database}") String db; @Bean public GridFSBucket getGridFSBucket(MongoClient mongoClient){ MongoDatabase database = mongoClient.getDatabase(db); GridFSBucket gridFSBucket = GridFSBuckets.create(database); return gridFSBucket; } }2）测试代码如下
@Autowired GridFSBucket gridFSBucket; //取文件 @Test public void queryFile() throws IOException { String fileId = "5e79e4323304a26aecec55cd"; //根据ID查询文件 GridFSFile gridFSFile = gridFsTemplate.findOne(Query.query(Criteria.where("_id").is(fileId))); //打开下载流对象 GridFSDownloadStream gridFSDownloadStream = gridFSBucket.openDownloadStream(gridFSFile.getObjectId()); //创建gridFsResource，用于获取流对象 GridFsResource gridFsResource = new GridFsResource(gridFSFile, gridFSDownloadStream); //获取流中的数据 String s = IOUtils.toString(gridFsResource.getInputStream(), "utf-8"); System.out.println(s); }删除文件
//删除文件 @Test public void testDelFile() throws IOException { //根据文件id删除fs.files和fs.chunks中的记录 gridFsTemplate.delete(Query.query(Criteria.where("_id").is("5b32480ed3a022164c4d2f92"))); }4、模板储存
根据模板管理的流程，最终将模板信息存储到
MongoDB的cms_template中，将模板文件存储到GridFS中。模板管理功能在课堂中不再讲解，教学中手动向cms_template及GridFS中存储模板，方法如下：1）添加模板
使用
GridFS测试代码存储模板文件到GridFS，并得到文件模板id，向cms_template添加记录![微服务[学成在线] day04：页面静态化_第18张图片](http://img.e-com-net.com/image/info8/e915fc34813c4a94a28c7385159443b2.jpg)
2）删除模板
使用
GridFS测试代码根据文件id删除模板文件。根据模板id删除
cms_template中的记录。3）修改模板信息
使用Studio 3T修改
cms_template中的记录。4）修改模板文件
1）通过Studio 3T修改模板文件(此方法限文件小于256K)可以通过Studio 3T修改模板文件，先找到模板文件，再导入进去：
![微服务[学成在线] day04：页面静态化_第19张图片](http://img.e-com-net.com/image/info8/3d3e5b05e2b042078ecbc9e692869b97.jpg)
0x04 静态化测试
1、填写页面 DataUrl
修改页面管理模板代码，实现编辑页面DataUrl。
注意：此地址由程序员提供给系统管理员，由系统管理员录入到系统中。修改页面管理前端的
page_edit.vue在表单中添加
dataUrl输入框：<el-form-item label="数据Url" prop="dataUrl"> <el-input v-model="pageForm.dataUrl" auto-complete="off" ></el-input> </el-form-item>fromData表单内添加dataUrl字段修改页面管理服务端
PageService在
PageService.updateCmsPage更新cmsPage数据代码中添加：//更新dataUrl one.setDataUrl(cmsPage.getDataUrl());新增页面也重复上面的操作，新增 dataUrl 的表单
2、静态化程序
在
model.response.cmscode下新增一些错误代码CMS_PAGE_NOT_EXISTS(false,24002,"页面不存在！"), CMS_GENRATEHTML_DATAURL_IS_NULL(false,24003,"从页面信息中找不到获取数据的url"), CMS_GENRATEHTML_DATA_IS_NULL(false,24004,"根据页面的数据url获取不到数据"), CMS_GENRATEHTML_TEMPLATE_IS_NULL(false,24005,"页面模板为空"), CMS_GENRATEHTML_HTML_IS_NULL(false,24006,"生成的静态html为空"), CMS_GENRATEHTML_SAVE_HTML_ERROR(false,24007,"保存静态html出错"), CMS_GENRATEHTML_PERVIEW_IS_NULL(false,24008,"预览页面为空");获取数据模型
静态化程序远程请求DataUrl得到数据模型
@Autowired RestTemplate restTemplate; //从dataUrl中获取页面模型数据 private Map getModelByPageId(String pageId){ //查询页面信息 CmsPageResult cmsPageResult = this.cmsPageQueryById(pageId); CmsPage cmsPage = cmsPageResult.getCmsPage(); //页面不存在 if(cmsPage == null){ ExceptionCast.cast(CmsCode.CMS_PAGE_NOT_EXISTS); } //取出dataUrl String dataUrl = cmsPage.getDataUrl(); if(StringUtils.isEmpty(dataUrl)){ ExceptionCast.cast(CmsCode.CMS_GENRATEHTML_DATAURL_IS_NULL); } //发送请求获取模型数据 ResponseEntity<Map> forEntity = restTemplate.getForEntity(dataUrl,Map.class); Map body = forEntity.getBody(); return body; }获取页面模板
@Autowired CmsTemplateRepository templateRepository; @Autowired GridFsTemplate gridFsTemplate; @Autowired GridFSBucket gridFSBucket; //获取页面模板数据 private String getTemplateByPageId(String pageId){ //查询页面信息 CmsPageResult cmsPageResult = this.cmsPageQueryById(pageId); CmsPage cmsPage = cmsPageResult.getCmsPage(); //页面不存在 if(cmsPage == null){ ExceptionCast.cast(CmsCode.CMS_PAGE_NOT_EXISTS); } //获取页面模板 String templateId = cmsPage.getTemplateId(); if(StringUtils.isEmpty(templateId)){ ExceptionCast.cast(CmsCode.CMS_GENRATEHTML_TEMPLATE_IS_NULL); } Optional<CmsTemplate> optional = templateRepository.findById(templateId); if(optional.isPresent()){ CmsTemplate cmsTemplate = optional.get(); //获取模板文件id String templateFileId = cmsTemplate.getTemplateFileId(); //取出模板文件内容 GridFSFile gridFSFile = gridFsTemplate.findOne(Query.query(Criteria.where("_id").is(templateFileId))); //打开下载流对象 GridFSDownloadStream gridFSDownloadStream = gridFSBucket.openDownloadStream(gridFSFile.getObjectId()); //创建GridResource GridFsResource gridFsResource = new GridFsResource(gridFSFile, gridFSDownloadStream); try { String content = IOUtils.toString(gridFsResource.getInputStream(), "utf‐8"); return content; } catch (IOException e) { e.printStackTrace(); } } return null; }执行页面静态化
/** * 页面静态化 * @param pageId * @return * @throws IOException * @throws TemplateException */ public String getPageHtml(String pageId) throws IOException, TemplateException { //获取页面模型数据 Map modelByPageId = this.getModelByPageId(pageId); if(modelByPageId == null){ //获取页面模型数据为空 ExceptionCast.cast(CmsCode.CMS_GENRATEHTML_DATA_IS_NULL); } //获取页面模板 String templateContent = getTemplateByPageId(pageId); if(StringUtils.isEmpty(templateContent)){ //页面模板为空 ExceptionCast.cast(CmsCode.CMS_GENRATEHTML_TEMPLATE_IS_NULL); } //获取页面静态化数据 String html = generateHtml(templateContent, modelByPageId); if(StringUtils.isEmpty(html)){ ExceptionCast.cast(CmsCode.CMS_GENRATEHTML_HTML_IS_NULL); } return html; } //构建静态化页面数据 private String generateHtml(String template,Map model) throws IOException, TemplateException { //生成配置类 Configuration configuration = new Configuration(Configuration.getVersion()); //模板加载器 StringTemplateLoader stringTemplateLoader = new StringTemplateLoader(); stringTemplateLoader.putTemplate("template",template); //配置模板加载器 configuration.setTemplateLoader(stringTemplateLoader); //获取模板 Template template1 = configuration.getTemplate("template"); String html = FreeMarkerTemplateUtils.processTemplateIntoString(template1, model); return html; }调用逻辑
![微服务[学成在线] day04：页面静态化_第20张图片](http://img.e-com-net.com/image/info8/106c8fa3f9bb483b96b0f3aee79aa7d3.jpg)
创建测试的页面
原讲义中该步骤是省略的
为了更清晰的了解页面静态化的逻辑，我们新建一个页面来进行测试；
在
GridFS的章节中，我们在单元测试中将index-banner.ftl文件的内容储存到了GridFS得到一个fileId，我这里的是5e7a20fc3304a25230861f4c，我们用这个fileId在 mongoDB 的cms_tempalte集合中手动创建一个页面模板，创建成功后我们得到如下的数据{ "_id" : ObjectId("5e7a2212b1afec2187ed89ac"), "_class" : "com.xuecheng.framework.domain.cms.CmsTemplate", "siteId" : "5a751fab6abb5044e0d19ea1", "templateName" : "轮播图_测试", "templateParameter" : "", "templateFileId" : "5e7a20fc3304a25230861f4c" }然后进入到我们之前构建的新增页面选项，添加一个新的页面；
填入 dataUrl
http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f![微服务[学成在线] day04：页面静态化_第21张图片](http://img.e-com-net.com/image/info8/761081d3720f466b8a9af61bb8fe7542.png)
得到该页面的id为
5e7a251a3304a252280804dc单元测试
@SpringBootTest @RunWith(SpringRunner.class) public class TestPageService { @Autowired PageService pageService; @Test public void testGetPageHtml() throws IOException, TemplateException { String pageHtml = pageService.getPageHtml("5e7a251a3304a252280804dc"); System.out.println(pageHtml); } }四、页面预览
1、页面预览开发
需求分析
页面在发布前增加页面预览的步骤，方便用户检查页面内容是否正确。页面预览的流程如下：
![微服务[学成在线] day04：页面静态化_第22张图片](http://img.e-com-net.com/image/info8/8f0d4c7b640c4c32bb405546d464b24b.jpg)
1、用户进入
cms前端，点击 “页面预览” 在浏览器请求 cms 页面预览链接。2、cms 根据页面
id查询DataUrl并远程请求DataUrl获取数据模型。3、cms 根据页面id查询页面模板内容
4、cms 执行页面静态化。
搭建环境
在cms服务需要集成freemarker：
1、在CMS服务中加入freemarker的依赖
<dependency> <groupId>org.springframework.bootgroupId> <artifactId>spring-boot-starter-freemarkerartifactId> dependency>2、在application.yml配置freemarker
server: port: 31001 spring: application: name: xc-service-manage-cms data: mongodb: uri: mongodb://root:123123@localhost:27017 database: xc_cms freemarker: cache: false #关闭模板缓存，方便测试 settings: template_update_delay: 0Service
静态化方法在静态化测试章节已经实现
Controller
调用
service的静态化方法，将静态化内容通过response输出到浏览器显示创建
CmsPagePreviewController类，用于页面预览：请求页面id，查询得到页面的模板信息、数据模型
url，根据模板和数据生成静态化内容，并输出到浏览器。@Controller public class CmsPagePreviewController extends BaseController { @Autowired PageService pageService; //接收到页面id @RequestMapping(value = "/cms/preview/{pageId}", method = RequestMethod.GET) public void preView(@PathVariable("pageId") String pageId) throws IOException, TemplateException { String pageHtml = pageService.getPageHtml(pageId); if(StringUtils.isNotEmpty(pageHtml)){ try { //通过response对象将页面内容输出 ServletOutputStream outputStream = response.getOutputStream(); outputStream.write(pageHtml.getBytes("utf-8")); } catch (IOException e){ e.printStackTrace(); } } } }2、页面预览测试
配置nginx代理
这里说一下我们为什么要通过nginx代理来配置页面预览，因为在实际生产环境中，我们的cms节点可能会有多个，需要从nginx进行反向代理，实现负载均衡的等需求。
为了通过
nginx请求静态资源（css、图片等），通过nginx代理进行页面预览。在www.xuecheng.com虚拟主机配置：
#页面预览 location /cms/preview/ { proxy_pass http://cms_server_pool/cms/preview/; }配置
cms_server_pool将请求转发到cms：#cms页面预览 upstream cms_server_pool{ server 127.0.0.1:31001 weight=10; }全部配置
#cms页面预览 upstream cms_server_pool{ server 127.0.0.1:31001 weight=10; } server{ listen 80; server_name www.xuecheng.com; ssi on; ssi_silent_errors on; location / { alias C:/Users/root/Desktop/笔记/demos/JavaEE/微服务/Project/XueChengOnline/xcEduUI01/xc-ui-pc-static-portal/; index index.html; } #页面预览 location /cms/preview/ { proxy_pass http://cms_server_pool/cms/preview/; } }重新加载nginx 配置文件。
从cms_page找一个页面进行测试。注意：页面配置一定要正确，需设置正确的模板id和dataUrl。在浏览器打开：http://www.xuecheng.com/cms/preview/5e7a251a3304a252280804dc
5e7a251a3304a252280804dc：轮播图页面的id （根据自己实际用于测试的页面ID）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BQgLDFMw-1595564553549)(https://qnoss.codeyee.com/20200704_xuechengday04/image24)]
添加 “页面预览” 链接
添加预览按钮
<el-table-column label="操作" width="230" fixed="right"> <template slot-scope="scope"> <el-button size="mini" type="success" @click="preview(scope.row.pageId)">预览 </el-button> </template> </el-table-column>预览函数
//页面预览 preview(pageId){ window.open("http://www.xuecheng.com/cms/preview/"+pageId) },测试
认识作者
作者： LCyee ，全干型代码
自建博客：https://www.codeyee.com
记录学习以及项目开发过程中的笔记与心得，记录认知迭代的过程，分享想法与观点。
CSDN 博客：https://blog.csdn.net/codeyee
记录和分享一些开发过程中遇到的问题以及解决的思路。
欢迎加入微服务练习生的队伍，一起交流项目学习过程中的一些问题、分享学习心得等，不定期组织一起刷题、刷项目，共同见证成长。
你可能感兴趣的:(微服务项目学习,java,spring,boot,freemarker,mongodb)