国产区图片区小说区亚洲区,噜噜综合亚洲AV中文无码,亚洲成A∨人片在线观看不卡

Backbone學(xué)習(xí)筆記三

這部分介紹如何分視圖顯示前面講的表格內(nèi)容，Backbone中視圖可以嵌套顯示，例如前面例子中整個(gè)頁(yè)面可以用一個(gè)視圖來(lái)渲染，table表格可以用一個(gè)視圖來(lái)渲染，表格中的一行可以用一個(gè)視圖來(lái)渲染，這樣就用三層視圖，只要在以前的例子上稍作修改就可以實(shí)現(xiàn)這效果。

首先定義最里層的視圖，表格中的行。通過(guò)tagName成員變量指定該視圖對(duì)應(yīng)的html元素，render方法中指定tr元素中顯示的內(nèi)容。當(dāng)然也可以指定成員變量className的值，來(lái)指定tr元素顯示的式樣。

var StudentView = Backbone.View.extend({

         tagName: 'tr',

         render: function() {
             $(this.el).html(_.map([
                 this.model.get('id'),
                this.model.get('name'),
                this.model.get('age')
             ],function(val, key){
                 return '<td>' + val + '</td>';
             }))

            return this;
         }
     })

其次顯示表格的視圖。

最后顯示整個(gè)頁(yè)面的視圖。

var StudnetPageView = Backbone.View.extend({
         render: function() {
             $(this.el).html(new StudnetCollectionView({
                 collection: this.collection
             }).render().el);
         }
     })

同時(shí)修改一下顯示部分的代碼。

var studentPageView = new StudnetPageView({
             collection: studentCollection,
             el: 'body'
         });

         studentPageView.render();

整個(gè)main.js的代碼如下：

posted @ 2016-04-04 17:40 笑看人生閱讀(178) | 評(píng)論 (0) | 編輯收藏

Backbone學(xué)習(xí)筆記二

