【原】如何快速学习freemarker以及使用经验

    freemarker

                    freemarker是静态模板，和html 、jsp类似，我第一次看见后缀是 .ftl文件，我嚓，这是什么鬼，原来是freemarker，使用它的时候你就可以理解前端页面和jsp什么没什么区别，怎样学习它，先分析代码，然后再去使用，不主张去看freemarker的书籍详细介绍，然后忘记了，浪费时间，当我们用到了不懂的在上网去学习，不废话了，先拿一片freemarker文件来分析

<#assign topnav="teacher">
<#assign title="${lesson.name}">
<#assign menu="none">
<#assign submenu="lesson">
<#include "/header.ftl">
<!-- CSS -->
<link href="/assets/sh/css/shCore.css" type="text/css" rel="stylesheet">
<link href="/assets/sh/css/shThemeDefault.css" type="text/css" rel="stylesheet">

<div id="maincontainer">
<section id="lesson">
<div class="container">
<div class="row">
<div class="col-xs-8">
<section>
<h1 class="heading1">
<img src="${course.coverUrl}" style="width:128px;height:72px;">
<span style="font-weight: bold; color: #119717; vertical-align: bottom; margin-left: 10px; font-size: 20px;">${course.name}</span>
</h1>
<div class="lesson_bar">
<span class="heading3" style="float: left; margin-top: 4px; margin-left: 10px;"><i class="fa fa-bars"></i> ${lesson.name}</span>
<span style="width:280px;float: right;">
<div class="bdsharebuttonbox">
<a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a>
<a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a>
<a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a>
<a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a>
<a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a>
<a title="分享到豆瓣网" href="#" class="bds_douban" data-cmd="douban"></a>
<img src="/images/logo_shishuowang_88x23.png" class="retina" style="margin: 6px 6px 6px 0px; height: 23px;">
</div>
<script>
window._bd_share_config = {
"common" : {
"bdSnsKey" : {},
"bdText" : "${course.name} - ${lesson.name}",
"bdMini" : "2",
"bdMiniList" : false,
"bdPic" : "",
"bdStyle" : "0",
"bdSize" : "24"
},
"share" : {}
};
with (document)
0[(getElementsByTagName('head')[0] || body)
.appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='
+ ~(-new Date() / 36e5)];
</script>
</span>
</div>
<#if lesson.videoType == "shishuo">
<div id="video_player"></div>
<script type="text/javascript">
$(function(){
    jwplayer("video_player").setup({
        file: "${lesson.videoUrl}",
        width: '100%',
        aspectratio: '16:9',
        skin: "/assets/jwplayer/roundster.xml"
    });
    });
</script>
<hr>
</#if>
<#if lesson.videoType == "youku">
<div id="video_player"></div>
<script type="text/javascript">
$(function(){
    playYouku('video_player','${lesson.videoPath}');
    });
</script>
<hr>
</#if>
<div class=" js_init">
${lesson.content}
</div>
<div style="float:right;">
<a class="btn btn-primary js_complete_lesson" href="javascript:void(0);"><i class="fa fa-undo"></i> 完成本节</a>
<#if lesson.nextLesson>
<#if teacherCourse.finish == "yes">
<a class="btn btn-primary js_btn_review" href="javascript:void(0);"><i class="fa fa-undo"></i> 再重新学习一遍</a>
</#if>
 <a class="btn btn-orange" href="/auth/course/${course.courseId}.htm?lessonId=${lesson.nextLesson.lessonId}"><i class="fa fa-fast-forward"></i> 下一节课：${lesson.nextLesson.name}</a>
<#else>
 <a class="btn btn-primary js_btn_review" href="javascript:void(0);"><i class="fa fa-undo"></i> 再重新学习一遍</a>
  
 <a class="btn btn-orange js_btn_finish" href="javascript:void(0);"><i class="fa fa-check"></i> 完成学习</a>
</#if>
</div>
    </section>
</div>
<!-- Sidebar Start-->
<aside class="col-xs-4">
<div class="sidewidt" id="lesson_right">
            <ul class="nav nav-tabs" id="myTab">
              <li class="active"><a href="#list"><i class="fa fa-list-ol"></i> 目录</a></li>
              <li class=""><a href="#description"><i class="fa fa-comment-o"></i> 介绍</a></li>
              <li class=""><a href="#teacher"><i class="fa fa-user"></i> 老师</a></li>
              <li class=""><a href="#comment"><i class="fa fa-comment"></i> 讨论</a></li>
            </ul>
            <div class="tab-content sideblog">
              <div class="tab-pane active" id="list">
