如何快速学习freemarker以及使用经验
来源:互联网 发布:dash windows版 编辑:程序博客网 时间:2024/06/10 20:54
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>
1 0
- 如何快速学习freemarker以及使用经验
- 如何快速使用freemarker
- 如何快速学习使用mybatis以及总结
- Freemarker 使用,快速入门
- freemarker的使用以及认识
- FreeMarker学习使用(1)
- FreeMarker学习使用(2)
- 【FreeMarker学习】FreeMarker中If、List使用
- 如何使用freemarker比较大小
- Freemarker 学习笔记一Freemarker 的介绍以及创建步骤
- freemarker学习笔记_快速入门
- FreeMarker学习笔记-<一>快速入门
- 如何快速学习和使用stl???
- 如何快速学习和使用ace???
- 如何快速学习、掌握、使用新技术
- freemarker的学习和使用
- (一个初学者)如何学习以及使用C++。
- 快速学习使用springmvc、strust2、strust1以及它们的对比
- iOS如何判断app是否为第一次启动
- 关于Android PopupWindow 使用要注意的一些地方
- myeclipse与tomcat、jdk的安装和配置
- 输入3个数,求最大值最小值中间值
- Java基础——01—计算机概述
- 如何快速学习freemarker以及使用经验
- 深入mysql "ON DUPLICATE KEY UPDATE" 语法的分析
- poj-2676 Sudoku
- 7620a无线中继模块(wisp)
- Android Studio Jar、so、library项目依赖
- 工作前的准备
- Upgrade CentOS 7 kernel
- Lowest Common Ancestor of a Binary Search Tree
- Linux makefile 教程 非常详细,且易懂