**当你使用Vue时，你可能已经听说过Vue的双向绑定功能。双向绑定是Vue框架中最重要的功能之一，它让你的应用程序变得更加动态和交互。我们接下来完成一个Vue双向绑定简单版本。**



### 发布订阅者简单版
```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>cs</title>
    <script>
    </script>
  </head>
  <body>
    <div id="app">
      <input type="text" >
      值：<span></span>
    </div>
    <script>
      class Dep {
        constructor(){
          this.subs=[]
        }
        addSub(sub){
          this.subs.push(sub)
        }
        notify(val){
          this.subs.forEach((sub)=>{
            console.log(sub)
            sub.update(val)
          })
        }
      }

      class Observer{
        constructor(value){
          this.value=value
          this.walk(value)
        }
        walk(value){
          Object.keys(value).forEach((key)=>{
            this.defineReactive(value,key,value[key])
          })
        }
        defineReactive(obj,key,val){
          let dep=new Dep()
          this.observer(val)
          Object.defineProperty(obj,key,{
            get:()=>{
              if(Dep.target){
                dep.addSub(Dep.target)
              }
              return val
            },
            set:(newValue)=>{
              if(newValue===val)return
              val=newValue
              dep.notify(val)
              this.observer(val)
            }
          })
        }
        observer(value){
          if(!value || typeof value!=='object')return
          return new Observer(value)
        }
      }

      class Watcher {
        constructor(vm,key,cb){
          this.vm=vm
          this.key=key
          this.cb=cb
          this.val=this.get()
        }
        update(val){
          this.cb.call(this,val)
        }
        get(){
          Dep.target=this
          let val=this.vm[this.key]
          Dep.target=null
          return val
        }
      }
      let obj={
        name:1,
        list:{
          age:20
        }
      };
      new Observer(obj)
      let input=document.querySelector('input')
      let span=document.querySelector('span')
      input.addEventListener('input',(e)=>{
        obj.name=e.target.value
      })
      new Watcher(obj,'name',(val)=>{
        span.innerText=val
      })

    </script>
  </body>
</html>
```

Vue 双向绑定简单版

**本篇主要是自己学习Nginx 重定向、try_files、静态资源压缩、缓存、跨域、防盗后的文章记录**


