学成在线项目总结 - Day4 页面静态化

页面静态化

要生成一个静态化页面，我们需要页面模板+数据模型。模板就是一个html页面，但其中的数据使用占位符进行填充；数据模型有很多种，如List，Map……

首先我们需要制作模板。

模板管理

模板制作 - Freemarker：

我们可以通过新建一个工程来实现模板制作。

• 获取原始页面模板，添加到templates文件夹中
• 确定需要用模型数据替换的板块，使用Freemarker标签进行替换

注：如果之后要在模板中填入数据，就要使用RestTemplate远程请求模型数据
- 首先获取dataUrl，再通过dataUrl获取模型，将模型存入map中
- 测试代码：

@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`可以获得一个静态化页面。

模板存取 - GridFS

MongoDB提供的分布式，用于持久化存储文件的模块。
在这个项目中是为了存储制作完成的模板文件。

工作原理

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

手动添加模板

通过GridFS将模板信息分块存储到数据库后，我们需要手动在cms_template中添加模板信息。其中的关键是将刚才GridFS储存时生成的file_id填入templateFIleId这一列，通过这个id，我们可以定位到file_chunks中模板数据。

如何获取页面的数据模型？

从数据库cms_config集合中获知这个项目首页中页面的数据模型有三类：轮播图，精品推荐和分类信息。我们可以通过查询config_id来得到对应配置的数据模型。而这个config_id就是dataUrl的最后一个部分。

由于数据模型有很多种，而 CMS 只负责执行静态化程序，所以无法获知页面的数据模型。所以我们需要在编辑页面时为每个页面指定DataUrl，在执行静态化程序时，可以通过DataUrl获取页面的数据模型信息。

页面静态化流程

下面就详述每一个步骤。

填写页面DataUrl

一个页面需要添加dataUrl信息，这个操作是由管理员在后台操作页面添加的。这指定了该页面的数据模型

• 在编辑cms页面信息界面填写DataUrl，将此字段保存到cms_page集合中。
• 这个DataUrl是cms_config中模板的id

获取页面DataUrl

定义接口

在api包下定义一个CmsConfigController接口，其中定义一个根据id查询配置模型的方法。

定义Dao

在dao层定义CmsConfigRepository，继承MongoRepository<Config, String>，以使用findById()等方法来查询数据库内容。

Service层实现查询

调用CmsConfigRepository的findById()方法，查询CmsConfig。

Controller调用

重写Api中的getModel()方法，实现对Service层实现方法的调用，来获取cms_config中的模型id–这就是之后为页面添加的DataUrl信息，CMS用来获取该页面的数据模型。

这里，我们获取到的DataUrl是：http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f

获取页面DataUrl

远程请求DataUrl获取数据模型

添加OkHttpClient依赖后，在SpringBoot启动类中配置 RestTemplate 即可。然后在业务层方法中使用RestTemplate获取数据模型。

获取页面的模板信息

• 整个获取的逻辑：
  页面ID -> 模板ID -> templateFIleId -> 下载模板

生成静态化页面

    //执行静态化
    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;
    }

预览页面

为了能使管理员在后台管理中查看到新建的页面预览，我们还要通过在nginx中配置一个预览页面的路由来实现页面预览。
和直接CRUD的实现类似，我们都需要定义接口、编写业务层实现方法、在Controller中重写的接口中调用、前端定义路由来实现这一功能。

今天的代码在这里

本作品采用《CC 协议》，转载必须注明作者和本文链接