1、页面静态化

1.1 页面静态化

模板+数据模型=输出，页面静态化需要准备数据模型和模板，先知道数据模型的结构才可以编写模板，因为在模板中要引用数据模型中的数据，现在讲解页面数据模型获取、模板管理及静态化的过程。

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

CMS管理了各种页面，CMS对页面进行静态化时需要数据模型，但是CMS并不知道每个页面的数据模型的具体内容，它只管执行静态化程序便可对页面进行静态化，所以CMS静态化程序需要通过一种通用的方法来获取数据模型。
在编辑页面信息时指定一个DataUrl，此DataUrl便是获取数据模型的Url，它基于Http方式，CMS对页面进行静态化时会从页面信息中读取DataUrl，通过Http远程调用的方法请求DataUrl获取数据模型。

管理员怎么知道DataUrl的内容呢？
举例说明：
此页面是轮播图页面，它的DataUrl由开发轮播图管理的程序员提供。
此页面是精品推荐页面，它的DataUrl由精品推荐的程序员提供。
此页面是课程详情页面，它的DataUrl由课程管理的程序员提供。

页面静态化流程如下图：
1、静态化程序首先读取页面获取DataUrl。
2、静态化程序远程请求DataUrl得到数据模型。
3、获取页面模板。
4、执行页面静态化。

image.png

1.2 数据模型

1.2.1 轮播图DataUrl接口

1.2.1.1 需求分析

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

image.png

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

1.2.1.2 接口定义

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

image.png

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;
    private Map mapValue;
    private String value;

}

上边的模型结构可以对照cms_config中的数据进行分析。
其中，在mapValue 中可以存储一些复杂的数据模型内容。
根据配置信息Id查询配置信息，定义接口如下：

public interface CmsConfigControllerApi {


    public CmsConfig  getmodel(String id);

}

根据组件id就可以获取到配置信息了

image.png

1.2.3 远程请求接口

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

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

2、配置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
根据url获取数据，并转为map格式

@SpringBootTest
@RunWith(SpringRunner.class)
public class TestRestTemplate {

    @Autowired
    RestTemplate restTemplate;

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

1.3 模板管理

1.3.1 模板管理业务流程

image.png

1、要增加新模板首先需要制作模板，模板的内容就是Freemarker ftl模板内容。

2、通过模板管理模块功能新增模板、修改模板、删除模板。

3、模板信息存储在MongoDB数据库，其中模板信息存储在cms_template集合中，模板文件存储在GridFS文件系统中。
下边是一个模板的例子

image.png

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

1.3.2 模板制作

1.3.2.1 编写模板文件

1、先要找到需要静态化的原页面

2、数据模型为：
通过1.3.2.2 模板测试的index_banner方法http 获取到数据模型

3、编写模板
在freemarker测试工程中新建模板xxxx.ftl。

image.png image.png

从模型里面取出数据

1.3.2.2 模板测试

    @Autowired
    RestTemplate restTemplate;


    @RequestMapping("/banner")
    public String index_banner(Map<String, Object> map){
        ResponseEntity<Map> forEntity = restTemplate.getForEntity("http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f", Map.class);
        Map body = forEntity.getBody();
        map.putAll(body);
        return "index_banner";
    }

1.3.3 GridFS研究

1.3.3.1 GridFS介绍

GridFS是MongoDB提供的用于持久化存储文件的模块，CMS使用MongoDB存储数据，使用GridFS可以快速集成开发。
它的工作原理是：
在GridFS存储文件是将文件分块存储，文件会按照256KB的大小分割成多个块进行存储，GridFS使用两个集合（collection）存储文件，一个集合是chunks, 用于存储文件的二进制数据；一个集合是files，用于存储文件的元数据信息（文件名称、块大小、上传时间等信息）。
从GridFS中读取文件要对文件的各各块进行组装、合并

1.3.3.2 GridFS存取文件测试

1、存文件
使用GridFsTemplate存储文件测试代码：
向测试程序注入GridFsTemplate。

    @Autowired
    GridFsTemplate gridFsTemplate;

    @Test
    public void  testGridFs() throws FileNotFoundException {
 //要储存的文件
        File file  = new File("d:/index_banner.ftl");
        //定义输入流
        FileInputStream fileInputStream = new FileInputStream(file);

        //要储存的文件
        ObjectId  objectId  = gridFsTemplate.store(fileInputStream, "index_banner.ftl");
        //得到文件ID
        String fileId = objectId.toString();
        System.out.println(file);
    }

存储原理说明：
文件存储成功得到一个文件id
此文件id是fs.files集合中的主键。
可以通过文件id查询fs.chunks表中的记录，得到文件的内容。

2、读取文件
1）在config包中定义Mongodb的配置类，如下：
GridFSBucket用于打开下载流对象

