页面静态化-模版管理-GridFS介绍-页面预览

作者: 弹钢琴的崽崽 | 来源:发表于2020-04-14 10:58 被阅读0次

1. 页面静态化需求

为什么要进行页面管理？
本项目cms系统的功能就是根据运营需要，对门户等子系统的部分页面进行管理，从而实现快速根据用户需求修改页面内容并上线的需求。
如何修改页面的内容？
在开发中修改页面内容是需要人工编写html及JS文件，CMS系统是通过程序自动化的对页面内容进行修改，通过页面静态化技术生成html页面。
如何对页面进行静态化？
一个页面等于模板加数据，在添加页面的时候我们选择了页面的模板。
页面静态化就是将页面模板和数据通过技术手段将二者合二为一，生成一个html网页文件。
页面静态化及页面发布流程图如下：

业务流程如下：

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

2. 页面静态化

2.1 页面静态化流程

通过上边对FreeMarker的研究我们得出：模板+数据模型=输出，页面静态化需要准备数据模型和模板，先知道数据模型的结构才可以编写模板，因为在模板中要引用数据模型中的数据，CMS页面数据模型获取、模板管理及静态化的过程。

下边讨论一个问题：如何获取页面的数据模型？

CMS管理了各种页面，CMS对页面进行静态化时需要数据模型，但是CMS并不知道每个页面的数据模型的具体内容，它只管执行静态化程序便可对页面进行静态化，所以CMS静态化程序需要通过一种通用的方法来获取数据模型。

在编辑页面信息时指定一个DataUrl，此DataUrl便是获取数据模型的Url，它基于Http方式，CMS对页面进行静态化时会从页面信息中读取DataUrl，通过Http远程调用的方法请求DataUrl获取数据模型。

管理员怎么知道DataUrl的内容呢？

举例说明：

此页面是轮播图页面，它的DataUrl由开发轮播图管理的程序员提供。

此页面是精品课程推荐页面，它的DataUrl由精品课程推荐的程序员提供。

此页面是课程详情页面，它的DataUrl由课程管理的程序员提供。

页面静态化流程如下图：

静态化程序首先读取页面获取DataUrl。
静态化程序远程请求DataUrl得到数据模型。
获取页面模板。
执行页面静态化。

2.2 数据模型

2.2.1 需求分析

CMS中有轮播图管理、精品课程推荐的功能，以轮播图管理为例说明：轮播图管理是通过可视化的操作界面由管理员指定轮播图图片地址，最后将轮播图图片地址保存在cms_config集合中，下边是轮播图数据模型：

针对首页的轮播图信息、精品推荐等信息的获取统一提供一个Url供静态化程序调用，这样我们就知道了轮播图页面、精品课程推荐页面的DataUrl，管理在页面配置中将此Url配置在页面信息中。

2.2.2 接口定义

轮播图信息、精品推荐等信息存储在MongoDB的cms_config集合中。

cms_config有固定的数据结构，如下：

@Data
@ToString
@Document(collection = "cms_config")
public class CmsConfig {
    @Id
    private String id;//主键
    private String name;//数据模型的名称
    private List<CmsConfigModel> model;//数据模型项目
}

数据模型项目内容如下：

@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;
@Api(value="cms配置管理接口",description = "cms配置管理接口，提供数据模型的管理、查询接口")
public interface CmsConfigControllerApi {
    @ApiOperation("根据id查询CMS配置信息")
    public CmsConfig getmodel(String id);
}

2.2.3 Dao

package com.xuecheng.manage_cms.dao;
public interface CmsConfigRepository extends MongoRepository<CmsConfig,String> {
}

2.2.4 Service

定义CmsConfigService实现根据id查询CmsConfig信息。

//根据id查询cmsConfig
public CmsConfig getConfigById(String id){
    Optional<CmsConfig> optional = cmsConfigRepository.findById(id);
    if(optional.isPresent()){
        CmsConfig cmsConfig = optional.get();
        return cmsConfig;
    }
    return null;
}

2.2.5 Controller

