? ??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>

總結

以上是生活随笔為你收集整理的如何快速学习freemarker以及使用经验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。