﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>语源科技BlogJava-笑看人生</title><link>http://www.blogjava.net/jacky9881/</link><description /><language>zh-cn</language><lastBuildDate>Sun, 03 May 2026 13:35:45 GMT</lastBuildDate><pubDate>Sun, 03 May 2026 13:35:45 GMT</pubDate><ttl>60</ttl><item><title>Backbone学习笔记三</title><link>http://www.blogjava.net/jacky9881/archive/2016/04/04/429958.html</link><dc:creator>笑看人生</dc:creator><author>笑看人生</author><pubDate>Mon, 04 Apr 2016 09:40:00 GMT</pubDate><guid>http://www.blogjava.net/jacky9881/archive/2016/04/04/429958.html</guid><wfw:comment>http://www.blogjava.net/jacky9881/comments/429958.html</wfw:comment><comments>http://www.blogjava.net/jacky9881/archive/2016/04/04/429958.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/jacky9881/comments/commentRss/429958.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/jacky9881/services/trackbacks/429958.html</trackback:ping><description><![CDATA[这部分介绍如何分视图显示前面讲的表格内容，Backbone中视图可以嵌套显示，例如前面例子中整个页面可以用一个视图来渲染，table表格可以用一个视图来渲染，表格中的一行可以用一个视图来渲染，这样就用三层视图，只要在以前的例子上稍作修改就可以实现这效果。
<div><br />
&nbsp;
<div>首先定义最里层的视图，表格中的行。通过tagName成员变量指定该视图对应的html元素，render方法中指定tr元素中显示的内容。当然也可以指定成员变量className的值，来指定tr元素显示的式样。</div>
<div><br />
</div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
-->&nbsp; &nbsp; &nbsp;var&nbsp;StudentView&nbsp;=&nbsp;Backbone.View.extend({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tagName:&nbsp;'tr',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render:&nbsp;function()&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this.el).html(_.map([<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.model.get('id'),<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.model.get('name'),<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.model.get('age')<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],function(val,&nbsp;key){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;'<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">td</span><span style="color: #0000FF; ">&gt;</span>'&nbsp;+&nbsp;val&nbsp;+&nbsp;'<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">td</span><span style="color: #0000FF; ">&gt;</span>';<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})</div>
</div>
<div><br />
</div>
<div>其次显示表格的视图。</div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
-->&nbsp; &nbsp; &nbsp;var&nbsp;StudnetCollectionView&nbsp;=&nbsp;Backbone.View.extend({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tagName:&nbsp;'table',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render:&nbsp;function()&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this.el).empty();<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this.el).append($('<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">tr</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">tr</span><span style="color: #0000FF; ">&gt;</span>')).html(_.map([<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'学号','姓名','年龄'<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],function(val,&nbsp;key){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;'<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">th</span><span style="color: #0000FF; ">&gt;</span>'&nbsp;+&nbsp;val&nbsp;+&nbsp;'<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">th</span><span style="color: #0000FF; ">&gt;</span>';<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}));<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this.el).append(_.map(this.collection.models,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(model,&nbsp;key){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;StudentView({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;model:&nbsp;model<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}).render().el;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}));<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</div>
</div>
<div><br />
</div>
<div>最后显示整个页面的视图。</div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
-->&nbsp; &nbsp; &nbsp;var&nbsp;StudnetPageView&nbsp;=&nbsp;Backbone.View.extend({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render:&nbsp;function()&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this.el).html(new&nbsp;StudnetCollectionView({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collection:&nbsp;this.collection<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}).render().el);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})</div>
</div>
<div><br />
</div>
<div>同时修改一下显示部分的代码。</div>
<div><br />
</div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
-->&nbsp; &nbsp; var&nbsp;studentPageView&nbsp;=&nbsp;new&nbsp;StudnetPageView({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collection:&nbsp;studentCollection,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el:&nbsp;'body'<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;studentPageView.render();</div>
</div>
<div><br />
</div>
<div>整个main.js的代码如下：</div>
<div><br />
</div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
-->&nbsp; (function($){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function(){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;student1&nbsp;=&nbsp;new&nbsp;Student({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;10000,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'王小二',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;age:&nbsp;30<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;student2&nbsp;=&nbsp;new&nbsp;Student({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;20000,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'姚敏',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;age:&nbsp;26<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;student3&nbsp;=&nbsp;new&nbsp;Student({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;30000,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'科比',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;age:&nbsp;24<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;studentCollection&nbsp;=&nbsp;new&nbsp;StudentCollection([<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;student1,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;student2,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;student3<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;studentPageView&nbsp;=&nbsp;new&nbsp;StudnetPageView({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collection:&nbsp;studentCollection,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el:&nbsp;'body'<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;studentPageView.render();<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//set&nbsp;model<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;Student&nbsp;=&nbsp;Backbone.Model.extend({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//set&nbsp;default&nbsp;values.<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defaults:&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;0,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;age:&nbsp;0<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;StudentCollection&nbsp;=&nbsp;Backbone.Collection.extend({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;model:&nbsp;Student<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;StudentView&nbsp;=&nbsp;Backbone.View.extend({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tagName:&nbsp;'tr',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render:&nbsp;function()&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this.el).html(_.map([<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.model.get('id'),<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.model.get('name'),<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.model.get('age')<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],function(val,&nbsp;key){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;'<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">td</span><span style="color: #0000FF; ">&gt;</span>'&nbsp;+&nbsp;val&nbsp;+&nbsp;'<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">td</span><span style="color: #0000FF; ">&gt;</span>';<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//set&nbsp;view<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;StudnetCollectionView&nbsp;=&nbsp;Backbone.View.extend({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tagName:&nbsp;'table',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render:&nbsp;function()&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this.el).empty();<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this.el).append($('<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">tr</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">tr</span><span style="color: #0000FF; ">&gt;</span>')).html(_.map([<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'学号','姓名','年龄'<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],function(val,&nbsp;key){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;'<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">th</span><span style="color: #0000FF; ">&gt;</span>'&nbsp;+&nbsp;val&nbsp;+&nbsp;'<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">th</span><span style="color: #0000FF; ">&gt;</span>';<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}));<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this.el).append(_.map(this.collection.models,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(model,&nbsp;key){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;StudentView({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;model:&nbsp;model<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}).render().el;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}));<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;StudnetPageView&nbsp;=&nbsp;Backbone.View.extend({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render:&nbsp;function()&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this.el).html(new&nbsp;StudnetCollectionView({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collection:&nbsp;this.collection<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}).render().el);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;})(jQuery);<br />
</div>
</div>
<div><br />
</div>
</div><img src ="http://www.blogjava.net/jacky9881/aggbug/429958.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/jacky9881/" target="_blank">笑看人生</a> 2016-04-04 17:40 <a href="http://www.blogjava.net/jacky9881/archive/2016/04/04/429958.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Backbone学习笔记二</title><link>http://www.blogjava.net/jacky9881/archive/2016/04/02/429942.html</link><dc:creator>笑看人生</dc:creator><author>笑看人生</author><pubDate>Sat, 02 Apr 2016 04:06:00 GMT</pubDate><guid>http://www.blogjava.net/jacky9881/archive/2016/04/02/429942.html</guid><wfw:comment>http://www.blogjava.net/jacky9881/comments/429942.html</wfw:comment><comments>http://www.blogjava.net/jacky9881/archive/2016/04/02/429942.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/jacky9881/comments/commentRss/429942.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/jacky9881/services/trackbacks/429942.html</trackback:ping><description><![CDATA[@import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
在学习笔记一中，一个视图渲染一个Sudent对象，如果存在多个Student对象怎么办，
<div>在java中可以通过ArrayList来保存，比如List&lt;Student&gt; students = new ArrayList&lt;&gt;();</div>
<div>在Backbone中，也有类似于ArrayList的实现，只需要新建一个类，继承Collection就可以了，实现代码如下：</div>
<div>成员变量model指定集合中存放对象的类型，类似于java中范型。</div>
<div><br />
</div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
--><span style="color: #008080; ">1</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;StudentCollection&nbsp;=&nbsp;Backbone.Collection.extend({<br />
<span style="color: #008080; ">2</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;model:&nbsp;Student<br />
<span style="color: #008080; ">3</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</div>
</div>
<div><br />
</div>
<div>对学习笔记一种代码稍加修改，修改代码如下：</div>
<div>新建三个Student对象，把这三个对象加入<span style="font-size: 13px; background-color: #eeeeee;">studentCollection对象中。</span></div>
<div><span style="font-size: 13px; background-color: #eeeeee;"><br />
</span></div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
--><span style="color: #008080; ">&nbsp;1</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;student1&nbsp;=&nbsp;new&nbsp;Student({<br />
<span style="color: #008080; ">&nbsp;2</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;10000,<br />
<span style="color: #008080; ">&nbsp;3</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'王小二',<br />
<span style="color: #008080; ">&nbsp;4</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;age:&nbsp;30<br />
<span style="color: #008080; ">&nbsp;5</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
<span style="color: #008080; ">&nbsp;6</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">&nbsp;7</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;student2&nbsp;=&nbsp;new&nbsp;Student({<br />
<span style="color: #008080; ">&nbsp;8</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;20000,<br />
<span style="color: #008080; ">&nbsp;9</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'姚敏',<br />
<span style="color: #008080; ">10</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;age:&nbsp;26<br />
<span style="color: #008080; ">11</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
<span style="color: #008080; ">12</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">13</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;student3&nbsp;=&nbsp;new&nbsp;Student({<br />
<span style="color: #008080; ">14</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;30000,<br />
<span style="color: #008080; ">15</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'科比',<br />
<span style="color: #008080; ">16</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;age:&nbsp;24<br />
<span style="color: #008080; ">17</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
<span style="color: #008080; ">18</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">19</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;studentCollection&nbsp;=&nbsp;new&nbsp;StudentCollection([<br />
<span style="color: #008080; ">20</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;student1,<br />
<span style="color: #008080; ">21</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;student2,<br />
<span style="color: #008080; ">22</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;student3<br />
<span style="color: #008080; ">23</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;]);</div>
</div>
<div><br />
</div>
<div>至此集合模型已经新建完毕，那么如何通过视图来显示这个集合模型。</div>
<div><br />
</div>
<div>学习笔记一中新建的StudentView类的render方法做修改，同时在构建这个类对象时，稍作修改，修改如下：</div>
<div>把原来绑定model的代码改成绑定collection。</div>
<div><br />
</div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
--><span style="color: #008080; ">1</span>&nbsp;var&nbsp;studentCollectionView&nbsp;=&nbsp;new&nbsp;StudnetCollectionView ({<br />
<span style="color: #008080; ">2</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collection:&nbsp;studentCollection<br />
<span style="color: #008080; ">3</span>&nbsp; });</div>
</div>
<div><br />
</div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
--><span style="color: #008080; ">&nbsp;1</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;StudnetCollectionView&nbsp;=&nbsp;Backbone.View.extend({<br />
<span style="color: #008080; ">&nbsp;2</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">&nbsp;3</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el:&nbsp;'body',<br />
<span style="color: #008080; ">&nbsp;4</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">&nbsp;5</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render:function(){<br />
<span style="color: #008080; ">&nbsp;6</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;html&nbsp;=&nbsp;'';<br />
<span style="color: #008080; ">&nbsp;7</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_.each(this.collection.models,function(model,index,obj){<br />
<span style="color: #008080; ">&nbsp;8</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;tmp&nbsp;=&nbsp;'学号:&nbsp;'&nbsp;+&nbsp;model.get('id')&nbsp;+&nbsp;'.'&nbsp;+<br />
<span style="color: #008080; ">&nbsp;9</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'姓名:&nbsp;'&nbsp;+&nbsp;model.get('name')&nbsp;+&nbsp;'.'&nbsp;+<br />
<span style="color: #008080; ">10</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'年龄:&nbsp;'&nbsp;+&nbsp;model.get('age');<br />
<span style="color: #008080; ">11</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">12</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html&nbsp;=&nbsp;html&nbsp;+&nbsp;'<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">li</span><span style="color: #0000FF; ">&gt;</span>'&nbsp;+&nbsp;tmp&nbsp;+&nbsp;'<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">li</span><span style="color: #0000FF; ">&gt;</span>';&nbsp;<br />
<span style="color: #008080; ">13</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
<span style="color: #008080; ">14</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">15</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html&nbsp;=&nbsp;'<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">ul</span><span style="color: #0000FF; ">&gt;</span>'&nbsp;+&nbsp;html&nbsp;+&nbsp;'<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">ul</span><span style="color: #0000FF; ">&gt;</span>';<br />
<span style="color: #008080; ">16</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this.el).html(html);<br />
<span style="color: #008080; ">17</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
<span style="color: #008080; ">18</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</div>
</div>
<div><br />
</div>
<div>完整的main.js内容如下：
</div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
--><span style="color: #008080; ">&nbsp;1</span>&nbsp;(function($){<br />
<span style="color: #008080; ">&nbsp;2</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function(){<br />
<span style="color: #008080; ">&nbsp;3</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">&nbsp;4</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;student1&nbsp;=&nbsp;new&nbsp;Student({<br />
<span style="color: #008080; ">&nbsp;5</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;10000,<br />
<span style="color: #008080; ">&nbsp;6</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'王小二',<br />
<span style="color: #008080; ">&nbsp;7</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;age:&nbsp;30<br />
<span style="color: #008080; ">&nbsp;8</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
<span style="color: #008080; ">&nbsp;9</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">10</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;student2&nbsp;=&nbsp;new&nbsp;Student({<br />
<span style="color: #008080; ">11</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;20000,<br />
<span style="color: #008080; ">12</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'姚敏',<br />
<span style="color: #008080; ">13</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;age:&nbsp;26<br />
<span style="color: #008080; ">14</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
<span style="color: #008080; ">15</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">16</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;student3&nbsp;=&nbsp;new&nbsp;Student({<br />
<span style="color: #008080; ">17</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;30000,<br />
<span style="color: #008080; ">18</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'科比',<br />
<span style="color: #008080; ">19</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;age:&nbsp;24<br />
<span style="color: #008080; ">20</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
<span style="color: #008080; ">21</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">22</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;studentCollection&nbsp;=&nbsp;new&nbsp;StudentCollection([<br />
<span style="color: #008080; ">23</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;student1,<br />
<span style="color: #008080; ">24</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;student2,<br />
<span style="color: #008080; ">25</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;student3<br />
<span style="color: #008080; ">26</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]);<br />
<span style="color: #008080; ">27</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">28</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;studentCollectionView&nbsp;=&nbsp;new&nbsp;StudnetCollectionView({<br />
<span style="color: #008080; ">29</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collection:&nbsp;studentCollection<br />
<span style="color: #008080; ">30</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
<span style="color: #008080; ">31</span>&nbsp;<br />
<span style="color: #008080; ">32</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;studentCollectionView.render();<br />
<span style="color: #008080; ">33</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">34</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
<span style="color: #008080; ">35</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">36</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//set&nbsp;model<br />
<span style="color: #008080; ">37</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;Student&nbsp;=&nbsp;Backbone.Model.extend({<br />
<span style="color: #008080; ">38</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//set&nbsp;default&nbsp;values.<br />
<span style="color: #008080; ">39</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defaults:&nbsp;{<br />
<span style="color: #008080; ">40</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;0,<br />
<span style="color: #008080; ">41</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'',<br />
<span style="color: #008080; ">42</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;age:&nbsp;0<br />
<span style="color: #008080; ">43</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
<span style="color: #008080; ">44</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
<span style="color: #008080; ">45</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">46</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;StudentCollection&nbsp;=&nbsp;Backbone.Collection.extend({<br />
<span style="color: #008080; ">47</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;model:&nbsp;Student<br />
<span style="color: #008080; ">48</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
<span style="color: #008080; ">49</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">50</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//set&nbsp;view<br />
<span style="color: #008080; ">51</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;StudnetCollectionView&nbsp;=&nbsp;Backbone.View.extend({<br />
<span style="color: #008080; ">52</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">53</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el:&nbsp;'body',<br />
<span style="color: #008080; ">54</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">55</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render:function(){<br />
<span style="color: #008080; ">56</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;html&nbsp;=&nbsp;"&lt;table border='1'&gt;&lt;tr&gt;&lt;th&gt;学号&lt;/th&gt;&lt;th&gt;姓名&lt;/th&gt;&lt;th&gt;年龄&lt;/th&gt;&lt;/tr&gt;";<br />
<span style="color: #008080; ">57</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_.each(this.collection.models,&nbsp;function(model,index,obj){<br />
<span style="color: #008080; ">58</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;tmp&nbsp;=&nbsp;'&lt;tr&gt;&lt;td&gt;' + model.get('id') + '&lt;/td&gt;' +<br />
<span style="color: #008080; ">59</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'&lt;td&gt;' + model.get('name') + '&lt;/td&gt;' +<br />
<span style="color: #008080; ">60</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'&lt;td&gt; ' + model.get('age') + '&lt;/td&gt;&lt;/tr&gt;';<br />
<span style="color: #008080; ">61</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br />
<span style="color: #008080; ">62</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br />
<span style="color: #008080; ">63</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html&nbsp;=&nbsp;html = html + tmp;<br />
<span style="color: #008080; ">64</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
<span style="color: #008080; ">65</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">66</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html&nbsp;=&nbsp;html + '&lt;/table&gt;';<br />
<span style="color: #008080; ">67</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this.el).html(html);<br />
<span style="color: #008080; ">68</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
<span style="color: #008080; ">69</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
<span style="color: #008080; ">70</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">71</span>&nbsp;})(jQuery);<br />
<span style="color: #008080; ">72</span>&nbsp;</div>
</div>
<div><br />
</div>
<div><br />
</div><img src ="http://www.blogjava.net/jacky9881/aggbug/429942.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/jacky9881/" target="_blank">笑看人生</a> 2016-04-02 12:06 <a href="http://www.blogjava.net/jacky9881/archive/2016/04/02/429942.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Backbone学习笔记一</title><link>http://www.blogjava.net/jacky9881/archive/2016/04/02/429941.html</link><dc:creator>笑看人生</dc:creator><author>笑看人生</author><pubDate>Sat, 02 Apr 2016 02:06:00 GMT</pubDate><guid>http://www.blogjava.net/jacky9881/archive/2016/04/02/429941.html</guid><wfw:comment>http://www.blogjava.net/jacky9881/comments/429941.html</wfw:comment><comments>http://www.blogjava.net/jacky9881/archive/2016/04/02/429941.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/jacky9881/comments/commentRss/429941.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/jacky9881/services/trackbacks/429941.html</trackback:ping><description><![CDATA[项目里用到Backbone＋marionet框架，由于以前没有接触过这些技术，经过一段时间的学习，觉得这技术还是很强大的，现把
<div>学习体会总结一下，以便后面查询。</div>
<div><br />
</div>
<div>Backbone是一个基于MVC模式的前端JavaScript框架，用于前端页面开发。</div>
<div>可以从http://backbone.js上下载对应的版本。</div>
<div><br />
</div>
<div>使用Backbone，需要依赖其他一些js库。</div>
<div>jQuery &nbsp;http://jquery.com</div>
<div>Underscore http://underscorejs.org</div>
<div><br />
</div>
<div>页面的head元素内容大体如下：</div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
--><span style="color: #008080; ">1</span>&nbsp;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">script&nbsp;</span><span style="color: #FF0000; ">src</span><span style="color: #0000FF; ">="lib/jquery-2.2.2.js"</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">script</span><span style="color: #0000FF; ">&gt;</span><br />
<span style="color: #008080; ">2</span>&nbsp;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">script&nbsp;</span><span style="color: #FF0000; ">src</span><span style="color: #0000FF; ">="lib/underscore-2.js"</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">script</span><span style="color: #0000FF; ">&gt;</span><br />
<span style="color: #008080; ">3</span>&nbsp;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">script&nbsp;</span><span style="color: #FF0000; ">src</span><span style="color: #0000FF; ">="lib/backbone.js"</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">script</span><span style="color: #0000FF; ">&gt;</span></div>
</div>
<div><br />
</div>
<div>Backbone是一个MVC框架，通过V来展示M的内容，C接受用户的请求，更新模型，然后刷新V。</div>
<div><br />
</div>
<div>下面以一个例子，来说明怎么建立一个简单的Backbone应用。</div>
<div><br />
</div>
<div>首先定义一个Model类Student, 需要继承<span style="font-size: 13px; background-color: #eeeeee;">Backbone.Model，这个类有三个成员变量，id，name，age，套用java中的叫法，其实可能</span></div>
<div><font size="2"><span style="background-color: #eeeeee;">不应该这么称呼。</span></font></div>
<div><span style="font-size: 13px; background-color: #eeeeee;"><br />
</span></div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
--><span style="color: #008080; ">1</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;Student&nbsp;=&nbsp;Backbone.Model.extend({<br />
<span style="color: #008080; ">2</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//set&nbsp;default&nbsp;values.<br />
<span style="color: #008080; ">3</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defaults:&nbsp;{<br />
<span style="color: #008080; ">4</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;0,<br />
<span style="color: #008080; ">5</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'',<br />
<span style="color: #008080; ">6</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;age:&nbsp;0<br />
<span style="color: #008080; ">7</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
<span style="color: #008080; ">8</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</div>
</div>
<div><br />
</div>
<div><br />
</div>
<div>然后定义一个View类StudentView，需要继承<span style="font-size: 13px; background-color: #eeeeee;">Backbone.View, 给这个类的成员变量el赋值 body，指明在页面的body元素中渲染视图，</span></div>
<div><font size="2"><span style="background-color: #eeeeee;">同时重写了渲染方法render，指明如何渲染，以下代码应用jQuery的语法，在el指定的元素内，显示指定的内容。</span></font></div>
<div><font size="2"><span style="background-color: #eeeeee;">每个视图绑定一个Model，在View的所有方法中可以直接调用this.model获取当前View绑定的Model对象，如下例子</span></font></div>
<div><font size="2"><span style="background-color: #eeeeee;">this.model.get('id'),</span><span style="background-color: #eeeeee; color: red;"><strong>注意获取model属性值时，不能直接使用thi.model.id</strong></span></font></div>
<div><br />
</div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
--><span style="color: #008080; ">&nbsp;1</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;StudnetView&nbsp;=&nbsp;Backbone.View.extend({<br />
<span style="color: #008080; ">&nbsp;2</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">&nbsp;3</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el:&nbsp;'body',<br />
<span style="color: #008080; ">&nbsp;4</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">&nbsp;5</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render:function(){<br />
<span style="color: #008080; ">&nbsp;6</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;html&nbsp;=&nbsp;'学号:&nbsp;'&nbsp;+&nbsp;this.model.get('id') +&nbsp;'.' +<br />
<span style="color: #008080; ">&nbsp;7</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'姓名:&nbsp;'&nbsp;+&nbsp;this.model.get('name') +&nbsp;'.' +<br />
<span style="color: #008080; ">&nbsp;8</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'年龄:&nbsp;'&nbsp;+&nbsp;this.model.get('age');<br />
<span style="color: #008080; ">&nbsp;9</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">10</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this.el).html(html);<br />
<span style="color: #008080; ">11</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
<span style="color: #008080; ">12</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</div>
</div>
<div><br />
</div>
<div>定义完模型和视图类之类，接下来就是创建模型类和视图类对象，创建方法类似于java中创建对象。
</div>
<div>新建一个model对象student，给对象属性指定值。</div>
<div>新建一个view对象，并且指定该view绑定的model对象。</div>
<div>调用view的渲染方法。</div>
<div><br />
</div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
--><span style="color: #008080; ">&nbsp;1</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;student&nbsp;=&nbsp;new&nbsp;Student({<br />
<span style="color: #008080; ">&nbsp;2</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;10000,<br />
<span style="color: #008080; ">&nbsp;3</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'王小二',<br />
<span style="color: #008080; ">&nbsp;4</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;age:&nbsp;30<br />
<span style="color: #008080; ">&nbsp;5</span>&nbsp;&nbsp; &nbsp; &nbsp;});<br />
<span style="color: #008080; ">&nbsp;6</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">&nbsp;7</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">&nbsp;8</span>&nbsp;&nbsp; &nbsp; var&nbsp;studnetView&nbsp;=&nbsp;new&nbsp;StudnetView({<br />
<span style="color: #008080; ">&nbsp;9</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;model:&nbsp;student<br />
<span style="color: #008080; ">10</span>&nbsp;&nbsp; &nbsp; });<br />
<span style="color: #008080; ">11</span>&nbsp;<br />
<span style="color: #008080; ">12</span>&nbsp; &nbsp; &nbsp;studnetView.render();</div>
</div>
<div><br />
</div>
<div>至此Backbone的代码就全部写完了，只要把这些新建Model和View的代码放到自定义的js文件中，</div>
<div>在页面加载时调用即可，这里自定义js文件名为main.js,内容如下：</div>
<div><br />
</div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
--><span style="color: #008080; ">&nbsp;1</span>&nbsp;(function($){<br />
<span style="color: #008080; ">&nbsp;2</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function(){<br />
<span style="color: #008080; ">&nbsp;3</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">&nbsp;4</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;student&nbsp;=&nbsp;new&nbsp;Student({<br />
<span style="color: #008080; ">&nbsp;5</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;10000,<br />
<span style="color: #008080; ">&nbsp;6</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'王小二',<br />
<span style="color: #008080; ">&nbsp;7</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;age:&nbsp;30<br />
<span style="color: #008080; ">&nbsp;8</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
<span style="color: #008080; ">&nbsp;9</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">10</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">11</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;studnetView&nbsp;=&nbsp;new&nbsp;StudnetView({<br />
<span style="color: #008080; ">12</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;model:&nbsp;student<br />
<span style="color: #008080; ">13</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
<span style="color: #008080; ">14</span>&nbsp;<br />
<span style="color: #008080; ">15</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;studnetView.render();<br />
<span style="color: #008080; ">16</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">17</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
<span style="color: #008080; ">18</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">19</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//set&nbsp;model<br />
<span style="color: #008080; ">20</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;Student&nbsp;=&nbsp;Backbone.Model.extend({<br />
<span style="color: #008080; ">21</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//set&nbsp;default&nbsp;values.<br />
<span style="color: #008080; ">22</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defaults:&nbsp;{<br />
<span style="color: #008080; ">23</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;0,<br />
<span style="color: #008080; ">24</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'',<br />
<span style="color: #008080; ">25</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;age:&nbsp;0<br />
<span style="color: #008080; ">26</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
<span style="color: #008080; ">27</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
<span style="color: #008080; ">28</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">29</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//set&nbsp;view<br />
<span style="color: #008080; ">30</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;StudnetView&nbsp;=&nbsp;Backbone.View.extend({<br />
<span style="color: #008080; ">31</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">32</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el:&nbsp;'body',<br />
<span style="color: #008080; ">33</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">34</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render:function(){<br />
<span style="color: #008080; ">35</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;html&nbsp;=&nbsp;'学号:&nbsp;'&nbsp;+&nbsp;this.model.id&nbsp;+&nbsp;'.'<br />
<span style="color: #008080; ">36</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'姓名:&nbsp;'&nbsp;+&nbsp;this.model.name&nbsp;+&nbsp;'.'<br />
<span style="color: #008080; ">37</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'年龄:&nbsp;'&nbsp;+&nbsp;this.model.age;<br />
<span style="color: #008080; ">38</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">39</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this.el).html(html);<br />
<span style="color: #008080; ">40</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
<span style="color: #008080; ">41</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
<span style="color: #008080; ">42</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">43</span>&nbsp;})(jQuery);</div>
</div>
<div><br />
</div>
<div>然后再新建一个index.html,内容如下：</div>
<div><br />
</div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
--><span style="color: #008080; ">&nbsp;1</span>&nbsp;<span style="color: #0000FF; ">&lt;!</span><span style="color: #FF00FF; ">DOCTYPE&nbsp;html</span><span style="color: #0000FF; ">&gt;</span><br />
<span style="color: #008080; ">&nbsp;2</span>&nbsp;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">html</span><span style="color: #0000FF; ">&gt;</span><br />
<span style="color: #008080; ">&nbsp;3</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">head</span><span style="color: #0000FF; ">&gt;</span><br />
<span style="color: #008080; ">&nbsp;4</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">meta&nbsp;</span><span style="color: #FF0000; ">charset</span><span style="color: #0000FF; ">="utf-8"</span><span style="color: #0000FF; ">&gt;</span><br />
<span style="color: #008080; ">&nbsp;5</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">title</span><span style="color: #0000FF; ">&gt;</span>Backbone.js&nbsp;1<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">title</span><span style="color: #0000FF; ">&gt;</span><br />
<span style="color: #008080; ">&nbsp;6</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">script&nbsp;</span><span style="color: #FF0000; ">src</span><span style="color: #0000FF; ">="lib/jquery-2.2.2.js"</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">script</span><span style="color: #0000FF; ">&gt;</span><br />
<span style="color: #008080; ">&nbsp;7</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">script&nbsp;</span><span style="color: #FF0000; ">src</span><span style="color: #0000FF; ">="lib/underscore-2.js"</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">script</span><span style="color: #0000FF; ">&gt;</span><br />
<span style="color: #008080; ">&nbsp;8</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">script&nbsp;</span><span style="color: #FF0000; ">src</span><span style="color: #0000FF; ">="lib/backbone.js"</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">script</span><span style="color: #0000FF; ">&gt;</span><br />
<span style="color: #008080; ">&nbsp;9</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">script&nbsp;</span><span style="color: #FF0000; ">src</span><span style="color: #0000FF; ">="js/main.js"</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">script</span><span style="color: #0000FF; ">&gt;</span><br />
<span style="color: #008080; ">10</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">head</span><span style="color: #0000FF; ">&gt;</span><br />
<span style="color: #008080; ">11</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">body</span><span style="color: #0000FF; ">&gt;</span><br />
<span style="color: #008080; ">12</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color: #008080; ">13</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">body</span><span style="color: #0000FF; ">&gt;</span><br />
<span style="color: #008080; ">14</span>&nbsp;<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">html</span><span style="color: #0000FF; ">&gt;</span></div>
</div>
<div><br />
</div>
<div>最后，在浏览器中打开这个文件，就可以看到效果了。
</div>
<div><br />
</div><img src ="http://www.blogjava.net/jacky9881/aggbug/429941.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/jacky9881/" target="_blank">笑看人生</a> 2016-04-02 10:06 <a href="http://www.blogjava.net/jacky9881/archive/2016/04/02/429941.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>配置Nginx 缓存服务器</title><link>http://www.blogjava.net/jacky9881/archive/2016/03/08/429552.html</link><dc:creator>笑看人生</dc:creator><author>笑看人生</author><pubDate>Tue, 08 Mar 2016 12:29:00 GMT</pubDate><guid>http://www.blogjava.net/jacky9881/archive/2016/03/08/429552.html</guid><wfw:comment>http://www.blogjava.net/jacky9881/comments/429552.html</wfw:comment><comments>http://www.blogjava.net/jacky9881/archive/2016/03/08/429552.html#Feedback</comments><slash:comments>1</slash:comments><wfw:commentRss>http://www.blogjava.net/jacky9881/comments/commentRss/429552.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/jacky9881/services/trackbacks/429552.html</trackback:ping><description><![CDATA[@import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
@import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&amp;file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
<br />
<div><br />
</div>
参照以下网址，在CentOS上安装Nginx<br />
<div>http://www.blogjava.net/jacky9881/archive/2016/02/19/429375.html</div>
<div><br />
</div>
<div>1.首先新建以下两个目录，用于存放缓存文件；</div>
<div>&nbsp; &nbsp;[root@localhost nginx]# mkdir -p&nbsp;/data/nginx/proxy_temp_path</div>
<div>&nbsp; &nbsp;[root@localhost nginx]# mkdir -p /data/nginx/proxy_cache_path</div>
<div><br />
</div>
<div>2.编辑nginx.conf文件</div>
<div>&nbsp; 在http模块增加如下内容，指定缓存文件的存放路径：</div>
<div>&nbsp;&nbsp;<span style="font-size: 13px; background-color: #eeeeee;">proxy_temp_path&nbsp;/data/nginx/proxy_temp_path;</span></div>
<div><span style="font-size: 13px; background-color: #eeeeee;">&nbsp; proxy_cache_path&nbsp;/data/nginx/proxy_cache_path&nbsp;levels=1:2&nbsp;keys_zone=cache_one:20m&nbsp;inactive=1d&nbsp;max_size=3g&nbsp;;</span>&nbsp;&nbsp;</div>
<div><br />
</div>
<div>注：通过<span style="font-size: 13px; background-color: #eeeeee;">keys_zone来指定缓存区的名字，在接下来的location模块配置中需要用到；</span></div>
<div><span style="font-size: 13px; background-color: #eeeeee;">&nbsp; &nbsp; &nbsp; 20m是指定用于缓存的内存大小（由于本人虚拟机内存原因，设置了20M，生产环境中可以设置大一些，比如1G）；</span></div>
<div><span style="font-size: 13px; background-color: #eeeeee;">&nbsp; &nbsp; &nbsp;&nbsp;</span><span style="font-size: 13px; background-color: #eeeeee;">inactive=1d,代表缓存的数据如果超过一天没有被访问的话，则自动清除；</span></div>
<div><span style="font-size: 13px; background-color: #eeeeee;">&nbsp; &nbsp; &nbsp; max_size=3g是指定用于缓存的硬盘大小</span><span style="font-size: 13px; background-color: #eeeeee;">（由于本人虚拟机内存原因，设置了3g，生产环境中可以设置大一些，比如50G）；</span></div>
<div>&nbsp; &nbsp; &nbsp;&nbsp;<span style="font-size: 13px; background-color: #eeeeee;">levels=1:2&nbsp;</span><span style="color: #333333; font-family: verdana, Arial, Helvetica, sans-serif; line-height: 25px; background-color: #ffffff;">指定该缓存目录中有两层hash目录，第一层目录为1个字母，第二层为2个字母，其中第一层目录名为缓存数据MD5编码的倒数第一个</span></div>
<div><span style="color: #333333; font-family: verdana, Arial, Helvetica, sans-serif; line-height: 25px; background-color: #ffffff;">&nbsp; &nbsp; &nbsp;字母，第二层目录名为缓存数据MD5编码的倒数2，3两个字母；</span></div>
<div><span style="color: #333333; font-family: verdana, Arial, Helvetica, sans-serif; line-height: 25px; background-color: #ffffff;"><br />
</span></div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
-->&nbsp;upstream&nbsp;local_tomcats&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;server&nbsp;192.168.8.132:8080;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;server&nbsp;192.168.8.130:8080;<br />
}</div>
</div>
<div><br />
</div>
<div>&nbsp;修改location模块</div>
<div>&nbsp;<span style="font-size: 13px; background-color: #eeeeee;">&nbsp;location&nbsp;~&nbsp;\.(jsp|do)$&nbsp;{</span></div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_pass&nbsp;http://local_tomcats;<br />
&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp; location&nbsp;/&nbsp;{<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_cache&nbsp;cache_one;</div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ＃定义http返回值为200和304，缓存时间12小时，如果12小时后，没有被访问，则自动被删除；</div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ＃200表示&nbsp;<span style="color: #333333; font-family: Arial; font-size: 14px; line-height: 26px; background-color: #ffffff;">服务器已成功处理了请求，304表示&nbsp;</span><span style="color: #333333; font-family: Arial; font-size: 14px; line-height: 26px; background-color: #ffffff;">自从上次请求后，请求的网页未修改过</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_cache_valid&nbsp;200&nbsp;304&nbsp;12h&nbsp;;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_cache_valid&nbsp;301&nbsp;302&nbsp;1m&nbsp;;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_cache_valid&nbsp;any&nbsp;10m&nbsp;;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red;">&nbsp;proxy_cache_key&nbsp;$host$uri$is_args$args;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; proxy_ignore_headers&nbsp;X-Accel-Expires&nbsp;Expires&nbsp;&nbsp;Set-Cookie&nbsp;Cache-Control;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_hide_header&nbsp;Cache-Control;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_hide_header&nbsp;Set-Cookie;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red;">proxy_pass&nbsp;http://local_tomcats; ＃这个要设定，否则好像生成不了缓存文件</span><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;}<br />
＃用于清除缓存<br />
&nbsp;location&nbsp;~&nbsp;/purge(/.*)&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;allow&nbsp;127.0.0.1;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;allow&nbsp;192.168.8.132;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deny&nbsp;all&nbsp;;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_cache_purge&nbsp;cache_one&nbsp;$host$1$is_args$args&nbsp;;<br />
</div>
<div><span style="font-size: 13px; background-color: #eeeeee;">&nbsp; &nbsp;}</span>&nbsp;&nbsp;</div>
<div><br />
</div>
<div>在浏览器地址栏输入：http://www.hw.com/tomcat.png
</div>
<div>查看缓存目录</div>
<div>
<div>[root@localhost nginx]# ls /data/nginx/proxy_cache_path/7/8a</div>
<div>b12ee1366ed4307aa6408a16286658a7</div>
</div>
<div><br />
</div>
<div>可以看到，缓存文件已经生成，注意缓存文件名最后三位和缓存文件夹的关系。</div>
<div><br />
</div>
<div>在浏览器地址栏输入：http://www.hw.com/purge/tomcat.png</div>
<div>页面显示如下信息，提示缓存文件已经被清除。</div>
<div><br />
</div>
<div>
<div>Successful purge</div>
<div><br />
</div>
<div><span style="color: red;">Key : www.hw.com/tomcat.png</span></div>
<div>Path: /data/nginx/proxy_cache_path/<span style="color: red;">7/8a</span>/b12ee1366ed4307aa6408a1628665<span style="color: red;">8a7&nbsp;</span></div>
</div>
<div><br />
</div>
<div>注意这里的Key，就是配置文件中定义&nbsp;<span style="font-size: 13px; background-color: #eeeeee;">proxy_cache_key&nbsp;</span>
</div>
<div><br />
</div>
<div>查看缓存命中率
</div>
<div>在<span style="font-size: 13px; background-color: #eeeeee;">location&nbsp;/ 模块，增加如下代码</span></div>
<div><span style="font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Consolas, 'Courier New', monospace; font-size: 12px; line-height: 18px; background-color: #fafafa;">add_header&nbsp;&nbsp;Nginx-Cache&nbsp;</span><span class="string" style="color: red; font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Consolas, 'Courier New', monospace; font-size: 12px; line-height: 18px;">"$upstream_cache_status"</span><span style="font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Consolas, 'Courier New', monospace; font-size: 12px; line-height: 18px; color: red;">;&nbsp;</span></div>
<div><span style="font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Consolas, 'Courier New', monospace; font-size: 12px; line-height: 18px;"><br />
</span></div>
<div><span style="font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Consolas, 'Courier New', monospace; font-size: 12px; line-height: 18px;">同时在http模块打开ngnix的日志功能，默认是关闭状态。</span></div>
<div><span style="font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Consolas, 'Courier New', monospace; font-size: 12px; line-height: 18px;"><br />
</span></div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
-->&nbsp; &nbsp; log_format&nbsp;&nbsp;main&nbsp;&nbsp;'$remote_addr&nbsp;-&nbsp;$remote_user&nbsp;[$time_local]&nbsp;"$request"&nbsp;'<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '$status&nbsp;$body_bytes_sent&nbsp;"$http_referer"&nbsp;'<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '"$http_user_agent"&nbsp;"$http_x_forwarded_for"'</div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: red;">'"</span><span style="color: red; font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Consolas, 'Courier New', monospace; font-size: 12px; line-height: 18px;">$upstream_cache_status</span><span style="color: red;">"';</span><br />
&nbsp; &nbsp; access_log&nbsp;&nbsp;logs/access.log&nbsp;&nbsp;main;</div>
</div>
<div><span style="font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Consolas, 'Courier New', monospace; font-size: 12px; line-height: 18px;">&nbsp;</span></div>
<div><span style="font-size: 13px; background-color: highlight;"><br />
</span></div>
<div>[root@localhost nginx]# ./sbin/nginx -s reload</div>
<div><br />
</div>
<div>在浏览器地址栏输入：http://www.hw.com/tomcat.png</div>
<div>重复刷新几次，打开日志文件 logs/access.log,可以看到HIT的字样，意味着缓存命中。</div>
<div><span style="font-size: 13px; background-color: highlight;"><br />
</span></div>
<div>
<div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%; word-break: break-all;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
-->192.168.8.132&nbsp;-&nbsp;-&nbsp;[08/Mar/2016:20:48:38&nbsp;+0800]&nbsp;"GET&nbsp;/tomcat.png&nbsp;HTTP/1.1"&nbsp;304&nbsp;0&nbsp;"-"&nbsp;"Mozilla/5.0&nbsp;(X11;&nbsp;Linux&nbsp;x86_64;&nbsp;rv:38.0)&nbsp;Gecko/20100101&nbsp;Firefox/38.0"&nbsp;"-""<span style="color: red;">HIT"</span><br />
192.168.8.132&nbsp;-&nbsp;-&nbsp;[08/Mar/2016:20:48:40&nbsp;+0800]&nbsp;"GET&nbsp;/tomcat.png&nbsp;HTTP/1.1"&nbsp;304&nbsp;0&nbsp;"-"&nbsp;"Mozilla/5.0&nbsp;(X11;&nbsp;Linux&nbsp;x86_64;&nbsp;rv:38.0)&nbsp;Gecko/20100101&nbsp;Firefox/38.0"&nbsp;"-""<span style="color: red;">HIT"</span><br />
192.168.8.132&nbsp;-&nbsp;-&nbsp;[08/Mar/2016:20:48:42&nbsp;+0800]&nbsp;"GET&nbsp;/tomcat.png&nbsp;HTTP/1.1"&nbsp;304&nbsp;0&nbsp;"-"&nbsp;"Mozilla/5.0&nbsp;(X11;&nbsp;Linux&nbsp;x86_64;&nbsp;rv:38.0)&nbsp;Gecko/20100101&nbsp;Firefox/38.0"&nbsp;"-""<span style="color: red;">HIT"</span></div>
</div>
<div><span style="font-size: 13px; background-color: highlight;"><br />
</span></div>
<div><span style="font-size: 13px; background-color: highlight;"><br />
</span></div><img src ="http://www.blogjava.net/jacky9881/aggbug/429552.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/jacky9881/" target="_blank">笑看人生</a> 2016-03-08 20:29 <a href="http://www.blogjava.net/jacky9881/archive/2016/03/08/429552.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>使用MyCat实现MySQL的分片处理和读写分离</title><link>http://www.blogjava.net/jacky9881/archive/2016/02/27/429458.html</link><dc:creator>笑看人生</dc:creator><author>笑看人生</author><pubDate>Sat, 27 Feb 2016 07:28:00 GMT</pubDate><guid>http://www.blogjava.net/jacky9881/archive/2016/02/27/429458.html</guid><wfw:comment>http://www.blogjava.net/jacky9881/comments/429458.html</wfw:comment><comments>http://www.blogjava.net/jacky9881/archive/2016/02/27/429458.html#Feedback</comments><slash:comments>1</slash:comments><wfw:commentRss>http://www.blogjava.net/jacky9881/comments/commentRss/429458.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/jacky9881/services/trackbacks/429458.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 不讲原理，直接上步骤：1.下载MyCat，Mycat-server-1.4-release-20151019230038-linux.tar2. 解压到/usr/mycat目录下：&nbsp; &nbsp; [root@localhost mycat]# tar -xvf &nbsp;Mycat-server-1.4-release-20151019230038-linux.t...&nbsp;&nbsp;<a href='http://www.blogjava.net/jacky9881/archive/2016/02/27/429458.html'>阅读全文</a><img src ="http://www.blogjava.net/jacky9881/aggbug/429458.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/jacky9881/" target="_blank">笑看人生</a> 2016-02-27 15:28 <a href="http://www.blogjava.net/jacky9881/archive/2016/02/27/429458.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>MySQL主从复制配置</title><link>http://www.blogjava.net/jacky9881/archive/2016/02/23/429403.html</link><dc:creator>笑看人生</dc:creator><author>笑看人生</author><pubDate>Tue, 23 Feb 2016 12:41:00 GMT</pubDate><guid>http://www.blogjava.net/jacky9881/archive/2016/02/23/429403.html</guid><wfw:comment>http://www.blogjava.net/jacky9881/comments/429403.html</wfw:comment><comments>http://www.blogjava.net/jacky9881/archive/2016/02/23/429403.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/jacky9881/comments/commentRss/429403.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/jacky9881/services/trackbacks/429403.html</trackback:ping><description><![CDATA[@import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
@import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&amp;file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
@import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&amp;file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
@import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&amp;file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
@import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&amp;file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
@import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&amp;file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
<div>&nbsp;主服务器 &nbsp;OS：CentOS &nbsp; IP：192.168.8.130</div>
<div>&nbsp;从服务器 &nbsp;OS：CentOS &nbsp; IP：192.168.8.131</div>
<div><br />
</div>
<div>在主，从服务器上安装MySQL，安装方法如下：</div>
<div>
<div>[root@localhost Desktop]$ rpm -qa | grep mysql</div>
<div>&nbsp; &nbsp;mysql-libs-5.1.73-5.el6_6.x86_64</div>
<div>[root@localhost Desktop]# rpm -e mysql-libs-5.1.73-5.el6_6.x86_64 --nodeps</div>
<div>[root@localhost Desktop]# yum -y install mysql-server mysql mysql-devel</div>
</div>
<div><br />
</div>
<div>启动MySQL</div>
<div>[root@localhost Desktop]# service mysqld start</div>
<div><br />
</div>
<div>＃可以设置MySQL开机启动，运行命令chkconfig mysqld on</div>
<div><br />
</div>
<div>#给root账号设置密码</div>
<div>
<div>[root@localhost Desktop]# mysqladmin -u root password 'root'</div>
<div>[root@localhost Desktopps]# mysql -u root -p</div>
</div>
<div>给从服务器(192.168.8.131)授权，并且给从服务器创建访问主服务器的账号和密码 admin</div>
<div>mysql&gt; grant replication slave on *.* to 'admin'@'192.168.8.131' identified by 'admin';</div>
<div>创建数据库contract</div>
<div>mysql&gt; create database contract;</div>
<div>mysql&gt;quit；</div>
<div><br />
</div>
<div>复制MySQL数据库配置模版覆盖/etc/my.cnf</div>
<div>[root@localhost Desktopps]# cp /usr/share/mysql/my-medium.cnf /etc/my.cnf&nbsp;&nbsp;&nbsp;</div>
<div>[root@localhost Desktopps]#vi /etc/my.cnf</div>
<div>设置以下三个值</div>
<div><hr />
</div>
<div>log-bin=mysql-bin &nbsp; ＃指定从服务器读取的日志文件</div>
<div>server-id<span class="Apple-tab-span" style="white-space:pre">	</span>= 1 &nbsp; &nbsp; &nbsp; &nbsp;＃主服务器必须设定为1，从服务器的值&gt;1</div>
<div>binlog-do-db=contract ＃对contract数据库的操作日志会记录到mysql-bin</div>
<div><hr />
</div>
<div>＃原理：MySQL主从复制的原理是主服务器把对指定数据库操作的日志写到指定的日志文件中，从服务器</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 读取这个日志文件，写到从服务器的指定日志文件中，然后在从服务器重新执行日志文件。</div>
<div><br />
</div>
<div>配置完之后，重启MySQL</div>
<div>
<div>[root@localhost Desktopps]#service mysqld restart</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>Stopping mysqld: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[ &nbsp;OK &nbsp;]</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>Starting mysqld: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [ &nbsp;OK &nbsp;]</div>
</div>
<div><br />
</div>
<div>[root@localhost Desktopps]# mysql -u root -p</div>
<div>查看主服务器的状态</div>
<div>
<div>mysql&gt; show master status\G;</div>
<div>*************************** 1. row ***************************</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; File: mysql-bin.000005</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Position: 106</div>
<div>&nbsp; &nbsp; &nbsp;Binlog_Do_DB: contract</div>
<div>Binlog_Ignore_DB:&nbsp;</div>
<div>1 row in set (0.00 sec)</div>
</div>
<div><br />
</div>
<div>这里记好File和Position的值，配置从服务器的时候需要用到。File就是从服务器需要读取的日志文件，Position表示从日志文件的什么位置开始读起。</div>
<div><br />
</div>
<div>&nbsp;下面开始配置从服务器</div>
<div>
<div>[root@localhost Desktop]# mysqladmin -u root password 'root'</div>
<div>[root@localhost Desktopps]# mysql -u root -p</div>
</div>
<div>
<div>创建数据库contract</div>
<div>mysql&gt; create database contract;</div>
<div>mysql&gt;quit；</div>
</div>
<div>
<div>[root@localhost Desktopps]# cp /usr/share/mysql/my-medium.cnf /etc/my.cnf&nbsp;&nbsp;&nbsp;</div>
<div>[root@localhost Desktopps]#vi /etc/my.cnf</div>
<div>设置以下两个值</div>
<div><hr />
</div>
<div>log-bin=mysql-bin &nbsp; ＃指定主服务器读取的日志文件</div>
<div>server-id<span class="Apple-tab-span" style="white-space: pre;">	</span>= 2 &nbsp; &nbsp; &nbsp; ＃主服务器必须设定为1，从服务器的值&gt;1</div>
<div><hr />
</div>
<div>[root@localhost Desktopps]# mysql -u root -p</div>
</div>
<div>mysql&gt; CHANGE MASTER TO MASTER_HOST='192.168.8.130', MASTER_PORT=3306,</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; MASTER_USER='admin', MASTER_PASSWORD='admin',</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; MASTER<span style="color: #393939; font-family: verdana, 'ms song', 微软雅黑, 宋体, Arial, Helvetica, sans-serif; background-color: #ffffff;">_LOG_FILE=</span>'<span style="color: #393939; font-family: verdana, 'ms song', 微软雅黑, 宋体, Arial, Helvetica, sans-serif; background-color: #ffffff;">mysql-bin.000005</span>'<span style="color: #393939; font-family: verdana, 'ms song', 微软雅黑, 宋体, Arial, Helvetica, sans-serif; background-color: #ffffff;">,&nbsp;</span>MASTER<span style="color: #393939; font-family: verdana, 'ms song', 微软雅黑, 宋体, Arial, Helvetica, sans-serif; background-color: #ffffff;">_LOG_POS=106;</span>&nbsp;</div>
<div>启动从服务器同步</div>
<div>mysql&gt;<span style="color: #393939; font-family: verdana, 'ms song', 微软雅黑, 宋体, Arial, Helvetica, sans-serif; background-color: #ffffff;">start slave;</span></div>
<div>mysql&gt;show slave status\G;
</div>
<div><hr />
</div>
<div><span style="color: #393939; font-family: verdana, 'ms song', 微软雅黑, 宋体, Arial, Helvetica, sans-serif; background-color: #ffffff;">Slave_IO_Running: YES</span><br style="color: #393939; font-family: verdana, 'ms song', 微软雅黑, 宋体, Arial, Helvetica, sans-serif; margin: 0px; padding: 0px;" />
<span style="color: #393939; font-family: verdana, 'ms song', 微软雅黑, 宋体, Arial, Helvetica, sans-serif; background-color: #ffffff;">Slave_SQL_Running: YES</span>
</div>
<div><hr />
如果输出以上内容，则表示MySQL主从复制配置成功。</div>
<div><br />
</div>
<div>验证</div>
<div>在主服务器上运行&nbsp;</div>
<div>[root@localhost Desktopps]# mysql -u root -p</div>
<div>mysql&gt; use contract;</div>
<div>
<div>Database changed</div>
</div>
<div>
<div>mysql&gt; show tables;</div>
<div>Empty set (0.04 sec)</div>
</div>
<div><br />
</div>
<div>在从服务器上运行</div>
<div>
<div>[root@localhost Desktopps]# mysql -u root -p</div>
<div>mysql&gt; use contract;</div>
<div>Database changed</div>
<div>
<div>mysql&gt; show tables;</div>
<div>Empty set (0.04 sec)</div>
</div>
</div>
<div><br />
</div>
<div>确定主从服务器的数据库contract的下面都没有表。</div>
<div>在主服务器上运行建表命令，并往表里插入一条记录：</div>
<div>
<div>&nbsp;mysql&gt; create table `user` (`id` int not null auto_increment,`name` varchar (60),`password` varchar (20),`role` int not null,`email` varchar (30),`alertday` int,primary key (`id`));</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>Query OK, 0 rows affected (0.36 sec)</div>
<div>&nbsp;mysql&gt; insert into `user` (`name`,`password`,`role`,`email`,`alertday`) values('admin','admin',0,'xxxx@xxx.com',30);</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>Query OK, 1 row affected (0.08 sec)</div>
</div>
<div><br />
</div>
<div>在从服务器上运行查询语句。</div>
<div>
<div>mysql&gt; select * from user;</div>
<div>+----+-------+----------+------+--------------+----------+</div>
<div>| id | name &nbsp;| password | role | email &nbsp; &nbsp; &nbsp; &nbsp;| alertday |</div>
<div>+----+-------+----------+------+--------------+----------+</div>
<div>| &nbsp;1 | admin | admin &nbsp; &nbsp;| 0 &nbsp; &nbsp;| xxxx@xxx.com | &nbsp; &nbsp; &nbsp; 30 |</div>
<div>+----+-------+----------+------+--------------+----------+</div>
<div>1 row in set (0.01 sec)</div>
</div>
<div><br />
</div>
<div>从输出结果可以看出，主服务器上的数据被同步到从服务器上了。</div>
<div><br />
</div>
<div>通过搭建MySQL主从复制结构，可以提高数据的安全性，同时可以实现读写分离，让写操作在主服务器上进行，</div>
<div>读操作在从服务器上进行，可以分担主服务器的负担。但是如果当主服务器宕机之后，数据库就只能提供</div>
<div>读操作了，不能做到故障转移，这时候，主主复制就应运而生了，有时间整理一下主主复制的配置。</div>
<div><br />
</div>
<div><br />
</div>
<div><span style="color: #393939; font-family: verdana, 'ms song', 微软雅黑, 宋体, Arial, Helvetica, sans-serif; background-color: #ffffff;"><br />
</span></div>
<div><br />
</div>
@import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&amp;file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);<img src ="http://www.blogjava.net/jacky9881/aggbug/429403.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/jacky9881/" target="_blank">笑看人生</a> 2016-02-23 20:41 <a href="http://www.blogjava.net/jacky9881/archive/2016/02/23/429403.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>centOS上安装JDK，Tomcat和Nginx</title><link>http://www.blogjava.net/jacky9881/archive/2016/02/19/429375.html</link><dc:creator>笑看人生</dc:creator><author>笑看人生</author><pubDate>Fri, 19 Feb 2016 11:43:00 GMT</pubDate><guid>http://www.blogjava.net/jacky9881/archive/2016/02/19/429375.html</guid><wfw:comment>http://www.blogjava.net/jacky9881/comments/429375.html</wfw:comment><comments>http://www.blogjava.net/jacky9881/archive/2016/02/19/429375.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/jacky9881/comments/commentRss/429375.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/jacky9881/services/trackbacks/429375.html</trackback:ping><description><![CDATA[@import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
<div>在CentOS上安装JDK7，Tomcat7和Nginx1.9手顺</div>
<div><br />
</div>
<div>1.下载 jdk-7u79-linux-x64.rpm，下载地址如下：</div>
<div>&nbsp; http://www.oracle.com/technetwork/cn/java/javase/downloads/jdk7-downloads-1880260.html</div>
<div><br />
</div>
<div>&nbsp; [root@localhost java]#rpm -qa | grep jdk</div>
<div>&nbsp; [root@localhost java]#cp /home/huangwei/Downloads/jdk-7u79-linux-x64.rpm .</div>
<div>&nbsp; [root@localhost java]# chmod 755 jdk-7u79-linux-x64.rpm&nbsp;</div>
<div>&nbsp; [root@localhost java]# rpm -ivh jdk-7u79-linux-x64.rpm&nbsp;</div>
<div>&nbsp; [root@localhost java]# vi /etc/profile</div>
<div><br />
</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp;#set java enviromet</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp;JAVA_HOME=/usr/java/jdk1.7.0_79</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp;PATH=$PATH:$JAVA_HOME/bin</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp;CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp;export JAVA_HOME PATH CLASSPATH</div>
<div>&nbsp; [root@localhost java]# source /etc/profile</div>
<div>&nbsp; [root@localhost java]# java -version</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp;java version "1.7.0_79"</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp;Java(TM) SE Runtime Environment (build 1.7.0_79-b15)</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp;Java HotSpot(TM) 64-Bit Server VM (build 24.79-b02, mixed mode)</div>
<div>&nbsp; [root@localhost lib]# rpm -qa | grep jdk</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp;jdk-1.7.0_79-fcs.x86_64</div>
<div><br />
</div>
<div><br />
</div>
<div><br />
</div>
<div>2.下载 apache-tomcat-7.0.68.zip，下载地址如下：</div>
<div>&nbsp; http://tomcat.apache.org/download-70.cgi</div>
<div>&nbsp; unzip apache-tomcat-7.0.68.zip to /usr/</div>
<div>&nbsp; [root@localhost bin]# cd /usr/apache-tomcat-7.0.68/bin</div>
<div>&nbsp; [root@localhost bin]# chmod +x *.sh</div>
<div>&nbsp; [root@localhost bin]# ./startup.sh&nbsp;</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>Using CATALINA_BASE: &nbsp; /usr/apache-tomcat-7.0.68</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>Using CATALINA_HOME: &nbsp; /usr/apache-tomcat-7.0.68</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>Using CATALINA_TMPDIR: /usr/apache-tomcat-7.0.68/temp</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>Using JRE_HOME: &nbsp; &nbsp; &nbsp; &nbsp;/usr/java/jdk1.7.0_79</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>Using CLASSPATH: &nbsp; &nbsp; &nbsp; /usr/apache-tomcat-7.0.68/bin/bootstrap.jar:/usr/apache-tomcat-7.0.68/bin/tomcat-juli.jar</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>Tomcat started.</div>
<div><br />
</div>
<div>&nbsp; 在浏览器中输入http://localhost:8080/ ，如果能正常打开Tomcat的主页，说明Tomcat安装成功。</div>
<div><br />
</div>
<div>3.下载 nginx-1.9.11.tar.gz，下载地址如下：</div>
<div>&nbsp; http://nginx.org/en/download.html</div>
<div>&nbsp; [root@localhost usr]# rpm -qa | grep gcc</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>gcc-4.4.7-16.el6.x86_64</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>libgcc-4.4.7-16.el6.x86_64</div>
<div>&nbsp; [root@localhost usr]# rpm -qa | grep openssl</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>openssl-1.0.1e-42.el6.x86_64</div>
<div>&nbsp; [root@localhost usr]# rpm -qa | grep zlib</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>zlib-1.2.3-29.el6.x86_64</div>
<div>&nbsp; [root@localhost usr]# rpm -qa | grep pcre</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>pcre-7.8-7.el6.x86_64</div>
<div>&nbsp; [root@localhost usr]# tar -zxvf nginx-1.9.11.tar.gz&nbsp;</div>
<div>&nbsp; [root@localhost usr]# cd nginx-1.9.11/</div>
<div>&nbsp; [root@localhost nginx-1.9.11]# yum -y install pcre-devel</div>
<div>&nbsp; [root@localhost nginx-1.9.11]# yum -y install zlib-devel</div>
<div>&nbsp; [root@localhost nginx-1.9.11]# ./configure --prefix=/usr/nginx</div>
<div>&nbsp; [root@localhost nginx-1.9.11]# make &amp;&amp; make install</div>
<div>&nbsp; [root@localhost nginx-1.9.11]# cd /usr/nginx/sbin/</div>
<div>&nbsp; [root@localhost sbin]# ./nginx -t</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>nginx: the configuration file /usr/nginx/conf/nginx.conf syntax is ok</div>
<div><span class="Apple-tab-span" style="white-space:pre">	</span>nginx: configuration file /usr/nginx/conf/nginx.conf test is successful</div>
<div>
<div>&nbsp; [root@localhost sbin]# ./nginx</div>
<div><br />
</div>
</div>
<div>&nbsp;&nbsp;</div>
<div>在浏览器中输入http://localhost/ ，如果能正常打开Nginx的主页，说明Nginx安装成功。</div>
@import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&amp;file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);<img src ="http://www.blogjava.net/jacky9881/aggbug/429375.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/jacky9881/" target="_blank">笑看人生</a> 2016-02-19 19:43 <a href="http://www.blogjava.net/jacky9881/archive/2016/02/19/429375.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>使用Redis实现session共享</title><link>http://www.blogjava.net/jacky9881/archive/2016/01/31/429261.html</link><dc:creator>笑看人生</dc:creator><author>笑看人生</author><pubDate>Sun, 31 Jan 2016 05:10:00 GMT</pubDate><guid>http://www.blogjava.net/jacky9881/archive/2016/01/31/429261.html</guid><wfw:comment>http://www.blogjava.net/jacky9881/comments/429261.html</wfw:comment><comments>http://www.blogjava.net/jacky9881/archive/2016/01/31/429261.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/jacky9881/comments/commentRss/429261.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/jacky9881/services/trackbacks/429261.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: @import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);Normal010 pt02false...&nbsp;&nbsp;<a href='http://www.blogjava.net/jacky9881/archive/2016/01/31/429261.html'>阅读全文</a><img src ="http://www.blogjava.net/jacky9881/aggbug/429261.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/jacky9881/" target="_blank">笑看人生</a> 2016-01-31 13:10 <a href="http://www.blogjava.net/jacky9881/archive/2016/01/31/429261.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>nginx tomcat环境session不共享场景</title><link>http://www.blogjava.net/jacky9881/archive/2016/01/28/429243.html</link><dc:creator>笑看人生</dc:creator><author>笑看人生</author><pubDate>Thu, 28 Jan 2016 12:13:00 GMT</pubDate><guid>http://www.blogjava.net/jacky9881/archive/2016/01/28/429243.html</guid><wfw:comment>http://www.blogjava.net/jacky9881/comments/429243.html</wfw:comment><comments>http://www.blogjava.net/jacky9881/archive/2016/01/28/429243.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/jacky9881/comments/commentRss/429243.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/jacky9881/services/trackbacks/429243.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: @import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);参照一下地址，搭建nginx tomcat的负载均衡环境Nor...&nbsp;&nbsp;<a href='http://www.blogjava.net/jacky9881/archive/2016/01/28/429243.html'>阅读全文</a><img src ="http://www.blogjava.net/jacky9881/aggbug/429243.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/jacky9881/" target="_blank">笑看人生</a> 2016-01-28 20:13 <a href="http://www.blogjava.net/jacky9881/archive/2016/01/28/429243.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Ngnix+Tomcat配置负载均衡</title><link>http://www.blogjava.net/jacky9881/archive/2016/01/28/429242.html</link><dc:creator>笑看人生</dc:creator><author>笑看人生</author><pubDate>Thu, 28 Jan 2016 11:45:00 GMT</pubDate><guid>http://www.blogjava.net/jacky9881/archive/2016/01/28/429242.html</guid><wfw:comment>http://www.blogjava.net/jacky9881/comments/429242.html</wfw:comment><comments>http://www.blogjava.net/jacky9881/archive/2016/01/28/429242.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/jacky9881/comments/commentRss/429242.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/jacky9881/services/trackbacks/429242.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 搭建nginx和 tomcat环境，实现负载均衡&nbsp;&nbsp;<a href='http://www.blogjava.net/jacky9881/archive/2016/01/28/429242.html'>阅读全文</a><img src ="http://www.blogjava.net/jacky9881/aggbug/429242.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/jacky9881/" target="_blank">笑看人生</a> 2016-01-28 19:45 <a href="http://www.blogjava.net/jacky9881/archive/2016/01/28/429242.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>