@RestController
@RequestMapping("/cms/config")
public class CmsConfigController implements CmsConfigControllerApi {
    @Autowired
    CmsConfigService cmsConfigService;
    @Override
    @GetMapping("/getmodel/{id}")
    public CmsConfig getmodel(@PathVariable("id") String id) {
        return cmsConfigService.getConfigById(id);
    }
}

2.2.6 测试

使用postman测试接口：

get请求：http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f （轮播图信息）

2.3 远程请求接口

SpringMVC提供 RestTemplate请求http接口，RestTemplate的底层可以使用第三方的http客户端工具实现http 的请求，常用的http客户端工具有Apache HttpClient、OkHttpClient等，本项目使用OkHttpClient完成http请求，原因也是因为它的性能比较出众。

添加依赖

<dependency>
    <groupId>com.squareup.okhttp3</groupId>
    <artifactId>okhttp</artifactId>
</dependency>

配置RestTemplate

在SpringBoot启动类中配置 RestTemplate

package com.xuecheng.manage_cms;
@SpringBootApplication
@EntityScan("com.xuecheng.framework.domain.cms")//扫描实体类
@ComponentScan(basePackages={"com.xuecheng.api"})//扫描接口
@ComponentScan(basePackages={"com.xuecheng.manage_cms"})//扫描本项目下的所有类
@ComponentScan(basePackages={"com.xuecheng.framework"})//扫描common包下的类
public class ManageCmsApplication {
    public static void main(String[] args)
    {
        SpringApplication.run(ManageCmsApplication.class,args);
    }
    @Bean
    public RestTemplate restTemplate(){
        return new RestTemplate(new OkHttp3ClientHttpRequestFactory());
    }
}

测试RestTemplate

根据url获取数据，并转为map格式。

@Test
public void testRestTemplate(){
    ResponseEntity<Map> forEntity =
      restTemplate.getForEntity("http://localhost:31001/cms/config/get/5a791725dd573c3574ee333f",
                                  Map.class);
    System.out.println(forEntity);
}

3. 模板管理

3.1 模板管理业务流程

CMS提供模板管理功能，业务流程如下：

要增加新模板首先需要制作模板，模板的内容就是Freemarker ftl模板内容。
通过模板管理模块功能新增模板、修改模板、删除模板。
模板信息存储在MongoDB数据库，其中模板信息存储在cms_template集合中，模板文件存储在GridFS文件系统中。

cms_template集合：

下边是一个模板的例子：

{
    "_id" : ObjectId("5a962b52b00ffc514038faf7"),
    "_class" : "com.xuecheng.framework.domain.cms.CmsTemplate",
    "siteId" : "5a751fab6abb5044e0d19ea1",
    "templateName" : "首页",
    "templateParameter" : "",
    "templateFileId" : "5a962b52b00ffc514038faf5"
}

上边模板信息中templateFileId是模板文件的ID，此ID对应GridFS文件系统中文件ID。

3.2 . 模板制作

3.2.1 编写模板文件

轮播图页面原型

在门户的静态工程目录有轮播图的静态页面，路径是：/include/index_banner.html。

数据模型为：

通过http 获取到数据模型如下：

下图数据模型的图片路径改成可以浏览的正确路径。

{
    "id": "5a791725dd573c3574ee333f",
    "name": "轮播图",
    "model": [
        {
            "key": "banner1",
            "name": "轮播图1地址",
            "url": null,
            "mapValue": null,
            "value": "http://www.xuecheng.com/img/widget‐bannerB.jpg"
        },
        {
            "key": "banner2",
            "name": "轮播图2地址",
            "url": null,
            "mapValue": null,
            "value": "http://www.xuecheng.com/img/widget‐bannerA.jpg"
        },
        {
            "key": "banner3",
            "name": "轮播图3地址",
            "url": null,
            "mapValue": null,
            "value": "http://www.xuecheng.com/img/widget‐banner3.jpg"
        }
    ]
}

编写模板

在freemarker测试工程中新建模板index_banner.ftl。

