i() {
            return () => (
                console.log(this.axios)

            )

        },
        h() {
            return () => ({
                i() {
                    console.log(this.axios)
                }
            })
        },
        o() {
            return () => {
                return () => {
                    console.log(this.axios)
                }
            }
        },
        p() {
            return () => {
                return () => ({
                    i() {
                        console.log(this.axios)
                    }
                })
            }
        },
        u: () => ({
            i() {
                console.log(this.axios)
            }
        }),
        y: () => ({
            i: () => (console.log(this))
        }),
    }
    // es6 浏览器隐式调用 strict mode。u内部所在作用于是window但箭头函数内的i的调用caller和argument受到限制，所以返回underfined
a.axios = 1;
axios = "";

1. 卸载apache2
   之前卸载重新安装后找不到apache2.conf配置文件，测试使用一下方式卸载后可用。
   (1) $ sudo apt-get –purge remove apache2

   $ sudo apt-get --purge remove apache2.2-common
   $ sudo apt-get autoremove
   

(2) （关键一步）找到没有删除掉的配置文件，一并删除
$ sudo find /etc -name “apache“ -exec rm -rf {} \;
$ sudo rm -rf /var/www

然而,在安装成功准备运行的时候,却出现了问题如下所示:
[Fri Oct 14 20:27:03.977120 2016] [core:warn] [pid 4445] AH00111: Config variable ${APACHE_LOCK_DIR} is not defined

[Fri Oct 14 20:27:03.977236 2016] [core:warn] [pid 4445] AH00111: Config variable ${APACHE_PID_FILE} is not defined

[Fri Oct 14 20:27:03.977267 2016] [core:warn] [pid 4445] AH00111: Config variable ${APACHE_RUN_USER} is not defined

[Fri Oct 14 20:27:03.977273 2016] [core:warn] [pid 4445] AH00111: Config variable ${APACHE_RUN_GROUP} is not defined

[Fri Oct 14 20:27:03.977283 2016] [core:warn] [pid 4445] AH00111: Config variable ${APACHE_LOG_DIR} is not defined

[Fri Oct 14 20:27:03.979139 2016] [core:warn] [pid 4445:tid 140654039287680] AH00111: Config variable ${APACHE_LOG_DIR} is not defined

[Fri Oct 14 20:27:03.981408 2016] [core:warn] [pid 4445:tid 140654039287680] AH00111: Config variable ${APACHE_LOG_DIR} is not defined

[Fri Oct 14 20:27:03.981422 2016] [core:warn] [pid 4445:tid 140654039287680] AH00111: Config variable ${APACHE_LOG_DIR} is not defined

AH00526: Syntax error on line 74 of /etc/apache2/apache2.conf:

如果不能正常启动。
这个多半是以前卸载的时候没有卸载干净 重新完整卸载一遍就好。

在apache1时候静态php模块直接编译进核心mod模块
在apache2不再内置。
就意味着不用 Apache 内置的 mod_php，也就是要在 Apache 之外处理 php 程序的解释运行问题。看起来是多引入了一个额外的程序 PHP-FPM，既占 CPU 又占内存。但是这样一来，因为 Apache 可以专心处理除 php 之外的静态网页及元素，反而 httpd 进程本身占用的 CPU 和内存可以显著降低，从而从整体上降低资源消耗。

安装5.6 7.1的php后
默认源自动添加了apache2的模块。如果没有需要手动安装添加
例如
sudo apt-get install libapache2-mod-php5.6

apache2通过模块连接到php。

从PHP 5.6 => PHP 7.1

默认PHP 5.6在您的系统上设置，您需要切换到PHP 7.1。

Apache： –

$ sudo a2dismod php5.6
a2dismod关闭5.6模块
$ sudo a2enmod php7.1
a2enmod开启7.1的模块

$ sudo service apache2 restart
命令行：-

$ update-alternatives –set php /usr/bin/php7.1
同时用update-alternatives修改 为7.1的软连接。

从PHP 7.1 => PHP 5.6

默认PHP 7.1在您的系统上设置，您需要切换到PHP 5.6。

Apache： –

$ sudo a2dismod php7.1
$ sudo a2enmod php5.6
$ sudo service apache2 restart
命令行：-

$ sudo update-alternatives –set php /usr/bin/php5.6

如果在a2enmodphp5.6出现 “Module php5.6 does not exist”
多半是apache内 没有加载上模块
我们创建两个文件就好了

文件1
复制下面内容创建 php5.6.conf 在 /etc/apache2/mods-available/ :

文件2

复制下面内容创建php.load 同样在 /etc/apache2/mods-available/

LoadModule php5_module /usr/lib/apache2/modules/libphp5.so

保存好后退出输入
a2enmod php && /etc/init.d/apache2 restart

Ubuntu – 安装和部署php5.6 nginx php5.6-fpm

1.首先输入用户名和密码进行登录

2.升级更新软件包

sudo apt-get update

sudo apt-get upgrade

判断都填y

3.安装nginx

sudo apt-get install nginx

在浏览器输入你的ip地址测试是否安装成功

1. PHP
   apt-get -y update
   add-apt-repository ppa:ondrej/php
   apt-get -y update
   apt-get -y install php5.6 php5.6-mcrypt php5.6-mbstring php5.6-curl php5.6-cli php5.6-mysql php5.6-gd
   php5.6-xml php5.6-fpm

4.安装数据库

sudo apt-get install mysql-server php5-mysql

过程中要输入两次数据库的密码

输入mysql -u root -p 测试数据库安装是否成功

quit 可以退出

5.安装php-fpm

sudo apt-get install php5-fpm

6.配置php-fpm

sudo vi /etc/php5/fpm/php.ini

将;cgi.fix_pathinfo=1改成cgi.fix_pathinfo=0(还要去掉分号) 位置在全屏状态下的40%的第一行，看右下角

修改保存内容的方法自己查看vi 的操作

7.重启php-fpm

sudo service php5-fpm restart

8.解决nginx打开php文件总是显示下载框的问题

sudo vi /etc/nginx/sites-available/default

去掉注释保存

9.重启nginx

sudo service nginx restart

10.测试nginx是否解析php

cd /usr/share/nginx/html

sudo vi index.php

在index.php中输入

<?php phpinfo(); ?>

11.修改权限

1)首先进入服务器根目录 cd usr/share/nginx

2)再使用chmod sudo chmod 777 html/

那么在750物理宽度的iphone6上，实际宽度是750,1rpx =375/750= 0.5px

那么在640物理宽度的iphone5，实际宽度是640，物理宽度是320， 1rpx= 320/750 = 0.426666666666666px

所以如果你的设计稿假如是640的 就要用iphone5的像素计算，就要先转成实际像素， 然后把他750等分。

工作中我们的数值都是像素

所以要把设计稿的像素转成rpx

也就是说 实际像素320

页面有750份。

那么我们得到1px = 750/320像素 = 2.34375rpx

但我们的设计稿是640

那么我们的换算应该是1px = 750/640像素 = 2.34375rpx/2 = 1.171875rpx;

即在640下，60px的方块。这么计算

60*1.171875rpx; = 70.3125rpx

看似复杂换个角度想，无论任何屏幕都是750份，

那么你也可以估算出1等分大概是多少，计算出实际大小

这个与rem是类似的，

假如rem在375下，分成750份。 那么1rem = 1rpx =375/750= 0.5px
那么750下也是750份。
640下也是750份。

至于原理，
要始终明白一点
有个比值是不变的就是 分割数750，即基数。
即
我把面包分成5份，那么无论面包变大变小，那个分成5份占总体积的大小是不变。

而在这里，我们的的面包是320px大小，我分成了750份，1份大小即1rpx = 320/750。 那么当面包变成了640px,里面还是750份 一份大小 1rpx = 640/750。

好了
为了方便计算。
因为实际有些人喜欢多吃面包，所以不是每人都给一份，因为我有时候给某人多一点。而且我不可能都切完。我就用尺子量下我的面包宽度。要分一个100px的面包
那么640的面包 1px的面包大概是750/640 = 1.17rpx 如果我要给某人100px的面包，那么值就是1.17rpx *100 - 117rpx 也就是只需要给117份。

那么无论变大变小 无都不用管 他都是117份

但是如果是厘米的话我就估算不出来了。因为大小变了。

1. 获取请求的category的值，如果没有设置为0，并且转成整形。$categoryId = $this->request->param(‘category’, 0, ‘intval’);

1. 表达式
   $join = [

       ['__USER__ u', 'a.user_id = u.id']
   ];
   

   user表设置名称为u，判断条件是否相等

提前推是会报错的。

如果本地已经创建项目 需要合并下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

H:\zcll>git remote add zcll https://git.coding.net/da_/zcll.git
H:\zcll>git push -u zcll master
To https://git.coding.net/da_/zcll.git
 ! [rejected]        master -> master (non-fast-forward)
error: failed to push some refs to 'https://git.coding.net/da_/zcll.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
H:\zcll>git pull zcll master
From https://git.coding.net/da_/zcll
 * branch            master     -> FETCH_HEAD
fatal: refusing to merge unrelated histories
H:\zcll>git pull zcll master  --allow-unrelated-histories
From https://git.coding.net/da_/zcll
 * branch            master     -> FETCH_HEAD
Merge made by the 'recursive' strategy.
 README.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 README.md
H:\zcll>git push -u zcll master
Counting objects: 148, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (140/140), done.
Writing objects: 100% (148/148), 3.35 MiB | 673.00 KiB/s, done.
Total 148 (delta 19), reused 0 (delta 0)
remote: Resolving deltas: 100% (19/19), done.
To https://git.coding.net/da_/zcll.git
   857afd6..252f11c  master -> master
Branch master set up to track remote branch master from zcll.

以下学习需要面向对象基础知识和prototype继承了解

什么是继承

ClassJs提供了完整的继承机制。

为什么要继承

因为父类的功能是不完善的，随着项目的迭代，性能功能上明显不足。

这个时候多个项目栏目可能依赖这个父类，导致你不能修改。

即使修改也会导致项目错乱，一改全部都改。

所以这个时候为了能达到效率和灵活，我们需要用面向对象继承机制。

父类是不完善的，子类通过继承父类的所有，并对不足的予以修订。

所以继承的任务有两个

1. 子类获取父类所有功能    

2. 子类对父类不足的进行修改

继承还有两个特性即单根性和传递性

1. 单根性 （子类只有一个父类）
2. 传递性    （即子类可以作为父类不断传递下去）

教程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

//首先我们通过Class.extend创造基类person，
var Person = Class.extend({ 
  init: function(isDancing){ 
    this.dancing = isDancing; 
  }, 
  dance: function(){ 
    return this.dancing; 
  } 
}); 
var Ninja = Person.extend({ 
  init: function(){ 
    this._super( false ); 
  }, 
  dance: function(){ 
    // Call the inherited version of dance() 
    return this._super(); 
  }, 
  swingSword: function(){ 
    return true; 
  } 
}); 
var p = new Person(true); 
p.dance(); // => true 
var n = new Ninja(); 
n.dance(); // => false 
n.swingSword(); // => true

首先用Class.extend创建基类Person并传入prototype

1
2
3
4
5
6
7
8
9

{ 
  //prototype
  init: function(isDancing){ 
    this.dancing = isDancing; 
  }, 
  dance: function(){ 
    return this.dancing; 
  } 
}

因为js没有纯正的面向对象机制，所谓的继承是由prototype来实现。

当执行完Class.extend并传入prototype会返回一个构造函数给Person。这个函数的构造体是我们的Class的构造函数，prototype是我们传入的值。所以返回的构造函数，打印出来会是这样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

console.dir(Person)
function Class()
	arguments:null
	caller:null
	extend:function(prop)
	inject:function(prop)
	length:0
	name:"Class"
	prototype:Class
		constructor:function Class()
		dance:function()
		init:function(isDancing)
		__proto__:Object
	__proto__:function()
	<function scope>

当我们运行

1
2

var p = new Person(true); 
p.dance(); // => true

把true传入Person那么初始化函数init自动执行，dance所指向的就变成true。
这个时候用dance打印当前域的dance就变成了true

这个时候我们运行

1
2
3
4
5
6
7
8
9
10
11
12

var Ninja = Person.extend({ 
  init: function(){ 
    this._super( false ); 
  }, 
  dance: function(){ 
    // Call the inherited version of dance() 
    return this._super(); 
  }, 
  swingSword: function(){ 
    return true; 
  } 
});

用于继承Person这个类

这里的init里面的this._super(false)指向的是父类也就是Person内原型里面的init。
子类init和父类init是重名 ，这个时候子类会把对父类传递值得修改，传给父级。即等于
this._super( false ) == （this.dancing = false; ）

dance同理