<ul class="nav nav-pills nav-stacked">
<#list lessonList as lesn>
  <li <#if lesn.lessonId==lesson.lessonId>class="active" </#if> id="lesson_${lesn.lessonId}">
    <a href="/auth/course/${course.courseId}.htm?lessonId=${lesn.lessonId}">
    <#if lesn.teacherLesson.finish == "doing">
      <i class="fa fa-adjust"></i> <!-- i class="fa fa-dot-circle-o"></i-->
      <#elseif lesn.teacherLesson.finish == "no">
      <i class="fa fa-circle-o"></i>
      <#else>
      <i class="fa fa-circle"></i>
      </#if>
      第${lesn_index+1}节：${lesn.name}
    </a>
  </li>
  </#list>
</ul>              
              </div>
              <div class="tab-pane" id="description">
              ${course.summary}
              </div>
              <div class="tab-pane" id="teacher">
<div>
<img id="js_teacher_avatar" src="${teacher.avatarUrl}" alt="${teacher.name}"
style="width: 80px; float: left;">
<div style="margin-left:90px;">
<h3 style="color: #353535;font-size: 22px;font-weight: bold;padding-top:6px;">
${teacher.name}
</h3>
<span>
${teacher.headline}
</span>
</div>
</div>
<div class="clearfix"></div>              
              </div>
              <div class="tab-pane" id="comment">

              </div>
            </div>
          </div>
</aside>
<!-- Sidebar End-->
</div>
</div>
</section>
</div>

<#list pageVo.list as teacher>
                                <li class="col-xs-3"> 
                                    <div class="thumbnail">
                                    <span style="white-space:pre"></span><a href="/auth/course/${teacher.course.courseId}.htm">
                                    <span style="white-space:pre"></span><img alt="" style="width:240px;" src="${teacher.course.coverUrl}">
                                    <span style="white-space:pre"></span></a>
                                    <span style="white-space:pre"></span><div class="name">
                                    <span style="white-space:pre"></span><a href="/auth/course/${teacher.course.courseId}.htm" >${teacher.course.name}</a>
                                    <span style="white-space:pre"></span></div>
                                       <span style="white-space:pre"></span><div class="clearfix"></div>
                                        <div class="teacher">
                                           <div> <a href="/teacher/${teacher.course.courseId}.htm;"><i class="fa fa-user"></i> ${teacher.course.teacher.name}</a></div>
                                        </div>
                                     </div>
                                </li>
                                </#list>
<script type="text/javascript">
$(function(){
$('.js_btn_finish').click(function(){
$.post("/auth/course/finish.json", { "courseId":${course.courseId},finish:"yes"},
   function(data){
   if(data.result){
   bootbox.alert("恭喜您，顺利完成了此课程。页面将跳到您的课程中心，继续选择课程学习。", function() {
   window.location.href = "/auth/course/learning.htm"
});
   }
   }, "json");
});
$('.js_btn_review').click(function(){
$.post("/auth/course/finish.json", { "courseId":${course.courseId},finish:"no"},
   function(data){
   if(data.result){
   window.location.href = "/auth/course/${course.courseId}.htm"
   }
   }, "json");
});

$('.js_complete_lesson').click(function(){
$.post("/auth/course/complete.json", { "courseId":${course.courseId},finish:"yes","lessonId":${lesson.lessonId}},
   function(data){
   if(data.result){
   window.location.href = "/auth/course/${course.courseId}.htm?lessonId=${lesson.nextLesson.lessonId}"
   }
   }, "json");
});
})
</script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
<#include "/footer.ftl">

从头分析啊，它并不是很神气的东西，

   <#assign topnav="teacher">  你看下assign这个东西 相当于保持变量 topnav里面就放入这个值，然后js就可以拿到这个值了，说到js，大家一定要把js文件放到末尾，不要放在开头的地方，因为放在开头，有些页面还没加载完，但是我调用了那个页面里面的Id或者class，那么就会报错，很头疼的，半天都不知道哪里出来错误，所以建议养成好的习惯，把js文件放在末尾，等页面加载完了，在调用js，题外话了，但是大家得了解

<pre name="code" class="html"><!-- CSS -->
<link href="/assets/sh/css/shCore.css" type="text/css" rel="stylesheet">
<link href="/assets/sh/css/shThemeDefault.css" type="text/css" rel="stylesheet">

看到了没有，可以放css文件，同样产生效果，

然后这里面没有什么<head></head>什么的  直接可以让<div></div>,在这里要看看怎么样的语法

<pre name="code" class="html"><div class=" js_init">
${lesson.content}
</div>
<div style="float:right;">
<a class="btn btn-primary js_complete_lesson" href="javascript:void(0);"><i class="fa fa-undo"></i> 完成本节</a>
<#if lesson.nextLesson>
<#if teacherCourse.finish == "yes">
<a class="btn btn-primary js_btn_review" href="javascript:void(0);"><i class="fa fa-undo"></i> 再重新学习一遍</a>
</#if>
 <a class="btn btn-orange" href="/auth/course/${course.courseId}.htm?lessonId=${lesson.nextLesson.lessonId}"><i class="fa fa-fast-forward"></i> 下一节课：${lesson.nextLesson.name}</a>
<#else>
 <a class="btn btn-primary js_btn_review" href="javascript:void(0);"><i class="fa fa-undo"></i> 再重新学习一遍</a>
  
 <a class="btn btn-orange js_btn_finish" href="javascript:void(0);"><i class="fa fa-check"></i> 完成学习</a>
</#if>

这里有 ${lesson.content} 这个应该好理解吧，用strust的时候在jsp页面差不多意思，lesson是个对象，是在action层传过来的实体对象，然后content这个是lesson的属性，直接拿到这个值显示在这个地方。

<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html"><#if teacherCourse.finish == "yes">和java里面的if(a=="")类似

<#else> 和else{}类似

</#if>这里是要用这个结束的，亲，别忘了，

 

<span style="font-family: Arial, Helvetica, sans-serif;">我们action层传过来的一般是集合，我们需要把这个集合循环遍历出来，这个时候我们分析下代码</span>

<span style="font-family: Arial, Helvetica, sans-serif;"><#list pageVo.list as teacher>
                                <li class="col-xs-3"> 
                                    <div class="thumbnail">
                                    <span style="white-space:pre"></span><a href="/auth/course/${teacher.course.courseId}.htm">
                                    <span style="white-space:pre"></span><img alt="" style="width:240px;" src="${teacher.course.coverUrl}">
                                    <span style="white-space:pre"></span></a>
                                    <span style="white-space:pre"></span><div class="name">
                                    <span style="white-space:pre"></span><a href="/auth/course/${teacher.course.courseId}.htm" >${teacher.course.name}</a>
                                    <span style="white-space:pre"></span></div>
                                       <span style="white-space:pre"></span><div class="clearfix"></div>
                                        <div class="teacher">
                                           <div> <a href="/teacher/${teacher.course.courseId}.htm;"><i class="fa fa-user"></i> ${teacher.course.teacher.name}</a></div>
                                        </div>
                                     </div>
                                </li>
 </#list>
</span>

<span style="font-family: Arial, Helvetica, sans-serif;">
</span>

<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html"><span style="font-family: Arial, Helvetica, sans-serif;"><#list pageVo.list as teacher>这个pageVo.list是个集合  as 是语法  teacher代表是我们集合里面的每个数据是这个对象，</span><pre name="code" class="html"><span style="font-family: Arial, Helvetica, sans-serif;">${teacher.course.name}这个的话上面也讲了，teacher实体的属性的属性，就有值了，用完记得加上</#list> 结束</span>

<span style="font-family: Arial, Helvetica, sans-serif;">这个语法类似java里面</span>

<span style="font-family: Arial, Helvetica, sans-serif;">for(teacher a:list){System.out.println(a.name)}</span>

<span style="font-family: Arial, Helvetica, sans-serif;">对了 我们经常看到页面有公共部分，记得有<#include>这个标签哈，jsp里面也有类似的原理，安卓的界面里面也有，可以对比学习下。</span>

<span style="font-family: Arial, Helvetica, sans-serif;">这些是我常用的，如果有一些不熟悉的可以再去网上找，这样学比到网上从头看到尾效率更高。</span>