<!DOCTYPE html>
<html lang="en">
    <head>
        ......
    </head>
    <body>
        <div class="banner‐roll">
            <div class="banner‐item">
                <#if model??>
                    <#list model as item>
                        <div class="item" style="background‐image: url(${item.value});"></div>
                        </#list>
                    </#if>
                ......
    </body>
</html>

3.2.2 模板测试

在freemarker测试工程编写一个方法测试轮播图模板，代码如下：

@Autowired
RestTemplate restTemplate;
@RequestMapping("/banner")
public String index_banner(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);
    return "index_banner";
}

请求：http://localhost:8088/freemarker/banner

4. GridFS介绍

GridFS是MongoDB提供的用于持久化存储文件的模块，CMS使用MongoDB存储数据，使用GridFS可以快速集成开发。

它的工作原理是：

在GridFS存储文件是将文件分块存储，文件会按照256KB的大小分割成多个块进行存储，GridFS使用两个集合
（collection）存储文件，一个集合是chunks, 用于存储文件的二进制数据；一个集合是files，用于存储文件的元数据信息（文件名称、块大小、上传时间等信息）。

从GridFS中读取文件要对文件的各各块进行组装、合并。

4.1 GridFS 存取文件测试

4.1.1 存文件

使用GridFsTemplate存储文件测试代码：

向测试程序注入GridFsTemplate。

@Test
public void testGridFs() throws FileNotFoundException {
    //要存储的文件
    File file = new File("d:/index_banner.html");
    //定义输入流
    FileInputStream inputStram = new FileInputStream(file);
    //向GridFS存储文件
    ObjectId objectId = = gridFsTemplate.store(inputStram, "轮播图测试文件01", "");
    //得到文件ID
    String fileId = objectId.toString();
    System.out.println(file);
}

存储原理说明：

文件存储成功得到一个文件id

此文件id是fs.files集合中的主键。

可以通过文件id查询fs.chunks表中的记录，得到文件的内容。

4.1.2 读取文件

在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 bucket = GridFSBuckets.create(database);
        return bucket;
    }
}

测试代码如下

@SpringBootTest
@RunWith(SpringRunner.class)
public class GridFsTest {
    @Autowired
    GridFsTemplate gridFsTemplate;
    @Autowired
    GridFSBucket gridFSBucket;