swingSword因为父类没有，所以它来源于自己，直接添加到prototype。

所以运行后的Ninja的构造函数是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

console.dir(Person)
function Class()
	arguments:null
	caller:null
	extend:function(prop)
	inject:function(prop)
	length:0
	name:"Class"
	prototype:Class
		constructor:function Class()
		dance:function()
		init:function(isDancing)
		swingSword：function()
		__proto__:Class
	__proto__function:()
	<function scope>

这个时候运行

1
2
3

var n = new Ninja(); 
n.dance(); // => false 
n.swingSword(); // => true

发现我们的dance变成false 是因为我们修改了原来的类，同时添加了swingSword扩充了父类。

从而实现了继承的特性。

代码分析

ClassJs用于对象的继承，源代码比较小巧90行左右，非常精简。

1. fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
   test是为了判断字符串是否匹配。所以大部分浏览器对函数内部的数据如果是函数会执行toString保证运行。
   例如

   1 2 3 4 5 6 7 8 9 10 11

   var a = {} undefined /a/.test(a) false /a/.test('a') true /a/.test(function(){a}) true

   fnTest这里的目的就是为了判断当前浏览器是否支持函数toString，如果支持返回/\b_super\b/，否则返回 /.*/

2. 首先都在(function(){})()这个自执行里面，防止对全局污染。

3. 然后用 this.Class = function() {};创建构造函数Class.这里的this.Class的this是指向的window

4. 然后是在Class类上添加extend方法，该方法用于实现继承，传入一个prop对象，返回Class的原型+prop对象。下面对Class.extend里面代码分析

   1. var _super = this.prototype; 这里 _super就是Class的原型。用于保存原型。

   2. 1 2 3

      initializing = true; var prototype = new this(); initializing = false;

      这三段用于初始化，把实例化的Class赋值给prototype

5. 这是一段for循环用于把prop的属性复制给prototype

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

   for (var name in prop) { // Check if we're overwriting an existing function prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ? (function(name, fn) { return function() { var tmp = this._super; // Add a new ._super() method that is the same method // but on the super-class this._super = _super[name]; // The method only need to be bound temporarily, so we // remove it when we're done executing var ret = fn.apply(this, arguments); this._super = tmp; return ret; }; })(name, prop[name]) : prop[name]; }

我们分析下这一段
prototype[name] = typeof prop[name] == “function” && typeof _super[name] == “function” && fnTest.test(prop[name]) ? (function(name, fn){})(name, prop[name]):prop[name]

1. typeof prop[name] == "function" && typeof _super[name] == "function" 用于构造函数中的相应name是不是函数，传递过来的prop中的name是不是也是函数。
2. fnTest.test(prop[name]) 同样也是用于判断传来的prop是否有_super。
3. 如果上面两个都是true那么就把

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

var Class = {}
var result = {}
Class.extend =function(prop){
	var _super = this.prototype;
	for(var name in prop){
		   result[name] = /\b_super\b/.test(prop[name])?(function(name, fn) {
                    return function() {
                    	
                        var tmp = this._super; //把super存入tmp缓存防止覆盖
                        this._super = _super[name]; //把super方法复制给super,this._super已经变成父类name函数
//这里我们要运行fn即prop[name]，然后 return this._super指向当前。然后把return this._super();返回值赋值给result即ret 
// dance: function(){ 
// 
//   return this._super(); 
// }, 
// 例如父级是
//  init: function(isDancing){ 
//     this.dancing = isDancing; 
//   }, 
//  子是
//    init: function(){ 
//     this._super( false ); 
//   }, 
//  子实例化的时候会传入false，然后返回ret。。。。简单点就是如果是同名的那就继承。
                        var ret = fn.apply(this, arguments); 
                        this._super = tmp;
                        return ret;
                    };
                })(name, prop[name]):prop[name] //如果函数体里面有super那么就继承来至父级别。否则直接进行赋值
	}
	return 
}
 var Person = Class.extend({ 
  init: function(isDancing){ 
    this.dancing = isDancing; 
  }, 
  dance: function(){ 
    return this.dancing; 
  } 
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

(function() {
    var fnTest = /xyz/.test(function() { xyz; }) ? /\b_super\b/ : /.*/;
    // The base Class implementation (does nothing) 
    this.Class = function() {};
    // Create a new Class that inherits from this class 
    Class.extend = function(prop) {
        var _super = this.prototype;
        // Instantiate a base class (but only create the instance, 
        // don't run the init constructor) 
        initializing = true;
        var prototype = new this();
        initializing = false;
        // Copy the properties over onto the new prototype 
        for (var name in prop) {
            // Check if we're overwriting an existing function 
            prototype[name] = typeof prop[name] == "function" &&
                typeof _super[name] == "function" && fnTest.test(prop[name]) ?
                (function(name, fn) {
                    return function() {
                        var tmp = this._super;
                        // Add a new ._super() method that is the same method 
                        // but on the super-class 
                        this._super = _super[name];
                        // The method only need to be bound temporarily, so we 
                        // remove it when we're done executing 
                        var ret = fn.apply(this, arguments);
                        this._super = tmp;
                        return ret;
                    };
                })(name, prop[name]) :
                prop[name];
        }
        // The dummy class constructor 
        function Class() {
            // All construction is actually done in the init method 
            if (!initializing && this.init)
                this.init.apply(this, arguments);
        }
        // Populate our constructed prototype object 
        Class.prototype = prototype;
        // Enforce the constructor to be what we expect 
        Class.prototype.constructor = Class;
        // And make this class extendable 
        Class.extend = arguments.callee;
        // EXTENSION BY Draw2D.org to inject methods into an existing class to provide plugins or 
        // bugfixes for further releases 
        // 
        Class.inject = function(prop) {
            var proto = this.prototype;
            var parent = {};
            for (var name in prop) {
                if (typeof(prop[name]) == "function" && typeof(proto[name]) == "function" && fnTest.test(prop[name])) {
                    parent[name] = proto[name];
                    proto[name] = (function(name, fn) {
                        return function() {
                            var tmp = this.parent;
                            this.parent = parent[name];
                            var ret = fn.apply(this, arguments);
                            this.parent = tmp;
                            return ret;
                        };
                    })(name, prop[name]);
                } else {
                    proto[name] = prop[name];
                }
            }
        };
        return Class;
    };
})();

php artisan make:migration create_userNAME 后面跟行为 和表名

错误信息

1
2
3
4
5

[Illuminate\Database\QueryException]
SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes (SQL: alter table users add unique users_email_unique(email))
[PDOException]
SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes

原因
laravel匹配的是新版本的mysql.而旧版本的mysql长度不够。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;
class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Schema::defaultStringLength(191);
    }
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

Error Base table or view already exists: 1050 Table ‘users’ already exists

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::dropIfExists('users');
        Schema::create('users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('email')->unique();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

第一种，如果刚刚建立起table，并没有数据，可以选择rollback或者reset，即使用

$ php artisan migrate:rollback
1
或者

$ php artisan migrate:refresh
1
值得注意的是，rollback这个命令默认选项只会向之前恢复一次migration，而refresh将会把所有migration全部重置，相当于

$ php artisan migrate:reset
$ php artisan migrate

如果迁移已经执行，先回滚
php artisan migrate:rollback

然后删除迁移文件，运行
composer dump-autoload

php artisan migrate:reset

子网掩码使用与IP相同的编址格式，子网掩码为1的部分对应于IP地址的网络与子网部分，子网掩码为0的部分对应于IP地址的主机部分。将子网掩码和IP地址作”与”操作后，IP地址的主机部分将被丢弃，剩余的是网络地址和子网地址。例如，一个IP分组的目的IP地址为：10.2.2.1，若子网掩码为：255.255.255.0，与之作”与”运算得：10.2.2.0，则网络设备认为该IP地址的网络号与子网号为：10.2.2.0。

内网中192.168.1.199的前三组是网络号，后一组是主机号，子网掩码就是255.255.255.0

如果IP同样是192.168.1.199 那么子网掩码可以设成255.255.255.192吗，怎么理解

如果在同一个局域网出现这两种掩码可以相互通讯吗

作者：车小胖
链接：https://www.zhihu.com/question/56895036/answer/150953183
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

从前有一个地主，有256间房子，地主家的门牌号码是“192.168.1”，那么他家第一间房子的门牌号码是192.168.1.0，第二间是192.168.1.1，…第256间的编号是192.168.1.255。地主老了，需要把256间房子分给4个儿子，平均分配，每个儿子可以分64间。请来一位先生主持公道，先生这么来操作：192.168.1.0-192.168.1.63 分给大儿子192.168.1.64-192.168.1.127 分给二儿子192.168.1.128 -192.168.1.191 分给三儿子192.168.1.192-192.168.1.255 分给四儿子那如何来描述四个儿子的子网网段呢？192.168.1.0/26192.168.1.64/26192.168.1.128/26192.168.1.192/26/26是什么鬼？255.255.255.192的二进制是多少？ “11111111-11111111-11111111-11”大家数数一共多少个1？不用数了，是26个1，为了简化子网掩码的表示，用/26代替255.255.255.192。按位与运算我们来看大儿子的网段192.168.1.0/26是如何得到的？以大儿子的房间为例：192.168.1.0-192.168.1.63二进制表示：192.168.1.011000000.10101000.00000001.00000000192.168.1.6311000000.10101000.00000001.00111111首尾地址完全相同的是多少？11000000.10101000.00000001.00数数一共多少位？26位！那么用这个“192.168.1.0/26”就可以表示大儿子所有房间。对照房间的门牌号码“192.168.1.199”，很显然属于四儿子的。一个主机192.168.1.199/26 能否和直连主机192.168.1.200/24 通信？可以的，因为都是四儿子的房间。一个主机192.168.1.199/26 能否和直连主机192.168.1.1/24 通信？ 不可以，因为一个是大儿子的房间，一个是四儿子的房间，无法直连通信！

https://www.zhihu.com/question/43517806

本人学习之中碰到余下疑惑，百度、必应都没找到很明确的答案，希望有懂得的人解答一二，谢谢。
1.看别人说内网IP可以随意分配，比如你的外网是个C类的，内网IP可以设A类的。 要是能这样一个C类公网的内网不就能容纳很多主机了，又有人说一个C类网络只能容纳254台主机。
2.现在划分子网时借的主机位能不能全0或全1。 好像现在不用在乎这，可老版的书又不让用，求解答。
3.申请的公网IP是一个具体的IP地址用在与公网连接的路由器上还是一个网段。

我猜测申请的公网是一个具体的IP，用在与公网连接的路由器上，内网随意设置（个别IP除外），然后经过路由器时由路由器转换，不知道猜的对不对。

诚心求解。

谢谢各位的回答，可能是匿名的关系消息也没个提示，看了你们的解答对这几个问题目前没有疑惑了，十分感谢，祝你们万事如意。
还是得多看书，后来发现书上都有。。。

问题1:

A类地址：

1.0.0.0 /8 - 126.0.0.0/8

127.0.0.0/8 保留给local host

每个A类地址 256256256=16777216

B类地址：

128.0.0.0/16 - 191.255.0.0/16

每个B类地址 256*256= 65536

C类地址：

192.0.0.0/24 - 223.255.255.0/24

每个C类地址：256，以前考虑到需要一个保留做网段地址，一个做广播地址，所以一个C类能给主机使用的是254个地址

但是每个类都保留一些地址做私有地址，即常说的内网地址：

10.0.0.0/8

172.16.0.0/16 - 172.31.0.0/16

192.168.0.0/16

私有地址随便使用，没有任何限制。

A类、B类，C类除了以上的私有地址都为公网地址，即常说得外网地址。

ABC类公网地址只要路由可达，即可以互相通信，不是说只有A类和A类通信，C类和C类通信。

企业或者个人如果使用是私有地址，则需要在Internet 网关上作地址翻译NAT，将私有地址翻译成网关的公网地址。

问题2:

随着IPv4地址的的枯竭，设备商、运营商采用了/31位的子网掩码，以前使用的是/30位的子网掩码，比如100.1.1.0/30，只有100.1.1.1，100.1.1.2 可以使用，而100.1.1.0，100.1.1.3保留为网段地址、广播地址，白白浪费了；如果采用100.1.1.0/31，则100.1.1.0，100.1.1.1都可以使用，没有任何地址浪费！

问题3:

申请的IP地址既可以是一个，也可以是多个，即一个网段的多个地址，这要看自己的需求。

编辑于 2016-05-29

OOCSS 翻译过来意思是 面向对象的css

很多没有接触过面向对象，或者没有理解的朋友可能觉得oocss这个是框架。

其实面向对象分为 面向对象分析 面向对象编程 面向对象语言 面型对象思想 面向对象设计

看着挺复杂，就我的教学经验。初学只需要从思想和代码上认识就可以。

思想上，面向对象，是人认识客观事物的方式。是思想，就是思维方式。 和敲代码没有任何关系。

首先我们要区分类和对象。

我们把马这一种类叫 类。

把小红正在骑的马(客观存在，不以人的意识为转移) 这个叫实例，也就是我们的对象。

我们把大千世界真实存在的马，归为一类 给他们起了名字 叫马。 这是一种抽象概括的过程。

我们从马中找出创建我们的真实存在的马。这叫实例化。

简单点，我是真实存在的，但”人”这个名词是概念。所以我是对象，”人”是类。 我来源与类。

而我们的面向对象，就是面向的一个一个客观存在的实物。你看到的想到的是真实存在的(包括思想).比如还是我，我都能在这打字，是不是真实存在的。包括思想，你在想媳妇，这个想的动作，也是真实存在的。也是对象。

简单点，凡是能意思到，能感受到的都是对象。但人这个名词是我们抽象出来的，我们无从感受到它，它是一个类。

好吧，估计好多小伙伴脑细胞死一半了。我们再简单点。从自身的角度看世界。冥想一下。

我走在原始森林，看到了好多树，这些树都是真实存在的，这是你能感受到的。

回去你给小伙伴说，我看到了好多树， 你们这时候沟通时候，对方是没法意识到你看到的树，对它而言，这个树就是一个概念。也就是我们的类。

然后你继续给小伙伴说，其中在最中央有个撑天大树，很高很大。这个说的也是类。只是类的范围缩小了。

当小伙伴去过去，亲眼看到的时候，它客观存在，这个时候在他意识中就成了对象。

即必须是客观存在，能被意识到。如果意识不到，在人的角度，经过抽象就是一个类。

凡是抽象的都是类。凡是意识到的都是对象。

那梵高的话那么抽象它是类么？

首先来说，梵高抽象的是自己的感情，这里的抽象是他自己真实的感情，抽象的过程是对象，但他画里面的感情是被抽象过的，是一种概括的类。

好吧，现在脑细胞都死掉了吧。哈哈哈哈。其实我写的都是比喻，比较简单了。真的哦。不信你们可以看些教材。然后脑细胞会成负的。。。。

所以在这我建议大家，有个认识就可以，不影响编程。在随后漫长的人生中，细细体味。思想无法传递和跨越，不需要苛求对错。

下面我们说说编程吧

传统的道家学说吸收了阴阳五行。

阴阳化万物，天为阳，地为阴。一动，一静。衍生万物。

这和我们编程有啥关系呢。。

其实面相对象只是阴阳学说的一种表象。我们从头说起吧。

在编程之初，代码是比较简单和可以控制的。就是按顺序一两个人写出来。

但是随着硬件性能的成倍提高，用户对程序的要求也不断提高，对时间，性能，稳定也更苛刻。

传统面向过程(这个是目前大部分小白的写法，就是想到啥写啥，按顺序把需求完成)

无法预估项目，不适合多人开发，时间无法把控。而且维护困难，因为你是一个人从头到尾写的。

上面错了，下面业务可能全乱了。牵一发而动全身。哈哈哈哈哈

想让别人帮忙吧。但你业务都是从上到下写的。只好和小伙伴协商，分开写，导致代码臃肿，突然你写到一半。发现少约定个参数，然后你小伙伴也写了一半。然后就扯淡了。

所以我们要用面向对象编程来解决。

面向对象把业务拆分开。面对的不再是过程，而是对象。

而对象又包含，静态的属性和 动态的方法。

通过 动 和静 演化万众功能。

通过拆分动静， 静的重复利用，动的相同部分也可以利用，

oocss 准确的说 是一种编辑css的思想。又因为没有语法限制，所以片面点讲就是一种书写规范。

很高兴 你能闯过刀山火海来看到这里
我们继续

其实oocss是一种思想，所以每个人理解都是由一种偏差，所以为了学习，我们还是要有个规范
引用wiki的话

OOCSS的重点是将页面元素作为对象，给所有对象设置类名，将类作为样式表中的单个实体处理，并从它中获取。

在这篇文章中，我将通过介绍面向对象的css的概念以及如何帮助提高web页面的性能和可维护性来处理这一经常被忽略的领域。

与任何基于对象的编码方法一样，OOCSS的目的是鼓励代码重用，最终更快捷、更高效的样式表更容易添加和维护。
Object-oriented CSS (OOCSS) 是 CSS的扩展和升级

引用OOCSS之父Nicole Sullivan话来说， 面向对象的CSS有两个原则：

独立的结构和样式

视觉性的特征具有可重复性，比如红色方块连衣裙，那么红色方块这种装饰性的东西，是不是也可以用到红色方块墙体和衣服呢？

而结构往往具有独立和不可重复性。

独立的容器和内容

所谓容器 就是 最外层的盒子 容器本身不包含任何样式 他的样式由内容显示

这样内容的样式具有可以

OOCSS的两大原则

分离结构与皮肤

这意味着将重复的视觉功能(如背景和边框样式)定义为单独的“皮肤”，您可以与不同的对象进行混合和匹配，以实现大量的视觉多样性，但没有太多代码。请参阅模块对象及其皮肤。 分离结构和皮肤也意味着使用类来命名对象及其组件，而不是仅仅依赖于html的语义。例如，媒体对象被命名为类=“媒体”，其组件以类=“img”(用于图像/视频组件)和类=“bd”(为body/text组件)命名。 通过引用样式表中的这些类(表示，而不是直接样式化元素)，您的html可以灵活。例如，如果在未来几年中，一个新的媒体元素将会被起飞(例如<；svg>；)，它可以集成到html中，而不必触摸css。 分离容器和内容 从本质上讲，这意味着“很少使用位置依赖样式”。无论你把物体放在哪里，物体都应该是一样的。因此，不要使用特定的
进行样式化。myObject{.}，创建并应用一个类，该类描述了有关
的问题，如
。 这给了您保证：(1)所有的unclassed
s都会看起来相同；(2)所有具有类别类(称为mixin)的元素都会看起来相同； 3)当实际需要时，不需要为该例创建一个重写样式。myObject看起来像正常的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#button {
  width: 200px;
  height: 50px;
  padding: 10px;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
#box {
  width: 400px;
  overflow: hidden;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
#widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

上面的三个元素都有各自独有的样式，并且它们被应用于非可重用的ID选择器中，以定义样式。但他们也有很多风格的共同点。常见的样式可能存在于品牌目的或设计的一致性上。

有了一点规划和思考，我们就可以抽象出常见的样式，这样css就会变成这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.button {
  width: 200px;
  height: 50px;
}
.box {
  width: 400px;
  overflow: hidden;
}
.widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
}
.skin {
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

现在所有的元素都是使用类，通常的样式被组合成一个可重用的“皮肤”，而没有必要重复。我们只需要将“皮肤”类应用到所有元素中，结果将与第一个示例所生成的结果相同，除了代码少和用于进一步重用的possiblity之外。
SEPARATION OF CONTAINERS AND CONTENT LINK
在OOCSS GitHub页面上描述的第二个原则是将容器与其内容分离。为了说明为什么这是重要的，请采取以下css：

1
2
3
4
5
6
7

#sidebar h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .8em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

这些样式将应用于任何#sidebar h3标题。但是，如果我们想将完全相同的样式应用到在footer h3标题，除了不同字体大小和修改后的文本阴影之外，还会怎样呢？

1
2
3
4
5
6
7
8
9
10
11
12

#sidebar h3, #footer h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}
#footer h3 {
  font-size: 1.5em;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

或者我们可能会有更糟的事情：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#sidebar h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}
/* other styles here.... */
#footer h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

现在，我们不必要地复制样式，可能不会意识到它(或者根本不关心)。

通过OOCSS，我们被鼓励对不同元素中常见的内容进行更多的思考，然后将这些常见特性分离到模块或对象中，这些模块或对象可以在任何地方重用。

在上述示例中使用子代选择器声明的样式是不可重用的，因为它们依赖于特定的容器(在本例中是#sidebar或#footer)。 当我们使用OOCSS的基于类的模块构建时，我们确保我们的样式不依赖于任何包含元素。这意味着，无论结构上下文如何，它们都可以重用在文档的任何地方。

一个真实世界的例子

为了进一步说明如何使用OOCSS，我将使用类似于我在网站最近的重新设计中所做的事情。在对站点上的内部标头元素进行编码后，我意识到页眉内的基本结构样式可以在页面上的其他元素上重用。 因此，这里有一些我开始设计标题时所拥有的线条：

因此，这里有一些我开始设计标题时所拥有的线条：

.header-inside {
width: 980px;
height: 260px;
padding: 20px;
margin: 0 auto;
position: relative;
overflow: hidden;
}

这里列出的几种样式是唯一的。.header-inside元素。但其余部分可以形成一个可以重用的模块。因此，我可以将结构样式抽象成自己的可重用类。这是结

.globalwidth {
width: 980px;
margin: 0 auto;
position: relative;
padding-left: 20px;
padding-right: 20px;
overflow: hidden;
}

.header-inside {
padding-top: 20px;
padding-bottom: 20px;
height: 260px;
}

A fixed width
Centering using margin: auto
Relative positioning to create a positioning context for child elements
Left and right padding of 20px
Overflow set to “hidden” for clearfixing

固定宽度 用边缘定位：自动 相对定位为子元素创建定位上下文 左的左、右填充 溢出设置为“隐藏”为clearfixing。
现在，我们可以在任何需要相同特性的元素上使用这些样式，只需将该类添加到所需的元素中-而无需编写单独的CSS行。 对于我的站点，我在主内容元素和内页脚元素上重用了这些结构样式。根据设计，这些样式也可以适用于可能出现在页眉和内容之间的水平导航元素，也可以适用于任何具有固定宽度的其他元素，并且需要居中在页面上。 将“globalwidth”样式添加到这些元素后，标记将看起来类似如下：

有些人可能会觉得这种样式抽象会使html变得更加复杂，并且违背了将标记与呈现分离的原则。 但是，抛开任何关于如何影响标记的辩论，没有人可以质疑，这种抽象现在使跟踪和修改用于构造这三个元素的常用样式变得更加容易

媒体对象
OOCSS运动的先驱之一是nicole sullivan。她创建了一个名为媒体对象的可重用模块，正如她所解释的那样，它可以保存数百行代码。

媒体对象是OOCSS强大的一个很好的例子，因为它可以包含任何大小的媒体元素，它的右边有内容。虽然许多适用于其内部内容的样式-甚至媒体元素本身的大小-都可能会发生变化，但是媒体对象本身也有共同的基础样式，以避免不必要的重复

• Separate structure and skin（分离结构和主题）减少对 HTML 结构的依赖
• Separate Container and content（分离容器和内容）增加样式的复用性
  OOCSS好处

我已经提到了OOCSS的一些好处。
在这里，我将扩大这些。

更快的网站链接

OOCSS的性能效益应该是相当清楚的

。如果您在css中重复的样式较少，那么这将导致文件大小更小，从而更快地下载这些资源。

的确，标记将更加混乱，从而创建更大的html文件。

但是在许多情况下，标记性能的损失量将大大超过样式表性能中的增益量。

另一个记住的概念是，OOCSS wiki指的是性能赠品。这指的是，每当您在css中重用某些东西时，基本上都会创建一个新的样式元素，这些元素都是CSS代码的零行。对于大型的高流量项目，这些“免费”可能是一个关键的业绩增益。

可维护的STYLESHEETS链接 使用OOCSS，而不是一个不断增长的样式表，充满了特定的战争，您将有一套易于维护的模块，在这些模块中，自然级联扮演了重要角色。 当对现有站点进行添加时，您不会在样式表的底部添加新样式，而不必考虑以前所出现的内容。相反，您将重用现有样式，并根据现有规则集扩展样式。 使用这种forethought，在编写很少的css时创建整个页面是可能的。任何现有的css模块都可以作为所有新页面的基础，并且任何新的css都是最小的。在某些情况下，您甚至可以创建一个新的完全样式的页面，而不编码一个单行的css。 这些可维护性的好处也扩展到样式表的健壮性。

由于样式是模块化的，在新开发人员开始使用样式表时，基于OOCSS构建的页面可能会更少崩溃。 值得注意的要点 OOCSS在社区里引起了大量的讨论，引起了一些争议。在这里，我会试着消除几个常见的误解。 您仍然可以使用ids链接。 如果您决定以一种OOCSS方式工作，那么您的样式将主要基于css类，而您不会使用id选择器来设计元素。 因此，许多人错误地声称，OOCSS鼓励完全放弃使用IDs。但这并不是真的。 避免IDs的规则更具体地说，在选择器中不使用IDs。因此，使用OOCSS原则(从而避免使用id选择器的样式)是完全可以接受的，同时使用IDs中的使用用于javascript钩子和片段标识符。 当然，您可能有一个状态，您已经将一个id应用到一个元素，您知道该元素是页面中唯一的。因此，您可以通过避免向该元素添加类来保存几个字节，并使用选择器选择器来创建它。但即使在这种情况下，依赖于类也更安全，以确保您在将来不会遇到特定的问题。 处理小项目链接 对于较小的站点和应用程序，您可以肯定的是，OOCSS将是多余的。所以，不要把这篇文章作为OOCSS的宣传，在任何情况下都会有所不同，这取决于项目的情况。 尽管如此，我认为这是一个好主意，至少在你的项目中开始考虑OOCSS。一旦你得到了它的窍门，我相信你会发现在更大的项目上工作变得更容易，而这些项目的好处会更显著和更相关。 执行链接的一些指导方针 开始和OOCSS一起工作可能需要时间。我还在研究它，所以我不声称在这方面有所有的答案和经验。 但是这里有一些你可能想要开始做的事情，以帮助你进入一种长期的思维方式： 避免派生选择器(即不使用)。侧栏h3 避免IDs作为样式挂钩 避免将类附加到样式表中的元素(即不做div.header或h1.title)。 除了在一些罕见的情况下，避免使用！重要 使用林特来检查你的css(并知道它有选择和方法去处理它的疯狂) 使用css网格 显然有些时候，这些规则会被打破，但总的来说，这些规则是开发的好习惯，

并且会导致样式表变得更小，更易于维护。 跟随nicole sullivan的工作链接 如果你想继续学习OOCSS，这个行业中最重要的人是妮可沙利文。 除了在她的博客上定期发布张贴文章外，妮可还与随行的幻灯片做了一系列的介绍。下面是一些您可能想要检查的内容： 面向对象的css(Slideshow) 高性能网站：nicole sullivan(视频) 我们最好的做法是杀了我们(Slideshow) css膨胀(Slideshow) 结论链路 许多人害怕OOCSS的意识形态，因为它似乎违背了我们所学到的许多所谓的“最佳实践”。但是一旦了解使用OOCSS的长期好处，我相信很多开发人员都会成为转换者。 总的来说，我认为OOCSS在css开发方面有着光明的未来，这是一个概念，所有开发人员都应该开始融入他们的项目-至少在某种程度上-帮助创建更快的网页，更有效，更容易维护。

一个css对象由四个部分组成：

html，它可以是一个或多个Dom节点，
关于这些节点的样式的css声明，所有这些节点都以包装器节点的类名开始。
组件，如用于显示所需的背景图像和精灵，
以及 与对象关联的javascript行为、侦听器或方法。

这可能会令人困惑，因为每个css类都不一定是一个对象，但它可以是包装类的属性。

该对象是一个模块，由类mod表示。它包含四个属性节点(不能独立于模块独立运行，包括两个需要的区域，内部和正文，两个可选区域，头部和脚)。

OOCSS的性能效益有两方面： 对css代码进行重重用，因此需要使用更少的css代码，这意味着： 较小的文件，因此更快的传输 在网站的大多数页面中需要的css代码的百分比更大，可能会被重用，并且可能被浏览器缓存。

在较小的程度上，浏览器部分的repaints和布局计算较少。 在一个页面上，更多的css规则被重用，渲染引擎花费的时间越少计算“计算值”

基本上，一个css“对象”是一个重复的视觉模式，可以抽象成一个独立的html、css和可能的javascript 的片段。然后，该对象可以在整个站点上重用。 例如，在OOCSS框架中，媒体对象描述包含固定大小媒体元素(如图像或视频)以及其他可变大小内容(例如文本)的内容块。另一个示例是模块对象，该对象描述一个具有必需的主体区域和可选页眉和页脚区域的通用内容块。

作为架构师，您应该编写结构对象；设置圆角框的创建方式，将所有的显示参数设置为角点或其他特性，并处理浏览器差异。新手为这些模块编写皮肤(边框、颜色、背景图片等)。 我使用面向对象方法构建了大型站点(页面的1000s，数百万访问者)。它的规模很好，当正确做好时，它意味着一个新手正在工作的各个组件都是相对可预测的。代码审查很容易，因为对于可接受的扩展对象的方法，有明确的规则。这种反馈使新开发人员能够快速地生产。 我在FullSIX(法国的一个网络营销机构)管理了一支前端开发人员团队，他们是我曾经共事过的最有才华的人之一。在某种程度上，我们的成功意味着，我们的工作比我们所能处理的多得多。

聘请前端专家是非常困难的(没有学校的这些东西！)
因此，我开始了一个内部实习项目，那些对探索代码感兴趣的设计师(但几乎没有以前的经验)可以成为我们团队的初级成员一个月的工作。

第一周：他们学到了语义，并从现有的css中构建了html。学习构建新页面，无需编写更多的css、html语法、多个类、验证、语义、介绍代码审查等。
第二周：他们在一周内建立简单的内容对象(标题、列表等)。学习css语法，如何扩展对象、颜色、%大小的文本等等。
第三周：他们正在建造块皮。边界，颜色，背景图像，基本定位，精灵。他们与一位令人惊叹的高级开发人员合作，回答了一大堆问题，并帮助他们扩大学习曲线。他也碰巧是一个非常有天赋的代码审查员。
第四周：他们是我团队中富有生产力的成员，他们的皮肤是生产准备的。 他们的代码是在客户端网站上运行的。它和高级开发人员写的一样好，也许更好，因为他们没有必要去学习坏习惯。*)

开始：我如何处理这些文件？ 三个文件，libraries.css(重置和字体从Yui)，grids.css和template.css已经准备好，其他的仍然非常不稳定。 通过下载按钮下载整个项目 打开template.html并将其保存为一个新文件。 通过扩展这些对象来调整列的数量和宽度。即使您有不同的列的页面，您只需要一个模板，因为这些列都是对象，类似于其他任何东西。您可以将它们视为可选区域，您可能有0-n左列。有关更多信息，请参见模板文档。 使用网格将任何内容区域拆分为小块。请参阅网格文档获取更多信息。 添加内容。提示：这也应该是oo。 复制和粘贴模块和聊天泡泡，在那里添加内容 基于“mod_skins.css”构建新的模块样式 如何将此部署在一个现场站点上？ 请记住，css仍然在发展，我可能会根据我收到的反馈来改变事情。 我已经将css文件拆分成网格和模板等模块。在实际站点上，您应该删除不必要的评论和减少http请求，或者站点将是超级慢。这意味着您需要将css文件合并到一个更大的文件中。我使用嵌套注释，以保持css的组织。最后，运行一个css minifier作为push/部署过程的一部分，以删除杂散注释。

OOCSS的主要原则
分离结构和皮肤
这意味着将重复的视觉特性（如背景和边框样式）定义为单独的“皮肤”，您可以与各种对象混合和匹配，以获得大量的视觉变化，而无需太多代码。看到模块对象和它的皮。
分离结构和皮肤也可以使用类的命名你的对象和组件，而不是仅仅依靠HTML语义。例如，媒体对象命名为class=“media”，其成分为class=“img”（对image/video组件）和class=“BD”（body/text组件）。
在你的样式表引用这些类（说的，而不是直接造型元素），HTML可以灵活。例如，如果一个新的媒体元素要在未来几年内（如<< SVG >），它可以被集成到HTML而不必接触CSS。

Separating structure and skin can also mean using classes to name your objects and their components, rather than relying solely on the semantics of HTML. For example, the media object is named with class=”media”, and its components are named with class=”img” (for the image/video component) and class=”bd” (for the body/text component).

By referencing these classes in your stylesheets (say, rather than directly styling the element), your HTML can be flexible. For instance, if a new media element were to take off in the next few years (e.g.

独立的容器和内容
从本质上讲，这意味着“很少使用位置相关的风格”。一个对象应该看起来一样，不管你把它放在哪里了。所以造型特定

，MyObject H2 {…}，创建和应用类的描述问题的

，像＜H2 class=“类别”>。
这给你的保证：（1）所有未归类的

的看起来都是相同的；（2）与类的所有元素（称为一个mixin）看起来都是相同的；3）你不需要的情况下创建一个重写的风格时，你真的想要的MyObject H2。像正常

。

Essentially, this means “rarely use location-dependent styles”. An object should look the same no matter where you put it. So instead of styling a specific

with .myObject h2 {…}, create and apply a class that describes the

in question, like

.

This gives you the assurance that: (1) all unclassed

s will look the same; (2) all elements with the category class (called a mixin) will look the same; and 3) you won’t need to create an override style for the case when you actually do want .myObject h2 to look like the normal

.

目录：

1iScroll的产生2iScroll的使用方法3iScroll应该如何实例化4iScroll中的参数5iScroll中的方法
概述：

大家在日常工作中最常用的插件是什么，jQurey？Lazyload？但是这些都是在PC端，但是在移动端最常用的插件莫过于iScroll了，iScroll到底是什么东西，应该怎么用？iScroll是个很强大的插件，我也只是略懂皮毛，这里我们简单的介绍一下。
iScroll的产生：

iScroll的产生完全是因为移动版webkit浏览器，例如在iPhone，Android 的移动设备上。
iScroll的使用方法：

iScroll的原理是外层有一个溢出隐藏（overflow:hidden;）的DOM，然后这个区域内的第一个DOM结构会被实例化，其包裹的内容可以纵向或者横向的滚动，所以在使用iScroll的时候，滚动元素要尽量的简单，减少DOM个数，减少嵌套，因为DOM结构越是复杂iScroll运行起来就越是吃力，有可能会造成某些节点显示不正常的情况。 所以，推荐使用的DOM结构如下：

1
2
3
4
5
6
7
8
9

<div id="wrapper">//overflow:hidden;
    <ul>
    //只有第一个DOM结构（ul）被实例化，这个DOM可以纵向或者横向的滚动，
    //多出的内容会被wrapper的样式hidden。
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

注意：再次重申，只有wrapper里的第一个子元素（ul）才可以被实例化滚动，并且要结合外层的DOM（wrapper）才能实现滚动。
如果 wrapper中有多个ul怎么办？很简单，记住那句话，只有wrapper里的第一个子元素（ul）才可以被实例化滚动：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="wrapper">//overflow:hidden;
    <div id="first">
        //只有第一个DOM结构(ul)被实例化，这个DOM可以纵向或者横向的滚动，
        //多出的内容会被wrapper的样式hidden
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ul>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
</div>

看到了吧，只有first会被实例化。 注意：这里第一个DOM结构的ID（first）可以不写，我只是为了方便大家识别才写了个ID，但是最外层的ID（wrapper）一定要写，因为在JS实例化的时候需要填写这个ID：

1

var myScroll = new iScroll("wrapper");

iScroll应该如何实例化：

既然说道了实例化，我们应该在什么时候实例化？据说实例化的方法有很多，但是我没用过，我只说一种：

（1）在HTML（uw3c.html）页面底部（body之后html之前）加载iscroll.js与当前页面的uw3c.js,这样能确保HTML的DOM结构能加载出来。

（2）在JS插入页面DOM结构和数据之前实例化iScroll，也就是在JS的最开始实例化，因为之后可能会使用JS来插入DOM或者数据，这样以来能确保在插入数据之前iScroll已经实例化了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

HTML://HTML结构
<html >
    <body>
     ...code...
    </body>
     //插入iscroll.js文件
   <script type="text/javascript" src="js/iscroll.js" > </script >
    //插入本页面JS文件
  <script type="text/javascript" src="js/uw3c.js" > </script >
</html>
 JS://JS文件内容
 var myscroll;
 function iscroll(data){
      //实例化iScroll
     myscroll=new iScroll("wrapper");
     pageData(data);
 }
 function pageData(obj){
     $("body").html(obj);
     myscroll.refresh();//当DOM结构发生变化的时候，需要刷新iScroll
 }
 iscroll("<div>pagedata</div>");

iScroll中的参数：

在实例化iScroll的时候，可以传入两个参数，第一个参数是实例化的外层的DOM的ID，第二个参数是iScroll执行方法的对象：

1

var myscroll=new iScroll("wrapper",{hScrollbar:false});

或者

1
2
3
4
5
6

var opts = {
                vScroll:false,//禁止垂直滚动
                snap:true,//执行传送带效果
                hScrollbar:false//隐藏水平方向上的滚动条
            };
var myscroll = new iScroll("wrapper",opts);

第二个参数内容如下，这个参数会控制iScroll的效果：

1
2
3
4
5
6
7
8
9
10
11
12

hScroll        false 禁止横向滚动 true横向滚动 默认为true
vScroll        false 禁止垂直滚动 true垂直滚动 默认为true
hScrollbar     false隐藏水平方向上的滚动条
vScrollbar     false 隐藏垂直方向上的滚动条
fadeScrollbar  false 指定在无渐隐效果时隐藏滚动条
hideScrollbar  在没有用户交互时隐藏滚动条 默认为true
bounce         启用或禁用边界的反弹，默认为true
momentum       启用或禁用惯性，默认为true，
               此参数在你想要保存资源的时候非常有用
lockDirection  false取消拖动方向的锁定，
               true拖动只能在一个方向上（up/down 或者left/right）
iScroll中的方法：

当然在第二个参数中，也有一些方法可以执行：

(1)scrollTo(x, y, time, relative)方法：传入4个参数：X轴滚动距离，Y轴滚动距离，效果时间，是否相对当前位置。所以例如：

1
2
3
4

//在200毫秒的时间内，Y轴向上滚动100像素；
uw3c.scrollTo(0, -100, 200)
//在200毫秒的时间内，相对于当前位置，X轴向左滚动100像素；
uw3c.scrollTo(-100, 0, 200, true)

(2)refresh()方法：在DOM结构发生改变之后，需要刷新iScroll，否则滚动插件会实例化的不准确：

uw3c.refresh();//刷新iScroll

(3)onPosChange,有没有一个方法能返回位置的变化？你可以查询一下自己所用的iScroll中有没有onPosChange方法：

1
2
3
4
5
6
7
8

onPosChange:function(x,y){
    if(y < -200){
     //如果Y周向上滚动200像素，$("#uw3c")就显示，否则就隐藏。
        $("#uw3c").show();
    }else{
        $("#uw3c").hide();
    }
}

（4）onScrollEnd：滚动结束时执行的事件，如果想在滚动结束时出发摸个事件，这个方法就拍上用处了：

1
2
3
4

//滚动结束后，执行的方法，滚动后会出现提示框alert("uw3c.com")
onScrollEnd:function(){
    alert("uw3c.com");
}

（5）onRefresh：在DOM结构发生改变之后，需要刷新iScroll，否则滚动插件会实例化的不准确，onRefresh是刷新完iScroll会执行的方法。
（6）onBeforeScrollStart：开始滚动前的时间回调，默认是阻止浏览器默认行为 。
（7）onScrollStart：开始滚动的回调。
（8）onBeforeScrollMove：在内容移动前的回调。
（9）onScrollMove：内容移动的回调。
（10）onBeforeScrollEnd：在滚动结束前的回调。
（11）onTouchEnd：手离开屏幕后的回调。
（12）onDestroy：销毁实例的回调。

body {
overflow:hidden;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

// requestAnimationFrame polyfill by Erik Möller.
if (!Date.now)
    Date.now = function() { return new Date().getTime(); };
(function() {
    'use strict';
    
    var vendors = ['webkit', 'moz'];
    for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
        var vp = vendors[i];
        window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
        window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']
                                   || window[vp+'CancelRequestAnimationFrame']);
    }
    if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
        || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
        var lastTime = 0;
        window.requestAnimationFrame = function(callback) {
            var now = Date.now();
            var nextTime = Math.max(lastTime + 16, now);
            return setTimeout(function() { callback(lastTime = nextTime); },
                              nextTime - now);
        };
        window.cancelAnimationFrame = clearTimeout;
    }
}());
var getRandomColor = function(){
  return '#'+(Math.random()*0xffffff<<0).toString(16);
}
var canvas = document.getElementById("motion"), 
    c = canvas.getContext("2d"),
    particles = {},
    particleIndex = 0,
    particleNum = 0.2;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function Particle(){
  this.x = canvas.width/2;
  this.y = canvas.height/2;
  this.vx = Math.random() * 6 - 3;
  this.vy = Math.random() * 4 - 2;
  this.growth = ( Math.abs(this.vx) + Math.abs(this.vy) ) * 0.007;
  particleIndex++;
  particles[particleIndex] = this;
  this.id = particleIndex;
  this.size = Math.random() * 1;
  this.color = getRandomColor();
}
Particle.prototype.draw = function(){
  this.x += this.vx;
  this.y += this.vy;
  this.size += this.growth;
  if(this.x > canvas.width || this.y > canvas.height){
    delete particles[this.id];
  }
  c.fillStyle = this.color;
  c.beginPath();
  c.arc(this.x, this.y, this.size,0*Math.PI,2*Math.PI);
  c.fill();
};
function animate(){
  requestAnimationFrame( animate );
  
  c.fillStyle = "#000";
  c.fillRect(0,0,canvas.width,canvas.height);
  if(Math.random() > particleNum){
    new Particle();
  }
  for(var i in particles){
    particles[i].draw();
  }
}
requestAnimationFrame( animate );

反馈
Feedback

效率
Efficiency

可控
Controllability

关于导航的设计

如果导航较多 可以左侧分类
如果导航较少 可以顶部导航

主色 辅助色 中性色
主场景 主要表现
副场景 表现用途
边框 文字 表现层次

var arr = [2, 3, 4];
var checkNum = 2;
arr.filter((function(checkNum) {

    return function(num) {

        return num > checkNum;
    }
})(checkNum))

isright = !false;
var cb = isright? (isright++) : 10;
console.log(cb)
console.log(isright)

methods: {
queryData(queryString, cb) {
let citys = this.citys
var result = queryString ? citys.filter(((queryString) => {
return (city) => {
return city.value.indexOf(queryString.toLowerCase()) == 0
}
})(queryString)) : citys
cb(result)
},
selectCity(item) {
console.log(item)
}

}

http://www.cnblogs.com/libin-1/p/6254390.html插件开发

promise

https://www.kancloud.cn/yunye/axios/234846

webpack-merge

url-loader

vuex
vue把事件驱动 和 行为变化 分离开

因为页面多，行为变化具有公共调控性。 所以 行为从事件分离开。 虽然麻烦 但是对于多页面挺有用

actions

mutations

为了保证数据的完整和安全，mysql设计了主从同步，一个挂掉还可以用另个。最近重构论坛，想来改成主从吧。担心失误，就先拿docker练练手。
有错误或者不理解的地方，可以联系本人邮箱sunhaokk@qq.com。

