posts - 36, comments - 30, trackbacks - 0, articles - 3

2016年3月8日

Backbone学习笔记三

这部分介绍如何分视图显示前面讲的表格内容，Backbone中视图可以嵌套显示，例如前面例子中整个页面可以用一个视图来渲染，table表格可以用一个视图来渲染，表格中的一行可以用一个视图来渲染，这样就用三层视图，只要在以前的例子上稍作修改就可以实现这效果。

 
首先定义最里层的视图，表格中的行。通过tagName成员变量指定该视图对应的html元素，render方法中指定tr元素中显示的内容。当然也可以指定成员变量className的值，来指定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;
         }
     })

其次显示表格的视图。
     var StudnetCollectionView = Backbone.View.extend({
         
         tagName: 'table',
         
         render: function() {
            $(this.el).empty();
            
              $(this.el).append($('<tr></tr>')).html(_.map([
                  '学号','姓名','年龄'
              ],function(val, key){
                  return '<th>' + val + '</th>';
              }));
            
              $(this.el).append(_.map(this.collection.models,
                function(model, key){
                      return new StudentView({
                          model: model
                      }).render().el;
              }));
            
            return this;
         }
     });

最后显示整个页面的视图。
     var StudnetPageView = Backbone.View.extend({
         render: function() {
             $(this.el).html(new StudnetCollectionView({
                 collection: this.collection
             }).render().el);
         }
     })

同时修改一下显示部分的代码。

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

整个main.js的代码如下：

  (function($){
      $(document).ready(function(){
          
          var student1 = new Student({
              id: 10000,
              name: '王小二',
              age: 30
          });
          
         var student2 = new Student({
             id: 20000,
             name: '姚敏',
             age: 26
         });
         
         var student3 = new Student({
             id: 30000,
             name: '科比',
             age: 24
         });
         
         var studentCollection = new StudentCollection([
             student1,
             student2,
             student3
         ]);
         
         var studentPageView = new StudnetPageView({
             collection: studentCollection,
             el: 'body'
         });
 
         studentPageView.render();
         
     });
     
     //set model
     var Student = Backbone.Model.extend({
         //set default values.
         defaults: {
             id: 0,
             name: '',
             age: 0
         }
     });
     
     var StudentCollection = Backbone.Collection.extend({
         model: Student
     });
     
     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;
         }
     })

     //set view
     var StudnetCollectionView = Backbone.View.extend({
         
         tagName: 'table',
         
         render: function() {
            $(this.el).empty();
            
              $(this.el).append($('<tr></tr>')).html(_.map([
                  '学号','姓名','年龄'
              ],function(val, key){
                  return '<th>' + val + '</th>';
              }));
            
              $(this.el).append(_.map(this.collection.models,
                function(model, key){
                      return new StudentView({
                          model: model
                      }).render().el;
              }));
            
            return this;
         }
     });
     
     var StudnetPageView = Backbone.View.extend({
         render: function() {
             $(this.el).html(new StudnetCollectionView({
                 collection: this.collection
             }).render().el);
         }
     })
     
 })(jQuery);

posted @ 2016-04-04 17:40 笑看人生 阅读(157) | 评论 (0) | 编辑 收藏

Backbone学习笔记二

@import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css); 在学习笔记一中，一个视图渲染一个Sudent对象，如果存在多个Student对象怎么办，
在java中可以通过ArrayList来保存，比如List<Student> students = new ArrayList<>();
在Backbone中，也有类似于ArrayList的实现，只需要新建一个类，继承Collection就可以了，实现代码如下：
成员变量model指定集合中存放对象的类型，类似于java中范型。

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

对学习笔记一种代码稍加修改，修改代码如下：
新建三个Student对象，把这三个对象加入studentCollection对象中。

 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         ]);

至此集合模型已经新建完毕，那么如何通过视图来显示这个集合模型。

学习笔记一中新建的StudentView类的render方法做修改，同时在构建这个类对象时，稍作修改，修改如下：
把原来绑定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 = '学号: ' + 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内容如下：
 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>学号</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 笑看人生 阅读(835) | 评论 (0) | 编辑 收藏

Backbone学习笔记一

项目里用到Backbone＋marionet框架，由于以前没有接触过这些技术，经过一段时间的学习，觉得这技术还是很强大的，现把
学习体会总结一下，以便后面查询。

