Java的新项目学成在线笔记-day4(三）

3.3 模板管理
3.3.1 模板管理业务流程
CMS提供模板管理功能，业务流程如下：

Java的新项目学成在线笔记-day4(三）
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>

Java的新项目学成在线笔记-day4(三）

猜你喜欢