|
【郑州校区】学成在线 第4天 讲义-页面静态化 页面预览 二
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=
"
[url]http://www.xuecheng[/url]
.com/plugins/normalize
‐
css/normalize.css
"
/>
<link rel=
"
stylesheet
"
href=
"
[url]http://www.xuecheng[/url]
.com/plugins/bootstrap/dist/css/bootstrap
.css
"
/>
<link rel=
"
stylesheet
"
href=
"
[url]http://www.xuecheng[/url]
.com/css/page
‐
learing
‐
index.css
"
/>
<link rel=
"
stylesheet
"
href=
"
[url]http://www.xuecheng[/url]
.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
=
"
[url]http://www.xuecheng[/url]
.com/plugins/jquery/dist/jquery
.
js
"
>
</script>
<script type
=
"
text/javascript
"
src
=
"
[url]http://www.xuecheng[/url]
.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>
2、数据模型为：
通过http 获取到数据模型如下：
下图数据模型的图片路径改成可以浏览的正确路径。
[AppleScript] 纯文本查看 复制代码 {
"
id
"
:
"
5a791725dd573c3574ee333f
"
,
"
name
"
:
"
轮播图
"
,
"
model
"
: [
{
"
key
"
:
"
banner1
"
,
"
name
"
:
"
轮播图1地址
"
,
"
url
"
: null,
"
mapValue
"
: null,
"
value
"
:
"
[url]http://www.xuecheng[/url]
.com/img/widget
‐
bannerB.
jpg
"
},
{
"
key
"
:
"
banner2
"
,
"
name
"
:
"
轮播图2地址
"
,
"
url
"
: null,
"
mapValue
"
: null,
"
value
"
:
"
[url]http://www.xuecheng[/url]
.com/img/widget
‐
bannerA.
jpg
"
},
{
"
key
"
:
"
banner3
"
,
"
name
"
:
"
轮播图3地址
"
,
"
url
"
: null,
"
mapValue
"
: null,
"
value
"
:
"
[url]http://www.xuecheng[/url]
.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=
"
[url]http://www.xuecheng[/url]
.com/plugins/normalize
‐
css/normalize.css
"
/>
<link rel=
"
stylesheet
"
href=
"
[url]http://www.xuecheng[/url]
.com/plugins/bootstrap/dist/css/bootstrap
.css
"
/>
<link rel=
"
stylesheet
"
href=
"
[url]http://www.xuecheng[/url]
.com/css/page
‐
learing
‐
index.css
"
/>
<link rel=
"
stylesheet
"
href=
"
[url]http://www.xuecheng[/url]
.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
=
"
[url]http://www.xuecheng[/url]
.com/plugins/jquery/dist/jquery
.
js
"
>
</script>
<script type
=
"
text/javascript
"
src
=
"
[url]http://www.xuecheng[/url]
.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>
3.3.2.2 模板测试
在freemarker测试工程编写一个方法测试轮播图模板，代码如下：
[AppleScript] 纯文本查看 复制代码 @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
"
;
}
|
收藏
淘帖
踩