通过本文实际你会操作到。

1. mysql的主从同步
2. docker镜像和容器的创建
3. docker容器间的数据传递
4. mycat入门

以下需要大于100的智商和mysql基础docker基础，linux基础。

没有也没事，就是看着会有点吃力。

环境是centos，mycat是1.6.docker是1.12.6

下载mysql镜像。

docker pull mysql


ps:如果下载太慢，请添加腾讯源,依次执行

1

echo "OPTIONS='--registry-mirror=https://mirror.ccs.tencentyun.com'" >> /etc/sysconfig/docker

1

systemctl daemon-reload

1

service docker restart

或者直接去阿里仓库下https://dev.aliyun.com/search.html把上面的--registry-mirror=https://mirror.ccs.tencentyun.com换成你的专属源就可以

下载完输入

docker images

1
2

REPOSITORY                  TAG                 IMAGE ID            CREATED             SIZE
docker.io/mysql             latest              44a8e1a5c0b2        8 days ago          407 MB

利用mysql镜像，创建用于主从同步的两个新镜像。

我们当前所在的服务器叫宿主服务器，

我们要利用docker 虚拟两个docker容器服务器，一个主服务器，一个从服务器。

创建master(主)和slave(从)两个文件夹

/usr/mysql/master
/usr/mysql/slave

在master和slave文件夹下 创建 Dockerfile 内容为

1
2
3
4
5
6
7

FROM mysql
COPY my.cnf /etc/mysql/  
EXPOSE 3306
CMD ["mysqld"]

在master文件夹下 创建 my.cnf 内容为

1
2
3
4
5

[mysqld]
log-bin=mysql-bin   //[必须]启用二进制日志
server-id=1//[必须]服务器唯一ID，默认是1，一般取IP最后一段，这里看情况分配

在slave文件夹下 创建 my.cnf 内容为

1
2
3
4
5

[mysqld]
log-bin=mysql-bin   //[必须]启用二进制日志
server-id=2//[必须]服务器唯一ID，默认是1，一般取IP最后一段，这里看情况分配

切换到master目录下构建master/mysql镜像

docker build -t master/mysql .

（命令最后有个.，不要忘记，代表当前目录）

然后切换到slave目录下构建slave/mysql镜像

docker build -t slave/mysql .

（命令最后有个.，不要忘记，代表当前目录）

查看是否创建成功

1
2
3
4
5

[root@VM_118_220_centos ~]# docker images
REPOSITORY                  TAG                 IMAGE ID            CREATED             SIZE
slave/mysql                 latest              8c496048d7ba        About an hour ago   407 MB
master/mysql                latest              7be30b0b631b        2 hours ago         407 MB
docker.io/mysql             latest              44a8e1a5c0b2        8 days ago          407 MB

用镜像创建容器

1
2
3

docker run -p 3306 --name mysql-master -e MYSQL_ROOT_PASSWORD=mysql -d master/mysql
docker run -p 3306 --name mysql-slave -e MYSQL_ROOT_PASSWORD=mysql -d slave/mysql

从这里开始，建议打开两个终端窗口，方便操作。

master终端执行

1
2
3

docker exec -it mysql-master bash
mysql -uroot -p

输入密码mysql进入到mysql环境

slave终端执行

1
2
3

docker exec -it mysql-slave bash
mysql -uroot -p

输入密码mysql进入到mysql环境

mysql主从配置

mysql配置

在主容器mysql中输入以下命令：

1
2
3

mysql>GRANT REPLICATION SLAVE ON *.* TO 'user'@'192.168.99.100' IDENTIFIED BY 'mysql';（指定ip）或者
mysql>GRANT REPLICATION SLAVE ON *.* to 'user'@'%' identified by 'mysql';（所有ip）

然后查看主容器数据库状态：

1
2
3
4
5
6
7
8

mysql> show master status;
+------------------+----------+--------------+------------------+-------------------+
| File             | Position | Binlog_Do_DB | Binlog_Ignore_DB | Executed_Gtid_Set |
+------------------+----------+--------------+------------------+-------------------+
| mysql-bin.000003 |     1338 |              |                  |                   |
+------------------+----------+--------------+------------------+-------------------+
1 row in set (0.00 sec)

记录File 的值和Position的值。

下面要用到，到这里为止，主库千万不要再做任何操作，防止状态改变。

然后我们配置一下从库

查看master/mysql的对外端口号

1
2
3
4

docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                     NAMES
8d1e3b87d499        slave/mysql         "docker-entrypoint.sh"   2 hours ago         Up 2 hours          0.0.0.0:32769->3306/tcp   mysql-slave
980e5ea48152        master/mysql        "docker-entrypoint.sh"   2 hours ago         Up 2 hours          0.0.0.0:32768->3306/tcp   mysql-master

0.0.0.0:32768->3306/tcp其中32768为master的端口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

mysql>change master to
master_host='x.x.x.x',
master_user='user',
master_log_file='mysql-bin.000003',
master_log_pos=1201,
master_port=32768,
master_password='mysql';
Query OK, 0 rows affected, 2 warnings (0.03 sec)
mysql> start slave;
Query OK, 0 rows affected (0.01 sec)

master_host=’x.x.x.x’ //这里填master主机ip

master_log_file=’mysql-bin.000003’, //这里填写File 的值

master_log_pos=1338,//这里填写Position的值。

mysql> start slave;//启动从服务器复制功能

如果不小心配置错,输入mysql> stop slave;然后重新录入一遍

1
2
3
4
5
6
7
8
9
10
11
12
13

mysql>change master to
master_host='x.x.x.x',
master_user='user',
master_log_file='mysql-bin.000003',
master_log_pos=1201,
master_port=32768,
master_password='mysql';

就可以了

检查主从连接状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

mysql> show slave status\G
*************************** 1. row ***************************
               Slave_IO_State: Waiting for master to send event
                  Master_Host: x.x.x.x
                  Master_User: user
                  Master_Port: 32768
                Connect_Retry: 60
              Master_Log_File: mysql-bin.000003
          Read_Master_Log_Pos: 1338
               Relay_Log_File: 8d1e3b87d499-relay-bin.000002
                Relay_Log_Pos: 1221
        Relay_Master_Log_File: mysql-bin.000003
             Slave_IO_Running: Yes
            Slave_SQL_Running: Yes
              Replicate_Do_DB: 
          Replicate_Ignore_DB: 
           Replicate_Do_Table: 
       Replicate_Ignore_Table: 
      Replicate_Wild_Do_Table: 
  Replicate_Wild_Ignore_Table: 
                   Last_Errno: 0
                   Last_Error: 
                 Skip_Counter: 0
          Exec_Master_Log_Pos: 1338
              Relay_Log_Space: 1435
              Until_Condition: None
               Until_Log_File: 
                Until_Log_Pos: 0
           Master_SSL_Allowed: No
           Master_SSL_CA_File: 
           Master_SSL_CA_Path: 
              Master_SSL_Cert: 
            Master_SSL_Cipher: 
               Master_SSL_Key: 
        Seconds_Behind_Master: 0
Master_SSL_Verify_Server_Cert: No
                Last_IO_Errno: 0
                Last_IO_Error: 
               Last_SQL_Errno: 0
               Last_SQL_Error: 
  Replicate_Ignore_Server_Ids: 
             Master_Server_Id: 1
                  Master_UUID: cd327a00-5e18-11e7-98f7-0242ac110006
             Master_Info_File: /var/lib/mysql/master.info
                    SQL_Delay: 0
          SQL_Remaining_Delay: NULL
      Slave_SQL_Running_State: Slave has read all relay log; waiting for more updates
           Master_Retry_Count: 86400
                  Master_Bind: 
      Last_IO_Error_Timestamp: 
     Last_SQL_Error_Timestamp: 
               Master_SSL_Crl: 
           Master_SSL_Crlpath: 
           Retrieved_Gtid_Set: 
            Executed_Gtid_Set: 
                Auto_Position: 0
         Replicate_Rewrite_DB: 
                 Channel_Name: 
           Master_TLS_Version: 
1 row in set (0.00 sec)

这两个必须是Yes 为No 或者connect说明没有连接上

Slave_IO_Running: Yes

Slave_SQL_Running: Yes

测试主从连接

注意设置主从后，操作只能在master终端上，slave上的操作不会同步到master上。

登陆master终端，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

mysql> create database sunhao;
Query OK, 1 row affected (0.01 sec)
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sunhao             |
| sys                |
+--------------------+
5 rows in set (0.00 sec)
mysql> use sunhao
Database changed
mysql>  create table sunhao(id int(3),name char(10));
Query OK, 0 rows affected (0.04 sec)
mysql> insert into sunhao values(1,'xiaoshuai');
Query OK, 1 row affected (0.01 sec)
mysql> select * from sunhao;
+------+-----------+
| id   | name      |
+------+-----------+
|    1 | xiaoshuai |
+------+-----------+
1 row in set (0.00 sec)

登陆slave服务器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sunhao             |
| sys                |
+--------------------+
5 rows in set (0.00 sec)
mysql> use sunhao
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A
Database changed
mysql> select * from sunhao;
+------+-----------+
| id   | name      |
+------+-----------+
|    1 | xiaoshuai |
+------+-----------+

如果主服务器已经存在应用数据，则在进行主从复制时，需要单独复制处理（注意此操作，如果对从服务器单独录入的数据，会被覆盖掉。）：

这里我们做一次完整的测试

(1)在主服务器数据库插入新的数据，并进行锁表操作，不让数据再进行写入动作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

