黑马程序员技术交流社区
标题: 【郑州校区】Java的新项目学成在线笔记-day4(三） [打印本页]
作者: 谷粒姐姐 时间: 2019-1-8 11:14
标题: 【郑州校区】Java的新项目学成在线笔记-day4(三）
3.3 模板管理
3.3.1 模板管理业务流程
CMS提供模板管理功能，业务流程如下：
1、要增加新模板首先需要制作模板，模板的内容就是Freemarker ftl模板内容。 2、通过模板管理模块功能新增模板、修改模板、删除模板。
3、模板信息存储在MongoDB数据库，其中模板信息存储在cms_template集合中，模板文件存储在GridFS文件系 统中。
cms_template集合：
下边是一个模板的例子：
[AppleScript] 纯文本查看 复制代码
{
"_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。
[AppleScript] 纯文本查看 复制代码
<!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>
num = $(this).index();
[/mw_shl_code]
2、数据模型为：
通过http 获取到数据模型如下：
下图数据模型的图片路径改成可以浏览的正确路径。
[AppleScript] 纯文本查看 复制代码
{
"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。
[AppleScript] 纯文本查看 复制代码
<!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>
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |