在线午夜精品自拍小视频_无码av无码专区线_亚洲无码精品人妻_人人澡欧美一区

如何快速學(xué)習(xí)freemarker以及使用經(jīng)驗

 freemarker
                    freemarker是靜態(tài)模板，和html 、jsp類似，我第一次看見后綴是 .ftl文件，我嚓，這是什么鬼，原來是freemarker，使用它的時候你就可以理解前端頁面和jsp什么沒什么區(qū)別，怎樣學(xué)習(xí)它，先分析代碼，然后再去使用，不主張去看freemarker的書籍詳細(xì)介紹，然后忘記了，浪費時間，當(dāng)我們用到了不懂的在上網(wǎng)去學(xué)習(xí)，不廢話了，先拿一片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="分享到人人網(wǎng)" href="#" class="bds_renren" data-cmd="renren"></a>
        <a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a>
        <a title="分享到豆瓣網(wǎng)" 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> 完成本節(jié)</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> 再重新學(xué)習(xí)一遍</a>
                                </#if>                           
                                 <a class="btn btn-orange" href="/auth/course/${course.courseId}.htm?lessonId=${lesson.nextLesson.lessonId}"><i class="fa fa-fast-forward"></i> 下一節(jié)課：${lesson.nextLesson.name}</a>
                                <#else>
                                 <a class="btn btn-primary js_btn_review" href="javascript:void(0);"><i class="fa fa-undo"></i> 再重新學(xué)習(xí)一遍</a>
                                 
                                 <a class="btn btn-orange js_btn_finish" href="javascript:void(0);"><i class="fa fa-check"></i> 完成學(xué)習(xí)</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}節(jié)：${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("恭喜您，順利完成了此課程。頁面將跳到您的課程中心，繼續(xù)選擇課程學(xué)習(xí)。", 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這個東西 相當(dāng)于保持變量 topnav里面就放入這個值，然后js就可以拿到這個值了，說到j(luò)s，大家一定要把js文件放到末尾，不要放在開頭的地方，因為放在開頭，有些頁面還沒加載完，但是我調(diào)用了那個頁面里面的Id或者class，那么就會報錯，很頭疼的，半天都不知道哪里出來錯誤，所以建議養(yǎng)成好的習(xí)慣，把js文件放在末尾，等頁面加載完了，在調(diào)用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文件，同樣產(chǎn)生效果，

 

然后這里面沒有什么<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> 完成本節(jié)</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> 再重新學(xué)習(xí)一遍</a>
                                </#if>                           
                                 <a class="btn btn-orange" href="/auth/course/${course.courseId}.htm?lessonId=${lesson.nextLesson.lessonId}"><i class="fa fa-fast-forward"></i> 下一節(jié)課：${lesson.nextLesson.name}</a>
                                <#else>
                                 <a class="btn btn-primary js_btn_review" href="javascript:void(0);"><i class="fa fa-undo"></i> 再重新學(xué)習(xí)一遍</a>
                                 
                                 <a class="btn btn-orange js_btn_finish" href="javascript:void(0);"><i class="fa fa-check"></i> 完成學(xué)習(xí)</a>
                                </#if>

這里有 ${lesson.content} 這個應(yīng)該好理解吧，用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>這里是要用這個結(jié)束的，親，別忘了，



<span style="font-family: Arial, Helvetica, sans-serif;">我們action層傳過來的一般是集合，我們需要把這個集合循環(huán)遍歷出來，這個時候我們分析下代碼</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代表是我們集合里面的每個數(shù)據(jù)是這個對象，</span><pre name="code" class="html"><span style="font-family: Arial, Helvetica, sans-serif;">${teacher.course.name}這個的話上面也講了，teacher實體的屬性的屬性，就有值了，用完記得加上</#list> 結(jié)束</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;">對了 我們經(jīng)常看到頁面有公共部分，記得有<#include>這個標(biāo)簽哈，jsp里面也有類似的原理，安卓的界面里面也有，可以對比學(xué)習(xí)下。</span>

<span style="font-family: Arial, Helvetica, sans-serif;">這些是我常用的，如果有一些不熟悉的可以再去網(wǎng)上找，這樣學(xué)比到網(wǎng)上從頭看到尾效率更高。</span>

作者：chen.yu
深信服三年半工作經(jīng)驗，目前就職游戲廠商，希望能和大家交流和學(xué)習(xí),
微信公眾號：編程入門到禿頭 或掃描下面二維碼
零基礎(chǔ)入門進(jìn)階人工智能(鏈接)