@import url(http://www.tkk7.com/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css); 在學(xué)習(xí)筆記一中，一個(gè)視圖渲染一個(gè)Sudent對(duì)象，如果存在多個(gè)Student對(duì)象怎么辦，

在java中可以通過(guò)ArrayList來(lái)保存，比如List<Student> students = new ArrayList<>();

在Backbone中，也有類(lèi)似于ArrayList的實(shí)現(xiàn)，只需要新建一個(gè)類(lèi)，繼承Collection就可以了，實(shí)現(xiàn)代碼如下：

成員變量model指定集合中存放對(duì)象的類(lèi)型，類(lèi)似于java中范型。

1     var StudentCollection = Backbone.Collection.extend({
2         model: Student
3     });

對(duì)學(xué)習(xí)筆記一種代碼稍加修改，修改代碼如下：

新建三個(gè)Student對(duì)象，把這三個(gè)對(duì)象加入studentCollection對(duì)象中。

1         var student1 = new Student({
2             id: 10000,
3             name: '王小二',
4             age: 30
5         });
6
7         var student2 = new Student({
8             id: 20000,
9             name: '姚敏',
10             age: 26
11         });
12
13         var student3 = new Student({
14             id: 30000,
15             name: '科比',
16             age: 24
17         });
18
19         var studentCollection = new StudentCollection([
20             student1,
21             student2,
22             student3
23 ]);

至此集合模型已經(jīng)新建完畢，那么如何通過(guò)視圖來(lái)顯示這個(gè)集合模型。

學(xué)習(xí)筆記一中新建的StudentView類(lèi)的render方法做修改，同時(shí)在構(gòu)建這個(gè)類(lèi)對(duì)象時(shí)，稍作修改，修改如下：

把原來(lái)綁定model的代碼改成綁定collection。

1 var studentCollectionView = new StudnetCollectionView ({
2 collection: studentCollection
3 });

1     var StudnetCollectionView = Backbone.View.extend({
2
3         el: 'body',
4
5         render:function(){
6             var html = '';
7             _.each(this.collection.models,function(model,index,obj){
8                 var tmp = '學(xué)號(hào): ' + model.get('id') + '.' +
9                           '姓名: ' + model.get('name') + '.' +
10                           '年齡: ' + model.get('age');
11
12                 html = html + '<li>' + tmp + '</li>';
13             });
14
15             html = '<ul>' + html + '</ul>';
16             $(this.el).html(html);
17         }
18     });

完整的main.js內(nèi)容如下：

1 (function($){
2     $(document).ready(function(){
3
4         var student1 = new Student({
5             id: 10000,
6             name: '王小二',
7             age: 30
8         });
9
10         var student2 = new Student({
11             id: 20000,
12             name: '姚敏',
13             age: 26
14         });
15
16         var student3 = new Student({
17             id: 30000,
18             name: '科比',
19             age: 24
20         });
21
22         var studentCollection = new StudentCollection([
23             student1,
24             student2,
25             student3
26         ]);
27
28         var studentCollectionView = new StudnetCollectionView({
29             collection: studentCollection
30         });
31
32         studentCollectionView.render();
33
34     });
35
36     //set model
37     var Student = Backbone.Model.extend({
38         //set default values.
39         defaults: {
40             id: 0,
41             name: '',
42             age: 0
43         }
44     });
45
46     var StudentCollection = Backbone.Collection.extend({
47         model: Student
48     });
49
50     //set view
51     var StudnetCollectionView = Backbone.View.extend({
52
53         el: 'body',
54
55         render:function(){
56             var html = "<table border='1'><tr><th>學(xué)號(hào)</th><th>姓名</th><th>年齡</th></tr>";
57             _.each(this.collection.models, function(model,index,obj){
58                 var tmp = '<tr><td>' + model.get('id') + '</td>' +
59                           '<td>' + model.get('name') + '</td>' +
60                           '<td> ' + model.get('age') + '</td></tr>';
61
62
63                 html = html = html + tmp;
64             });
65
66             html = html + '</table>';
67             $(this.el).html(html);
68         }
69     });
70
71 })(jQuery);
72

posted @ 2016-04-02 12:06 笑看人生閱讀(857) | 評(píng)論 (0) | 編輯收藏

Backbone學(xué)習(xí)筆記一

項(xiàng)目里用到Backbone＋marionet框架，由于以前沒(méi)有接觸過(guò)這些技術(shù)，經(jīng)過(guò)一段時(shí)間的學(xué)習(xí)，覺(jué)得這技術(shù)還是很強(qiáng)大的，現(xiàn)把

學(xué)習(xí)體會(huì)總結(jié)一下，以便后面查詢(xún)。

Backbone是一個(gè)基于MVC模式的前端JavaScript框架，用于前端頁(yè)面開(kāi)發(fā)。

可以從http://backbone.js上下載對(duì)應(yīng)的版本。

使用Backbone，需要依賴(lài)其他一些js庫(kù)。

jQuery http://jquery.com

Underscore http://underscorejs.org

頁(yè)面的head元素內(nèi)容大體如下：

1 <script src="lib/jquery-2.2.2.js"></script>
2 <script src="lib/underscore-2.js"></script>
3 <script src="lib/backbone.js"></script>

Backbone是一個(gè)MVC框架，通過(guò)V來(lái)展示M的內(nèi)容，C接受用戶(hù)的請(qǐng)求，更新模型，然后刷新V。

下面以一個(gè)例子，來(lái)說(shuō)明怎么建立一個(gè)簡(jiǎn)單的Backbone應(yīng)用。

首先定義一個(gè)Model類(lèi)Student, 需要繼承Backbone.Model，這個(gè)類(lèi)有三個(gè)成員變量，id，name，age，套用java中的叫法，其實(shí)可能

不應(yīng)該這么稱(chēng)呼。

1     var Student = Backbone.Model.extend({
2         //set default values.
3         defaults: {
4             id: 0,
5             name: '',
6             age: 0
7         }
8     });

然后定義一個(gè)View類(lèi)StudentView，需要繼承Backbone.View, 給這個(gè)類(lèi)的成員變量el賦值 body，指明在頁(yè)面的body元素中渲染視圖，

同時(shí)重寫(xiě)了渲染方法render，指明如何渲染，以下代碼應(yīng)用jQuery的語(yǔ)法，在el指定的元素內(nèi)，顯示指定的內(nèi)容。

每個(gè)視圖綁定一個(gè)Model，在View的所有方法中可以直接調(diào)用this.model獲取當(dāng)前View綁定的Model對(duì)象，如下例子

this.model.get('id'),注意獲取model屬性值時(shí)，不能直接使用thi.model.id

1     var StudnetView = Backbone.View.extend({
2
3         el: 'body',
4
5         render:function(){
6             var html = '學(xué)號(hào): ' + this.model.get('id') + '.' +
7                        '姓名: ' + this.model.get('name') + '.' +
8                        '年齡: ' + this.model.get('age');
9
10             $(this.el).html(html);
11         }
12     });

定義完模型和視圖類(lèi)之類(lèi)，接下來(lái)就是創(chuàng)建模型類(lèi)和視圖類(lèi)對(duì)象，創(chuàng)建方法類(lèi)似于java中創(chuàng)建對(duì)象。

新建一個(gè)model對(duì)象student，給對(duì)象屬性指定值。

新建一個(gè)view對(duì)象，并且指定該view綁定的model對(duì)象。

調(diào)用view的渲染方法。

1     var student = new Student({
2             id: 10000,
3             name: '王小二',
4             age: 30
5   });
6
7
8   var studnetView = new StudnetView({
9             model: student
10   });
11
12 studnetView.render();

至此Backbone的代碼就全部寫(xiě)完了，只要把這些新建Model和View的代碼放到自定義的js文件中，

在頁(yè)面加載時(shí)調(diào)用即可，這里自定義js文件名為main.js,內(nèi)容如下：

1 (function($){
2     $(document).ready(function(){
3
4         var student = new Student({
5             id: 10000,
6             name: '王小二',
7             age: 30
8         });
9
10
11         var studnetView = new StudnetView({
12             model: student
13         });
14
15         studnetView.render();
16
17     });
18
19     //set model
20     var Student = Backbone.Model.extend({
21         //set default values.
22         defaults: {
23             id: 0,
24             name: '',
25             age: 0
26         }
27     });
28
29     //set view
30     var StudnetView = Backbone.View.extend({
31
32         el: 'body',
33
34         render:function(){
35             var html = '學(xué)號(hào): ' + this.model.id + '.'
36                        '姓名: ' + this.model.name + '.'
37                        '年齡: ' + this.model.age;
38
39             $(this.el).html(html);
40         }
41     });
42
43 })(jQuery);

然后再新建一個(gè)index.html,內(nèi)容如下：

1 <!DOCTYPE html>
2 <html>
3     <head>
4         <meta charset="utf-8">
5         <title>Backbone.js 1</title>
6         <script src="lib/jquery-2.2.2.js"></script>
7         <script src="lib/underscore-2.js"></script>
8         <script src="lib/backbone.js"></script>
9         <script src="js/main.js"></script>
10     </head>
11     <body>
12
13     </body>
14 </html>

最后，在瀏覽器中打開(kāi)這個(gè)文件，就可以看到效果了。

posted @ 2016-04-02 10:06 笑看人生閱讀(2564) | 評(píng)論 (0) | 編輯收藏

配置Nginx 緩存服務(wù)器

@import url(http://www.tkk7.com/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css); @import url(http://www.tkk7.com/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);

參照以下網(wǎng)址，在CentOS上安裝Nginx

http://www.tkk7.com/jacky9881/archive/2016/02/19/429375.html

1.首先新建以下兩個(gè)目錄，用于存放緩存文件；

[root@localhost nginx]# mkdir -p /data/nginx/proxy_temp_path

[root@localhost nginx]# mkdir -p /data/nginx/proxy_cache_path

2.編輯nginx.conf文件

在http模塊增加如下內(nèi)容，指定緩存文件的存放路徑：

proxy_temp_path /data/nginx/proxy_temp_path;

proxy_cache_path /data/nginx/proxy_cache_path levels=1:2 keys_zone=cache_one:20m inactive=1d max_size=3g ;

注：通過(guò)keys_zone來(lái)指定緩存區(qū)的名字，在接下來(lái)的location模塊配置中需要用到；

20m是指定用于緩存的內(nèi)存大小（由于本人虛擬機(jī)內(nèi)存原因，設(shè)置了20M，生產(chǎn)環(huán)境中可以設(shè)置大一些，比如1G）；

inactive=1d,代表緩存的數(shù)據(jù)如果超過(guò)一天沒(méi)有被訪問(wèn)的話，則自動(dòng)清除；

max_size=3g是指定用于緩存的硬盤(pán)大小（由于本人虛擬機(jī)內(nèi)存原因，設(shè)置了3g，生產(chǎn)環(huán)境中可以設(shè)置大一些，比如50G）；

levels=1:2 指定該緩存目錄中有兩層hash目錄，第一層目錄為1個(gè)字母，第二層為2個(gè)字母，其中第一層目錄名為緩存數(shù)據(jù)MD5編碼的倒數(shù)第一個(gè)

字母，第二層目錄名為緩存數(shù)據(jù)MD5編碼的倒數(shù)2，3兩個(gè)字母；

upstream local_tomcats {
server 192.168.8.132:8080;
server 192.168.8.130:8080;
}

修改location模塊

location ~ \.(jsp|do)$ {

            proxy_pass http://local_tomcats;
}

location / {

            proxy_cache cache_one;

＃定義http返回值為200和304，緩存時(shí)間12小時(shí)，如果12小時(shí)后，沒(méi)有被訪問(wèn)，則自動(dòng)被刪除；

＃200表示服務(wù)器已成功處理了請(qǐng)求，304表示自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁(yè)未修改過(guò)
            proxy_cache_valid 200 304 12h ;
            proxy_cache_valid 301 302 1m ;
            proxy_cache_valid any 10m ;
            proxy_cache_key $host$uri$is_args$args;

proxy_ignore_headers X-Accel-Expires Expires  Set-Cookie Cache-Control;
            proxy_hide_header Cache-Control;
            proxy_hide_header Set-Cookie;
            proxy_pass http://local_tomcats; ＃這個(gè)要設(shè)定，否則好像生成不了緩存文件

    }
＃用于清除緩存
location ~ /purge(/.*) {
            allow 127.0.0.1;
            allow 192.168.8.132;
            deny all ;
            proxy_cache_purge cache_one $host$1$is_args$args ;

}

在瀏覽器地址欄輸入：http://www.hw.com/tomcat.png

查看緩存目錄

[root@localhost nginx]# ls /data/nginx/proxy_cache_path/7/8a

b12ee1366ed4307aa6408a16286658a7

可以看到，緩存文件已經(jīng)生成，注意緩存文件名最后三位和緩存文件夾的關(guān)系。

在瀏覽器地址欄輸入：http://www.hw.com/purge/tomcat.png

頁(yè)面顯示如下信息，提示緩存文件已經(jīng)被清除。

Successful purge

Key : www.hw.com/tomcat.png

Path: /data/nginx/proxy_cache_path/7/8a/b12ee1366ed4307aa6408a16286658a7

注意這里的Key，就是配置文件中定義 proxy_cache_key

查看緩存命中率

在location / 模塊，增加如下代碼

add_header Nginx-Cache "$upstream_cache_status";

同時(shí)在http模塊打開(kāi)ngnix的日志功能，默認(rèn)是關(guān)閉狀態(tài)。

log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"'

'"$upstream_cache_status"';
access_log logs/access.log main;

[root@localhost nginx]# ./sbin/nginx -s reload

在瀏覽器地址欄輸入：http://www.hw.com/tomcat.png

重復(fù)刷新幾次，打開(kāi)日志文件 logs/access.log,可以看到HIT的字樣，意味著緩存命中。

192.168.8.132 - - [08/Mar/2016:20:48:38 +0800] "GET /tomcat.png HTTP/1.1" 304 0 "-" "Mozilla/5.0 (X11; Linux x86_64; rv:38.0) Gecko/20100101 Firefox/38.0" "-""HIT"
192.168.8.132 - - [08/Mar/2016:20:48:40 +0800] "GET /tomcat.png HTTP/1.1" 304 0 "-" "Mozilla/5.0 (X11; Linux x86_64; rv:38.0) Gecko/20100101 Firefox/38.0" "-""HIT"
192.168.8.132 - - [08/Mar/2016:20:48:42 +0800] "GET /tomcat.png HTTP/1.1" 304 0 "-" "Mozilla/5.0 (X11; Linux x86_64; rv:38.0) Gecko/20100101 Firefox/38.0" "-""HIT"

posted @ 2016-03-08 20:29 笑看人生閱讀(2927) | 評(píng)論 (1) | 編輯收藏

使用MyCat實(shí)現(xiàn)MySQL的分片處理和讀寫(xiě)分離

摘要: 不講原理，直接上步驟： 1.下載MyCat，Mycat-server-1.4-release-20151019230038-linux.tar 2. 解壓到/usr/mycat目錄下： [root@localhost mycat]# tar -xvf Mycat-server-1.4-release-20151019230038-linux.t... 閱讀全文

posted @ 2016-02-27 15:28 笑看人生閱讀(3978) | 評(píng)論 (1) | 編輯收藏

笑看人生

導(dǎo)航

公告

常用鏈接

留言簿(12)

隨筆分類(lèi)

隨筆檔案

文章分類(lèi)

文章檔案

相冊(cè)

搜索

最新評(píng)論

閱讀排行榜

評(píng)論排行榜

Backbone學(xué)習(xí)筆記三

Backbone學(xué)習(xí)筆記二

Backbone學(xué)習(xí)筆記一

配置Nginx 緩存服務(wù)器

使用MyCat實(shí)現(xiàn)MySQL的分片處理和讀寫(xiě)分離