7 页面静态化

最新推荐文章于 2023-07-26 09:27:43 发布

鬼灭之刃

最新推荐文章于 2023-07-26 09:27:43 发布

阅读量532

点赞数 1

分类专栏：学成在线视频教育网站

本文链接：https://blog.csdn.net/A1342772/article/details/104557993

版权

学成在线视频教育网站专栏收录该内容

7 篇文章 0 订阅

订阅专栏

为什么页面要静态化，可自行百度，本文只介绍如何实现页面静态化。

1 页面静态化流程

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

2 分步骤实现页面静态化

2.1 获取模型数据

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

2.1.1 通过DataUrl获取模型数据

（1）将模型数据存储到数据库，我使用的是mogoDB数据库

（2）每个静态页面都有对应的dataUrl，dataUrl通过http获取数据库中的数据

我们直接通过浏览器输入dataUrl即可获得模型数据

在程序中，我们自然不能通过浏览器直接输入dataUrl获取模型数据，SpringMVC提供 RestTemplate请求http接口，RestTemplate的底层可以使用第三方的http客户端工具实现http 的请求，常用的http客户端工具有Apache HttpClient、OkHttpClient等，本项目使用OkHttpClient完成http请求，原因也是因为它的性能比较出众。

（1）配置RestTemplate

    @Bean
    public RestTemplate restTemplate() {
        return  new RestTemplate(new OkHttp3ClientHttpRequestFactory());
    }

（2）通过RestTemplate获取模型数据

首先根据页面id找到静态页面信息；然后找到该页面对应的dataUrl；最后通过restTemplate远程访问获取模型数据。

   //获取模型数据
    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)) {
            ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_DATAURLISNULL);
        }
        ResponseEntity<Map> forEntity = restTemplate.getForEntity(dataUrl, Map.class);
        Map body = forEntity.getBody();
        return body;
    }

2.2 制作模板

2.2.1 制作页面原型

先把页面原型制作出来，然后根据数据模型修改页面原型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/plugins/normalize-css/normalize.css" />
    <link rel="stylesheet" href="/plugins/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="/css/page-learing-index.css" />
    <link rel="stylesheet" href="/css/page-header.css" />
</head>
<body>
<div class="banner-roll">
    <div class="banner-item">
        <div class="item" style="background-image: url(../img/widget-bannerB.jpg);"></div>
        <div class="item" style="background-image: url(../img/widget-bannerA.jpg);"></div>
        <div class="item" style="background-image: url(../img/widget-banner3.png);"></div>
        <div class="item" style="background-image: url(../img/widget-bannerB.jpg);"></div>
        <div class="item" style="background-image: url(../img/widget-bannerA.jpg);"></div>
        <div class="item" style="background-image: url(../img/widget-banner3.png);"></div>
    </div>
    <div class="indicators"></div>
</div>

</body>
</html>

2.2.2 查看数据模型

2.2.3 freemarker修改页面原型，生成页面模板

通过freemarker新建模板index_banner.ftl。freemarker的语法教程很多，这里不再赘述。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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">
        <#if model??>
            <#list model as item>
                <div class="item" style="background-image: url(${item.value});"></div>
            </#list>
        </#if>
        <#-- <div class="item" style="background-image: url(../img/widget-bannerA.jpg);"></div>
    <div class="item" style="background-image: url(../img/widget-banner3.png);"></div>
    <div class="item" style="background-image: url(../img/widget-bannerB.jpg);"></div>
    <div class="item" style="background-image: url(../img/widget-bannerA.jpg);"></div>

</body>
</html>

2.3 存储和下载模板

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

2.3.1 配置GridFs

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.3.2 通过GridFs上传和下载模板

上传

  public void testStore() throws FileNotFoundException {
        //定义file
        File file =new File("d:/index_banner.ftl");
        //定义fileInputStream
        FileInputStream fileInputStream = new FileInputStream(file);
        ObjectId objectId = gridFsTemplate.store(fileInputStream, "index_banner.ftl");
        System.out.println(objectId);
    }

下载

 //获取页面模板
    public String getTemplateByPageId(String pageId) {
        //查询页面信息
        CmsPage cmsPage = this.getById(pageId);
        if (cmsPage == null) {
            //页面不存在
            ExceptionCast.cast(CmsCode.CMS_PAGE_NOTEXISTS);
        }
        //页面模板
        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();
            //取出模板文件内容
            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;
    }

2.4 页面静态化

首先配置模板加载器；然后通过模板加载器加载模板；最后通过FreeMarkerTemplateUtils生成静态页面。

    //页面静态化
    public 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;
    }

3 实际使用，页面预浏览

页面在发布前增加页面预览的步骤，方便用户检查页面内容是否正确。页面预览的流程如下：

在后台管理页面中，同时输入dataUrl和使用的模板

当点击预浏览的时候，直接调用页面静态化函数生成静态页面

鬼灭之刃

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7 页面静态化

为什么页面要静态化，可自行百度，本文只介绍如何实现页面静态化。1页面静态化流程业务流程如下：获取模型数据制作模板存储和下载模板对页面进行静态化将静态化生成的html页面存放文件系统中将存放在文件系统的html文件发布到服务器2 分步骤实现页面静态化2.1 获取模型数据CMS管理了各种页面，CMS对页面进行静态化时需要数据模型，但是CMS并不知道每个...
复制链接

扫一扫