    @Test
    public void queryFile() throws IOException {
        String fileId = "5b9c54e264c614237c271a99";
        //根据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);
    }
    ...

4.1.3 删除文件

//删除文件
@Test
public void testDelFile() throws IOException {
    //根据文件id删除fs.files和fs.chunks中的记录
    gridFsTemplate.delete(Query.query(Criteria.where("_id").is("5b32480ed3a022164c4d2f92")));
}

4.2 模板存储

根据模板管理的流程，最终将模板信息存储到MongoDB的cms_template中，将模板文件存储到GridFS中。

4.2.1 添加模板

使用GridFS测试代码存储模板文件到GridFS，并得到文件id.
向cms_template添加记录。

4.2.2 删除模板

使用GridFS测试代码根据文件id删除模板文件。
根据模板id删除cms_template中的记录。

4.2.3 修改模板信息

使用Studio 3T修改cms_template中的记录。

4.2.4 修改模板文件

通过Studio 3T修改模板文件(此方法限文件小于256K)

可以通过Studio 3T修改模板文件，先找到模板文件，再导入进去：

5. 静态化测试

package com.xuecheng.manage_cms.service;
@Service
public class PageService {
    @Autowired
    CmsPageRepository cmsPageRepository;
    @Autowired
    CmsConfigRepository cmsConfigRepository;
    @Autowired
    RestTemplate restTemplate;
    @Autowired
    CmsTemplateRepository cmsTemplateRepository;
    @Autowired
    GridFsTemplate gridFsTemplate;
    @Autowired
    GridFSBucket gridFSBucket;
    ......
    //页面静态化方法
    public String getPageHtml(String pageId){
        //获取数据模型
        Map model = getModelByPageId(pageId);
        if(model == null){
            //数据模型获取不到
            ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_DATAISNULL);
        }
        //获取页面的模板信息
        String template = getTemplateByPageId(pageId);
        if(StringUtils.isEmpty(template)){
            ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_TEMPLATEISNULL);
        }
        //执行静态化
        String html = generateHtml(template, model);
        return html;
    }
    //执行静态化
    private String generateHtml(String templateContent,Map model ){
        //创建配置对象
        Configuration configuration = new Configuration(Configuration.getVersion());
        //创建模板加载器
        StringTemplateLoader stringTemplateLoader = new StringTemplateLoader();
        stringTemplateLoader.putTemplate("template",templateContent);
        //向configuration配置模板加载器
        configuration.setTemplateLoader(stringTemplateLoader);
        //获取模板
        try {
            Template template = configuration.getTemplate("template");
            //调用api进行静态化
            String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, model);
            return content;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
    //获取页面的模板信息
    private String getTemplateByPageId(String pageId){
        //取出页面的信息
        CmsPage cmsPage = this.getById(pageId);
        if(cmsPage == null){
            //页面不存在
            ExceptionCast.cast(CmsCode.CMS_PAGE_NOTEXISTS);
        }
        //获取页面的模板id
        String templateId = cmsPage.getTemplateId();
        if(StringUtils.isEmpty(templateId)){
            ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_TEMPLATEISNULL);
        }
        //查询模板信息
        Optional<CmsTemplate> optional = cmsTemplateRepository.findById(templateId);
        if(optional.isPresent()){
            CmsTemplate cmsTemplate = optional.get();
            //获取模板文件id
            String templateFileId = cmsTemplate.getTemplateFileId();
            //从GridFS中取模板文件内容
            //根据文件id查询文件
            GridFSFile gridFSFile = gridFsTemplate.findOne(Query.query(Criteria.where("_id").is(templateFileId)));
            //打开一个下载流对象
            GridFSDownloadStream gridFSDownloadStream = gridFSBucket.openDownloadStream(gridFSFile.getObjectId());
            //创建GridFsResource对象，获取流
            GridFsResource gridFsResource = new GridFsResource(gridFSFile,gridFSDownloadStream);
            //从流中取数据
            try {
                String content = IOUtils.toString(gridFsResource.getInputStream(), "utf-8");
                return content;
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        return null;
    }
    //获取数据模型
    public Map getModelByPageId(String pageId){
        //取出页面的信息
        CmsPage cmsPage = this.getById(pageId);
        if(cmsPage == null){
            //页面不存在
            ExceptionCast.cast(CmsCode.CMS_PAGE_NOTEXISTS);
        }
        //取出页面的dataUrl
        String dataUrl = cmsPage.getDataUrl();
        if(StringUtils.isEmpty(dataUrl)){
            //页面dataUrl为空
            ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_DATAURLISNULL);
        }
        //通过restTemplate请求dataUrl获取数据
        ResponseEntity<Map> forEntity = restTemplate.getForEntity(dataUrl, Map.class);
        Map body = forEntity.getBody();
        return body;
    }
}

6. 页面预览

6.1 配置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;    
}

重新加载nginx 配置文件。

从cms_page找一个页面进行测试。注意：页面配置一定要正确，需设置正确的模板id和dataUrl。

在浏览器打开：http://www.xuecheng.com/cms/preview/5a795ac7dd573c04508f3a56

5a795ac7dd573c04508f3a56 ：轮播图页面的id

6.2 添加“页面预览”链接

在页面列表添加“页面预览”链接，修改page_list.vue:

<template slot‐scope="page">
  <el‐button @click="edit(page.row.pageId)" type="text" size="small">修改</el‐button>
  <el‐button @click="del(page.row.pageId)" type="text" size="small">删除</el‐button>
  <el‐button @click="preview(page.row.pageId)" type="text" size="small">页面预览</el‐button>
 ...

添加preview方法：

//页面预览
preview(pageId){
    window.open("http://www.xuecheng.com/cms/preview/"+pageId)
},

效果：

点击轮播图页面的“页面预览”，预览页面效果。