Java的新專案學成線上筆記-day4(三）
阿新 • • 發佈：2019-01-08
3.3 模板管理
3.3.1 模板管理業務流程
CMS提供模板管理功能，業務流程如下：
1、要增加新模板首先需要製作模板，模板的內容就是Freemarker ftl模板內容。 2、通過模板管理模組功能新增模板、修改模板、刪除模板。
3、模板資訊儲存在MongoDB資料庫，其中模板資訊儲存在cms_template集合中，模板檔案儲存在GridFS檔案系 統中。
cms_template集合：
下邊是一個模板的例子：
{ "_id" : ObjectId("5a962b52b00ffc514038faf7"), "_class" : "com.xuecheng.framework.domain.cms.CmsTemplate", "siteId" : "5a751fab6abb5044e0d19ea1", "templateName" : "首頁", "templateParameter" : "", "templateFileId" : "5a962b52b00ffc514038faf5" }
上邊模板資訊中templateFileId是模板檔案的ID，此ID對應GridFS檔案系統中檔案ID。
3.3.2 模板製作 3.3.2.1 編寫模板檔案
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++; } } [mw_shl_code=applescript,true] roll(); }); var timer = setInterval(roll, 3000); $('.banner‐item').mouseover(function() { clearInterval(timer) }); $('.banner‐item').mouseout(function() { timer = setInterval(roll, 3000) }); </script> </body> </html> $('.indicators').find('span').click(function() { num = $(this).index(); [/mw_shl_code]
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++;
}
}
$('.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>