頁面靜態化需求
1、爲什麼要進行頁面管理？
本項目cms系統的功能就是根據運營需要，對門戶等子系統的部分頁面進行管理，從而實現快速根據用戶需求修改
頁面內容並上線的需求。
2、如何修改頁面的內容？
在開發中修改頁面內容是需要人工編寫html及JS文件，CMS系統是通過程序自動化的對頁面內容進行修改，通過
頁面靜態化技術生成html頁面。
3、如何對頁面進行靜態化？
採用頁面模板+數據 = 輸出html頁面的技術實現靜態化。
4、靜態化的html頁面存放在哪裏?
生成對的靜態化的頁面，由cms程序自動發佈到服務器（門戶服務器丶其他）中，實現頁面的快速上線。
FreeMarker研究
它是一種模板引擎，基於模板+數據，輸出文本（html文件、json文件、java文件）
核心指令
數據模型
Freemarker靜態化依賴數據模型和模板，下邊定義數據模型：
下邊方法形參map即爲freemarker靜態化所需要的數據模型，在map中填充數據：
@RequestMapping("/test1")
public String freemarker(Map<String, Object> map){
//向數據模型放數據
map.put("name","黑馬程序員");
Student stu1 = new Student();
stu1.setName("小明");
stu1.setAge(18);
stu1.setMondy(1000.86f);
stu1.setBirthday(new Date());
Student stu2 = new Student();
stu2.setName("小紅");
stu2.setMondy(200.1f);
stu2.setAge(19);
// stu2.setBirthday(new Date());
List<Student> friends = new ArrayList<>();
friends.add(stu1);
stu2.setFriends(friends);
stu2.setBestFriend(stu1);
List<Student> stus = new ArrayList<>();
stus.add(stu1);
stus.add(stu2);
//向數據模型放數據
map.put("stus",stus);
//準備map數據
HashMap<String,Student> stuMap = new HashMap<>();
stuMap.put("stu1",stu1);
stuMap.put("stu2",stu2);
//向數據模型放數據
map.put("stu1",stu1);
//向數據模型放數據
map.put("stuMap",stuMap);
//返回模板文件名稱
return "test1";
}List指令
1、註釋，即<#‐‐和‐‐>，介於其之間的內容會被freemarker忽略
2、插值（Interpolation）：即${..}部分,freemarker會用真實的值代替${..}
3、FTL指令：和HTML標記類似，名字前加#予以區分，Freemarker會解析標籤中的表達式或邏輯。
4、文本，僅文本信息，這些不是freemarker的註釋、插值、FTL指令的內容會被freemarker忽略解析，直接輸出內
容。
在test1.ftl模板中使用list指令遍歷數據模型中的數據：
<table>
<tr>
<td>序號</td>
<td>姓名</td>
<td>年齡</td>
<td>錢包</td>
</tr>
<#list stus as stu>
<tr>
<td>${stu_index + 1}</td>
<td>${stu.name}</td>
<td>${stu.age}</td>
<td>${stu.mondy}</td>
</tr>
</#list>
</table>3、輸出：
Hello 黑馬程序員! 序號 姓名 年齡 錢包 1 小明 18 1,000.86 2 小紅 19 200.1
遍歷Map數據
1、數據模型
使用map指令遍歷數據模型中的stuMap。
2、模板
輸出stu1的學生信息：<br/>
姓名：${stuMap['stu1'].name}<br/>
年齡：${stuMap['stu1'].age}<br/>
輸出stu1的學生信息：<br/>
姓名：${stuMap.stu1.name}<br/>
年齡：${stuMap.stu1.age}<br/>
遍歷輸出兩個學生信息：<br/>
<table>
<tr>
<td>序號</td>
<td>姓名</td>
<td>年齡</td>
<td>錢包</td>
</tr>
<#list stuMap?keys as k>
<tr>
<td>${k_index + 1}</td>
<td>${stuMap[k].name}</td>
<td>${stuMap[k].age}</td>
<td >${stuMap[k].mondy}</td>
</tr>
</#list>
</table>3 、輸出
輸出stu1的學生信息：
姓名：小明
年齡：18
輸出stu1的學生信息：
姓名：小明
年齡：18
遍歷輸出兩個學生信息：
序號 姓名 年齡 錢包
1 小紅 19 200.1
2 小明 18 1,000.86靜態化測試
在cms中使用freemarker將頁面生成html文件，本節測試html文件生成的方法：
1、使用模板文件靜態化
定義模板文件，使用freemarker靜態化程序生成html文件。
2、使用模板字符串靜態化
定義模板字符串，使用freemarker靜態化程序生成html文件。
使用模板文件靜態化
在test下創建測試類，並且將main下的resource/templates拷貝到test下，本次測試使用之前我們在main下創建
的模板文件。
//基於模板生成靜態化文件
@Test
public void testGenerateHtml() throws IOException, TemplateException {
//創建配置類
Configuration configuration=new Configuration(Configuration.getVersion());
//設置模板路徑
String classpath = this.getClass().getResource("/").getPath();
configuration.setDirectoryForTemplateLoading(new File(classpath + "/templates/"));
//設置字符集
configuration.setDefaultEncoding("utf‐8");
//加載模板
Template template = configuration.getTemplate("test1.ftl");
//數據模型
Map<String,Object> map = new HashMap<>();
map.put("name","黑馬程序員");
//靜態化
String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, map);
//靜態化內容
System.out.println(content);
InputStream inputStream = IOUtils.toInputStream(content);
//輸出文件
FileOutputStream fileOutputStream = new FileOutputStream(new File("d:/test1.html"));
int copy = IOUtils.copy(inputStream, fileOutputStream);
}使用模板字符串靜態化
//基於模板字符串生成靜態化文件
@Test
public void testGenerateHtmlByString() throws IOException, TemplateException {
//創建配置類
Configuration configuration=new Configuration(Configuration.getVersion());
//模板內容，這裏測試時使用簡單的字符串作爲模板
String templateString="" +
"<html>\n" +
" <head></head>\n" +
" <body>\n" +
" 名稱：${name}\n" +
" </body>\n" +
"</html>";
//模板加載器
StringTemplateLoader stringTemplateLoader = new StringTemplateLoader();
stringTemplateLoader.putTemplate("template",templateString);
configuration.setTemplateLoader(stringTemplateLoader);
//得到模板
Template template = configuration.getTemplate("template","utf‐8");
//數據模型
Map<String,Object> map = new HashMap<>();
map.put("name","黑馬程序員");
//靜態化
String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, map);
//靜態化內容
System.out.println(content);
InputStream inputStream = IOUtils.toInputStream(content);
//輸出文件
FileOutputStream fileOutputStream = new FileOutputStream(new File("d:/test1.html"));
IOUtils.copy(inputStream, fileOutputStream);
}
頁面靜態化
通過上邊對FreeMarker的研究我們得出：模板+數據模型=輸出，頁面靜態化需要準備數據模型和模板，先知道數
據模型的結構纔可以編寫模板，因爲在模板中要引用數據模型中的數據，本節將系統講解CMS頁面數據模型獲取、
模板管理及靜態化的過程。
管理員怎麼知道DataUrl的內容呢？
舉例說明：
此頁面是輪播圖頁面，它的DataUrl由開發輪播圖管理的程序員提供。
此頁面是精品課程推薦頁面，它的DataUrl由精品課程推薦的程序員提供。
此頁面是課程詳情頁面，它的DataUrl由課程管理的程序員提供。
頁面靜態化流程如下圖：
1、靜態化程序首先讀取頁面獲取DataUrl。
2、靜態化程序遠程請求DataUrl得到數據模型。
3、獲取頁面模板。
4、執行頁面靜態化。
輪播圖DataUrl接口
CMS中有輪播圖管理、精品課程推薦的功能，以輪播圖管理爲例說明：輪播圖管理是通過可視化的操作界面由管理
員指定輪播圖圖片地址，最後將輪播圖圖片地址保存在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;//項目簡單值
}根據配置信息Id查詢配置信息，定義接口如下：
@Api(value="cms配置管理接口",description = "cms配置管理接口，提供數據模型的管理、查詢接口")
public interface CmsConfigControllerApi {
@ApiOperation("根據id查詢CMS配置信息")
public CmsConfig getmodel(String id);
}Dao
定義CmsConfig的dao接口：
public interface CmsConfigRepository extends MongoRepository<CmsConfig,String> {
}Service
定義CmsConfigService實現根據id查詢CmsConfig信息。
@Service
public class CmsConfigService {
@Autowired
CmsConfigRepository cmsConfigRepository;
//根據id查詢配置管理信息
public CmsConfig getConfigById(String id){
Optional<CmsConfig> optional = cmsConfigRepository.findById(id);
if(optional.isPresent()){
CmsConfig cmsConfig = optional.get();
return cmsConfig;
}
return null;
}
}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);
}
}測試
使用postman測試接口：
get請求：http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f （輪播圖信息）
模板管理
1、要增加新模板首先需要製作模板，模板的內容就是Freemarker ftl模板內容。
2、通過模板管理模塊功能新增模板、修改模板、刪除模板。
3、模板信息存儲在MongoDB數據庫，其中模板信息存儲在cms_template集合中，模板文件存儲在GridFS文件系
統中。
模板製作
1、輪播圖頁面原型
在門戶的靜態工程目錄有輪播圖的靜態頁面，路徑是：/include/index_banner.html。
<!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">
<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>
<script type="text/javascript" src="http://www.xuecheng.com/plugins/jquery/dist/jquery.js">
</script>
<script type="text/javascript"
src="http://www.xuecheng.com/plugins/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript">
var tg = $('.banner‐item .item');
var num = 0;
for (i = 0; i < tg.length; i++) {
$('.indicators').append('<span></span>');
$('.indicators').find('span').eq(num).addClass('active');
}
function roll() {
tg.eq(num).animate({
'opacity': '1',
'z‐index': num
}, 1000).siblings().animate({
'opacity': '0',
'z‐index': 0
}, 1000);
$('.indicators').find('span').eq(num).addClass('active').siblings().removeClass('active');
if (num >= tg.length ‐ 1) {
num = 0;
} else {
num++;
}
}
$('.indicators').find('span').click(function() {
num = $(this).index();
在freemarker測試工程中新建模板index_banner.ftl。
roll();
});
var timer = setInterval(roll, 3000);
$('.banner‐item').mouseover(function() {
clearInterval(timer)
});
$('.banner‐item').mouseout(function() {
timer = setInterval(roll, 3000)
});
</script>
</body>
</html>2 、數據模型爲：
通過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"
}
]
}3、編寫模板
在freemarker測試工程中新建模板index_banner.ftl。
<!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>
<div class="item" style="background‐image: url(../img/widget‐banner3.png);"></div>‐‐>
</div>
<div class="indicators"></div>
</div>
<script type="text/javascript" src="http://www.xuecheng.com/plugins/jquery/dist/jquery.js">
</script>
<script type="text/javascript"
src="http://www.xuecheng.com/plugins/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript">
var tg = $('.banner‐item .item');
var num = 0;
for (i = 0; i < tg.length; i++) {
$('.indicators').append('<span></span>');
$('.indicators').find('span').eq(num).addClass('active');
}
function roll() {
tg.eq(num).animate({
'opacity': '1',
'z‐index': num
}, 1000).siblings().animate({
'opacity': '0',
'z‐index': 0
}, 1000);
$('.indicators').find('span').eq(num).addClass('active').siblings().removeClass('active');
if (num >= tg.length ‐ 1) {
num = 0;
} else {
num++;
請求：http://localhost:8088/freemarker/banner
}
}
$('.indicators').find('span').click(function() {
num = $(this).index();
roll();
});
var timer = setInterval(roll, 3000);
$('.banner‐item').mouseover(function() {
clearInterval(timer)
});
$('.banner‐item').mouseout(function() {
timer = setInterval(roll, 3000)
});
</script>
</body>
</html>模板測試
在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
GridFS介紹
GridFS是MongoDB提供的用於持久化存儲文件的模塊，CMS使用MongoDB存儲數據，使用GridFS可以快速集成
開發。
它的工作原理是：
在GridFS存儲文件是將文件分塊存儲，文件會按照256KB的大小分割成多個塊進行存儲，GridFS使用兩個集合
（collection）存儲文件，一個集合是chunks, 用於存儲文件的二進制數據；一個集合是files，用於存儲文件的元數
據信息（文件名稱、塊大小、上傳時間等信息）。
從GridFS中讀取文件要對文件的各各塊進行組裝、合併。
靜態化測試
測試整個頁面靜態化的流程，流程如下：
1、填寫頁面DataUrl
在編輯cms頁面信息界面填寫DataUrl，將此字段保存到cms_page集合中。
2、靜態化程序獲取頁面的DataUrl
3、靜態化程序遠程請求DataUrl獲取數據模型。
4、靜態化程序獲取頁面的模板信息
5、執行頁面靜態化
填寫頁面DataUrl
修改頁面管理模板代碼，實現編輯頁面DataUrl。
注意：此地址由程序員提供給系統管理員，由系統管理員錄入到系統中。
下邊實現頁面修改界面錄入DataUrl：
1、修改頁面管理前端的page_edit.vue
在表單中添加 dataUrl輸入框：
<el‐form‐item label="數據Url" prop="dataUrl">
<el‐input v‐model="pageForm.dataUrl" auto‐complete="off" ></el‐input>
</el‐form‐item>2、修改頁面管理服務端PageService
在更新cmsPage數據代碼中添加：
//更新dataUrl
one.setDataUrl(cmsPage.getDataUrl());靜態化程序
在PageService中定義頁面靜態化方法，如下：
public String getPageHtml(String pageId){
//獲取頁面模型數據
Map model = this.getModelByPageId(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;
}
//頁面靜態化
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);
//獲取模板
北京市昌平區建材城西路金燕龍辦公樓一層 電話：400-618-9090
Template template1 = configuration.getTemplate("template");
String html = FreeMarkerTemplateUtils.processTemplateIntoString(template1, model);
return html;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
//獲取頁面模板
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;
}
//獲取頁面模型數據
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;
}