【郑州校区】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>

$('.indicators').find('span').click(function() {
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>

帐号		自动登录	找回密码
密码			加入黑马

【郑州校区】Java的新项目学成在线笔记-day4(三）

0 个回复