## 重定向
![image.png](https://blog.ccz.life/static/img/dc2f459233d00e9dab6dffa475c56d96.image.png)

![image.png](https://blog.ccz.life/static/img/56a0fbb97e861c2fb69653375626f67e.image.png)
```nginx
server {
   listen 2999;
   server_name localhost;
   location / {
          root opt;
          index 1.html;
          if ($http_user_agent ~* Chrome) {  # ~*为不区分大小写的正则匹配
            rewrite ^/1.html /2.html;
          }
          if (!-f $request_filename) {  # -f为判断路径是否存在
           rewrite ^/(.*)$ http://www.baidu.com redirect; 
          }
   }
   location ~ ^/3\.html{
       rewrite ^/3\.html /1.html redirect;
   }
}
```

## try_files
```nginx
server {
   listen 81;
   server_name localhost;
   root opt;
   index 1.html;
   location / {
      root opt;
      try_files $uri @page;  # opt目录下，若$uri存在，则拿取opt目录下的文件。否则去@page下查询该路径
   }
  location @page {
      proxy_pass http://localhost:7071;
  }
 }
```

## 静态资源类型压缩、缓存、跨域、防盗
### 文件压缩

![image.png](https://blog.ccz.life/static/img/63def6c041d7813c7f98ee247e8a78a0.image.png)
```nginx
# 对文本有较好的压缩，对图片压缩影响较小。也可以用来压缩js,css文件。
location ~ .*\.(jpg|gif|png|txt)$ {
     gzip on;
     gzip_http_version 1.1;       # http协议版本
     gzip_comp_level 2;           # 压缩等级，等级越高，压缩比例越高
     gzip_types text/plain application/javascript application/x-javascript text/css
     application/xml text/javascript application/x-httpd-php image/jpeg  image/gif image/png;     #支持的压缩格式
     root opt;
}
```

### 浏览器缓存

![image.png](https://blog.ccz.life/static/img/7e6cf68f898d758410e793fbc669256a.image.png)

```nginx
# 会在response同时设置Cache-Control: max-age和Expires
# 如果request设置Cache-Control: max-age，则responese的Cache-Control无效

location ~ .*\.html$ {
     expires 24h;
     root opt;
}
```

### 跨域

![image.png](https://blog.ccz.life/static/img/53025231b7be26c1c52db0e2bb0872ee.image.png)

```nginx
location ~ .*\.html$ {
     add_header Access-Control-Allow-Origin http://localhost:8088;
     add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
     root opt;
}
```

### 防盗链配置

![image.png](https://blog.ccz.life/static/img/0e7defaae43019cde1ec6185a4f861f1.image.png)
```nginx
# none    允许不带referers信息的访问（referers为日志信息，如http://localhost）
# blocked 允许referers的信息不是标准的带http信息协议头的进行访问
location ~ .*\.(js|css)$ {
         root opt;
         valid_referers none blocked localhost;
         if ($invalid_referer) {
           return 403;
         }
    }
```

Nginx 重定向、try_files、静态资源压缩、缓存、跨域、防盗链

**本篇主要是自己学习Nginx 负载均衡、动静分离、代理和代理缓存后的文章记录**



## 负载均衡

![image.png](https://blog.ccz.life/static/img/6d20b266d69b08af8f3d909ec6568730.image.png)

![image.png](https://blog.ccz.life/static/img/2d8479869b4d47fc4d13833951f18e25.image.png)
backup当其他服务器都无法访问时，会访问设置backup的网址
```nginx
http {
upstream www.imooc.com {
  ip_hash; # //根据ip来分配地址，不能和backup同时使用；
  server 127.0.0.1:8081;
  server 127.0.0.1:8082 max_fails=1 fail_timeout=10s weight=5; # //weight为权重，使用时需去除其他分配规则如ip_hash
  server 127.0.0.1:8083 backup;
  server www.baidu.com down;
}
server{
   listen   80;
   server_name  localhost;
   location / {
        proxy_pass http://www.imooc.com;
        }
}
}
```

## 动静分离
![image.png](https://blog.ccz.life/static/img/36c4f03811271b6eed81f98b87d44fc7.image.png)

[详情查看](https://blog.csdn.net/u010028869/article/details/50522033/)
```nginx
http {
upstream cs {
   server localhost:7071;
}
server {
    listen 7999;
    server_name localhost;
    location / {
      proxy_pass http://cs;
    }
    location ~ .*\.(js|css)$ {
        root opt/cs;
    }
}
}
```

## 反向代理
![](https://blog.ccz.life/static/img/5f1dde17d4236a6e1a372669ed055406.image.png)
```nginx
location / {
   proxy_pass http://127.0.0.1:8088; # //需加协议前缀，如http://
}
```
**代理相关配置:**

![image.png](https://blog.ccz.life/static/img/c6e75db3b959556c5b5faedc9edab29e.image.png)

## 代理缓存

![image.png](https://blog.ccz.life/static/img/bf1b6d60581a6897171b7a35c3ec8557.image.png)

![image.png](https://blog.ccz.life/static/img/94becfa63e65f2fb16be2bf18e149e39.image.png)

![image.png](https://blog.ccz.life/static/img/3c6c796f7aa379bfa129fd6352715cfb.image.png)


![image.png](https://blog.ccz.life/static/img/706e67e2308b1a060a1c4c8715773e37.image.png)

```nginx
# 代理缓存在经过nginx代理的时候，不会去请求服务器，会直接去拿取nginx上的缓存。

# levels 设置缓存文件目录层次；levels=1:2 表示两级目录
# keys_zone 设置缓存名字和共享内存大小
# max_size 最大缓存空间，如果缓存空间满，默认覆盖掉缓存时间最长的资源。
# inactive 在指定时间内没人访问则被删除
# use_temp_path 临时存放管理，off为关闭
http {
  proxy_cache_path cache levels=1:2 keys_zone=imooc_cache:10m max_size=10g inactive=60m use_temp_path=off;
  upstream www.imooc.com {
    server 127.0.0.1:8081;
    server 127.0.0.1:8082 max_fails=1 fail_timeout=10s weight=5;
    server 127.0.0.1:8083;
    server www.baidu.com down;
  }
}
```

```nginx
#  proxy_cache不填写，则缓存设置无效
server{
   listen   80;
   server_name  localhost;
   location / {
        proxy_pass http://www.imooc.com;
        proxy_cache imooc_cache;       # 缓存的名称
        proxy_cache_valid 200 304 12h; # 缓存过期周期，200，304的缓存12小时
        proxy_cache_valid any 10m;     # 其余的缓存周期为十分钟
        proxy_cache_key $host$uri$is_args$args; # 缓存维度
        add_header Nginx-Cache "$upstream_cache_status";  # 添加response返回头
        proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504; # 一台服务出现问题时，转到其他服务运行
        }
}
```
```nginx
# 不缓存部分页面
server{
   listen   80;
   server_name  localhost;

   if ($request_uri ~ ^/(1|2|3)) {
      set $cookie_nocache 1;
   }

   location / {
        proxy_pass http://www.imooc.com;
        proxy_cache imooc_cache;
        proxy_cache_valid 200 304 12h;
        proxy_cache_valid any 10m;
        proxy_cache_key $host$uri$is_args$args;
        add_header Nginx-Cache "$upstream_cache_status";
        proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;

        proxy_no_cache $cookie_nocache $arg_nocache $arg_comment;
        proxy_no_cache $http_pragma $http_authorization;
        }
}

```

Nginx 负载均衡、动静分离、代理和代理缓存

微信上input失去焦点时不回弹，并且如果我们使用了fixed定位铺满整个屏幕时，会出现非常诡异的现象，所有的元素发生了偏移，但是页面上的位置不会发生变化，点击input1时，可能这个时候点击的是input2。

```js
export function isWeiXinAndIos(){
  let ua = '' + window.navigator.userAgent.toLowerCase()
  let isWeixin = /MicroMessenger/i.test(ua)
  let isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua)
  return isWeixin && isIos
}

export function  weChatInputBug(){
  let myFunction
  let isWXAndIos =isWeiXinAndIos();
  if (isWXAndIos) {
    document.body.addEventListener('focusin', () => {
      clearTimeout(myFunction)
    })
    document.body.addEventListener('focusout', () => {
      clearTimeout(myFunction)
      myFunction = setTimeout(function() {
        window.scrollTo({top: 0, left: 0, behavior: 'smooth'})
      }, 200)
    });
  }

}
```

微信上失去焦点页面不回弹问题

本文仅用于学习爬虫，学习爬虫可以帮助你更好地了解网络和网站的工作原理，并获取网站上的数据。但是请记住，在进行爬取时，请始终遵守网络礼仪和法律法规，避免对网站或其他人造成损失或伤害。



## 爬取CSS + JS
```js
var request = require('request');
var fs=require('fs');
var cheerio=require('cheerio');

let fileUrl='./personal';

function fetchContent(element,attr,body){
  let $=cheerio.load(body);
  Array.prototype.forEach.call($(element),(item,index)=>{

    let url=$(element).eq(index).attr(attr);
    if(url){
      request(url,function(error,response,body){
        let arr=url.split('/');
        const name=`${fileUrl}/${arr[arr.length-1]}`;
        fs.appendFile(name,body)
      })
    }
  });
}

request('http://xxx.com', function (error, response, body) {


  fs.appendFile(`${fileUrl}/index.html`,body);


  fetchContent('script','src',body)

  fetchContent('link','href',body)

});
```

## 爬取文章
```js
var request = require('request');
var fs=require('fs');
var cheerio=require('cheerio');


let url='https://xxx.com';
request(url, function (error, response, body) {
  
 let $=cheerio.load(body,{
  decodeEntities:false     //文本不会被转义
});
 let content=$('.j_readContent').text()
  console.log(content)
  fs.appendFile('文章.text',content)

});
```

## 自定义headers
使用request自定义headers
```js
let request=require('request')

request({
  url:'http://xxx.com',
  headers: {
    'host': "biz.f139.com",
    'referer':"http://biz.f139.com/",
    'user-agent':'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1'
  }
}, function (error, response, body) {
  console.log(body,'body')
});
```
使用superagent自定义headers
```js
var superagent = require('superagent');

superagent
  .get('http://xxx.com')
  .set('referer','http://biz.f139.com')
  .set('host',"biz.f139.com")
  .set('user-agent','Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1')
  .end(function(err, res) {
    if (err) {
      console.log(err,'err')
    } else {
      console.log(res.text,'res')
    }
  })

```