CMS-页面静态化技术

页面静态化技术

• 页面静态化技术是什么？

页面静态化主要运用在一些大型网站，有大量信息需要与数据库交互。比如大型电商网站京东，淘宝 ，天猫等。电商网站最大的特点是什么？数据庞大，页面众多。那么我们都知道涉及到与数据打交道的必然少不了数据库，用户在网站上点开的每一个商品页面都会对数据在数据库中的查询，调取，展示等一系列操作。

试想，如果同时10万人同时访问，那么必然对服务器的压力变得很大甚至崩溃。那有没有一个技术可以改变这个呢？可以避免访问量大的时候造成服务器压力的问题呢？

有！页面静态化技术！

页面静态化技术简单来说就是我在用户访问页面前我提前把用户可能访问到页面提前创建出来，不用每次用户访问的时候都需要走数据库查询、调取等一系列操作。用户访问的也就只是一个静态HTML文件。

• 页面静态化技术的好处？

1. 减少服务器压力

2. 提高用户体验（资源图片信息加载块）

Freemarker

• 什么是Freemarker

FreeMarker 是一个用Java 语言编写的模板引擎，它基于模板来生成文本输出。实现页面静态化

CMS-页面静态化实现

上面提到在很多大型网站会用到页面静态化技术，这里就简单用Freemarker实现门户网站的新闻列表文章的页面静态化做演示

• 后端

链接地址指向前端文章跳转的页面html

• 前端

首先看一下效果：

当点击技术文章的某一篇文章标题的时候，页面将进行跳转到文章内容页面

看地址

可以看到这篇文章的URL地址是一串随机生成的数字以html结尾的静态网页。

• 实现步骤与思路

1. 准备静态页面模板文件.ftl

   1. 在模板文件中用${字段}把要展示的内容放在固定的位置上，当生成文件后，会自动把操作的对象里面的内容填充在这个位置。字段需与实体类数据库中的表字段一致。

      

   2. 封装FreemarkerUtil工具类

      1. 获取Configuration对象

      2. 设置加载路径

      3. 设置默认编码

      4. 获取.ftl模板

      5. 准备数据

      6. 生成静态资源

         

2. 后台添加/修改内容操作

   1. ​​​​​​绑定添加/修改按钮单击事件，弹出添加模态框

   2. 绑定模态框中确定按钮单击事件

      1. 携带参数发送异步请求

      2. controller层参数用对象接收

      3. service层调用封装好的FreemarkerUtil工具类，填入4个参数

      4. 根据id为空判断是保存操作还是修改操作

         1. 保存操作，调用mapper层和映射文件，编写sql语句

         2. 修改操作，根据ID查询到该对象，删除原有的页面，生成新的页面，更新数据库

      5. 

3. 门户网站显示

   • 在要显示的页面位置通过发送请求查询数据库中的信息，返回的对象，获取标题和内容拼接到要显示的位置

   • 标题是a标签，a标签指向的地址就是页面生成文件的url地址

 

 

 

 

​​​​