  @Autowired
    GridFsTemplate gridFsTemplate;

@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;
    }

}

2）测试代码如下

  @Autowired
    GridFsTemplate gridFsTemplate;

    @Autowired
    GridFSBucket gridFSBucket;

   @Test
    public void  queryFile() throws IOException {

        //用id查询文件
        GridFSFile gridFSFile = gridFsTemplate.findOne(Query.query(Criteria.where("_id").is("5c21c959af60833dd003d811")));
        //打开下载流对象
        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);

    }

1.3.4 模板存储

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

image.png

1.4.2 静态化程序

//页面静态化
    public String getPageHtml(String pageId) throws IOException {
        //获取模板数据
        Map model = this.getModelByPage(pageId);
        if(model==null){
            ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_DATAISNULL);
        }
        //获取页面模板
        String templateContent = getTemplateByPageId(pageId);
        if(StringUtils.isEmpty(templateContent)){
        //页面模板为空
            ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_TEMPLATEISNULL);
        }
        //执行静态化
        String html = generateHtml(templateContent, model);
        if(StringUtils.isEmpty(html)){
            ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_HTMLISNULL);
        }
        return html;
    }
    //执行静态化
    private String  generateHtml(String template,Map model){
        try {
            //创建配置类
            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;

        } catch (Exception e) {
            e.printStackTrace();
        }

        return null;
    }

    //获取页面模板
    private String  getTemplateByPageId(String pageId) throws IOException {
        if(pageId==null){
            ExceptionCast.cast(CommonCode.INVALID_PARAM);
        }
        //根据id获取页面模板数据
        CmsPage cmsPage = this.findById(pageId);
        if(cmsPage==null){
            ExceptionCast.cast(CmsCode.CMS_PAGE_NOTEXISTS);
        }
        //获取页面模板
        String templateId = cmsPage.getTemplateId();
        if(templateId==null){
            ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_TEMPLATEISNULL);
        }
        //根据页面模板Id查询模板信息
        Optional<CmsTemplate> optional = cmsTemplateRepository.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());
            //创建gridFsResource，用于获取流对象
            GridFsResource gridFsResource = new GridFsResource(gridFSFile,gridFSDownloadStream);
            //获取流中的数据
            String  content  = IOUtils.toString(gridFsResource.getInputStream(), "utf-8");
            return  content ;
        }
        return null;
    }

    //获取模板数据
    private Map getModelByPage(String pageId){
        if(pageId==null){
            ExceptionCast.cast(CommonCode.INVALID_PARAM);
        }
        //根据id查询dataurl
        CmsPage cmsPage = this.findById(pageId);
        if(cmsPage==null){
            ExceptionCast.cast(CmsCode.CMS_PAGE_NOTEXISTS);
        }
        //获取dataurl
        String dataUrl = cmsPage.getDataUrl();
        if(dataUrl==null){
            ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_DATAURLISNULL);
        }

        //根据url获取信息
        ResponseEntity<Map> forEntity = restTemplate.getForEntity(dataUrl, Map.class);
        if(forEntity.equals(" ")){
            ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_DATAISNULL);
        }
        Map body = forEntity.getBody();

        return body;
    }

2页面预览

页面在发布前增加页面预览的步骤，方便用户检查页面内容是否正确
1、用户进入cms前端，点击“页面预览”在浏览器请求cms页面预览链接。
2、cms根据页面id查询DataUrl并远程请求DataUrl获取数据模型。
3、cms根据页面id查询页面模板内容
4、cms执行页面静态化
5、cms将静态化内容响应给浏览器。
6、在浏览器展示页面内容，实现页面预览的功能

controller

 //接收到页面id
    @RequestMapping(value="/cms/preview/{pageId}",method = RequestMethod.GET)
    public void preview(@PathVariable("pageId")String pageId) throws IOException {
        String pageHtml = pageService.getPageHtml(pageId);
        ServletOutputStream outputStream = response.getOutputStream();
        outputStream.write(pageHtml.getBytes("UTF-8"));
    }

service就是上面的页面静态化

2.2.1 配置Nginx代理

为了通过nginx请求静态资源（css、图片等），通过nginx代理进行页面预览
在nginx的config配置

image.png
直接访问页面预览的接口
需要再配置一下pool，方便以后有更多的节点，如果有集群可以负载均衡各个不同的节点
image.png
别忘记了重启nginx.exe -s reload