昨日总结:昨天满打满算应该是学了也刚刚及格7小时左右的学习时间吧,不过昨晚睡觉是12:40左右,所以我这周确实已经超过1次没有按时睡觉了,也确实需要有惩罚的;另外,学习进度是所有v文件快速浏览过一次,用途也大概清楚,但是因为昨天主要看的是小说部分,也留下了许多问题,所以今天决定一一解决;不过说句实在话,每天计划的任务都不能完成确实挺伤人的,总感觉自己进度特别慢,这一点今天需要改进,要特别留意;
今日计划:
1、学习html内的function()的构造、原理和如何应用,并且将v系列内的function()提炼出来特别记录;(补充:不用看)
2、学习html里浏览过的痕迹是怎么实现的相关问题并记录;(补充: 都是JS的代码,如果你判断routes和MVC都看完了,才可以去看JS代码;)
3、@语句的相关问题,例如最基本的结构啊,方法如何调用,其最终是如何实现的要搞明白,尝试自己做一个类似的东西将tags内容全部遍历在网页内;
4、html<meta>方法的应用;(补充:了解即可)
5、解决完以上的的点再代入文章查看,试试能不能搞懂v内html文件(结合着control内的类方法查看);
得到的信息:
1、function第三方插件代码可以忽略, 就像来自搜狐畅言:https://changyan.kuaizhan.com/ 复制粘贴即可,评论功能都是它实现的;
2、将JS的内容暂时设置为待定任务,等到routes和MVC看完了再去看JS代码;
3、模板语言,专门用来生成HTML,而小说网站上的Play模板语言叫twirl,搜索其用法,够用即可,有需要再搜;
4、meta可以进行了解,了解功能就行;
5、 novel_sitemap.scala.html是给搜索爬虫看的,比如给百度和谷歌的爬虫看,要在百度站长平台提交这个链接,然后百度爬虫每天都会去这个页面看一眼,有没有新的内容;
6、 可以把.
trim()或.replace("\n", "
")去掉,看看是什么效果,@Html有转义的作用,如果文本里有<a href="病毒链接">点我中奖<a>这样的链接,Html不会展示链接,而是直接显示文本,起到一个安全保护的作用,你可以测试一下:@Html("<a href="病毒链接">点我中奖<a>");
重新制定计划:
1、学习Play的模板语言twirl,并对其用法做详细记录;
2、了解meta的相关功能;
3、增删补查@Html相关内容;
4、完全了解再浏览一次v;
暂定星期六做个小的爬虫。
单独分析:
<script type="text/javascript">
(function(){
document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));
var bdcs = document.createElement('script');
bdcs.type = 'text/javascript';
bdcs.async = true;
bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=6633628912348873229' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(bdcs, s);})();
</script>
知识点剖析:
将以上代码的src打出来是这样
http://znsv.baidu.com/customer_search/api/js?sid=6633628912348873229&plate_url=encodeURIComponent(window.location.href)&t=Match.ceil(new Date()/3600000);
1、HTML DOM Document:http://www.w3school.com.cn/jsref/dom_obj_document.asp
Document对象是我们可以从脚本中对HTMl页面中的元素进行访问;
可以通过window.document 属性对Window进行访问;
document.write()方法可以向文档写入HTMl表达式或者JavaScript代码;
unescape()函数可对通过escape()编码的字符串经行解码,所有unescape()是对id为bdcs的发送内容进行加密处理;
查了大量这些相关信息的时候我发现,这些信息在网上都有相同的,借鉴http://www.lihezhou.com/post/58.html,在里面说了这样的一段代码是为了将百度的站内搜索集成到任意的网站上,sid是自己在百度的id,其他结构基本相似;就相当于将自己的搜索栏目和百度的搜索栏目结合,最后搜索的内容可以显示在自己指定的网页中;
而function()详细可以查看http://lixh1986.iteye.com/blog/1947017
获取本地浏览过的书的痕迹并访问:
<script>
if ('localStorage' in window) {
var recentBooks = localStorage.getItem('recent-books');
//获取本地的变量值:recent-books
if (recentBooks) {
var $recentBookshelf = $('#recent-books .bookshelf');
//用于检验
recentBooks = JSON.parse(recentBooks);
for (var i = 0; i < recentBooks.length; i++) {
//此时的recentBooks是个数组,且存储的是NovelId,
var novelId = recentBooks[i];
var info = localStorage.getItem(novelId);
if (info) {
info = JSON.parse(info);
var $li = $('<li>' ).append(
$('<a>' ).attr('href', info["pathname"])
.append(
$('<img>' ).addClass('cover')
.attr('src', "http://2bgif.com/covers/" + novelId + ".jpg")
)
.append(
$('<div>' ).append(
$('<h4>' ).text(info["novel"])
)
.append(
$('<p>' ).addClass('author')
.text(info["chapter"])
)
)
);
$li.appendTo($recentBookshelf);
}
}
$('#recent-books').show();
}
}
</script>
LocalStorage是HTML5里面内容,用于本地存储;
此段代码用于显示最近读过的书;读取出最近的记录并且
直接在Playframework上浏览了一遍twirl https://www.playframework.com/documentation/2.6.x/ScalaTemplates#string-interpolation;
别人的总结:http://blog.csdn.net/i6448038/article/details/46733523
自己总结:
1、@是一个特殊符号,表示动态语句开始,其后面不能有空格应该直接跟上关键字,并且关键字与括号也不能有;
2、所有的html文件在Playframework框架下只需要加入scala就可以使用twirl语言了,如index.html要使用twirl只需要改名称为index.scala.html就行了;
3、需要引入的参数要在模板顶部声明@(novel:novels orders:List[Order]);其中有个方法@this()可以使用在模板参数之前;
4、迭代语句:关键字为for,语法如下:
<ul>
@for(p <- products){
<li>@p.name ($@p.price)</li>
}
</ul>
起作用有点像java里的foreach,用于遍历products,每次赋予给p,让p输出相应的需要展示的内容;
5、普通标准语句语句
@if(items.isEmpty) {
<h1>Nothing to display</h1>
} else {
<h1>@items.size items!</h1>
}
6、声明可再次使用代码块:
@display(product:Product) = {
@product.name ($@product.price)
}
<ul>
@for(product <- products) {
@display(product)
}
</ul>
以一个隐含开头的名称定义的可重用块被标记为implicit:
@implicitFireldConstrutor = @{ MyFieldConstructor()}
7、声明可再次使用的值:
用defining定义作用域值:
@defining(user.firstName + " " + user.lastName) { fullName => <div>Hello @fullName</div>};
8、@import内导入相关
9、评论用@* *@
10、想要动态内容部分根据模板类型(例如HTML或者XML)进行转义,如果要输出原始内容片断,将其包装在模板内容类型中就可以了;例如输出原始HTML:
<p>
@Html(article.content)
</p>
11、字符串插值,“$"代替"@"
mport play.twirl.api.StringInterpolation
val name = "Martin"
val p = html"<p>Hello $name</p>"
<meta>:
借鉴网址http://www.w3school.com.cn/tags/tag_meta.asp
meta最方便的是可以直接将写的代码块发送到某个浏览器开端,减少该网页编码量
.
trim():这里我查资料.trim()多用于去除字符两边的空格;
.replace("\n", "
"):一是每一行后换行,二每一段用
扩起
@Html("<a href="病毒链接">点我中奖<a>"):不会再Html中作用,因为病毒链接发起申请时只会在小说站内网站查询,不会跳到外网;//会显示bad request!!
重新看一遍views内文件(并备注每个文件主要作用域):
小说站:
novels.scala.html:
1、与百度搜索栏结合的搜所服务,(目前该function貌似已经停用,删除该第三方插件没有任何影响);所以目前小说站实现的是站内搜索,而并非与百度结合的搜索。
2、我最近浏览过的书,与public/js/novel.js相关,目前先待定,不过在留下的代码块上方有,备注着读取并呈现读者最近的浏览小说记录;
3、推荐的主题(直接附上链接的方式,传送到指定文章推荐网址);
4、小说分类 (通过@for循环遍历出来,这里的@routes好比一个路径链接附和装置)
5、遍历小说出来(@for((novel,index) <- novels.zipWithIndex))
@for((novel, index) <- novels.zipWithIndex) {
<li>
<a href="@routes.NovelController.chapters(novel.getId())">
![@novel.getName()](http://2bgif.com/covers/@novel.getCoverUrl())
<div>
<h4>@if(!novel.getIsOver()){<span style="color: #39A6A9">[连载中] </span>}@novel.getName()</h4>
<p class="popularity">人气: @novel.getPopular()</p>
</div>
</a>
<a class="author" href="@routes.NovelController.search(novel.getAuthor())">@novel.getAuthor() </a>
</li>
}
这里用了Scala语句中zipWithIndex的方法,其主要用途是遍历novels的过程中给每个novel一个从0开始的序号,一边遍历出所有的小说,一边给每个小说添加序号;
详细链接http://blog.csdn.net/shenxiaoming77/article/details/56288500
6、页尾的页码选择
7、今日热书;
novel_layout.scala.html:
1、作用是设置页面的标题
2、为许多页面的css文件以及js文件构建链接,是他们的class和id能够正常调用,前提就是调用哪个@novel_layout( ){ };
novel_search.scala.html:
1、为用户提供小说的搜索服务(通过输入的keyword在站内搜索相关的novels并输出);
//发现其实显示小说的语句都是相同的,都是通过遍历对应的novels,来获取其coverUrl, name, popular, isOver, author信息再呈现出来的;
novel_sitemap.scala.html:
1、首先是将网址添加到百度站长平台里,因为其内容主要是针对对小说和作者,所以百度的爬虫每天都会访问该网址,从而访问到小说和作者,有种检查动态更新的感觉;
chapters.scala.html:
1、介绍小说的简介和作者,并将章节目录展现;
chapter.scala.html:
1、提供上/下章节选择;
2、字体大小调节;
3、白天黑夜选择;
4、提供读者相应章节内容;
趣味图:
index.scala.html:
1、页头提供热门的标签选择;
2、显示搞笑内容;
3、页面选择
layout.scala.html, search.scala.html, sitemap.scala.html作用与novels对应的相似,不详谈;
addtext.scala.html:作用依旧是选择图片,选择文字上下,输入要插入的文字;
aritcle.scala.html趣味图页面用来呈现趣味图代码;
总结:v里面的内容也大概浏览了一遍,基本原理也清楚,但是这里面调用的方法特别多,有scala语言直接调用controllers,controllers里面的方法又调用m里面的内容,感觉就是有点些乱,看着看着就对不上了;这应该就是没有理清逻辑结构图的原因,目前还没有做逻辑图,只是敲了一遍m的代码,浏览了v内的代码,c里面的也只是看了个别调用的方法,目前个人感觉,m内的代码还是比起v清晰很多,v涉及太多的调用就乱了,总结一句话就是不够熟练,逻辑不够清楚(自我感觉),还非常缺乏实战,所以我想在周末两天除了看看c里面的方法外,自己给网站加点什么玩意,来个填删补查什么的巩固一下,然后就是梳理逻辑关系,画个思维导图什么的。