Backbone是一个基于MVC模式的前端JavaScript框架，用于前端页面开发。
可以从http://backbone.js上下载对应的版本。

使用Backbone，需要依赖其他一些js库。
jQuery  http://jquery.com
Underscore http://underscorejs.org

页面的head元素内容大体如下：
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是一个MVC框架，通过V来展示M的内容，C接受用户的请求，更新模型，然后刷新V。

下面以一个例子，来说明怎么建立一个简单的Backbone应用。

首先定义一个Model类Student, 需要继承Backbone.Model，这个类有三个成员变量，id，name，age，套用java中的叫法，其实可能
不应该这么称呼。

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


然后定义一个View类StudentView，需要继承Backbone.View, 给这个类的成员变量el赋值 body，指明在页面的body元素中渲染视图，
同时重写了渲染方法render，指明如何渲染，以下代码应用jQuery的语法，在el指定的元素内，显示指定的内容。
每个视图绑定一个Model，在View的所有方法中可以直接调用this.model获取当前View绑定的Model对象，如下例子
this.model.get('id'),注意获取model属性值时，不能直接使用thi.model.id

 1     var StudnetView = Backbone.View.extend({
 2         
 3         el: 'body',
 4         
 5         render:function(){
 6             var html = '学号: ' + this.model.get('id') + '.' +
 7                        '姓名: ' + this.model.get('name') + '.' +
 8                        '年龄: ' + this.model.get('age');
 9     
10             $(this.el).html(html);
11         }
12     });

定义完模型和视图类之类，接下来就是创建模型类和视图类对象，创建方法类似于java中创建对象。
新建一个model对象student，给对象属性指定值。
新建一个view对象，并且指定该view绑定的model对象。
调用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的代码就全部写完了，只要把这些新建Model和View的代码放到自定义的js文件中，
在页面加载时调用即可，这里自定义js文件名为main.js,内容如下：

 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 = '学号: ' + this.model.id + '.'
36                        '姓名: ' + this.model.name + '.'
37                        '年龄: ' + this.model.age;
38     
39             $(this.el).html(html);
40         }
41     });
42     
43 })(jQuery);

然后再新建一个index.html,内容如下：

 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>

最后，在浏览器中打开这个文件，就可以看到效果了。

posted @ 2016-04-02 10:06 笑看人生 阅读(2542) | 评论 (0) | 编辑 收藏

配置Nginx 缓存服务器

@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&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);

参照以下网址，在CentOS上安装Nginx
http://www.blogjava.net/jacky9881/archive/2016/02/19/429375.html

1.首先新建以下两个目录，用于存放缓存文件；
   [root@localhost nginx]# mkdir -p /data/nginx/proxy_temp_path
   [root@localhost nginx]# mkdir -p /data/nginx/proxy_cache_path

2.编辑nginx.conf文件
  在http模块增加如下内容，指定缓存文件的存放路径：
  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 ;  

注：通过keys_zone来指定缓存区的名字，在接下来的location模块配置中需要用到；
      20m是指定用于缓存的内存大小（由于本人虚拟机内存原因，设置了20M，生产环境中可以设置大一些，比如1G）；
      inactive=1d,代表缓存的数据如果超过一天没有被访问的话，则自动清除；
      max_size=3g是指定用于缓存的硬盘大小（由于本人虚拟机内存原因，设置了3g，生产环境中可以设置大一些，比如50G）；
      levels=1:2 指定该缓存目录中有两层hash目录，第一层目录为1个字母，第二层为2个字母，其中第一层目录名为缓存数据MD5编码的倒数第一个
     字母，第二层目录名为缓存数据MD5编码的倒数2，3两个字母；

 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，缓存时间12小时，如果12小时后，没有被访问，则自动被删除；
            ＃200表示 服务器已成功处理了请求，304表示 自从上次请求后，请求的网页未修改过
            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; ＃这个要设定，否则好像生成不了缓存文件

    }
＃用于清除缓存
 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

可以看到，缓存文件已经生成，注意缓存文件名最后三位和缓存文件夹的关系。

在浏览器地址栏输入：http://www.hw.com/purge/tomcat.png
页面显示如下信息，提示缓存文件已经被清除。

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"; 

同时在http模块打开ngnix的日志功能，默认是关闭状态。

    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
重复刷新几次，打开日志文件 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 笑看人生 阅读(2908) | 评论 (1) | 编辑 收藏