mysql> insert into sunhao values(2,'xiaoshuai');
Query OK, 1 row affected (0.01 sec)
mysql> select * from sunhao;                   
+------+-----------+
| id   | name      |
+------+-----------+
|    1 | xiaoshuai |
|    2 | xiaoshuai |
+------+-----------+
2 rows in set (0.00 sec)
mysql> FLUSH TABLES WITH READ LOCK;
mysql> show full processlist; 
`

(2)退出mysql，用mysqldump备份数据文件到/var/lib,然后顺便多余的用tar打包一下玩。哈哈。

1
2
3
4
5
6
7
8

mysql> exit
Bye
root@980e5ea48152:/var/lib/mysql# mysqldump -u root -p  sunhao > /var/lib/sunhao.dump    
Enter password: 
root@980e5ea48152:/var/lib# tar -zcvf ./sunhao.dump .tar  ./sunhao.dump

(3)打开宿主服务器，复制mysql主服务器文件sunhao.dump.tar。到宿主服务器

1
2
3
4
5
6
7
8
9
10
11
12

[root]# docker ps 
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                     NAMES
8d1e3b87d499        slave/mysql         "docker-entrypoint.sh"   4 hours ago         Up 4 hours          0.0.0.0:32769->3306/tcp   mysql-slave
980e5ea48152        master/mysql        "docker-entrypoint.sh"   4 hours ago         Up 4 hours          0.0.0.0:32768->3306/tcp   mysql-master
mkdir -p /var/mydata
docker cp 980e:/var/lib/sunhao.dump.tar /var/mydata/
cd /var/mydata
[root@VM_128_230_centos mydata]# ls
sunhao.dump.tar

解释:docker cp 980e:/var/lib/sunhao.dump.tar /var/mydata/

980e是980e5ea48152的缩写。保证不重复简写就可以

980e:/var/lib/sunhao.dump.tar 意思就是选中的容器下面你的文件下的sunhao.dump.tar文件

/var/mydata/ 目标文件

(4)在宿主主机上输入

[root]# docker cp /var/mydata/sunhao.dump.tar 8d1e3b87d49936414c0e91ffdc60a054e7f4ef8b15baee295350565519abba0e:/var/lib/

(5)在从服务器上输入

1
2

root@8d1e3b87d499:/# cd /var/lib/
root@8d1e3b87d499:/var/lib# tar -zcvf sunhao.dump.tar

(6)在从服务器上输入

1
2
3

tar -zxvpf /var/lib/mysqlbak.sql.tar
mysql -uroot -pmysql sunhao < /var/lib/sunhao.dump;

如果写入成功,这个时候就可以用select查询到数据。

(2)取消主服务器数据库锁定
mysql> UNLOCK TABLES;

docker搭建mycat读写分离

制作mycat容器，并运行

首先在本地新建个文件夹/usr/mycat。然后去mycat官网下载最新版本，这里我下载的是1.6版本。安装完解压到这里。

http://dl.mycat.io/
[http://dl.mycat.io/1.6-RELEASE/](http://dl.mycat.io/1.6-RELEASE/ "http://dl.mycat.io/1.6-RELEASE/")

编写Dockerfile，内容为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 来源镜像,因为mycat依赖java，所以这里直接选的java环境。
FROM java
RUN  mkdir -p /var/local/mycat/
# Add复制Mycat到容器
ADD  mycat/ /var/local/mycat/ 
ENTRYPOINT  ["/var/local/mycat/bin/mycat","console","&"]
# 对外端口
EXPOSE 8066 9066
# 启动控制台
CMD  ["/var/local/mycat/bin/mycat","console","&"]

先别急着构建镜像，我们先修改下mycat的配置文件。

[root@centos mycat]# ll
total 15324
-rw-r--r-- 1 root root      357 Jul  5 15:26 Dockerfile
-rw-r--r-- 1 root root 15662280 Jul  3 15:07 Mycat-server-1.6-RELEASE-20161028204710-linux.tar.gz
drwxr-xr-x 7 root root     4096 Jul  5 15:27 mycat

在我用的1.6版本。mycat对外端口是注释掉的。我们要打开下。我们编辑/usr/mycat/mycat/conf/server.xml.找到第32-35行。去掉注释符号。

<!--
    <property name="serverPort">8066</property> <property name="managerPort">9066</property> 
    <property name="idleTimeout">300000</property> <property name="bindIp">0.0.0.0</property> 
    <property name="frontWriteQueueSize">4096</property> <property name="processors">32</property> -->

我们往下看 有这么几句。这里分别默认两个用户。 name为root的管理员，可以进行读写。和普通用户只能进行读。我们也可以手动创建修改，另外password是密码 schemas是用户所能操作的库。 在这里我什么都没有改。下面都是默认。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<user name="root">
		<property name="password">123456</property>
		<property name="schemas">TESTDB</property>
		
		<!-- 表级 DML 权限设置 -->
		<!-- 		
		<privileges check="false">
			<schema name="TESTDB" dml="0110" >
				<table name="tb01" dml="0000"></table>
				<table name="tb02" dml="1111"></table>
			</schema>
		</privileges>		
		 -->
	</user>
	<user name="user">
		<property name="password">user</property>
		<property name="schemas">TESTDB</property>
		<property name="readOnly">true</property>
	</user>

我们编辑/usr/mycat/mycat/conf/schema.xml，这个是我们配置分片和逻辑库表，规则的地方，数据节点，和数据源。其中schema是我们所操作的逻辑库。默认为TESTDB。下面分别是各个逻辑表。在这里直接默认。我只是为了区分dh和db两个字的区别，把db1-3改了data1-3你们可以不用管。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<schema name="TESTDB" checkSQLschema="false" sqlMaxLimit="100">
	<!-- auto sharding by id (long) -->
	<table name="travelrecord" dataNode="dn1,dn2,dn3" rule="auto-sharding-long" />
	<!-- global table is auto cloned to all defined data nodes ,so can join
		with any table whose sharding node is in the same data node -->
	<table name="company" primaryKey="ID" type="global" dataNode="dn1,dn2,dn3" />
	<table name="goods" primaryKey="ID" type="global" dataNode="dn1,dn2" />
	<!-- random sharding using mod sharind rule -->
	<table name="hotnews" primaryKey="ID" autoIncrement="true" dataNode="dn1,dn2,dn3"
		   rule="mod-long" />
	<!-- <table name="dual" primaryKey="ID" dataNode="dnx,dnoracle2" type="global"
		needAddLimit="false"/> <table name="worker" primaryKey="ID" dataNode="jdbc_dn1,jdbc_dn2,jdbc_dn3"
		rule="mod-long" /> -->
	<table name="employee" primaryKey="ID" dataNode="dn1,dn2"
		   rule="sharding-by-intfile" />
	<table name="customer" primaryKey="ID" dataNode="dn1,dn2"
		   rule="sharding-by-intfile">
		<childTable name="orders" primaryKey="ID" joinKey="customer_id"
					parentKey="id">
			<childTable name="order_items" joinKey="order_id"
						parentKey="id" />
		</childTable>
		<childTable name="customer_addr" primaryKey="ID" joinKey="customer_id"
					parentKey="id" />
	</table>
	<!-- <table name="oc_call" primaryKey="ID" dataNode="dn1$0-743" rule="latest-month-calldate"
		/> -->
</schema>

修改37-45行 /usr/mycat/mycat/conf/wrapper.conf。设置java虚拟机内存。

1
2
3
4
5

# Initial Java Heap Size (in MB)
wrapper.java.initmemory=3
# Maximum Java Heap Size (in MB)
wrapper.java.maxmemory=64

在schema.xml往下修改。43-55行。数据源地址dataHost。这些就是我们的数据源，mycat把逻辑表的数据，读写都来源于我们配置地址。其中

writeHost写入源。设置多个，默认也只用第一个。readHost是读服务器。heartbeat是我们检测数据库是否正常运行的。

在这里 mycat 有两种配置方式。

分别是两个writeHost和一个writeHost一个readHost

第一种如果写入失败，还是可读。

第二种如果写入失败，不可读。

我们采用安全稳妥的方式。一个writeHost一个readHost

我的配置为

<dataHost name="localhost1" maxCon="1000" minCon="20" balance="1"
          writeType="0" dbType="mysql" dbDriver="native" switchType="2"  slaveThreshold="100">

    <heartbeat>show slave status</heartbeat>
    <!-- can have multi write hosts -->
    <writeHost host="hostM1" url="115.159.124.18:32768" user="root"    password="mysql">
        <!-- can have multi read hosts -->
        <readHost host="hostS1" url="115.159.124.18:32769" user="root"    password="mysql" />

    </writeHost>

</dataHost>

hostM1和hostS1分别对应我们创建的两个docker容器的对外端口。

修改/usr/mycat/mycat/conf/log4j2.xml 这个是配置日志文件的，我们打开debug方便我们学习。修改第25行info为debug

1
2
3
4
5
6

<asyncRoot level="debug" includeLocation="true">
     <AppenderRef ref="Console" />
     <AppenderRef ref="RollingFile"/>
 </asyncRoot>

构建镜像

1

docker build -t sunhao/mycat:1.6  . 别忘了最后面的圆点

运行创建容器

1

docker  run  --name sunhaomycat  -d -p 8066:8066 -p 9066:9066 sunhao/mycat:1.6

就那么简单。我们的mycat已经搭建成功了。测试下吧打开4个终端

1个宿主，1个mysql主，1个mysql从，1个用来看mycat日志。

宿主环境操作

在宿主终端上，安装mysql。并且连接我们的mycat。

1
2
3
4
5
6
7
8
9
10

[root@VM_128_230_centos mycat]# mysql -uroot -p123456 -h115.159.124.18 -P8066
Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MySQL connection id is 8
Server version: 5.6.29-mycat-1.6-RELEASE-20161028204710 MyCat Server (OpenCloundDB)
Copyright (c) 2000, 2016, Oracle, MariaDB Corporation Ab and others.
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
MySQL [(none)]>

完美，Server version: 5.6.29-mycat-1.6-RELEASE-20161028204710 MyCat Server 出现这，说明mycat运行了。

进行简单的操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Database changed
MySQL [TESTDB]> show databases;
+----------+
| DATABASE |
+----------+
| TESTDB   |
+----------+
1 row in set (0.00 sec)
MySQL [TESTDB]> show tables;
+------------------+
| Tables in TESTDB |
+------------------+
| company          |
| customer         |
| customer_addr    |
| employee         |
| goods            |
| hotnews          |
| orders           |
| order_items      |
| travelrecord     |
+------------------+
9 rows in set (0.00 sec)
MySQL [TESTDB]>

测试下写入

1
2
3
4
5
6
7
8

MySQL [TESTDB]> create table travelrecord (id bigint not null primary key,user_id varchar(100),traveldate DATE, fee decimal,days int);
ERROR 1105 (HY000): Table 'travelrecord' already exists
MySQL [TESTDB]> insert into travelrecord(id,user_id,traveldate,fee,days)  values(1,@@hostname,20170707,100,10);
Query OK, 1 row affected (0.01 sec)
MySQL [TESTDB]> 
MySQL [TESTDB]> insert into travelrecord(id,user_id,traveldate,fee,days)  values(10000001,@@hostname,20170707,100,10);
Query OK, 1 row affected (0.00 sec)

分别进入mysql主和mysql从可以看到。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

MySQL [data2]> use data3                  
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A
Database changed
MySQL [data3]> select * from travelrecord;
+----------+--------------+------------+------+------+
| id       | user_id      | traveldate | fee  | days |
+----------+--------------+------------+------+------+
| 10000001 | 980e5ea48152 | 2017-07-07 |  100 |   10 |
+----------+--------------+------------+------+------+
1 row in set (0.00 sec)
MySQL [data3]> use data1;                 
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A
Database changed
MySQL [data1]> select * from travelrecord;
+----+--------------+------------+------+------+
| id | user_id      | traveldate | fee  | days |
+----+--------------+------------+------+------+
|  1 | 980e5ea48152 | 2017-07-07 |  100 |   10 |
+----+--------------+------------+------+------+
1 row in set (0.00 sec)
MySQL [data1]>

测试读取分离

打开一个终端，用

docker exec -it 61e74eee274d9d0f0404a572dec1d14c8b03dfd480e13d3c96fa04c534df0556  bash

进入我们的mycat容器

其中61e74为你的mycat容器

这个就是我们的日志终端

1
2
3

root@61e74eee274d:/var/local/mycat/logs# ls
2017-07  mycat.log  mycat.pid  wrapper.log
root@61e74eee274d:/var/local/mycat/logs# tail -f  mycat.log

在宿主环境mycat下

输入

1
2
3
4
5
6
7
8
9
10
11
12
13

MySQL [TESTDB]> select * from travelrecord ;
ERROR 2006 (HY000): MySQL server has gone away
No connection. Trying to reconnect...
Connection id:    9
Current database: TESTDB
+----------+--------------+------------+------+------+
| id       | user_id      | traveldate | fee  | days |
+----------+--------------+------------+------+------+
|        1 | 980e5ea48152 | 2017-07-07 |  100 |   10 |
| 10000001 | 980e5ea48152 | 2017-07-07 |  100 |   10 |
+----------+--------------+------------+------+------+
2 rows in set (0.02 sec)

然后切回我们的日志终端，按ctrl+c中断。

然后输入cat tail 进行查看，很长在最后面找个空白的大坑（自己体会）慢慢找。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

017-07-07 06:28:16.863 DEBUG [$_NIOREACTOR-5-RW] (io.mycat.backend.datasource.PhysicalDatasource.releaseChannel(PhysicalDatasource.java:442)) - release channel MySQLConnection [id=5, lastTime=1499408896859, user=root, schema=data3, old shema=data3, borrowed=true, fromSlaveDB=false, threadId=527, charset=latin1, txIsolation=3, autocommit=true, attachment=null, respHandler=null, host=115.159.184.18, port=32774, statusSync=null, writeQueue=0, modifiedSQLExecuted=false]
2017-07-07 06:28:16.864 DEBUG [$_NIOREACTOR-3-RW] (io.mycat.backend.datasource.PhysicalDatasource.releaseChannel(PhysicalDatasource.java:442)) - release channel MySQLConnection [id=33, lastTime=1499408896859, user=root, schema=data3, old shema=data3, borrowed=true, fromSlaveDB=true, threadId=108, charset=latin1, txIsolation=3, autocommit=true, attachment=null, respHandler=null, host=115.159.184.18, port=32770, statusSync=null, writeQueue=0, modifiedSQLExecuted=false]
2017-07-07 06:28:24.473 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.net.FrontendConnection.query(FrontendConnection.java:288)) - ServerConnection [id=2, schema=TESTDB, host=115.159.184.18, user=root,txIsolation=3, autocommit=true, schema=TESTDB] select * from travelrecord
2017-07-07 06:28:24.474 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.server.ServerQueryHandler.query(ServerQueryHandler.java:57)) - ServerConnection [id=2, schema=TESTDB, host=115.159.184.18, user=root,txIsolation=3, autocommit=true, schema=TESTDB]select * from travelrecord
2017-07-07 06:28:24.474 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.cache.impl.EnchachePool.get(EnchachePool.java:71)) - SQLRouteCache hit cache ,key:TESTDBselect * from travelrecord
2017-07-07 06:28:24.474 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.server.NonBlockingSession.execute(NonBlockingSession.java:110)) - ServerConnection [id=2, schema=TESTDB, host=115.159.184.18, user=root,txIsolation=3, autocommit=true, schema=TESTDB]select * from travelrecord, route={
   1 -> dn1{SELECT *
FROM travelrecord
LIMIT 100}
   2 -> dn2{SELECT *
FROM travelrecord
LIMIT 100}
   3 -> dn3{SELECT *
FROM travelrecord
LIMIT 100}
} rrs 
2017-07-07 06:28:24.474 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.backend.mysql.nio.handler.MultiNodeQueryHandler.<init>(MultiNodeQueryHandler.java:101)) - execute mutinode query select * from travelrecord
2017-07-07 06:28:24.474 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.backend.mysql.nio.handler.MultiNodeQueryHandler.<init>(MultiNodeQueryHandler.java:137)) - has data merge logic 
2017-07-07 06:28:24.474 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.backend.mysql.nio.handler.MultiNodeQueryHandler.execute(MultiNodeQueryHandler.java:170)) - rrs.getRunOnSlave()-null
2017-07-07 06:28:24.474 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.backend.mysql.nio.handler.MultiNodeQueryHandler.execute(MultiNodeQueryHandler.java:180)) - node.getRunOnSlave()1-null
2017-07-07 06:28:24.474 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.backend.mysql.nio.handler.MultiNodeQueryHandler.execute(MultiNodeQueryHandler.java:182)) - node.getRunOnSlave()2-null
2017-07-07 06:28:24.474 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.backend.datasource.PhysicalDBNode.getConnection(PhysicalDBNode.java:96)) - rrs.getRunOnSlave() null
2017-07-07 06:28:24.475 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.backend.datasource.PhysicalDBNode.getConnection(PhysicalDBNode.java:127)) - rrs.getRunOnSlave() null
2017-07-07 06:28:24.475 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.backend.datasource.PhysicalDBPool.getRWBanlanceCon(PhysicalDBPool.java:456)) - select read source hostS1 for dataHost:localhost1
2017-07-07 06:28:24.475 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.backend.mysql.nio.handler.MultiNodeQueryHandler.execute(MultiNodeQueryHandler.java:180)) - node.getRunOnSlave()1-null
2017-07-07 06:28:24.475 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.backend.mysql.nio.handler.MultiNodeQueryHandler.execute(MultiNodeQueryHandler.java:182)) - node.getRunOnSlave()2-null
2017-07-07 06:28:24.475 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.backend.datasource.PhysicalDBNode.getConnection(PhysicalDBNode.java:96)) - rrs.getRunOnSlave() null
2017-07-07 06:28:24.475 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.backend.datasource.PhysicalDBNode.getConnection(PhysicalDBNode.java:127)) - rrs.getRunOnSlave() null
就是这了我们可以看到select read source hostS1 for dataHost:localhost1来至哪个服务器
2017-07-07 06:28:24.475 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.backend.datasource.PhysicalDBPool.getRWBanlanceCon(PhysicalDBPool.java:456)) - select read source hostS1 for dataHost:localhost1
2017-07-07 06:28:24.475 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.backend.mysql.nio.handler.MultiNodeQueryHandler.execute(MultiNodeQueryHandler.java:180)) - node.getRunOnSlave()1-null
2017-07-07 06:28:24.475 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.backend.mysql.nio.handler.MultiNodeQueryHandler.execute(MultiNodeQueryHandler.java:182)) - node.getRunOnSlave()2-null
2017-07-07 06:28:24.475 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.backend.datasource.PhysicalDBNode.getConnection(PhysicalDBNode.java:96)) - rrs.getRunOnSlave() null
2017-07-07 06:28:24.476 DEBUG [$_NIOREACTOR-29-RW] (io.mycat.backend.datasource.PhysicalDBNode.getConnection

如果配置不小心错了，可以用docker cp 复制到镜像里，然后重启镜像

1
2
3

docker cp /usr/mycat/mycat/conf 61e74eee274d9d0f0404a572dec1d14c8b03dfd480e13d3c96fa04c534df0556:/var/local/mycat/conf
docker restart 61e74eee274d9d0f0404a572dec1d14c8b03dfd480e13d3c96fa04c534df0556

总结，如果运行中docker过会就掉了，说明配置出错，会运行有问题。请仔细检查配置。docker用来单机测试堪称完美，对于资源不足，环境变化大的。方便太多。推荐大家多做练习。

原文链接:http://www.ydcss.com/archives/424

gulp.src(globs[, options])

说明：src方法是指定需要处理的源文件的路径，gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，gulp.src返回当前文件流至可用插件；

globs： 需要处理的源文件匹配符路径。类型(必填)：String or StringArray；

通配符路径匹配示例：

“src/a.js”：指定具体文件；

“”：匹配所有文件 例：src/.js(包含src下的所有js文件)；

“”：匹配0个或多个子文件夹 例：src//*.js(包含src的0个或多个子文件夹下的js文件)；

“{}”：匹配多个属性 例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；

“!”：排除文件 例：!src/a.js(不包含src下的a.js文件)；

1
2
3
4
5
6
7
8
9
10

var gulp = require('gulp'),
    less = require('gulp-less');
 
gulp.task('testLess', function () {
    //gulp.src('less/test/style.less')
    gulp.src(['less/**/*.less','!less/{extend,page}/*.less'])
        .pipe(less())
        .pipe(gulp.dest('./css'));
});

options： 类型(可选)：Object，有3个属性buffer、read、base；

options.buffer： 类型：Boolean 默认：true 设置为false，将返回file.content的流并且不缓冲文件，处理大文件时非常有用；

options.read： 类型：Boolean 默认：true 设置false，将不执行读取文件操作，返回null；

options.base： 类型：String 设置输出路径以某个路径的某个组成部分为基础向后拼接，具体看下面示例：

1
2
3
4
5
6
7

gulp.src('client/js/**/*.js') 
  .pipe(minify())
  .pipe(gulp.dest('build'));  // Writes 'build/somedir/somefile.js'
 
gulp.src('client/js/**/*.js', { base: 'client' })
  .pipe(minify())
  .pipe(gulp.dest('build'));  // Writes 'build/js/somedir/somefile.js'

gulp.dest(path[, options])

说明：dest方法是指定处理完后文件输出的路径；

1
2
3
4
5

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

path： 类型(必填)：String or Function 指定文件输出路径，或者定义函数返回文件输出路径亦可；

options： 类型(可选)：Object，有2个属性cwd、mode；

options.cwd： 类型：String 默认：process.cwd()：前脚本的工作目录的路径 当文件输出路径为相对路径将会用到；

options.mode： 类型：String 默认：0777 指定被创建文件夹的权限；

gulp.task(name[, deps], fn)

说明：task定义一个gulp任务；

name： 类型(必填)：String 指定任务的名称（不应该有空格）；

deps： 类型(可选)：StringArray，该任务依赖的任务（注意：被依赖的任务需要返回当前任务的事件流，请参看下面示例）；

1
2
3
4
5
6
7
8
9
10
11

gulp.task('testLess', function () {
    return gulp.src(['less/style.less'])
        .pipe(less())
        .pipe(gulp.dest('./css'));
});
 
gulp.task('minicss', ['testLess'], function () { //执行完testLess任务后再执行minicss任务
    gulp.src(['css/*.css'])
        .pipe(minifyCss())
        .pipe(gulp.dest('./dist/css'));
});

fn： 类型(必填)：Function 该任务调用的插件操作；

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

说明：watch方法是用于监听文件变化，文件一修改就会执行指定的任务；

glob： 需要处理的源文件匹配符路径。类型(必填)：String or StringArray；

opts： 类型(可选)：Object 具体参看https://github.com/shama/gaze；

tasks： 类型(必填)：StringArray 需要执行的任务的名称数组；

cb(event)： 类型(可选)：Function 每个文件变化执行的回调函数；

1
2
3
4
5
6
7
8
9

gulp.task('watch1', function () {
    gulp.watch('less/**/*.less', ['testLess']);
});
 
gulp.task('watch2', function () {
    gulp.watch('js/**/*.js', function (event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
});

当组件激活 触发beforeCreate，Create，beforeMount，Mount
当组件不再显示销毁时，触发beforeDestroy，Destroy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div id="app">
  <h3>Let's check out the lifecycle of this hur' child.</h3>
  <h4>Check the console!</h4>
  <button @click="toggleShow">
    <span v-if="isShowing">Hide child</span>
    <span v-else>Show child</span>
  </button>
  <hr>
  <div v-if="isShowing">
    <app-child></app-child>
  </div>
</div>
<script type="text/x-template" id="childarea">
  <div>
  	<h4>Here I am!</h4>
  </div>
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

body {
  font-family: 'Bitter', serif;
}
#app {
  text-align: center;
  margin: 60px;
  max-width: 320px;
  margin: 0 auto;
  display: table;
}
.num {
  color: #AF007E;
}
button {
  font-family: 'Bitter';
  background: #c62735;
  color: white;
  border: 0;
  padding: 5px 15px;
  margin: 0 10px;
  border-radius: 4px;
  outline: 0;
  cursor: pointer;
}
h4 {
  margin: 0 0 15px;
}
hr {
  border-color: #F2FAFF;
  opacity: 0.5;
  margin: 15px 0;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

const Child = {
  template: '#childarea',
  beforeCreate() {
    console.log("beforeCreate!");
  }, 
  created() {
    console.log("created!");
  }, 
  beforeMount() {
    console.log("beforeMount!");
  }, 
  mounted() {
    console.log("mounted!");
  }, 
  beforeDestroy() {
    console.log("beforeDestroy!");
  }, 
  destroyed() {
    console.log("destroyed!");
  }
};
new Vue({
  el: '#app',
  data() {
    return {
      isShowing: false 
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  },
  components: {
    appChild: Child
  }
});

切记 set NODE_ENV=production
其中=号不要隔开,不然会出错。因为这个是设置DOS下的环境

明文：需要秘密传送的消息。

密文：明文经过密码变换后的消息。

加密：由明文到密文的变换。

解密：从密文恢复出明文的过程。

破解：非法接收者试图从密文分析出明文的过程。

加密算法：对明文进行加密时采用的一组规则。

解密算法：对密文进行解密时采用的一组规则。

密钥：加密和解密时使用的一组密码信息。

对称加密：是采用单钥密码系统的加密方法，使用同一密钥对信息进行加密和解密的加密方法。

非对称加密：需要两个密钥：公共密钥和私有密钥，它们成对出现，公钥加密的数据有且只有私钥能解密，私钥加密的数据有且只有公钥解密，相对于“对称加密”，“非对称加密”加密方法加密和解密使用不同的密钥，所以叫“非对称加密”加密方法。

对称加密和非对称加密的区别：在于加密和解密是否使用的同一个密钥。

加密、身份认证、数字签名认证：

 加密：将数据资料加密，使得非法用户即便获取加密后的资料，也无法获取正确的资料内容，所以数据加密可以保证数据防止监听攻击；其重点在于数据的安全性。

身份认证：判断某身份的真实性，确认身份后，系统才可以依不同的身份赋予不同的权限；其重点在于用户的真实性。

数字签名认证：首先"数字签名"就是附加在数据单元上的一些数据，或是对数据单元所作的密码变换。这种数据或变换允许接收者判断数据的来源和数据的完整性，防止被伪造篡改。数字签名认证侧重于把保证数据的完整性，防止被伪造和篡改。

认证原理: 有2种认证方式：

基于账号和口令的验证方式 和 基于公钥和私钥的验证方式

ssh的登录过程分为5个阶段
1、版本号协商阶段
2、密钥和算法协商阶段
3、认证阶段
4、会话请求阶段
5、会话交互阶段

1、版本号协商阶段

服务端打开端口22，等待客户连接。
客户端向服务端发起TCP连接，连接建立后，服务端向客户端发送第一个报文，包括版本标志字符串，格式为“协议版本号 次协议版本号 软件版本号”。
客户端收到报文后，解析协议版本号，如果服务端的协议版本号比自己的低，且客户端能支持服务端的低版本，就使用服务端的协议号，否则使用自己的协议版本号。
客户端回复服务端一个报文，包含了客户端决定使用的协议版本号。
服务端比较客户端发过来的版本号，决定是否能同客户端交互。
如果协商成功，就进入密钥和算法协商阶段。否则服务端断开TCP连接。

2、密钥和算法协商阶段

服务端和客户端分别发送算法协商报文给对方，报文中包含自己支持的公钥算法列表、加密算法列表、消息验证码算法列表、压缩算法列表等。
服务端和客户端根据对方和自己支持的算法得出最终使用的算法。
服务端和客户端利用DH交换算法、主机密钥对等参数，生成会话密钥和会话ID。
    c公 客户端公钥
    c密 客户端密钥
    s公 服务端公钥
    s密 服务端密钥
在版本号协商阶段完成后：
服务端将 s公 发送给客户端。
服务端生成会话ID ，设为 id ，发送给客户端。
客户端生成会话密钥，设为 key ，并计算 res = id 异或 key。
客户端将 res 用 s公 进行加密，将结果发送给服务端。
服务端用 s密 进行解密，得到 res。
服务器计算 res 异或 id，得到 key。
至此服务端和客户端都知道了会话密钥和会话ID，以后的数据传输都使用会话密钥进行加密和解密。

3、认证阶段

基于账号和口令的验证方式：
    客户端使用密钥和算法协商阶段生成的会话密钥加密账号、认证方法、口令，将结果发送给服务器。
    服务端使用获得的会话密钥解密报文，得到账号和口令。
    服务端对这个账号和口令进行判断，如果失败，向客户端发送认证失败报文，其中包含了可以再次认证的方法列表。
    客户端从认证方法列表中选择一种方法进行再次认证。
    这个过程反复进行，直到认证成功或者认证次数达到上限，服务端关闭本次TCP连接。
基于公钥和私钥的验证方式：
    使用ssh-keygen程序生成公钥 id_dsa.pub 和私钥 id_dsa，一般是在客户端上生成，然后把 id_dsa.pub 通过某种方式发送给服务端。
    服务端放在将要远程登录过来的那个账号的目录的.ssh目录下面。
    客户端使用密钥和算法协商阶段生成的会话密钥加密账号、认证方法、id_dsa.pub，将结果发送给服务端。
    服务端使用会话密钥解密报文，得到账号、id_dsa.pub。    服务端在这个账号的目录的.ssh目录下找对应的公钥，如果没有找到，发送失败消息给客户端，如果找到，比较客户发送过来的这个公钥和找到的公钥，如果内容相同，服务端生成一个随机的字符串，简称“质询”，然后使用找到的公钥加密这个质询，然后使用会话密钥再次加密。
    服务端把这个双重加密的数据发送给客户端。
    客户端使用会话密钥解密报文，然后使用id_dsa再次解密数据，得到质询。
    客户端使用会话密钥加密质询，发送给服务端。
    服务端使用会话密钥解密报文，得到质询，判断是不是自己生成的那个质询，如果不相同，发送失败消息给客户端，如果相同，认证通过。

那么我们怎么安装指定版本呢。

Semver语义化版本控制规范

首先node采用semver规范，感兴趣的可以研究下。在这我们要明白版本号。
http://semver.org/lang/zh-CN/

版本格式：主版本号.次版本号.修订号，版本号递增规则如下：
主版本号：当你做了不兼容的API 修改，
次版本号：当你做了向下兼容的功能性新增，
修订号：当你做了向下兼容的问题修正。
先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面，作为延伸
例如1.2.19 1是版本号 ，2是次版本号，19是修订号

我们看看我们配置的依赖包

1
2
3
4

"devDependencies": {
   "rimraf": "^2.6.1",
   "webpack": "^2.6.1"
 }

其中^2.6.1就是版本号。我们看看官方解释

dependencies

Dependencies are specified in a simple object that maps a package name to a version range. The version range is a string which has one or more space-separated descriptors. Dependencies can also be identified with a tarball or git URL.

Dependencies是将包名映射到版本范围的简单对象。版本范围是一个字符串，它具有一个或多个空格分隔的描述符。Dependencies也可以用tarball或git来标识。

Please do not put test harnesses or transpilers in your dependencies object. See devDependencies, below.

See semver for more details about specifying version ranges.

请不要在您的依赖对象中放置testharnesses或transpilers。请看下面的devDependencies。

ps:testharnesses测试实例工具，transpilers编译es6的工具

version Must match version exactly
版本必须精确匹配

>version Must be greater than version
>大于指定版本

>=version etc
>=大于等于指定版本

<version
<=小于指定版本

<=version
<=小于等于指定版本

~version "Approximately equivalent to version" See semver
~近似于版本  例如2.1.1版本  他的近似版本类似 2.1.x  x任意


^version "Compatible with version" See semver
^兼容版本

1.2.x 1.2.0, 1.2.1, etc., but not 1.3.0
例如1.2.x 1.2.0, 1.2.1, 等., 但1.3.0就不是了

http://... See 'URLs as Dependencies' below

* Matches any version
*匹配任意版本

"" (just an empty string) Same as *
""(空字符串)和*一样

version1 - version2 Same as >=version1 <=version2.
version1 - version2 例如 >=version1 <=version2. 大于等于version1小于等于version2

range1 || range2 Passes if either range1 or range2 are satisfied.
range1 || range2 例如1.2.1||2.2.1 这两个版本都可以。

git… See ‘Git URLs as Dependencies’ below

git方式

1
2
3
4
5

git://github.com/user/project.git#commit-ish
git+ssh://user@hostname:project.git#commit-ish
git+ssh://user@hostname/project.git#commit-ish
git+http://user@hostname/project/blah.git#commit-ish
git+https://user@hostname/project/blah.git#commit-ish

user/repo See ‘GitHub URLs’ below

github方式

1
2
3
4
5
6
7
8
9

{
  "name": "foo",
  "version": "0.0.0",
  "dependencies": {
    "express": "expressjs/express",
    "mocha": "mochajs/mocha#4727d357ea",
    "module": "user/repo#feature\/branch"
  }
}

tag A specific version tagged and published as tag See npm-dist-tag

通过一个版本标记类似，tag是我们发布包做的标记。
npm install name@tag

path/path/path See Local Paths below

通过本地安装

1
2
3
4
5
6

{
  "name": "baz",
  "dependencies": {
    "bar": "file:../foo/bar"
  }
}

For example, these are all valid:

示例

{ "dependencies" :
  { "foo" : "1.0.0 - 2.9999.9999"
  , "bar" : ">=1.0.2 <2.1.2"
  , "baz" : ">1.0.2 <=2.3.4"
  , "boo" : "2.0.1"
  , "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0"
  , "asd" : "http://asdf.com/asdf.tar.gz"
  , "til" : "~1.2"
  , "elf" : "~1.2.3"
  , "two" : "2.x"
  , "thr" : "3.3.x"
  , "lat" : "latest"
  , "dyl" : "file:../dyl"
  }
}

我们再看一下安装规范

npm install <name>@<version>

指定安装的package 版本

npm install (with no args in a package dir)
npm install <tarball file>
npm install <tarball url>
npm install <folder>
npm install [@<scope>/]<name> [--save|--save-dev|--save-optional] [--save-exact]
npm install [@<scope>/]<name>@<tag>
npm install [@<scope>/]<name>@<version>
npm install [@<scope>/]<name>@<version range>
npm i (with any of the previous argument usage)

好了 说重点 安装我们的webpack1

npm install webpack@^1.* --save-dev

额外赠送

npm init 会引导你创建一个package.json文件，包括名称、版本、作者这些信息等

npm remove 移除

npm update 更新

npm ls 列出当前安装的了所有包

npm root 查看当前包的安装路径

npm root -g 查看全局的包的安装路径