准备软件

1. VirtualBox 5.2.8
2. Vagrant 2.0.1

官网下载安装，比我的新即可，安装路径自选。

创建 Vagrantfile

新建文件夹并创建 Vagrantfile 放在里面，我配置的环境是 Ubuntu 16.04，内存8G，可以换成自己熟悉的环境。
映射端口80，443（Web），3306（数据库），9200，9300（搜索引擎）。

1
2
3
4
5
6
7
8
9
10
11

Vagrant.configure("2") do |config|
  config.vm.box = "ubuntu/xenial64"
  config.vm.network "forwarded_port", guest: 80, host: 80
  config.vm.network "forwarded_port", guest: 443, host: 443
  config.vm.network "forwarded_port", guest: 3306, host: 3306
  config.vm.network "forwarded_port", guest: 9200, host: 9200
  config.vm.network "forwarded_port", guest: 9300, host: 9300
  config.vm.provider "virtualbox" do |vb|
    vb.memory = "8192"
  end
end

浅拷贝单层对象

1
2

let obj = { id: 1, title: "1" }
let copyOfObj = Object.assign({}, obj)

深拷贝多层对象

1
2
3
4
5
6
7

let obj = {
  id: 1,
  title: "1",
  tag: ['js', 'javascript'],
  category: { id: 1001, title: 'frontend' }
}
let copyOfObj = JSON.parse(JSON.stringify(obj))

浅拷贝简单类型数组

1
2

let arr = [1, 2, 3]
let copyOfArr = [...arr]

深拷贝单层对象组成的数组

1
2
3
4
5
6
7

let arr = [
  { id: 1, title: "1" },
  { id: 2, title: "2" },
  { id: 3, title: "3" }
]
let copyOfArr1 = arr.map((item) => Object.assign({}, item))
let copyOfArr2 = JSON.parse(JSON.stringify(arr))

深拷贝多层对象组成的数组

1
2
3
4
5
6
7

let arr = [
  { id: 1, title: "1", subObj: { name: 'subObj1' } },
  { id: 2, title: "2", subObj: { name: 'subObj2' } },
  { id: 3, title: "3", subObj: { name: 'subObj3' } }
]
let copyOfArr1 = arr.map((item) => JSON.parse(JSON.stringify(item)))
let copyOfArr2 = JSON.parse(JSON.stringify(arr))

总结

不考虑性能的情况下，JSON.parse(JSON.stringify(value))是最简最万能的拷贝。

初学Vue遇到的问题，尝试了几个小时才搞明白，大佬应该一眼就能看出什么问题吧……

需要注意，不要直接在JS中操作一个Vue data对象中不存在的属性，如果同时有通过v-model绑定到该对象的不存在的属性时，会出现诡异的行为表现，console中不会报出任何 warn 或 error。

需求是，实现三个复选框，第一个复选框初始为选中状态，一开始写出来是这样的——

1
2
3
4
5

<div id="app" style="margin: 10px;">
  <van-checkbox v-for="box in checkboxes" :key="box.id" v-model="box.selected">
    复选框 {{ box.title }}
  </van-checkbox>
</div>

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

new Vue({
  el: '#app',
  data () {
    return {
      checkboxes: [
        { id: 1, title: 'a' },
        { id: 2, title: 'b' },
        { id: 3, title: 'c' }
      ]
    }
  },
  created () {
    this.checkboxes[0].selected = true
  }
})

试下效果：

See the Pen vue-v-model-not-work by iMaeGoo (@iMaeGoo) on CodePen.

复选框a的表现显然是异常的，点击不能成功地切换选中状态，而在点击之后再点击其他复选框，才会“有延迟地”切换状态。

提到网页毛玻璃效果，总结下来有以下2种：

1. 模糊元素本身
2. 模糊元素后面的内容

早在之前，1就已经可以通过 CSS3 filter 属性实现，而2一直没有一个好的解决方案。对1的运用，也可以达到2的效果，通过模糊图片的一部分，就可以实现类似 bilibili 导航栏的模糊背景效果 ↓

这样实现的前提是，我们的背景是一个静态的，单一的图片，那么如果我们需要模糊的背景比较复杂呢？仔细观察QQ右栏的标题栏，和下方的应用 Dock，都是 iOS 常见的毛玻璃叠加层效果 ↓

显然模糊元素本身并不能解决所有场景的问题。

1. 需要 ROOT 权限
2. 用 ES、MT、RE 等类型的文件管理器复制以下目录到内部存储
   /data/data/com.mfashiongallery.emag/files/img_cache/
3. 将复制出来的文件批量重命名，添加 jpg 后缀

项目staging环境日志难以搜索，计划搭建EFK管理日志，但是EFK内存消耗太大，再新增云服务器不划算，打算搭建在本地（16G内存）。

什么是 EFK

EFK不是一个软件，而是一套解决方案，并且都是开源软件，其中 ELasticsearch 负责日志保存和搜索，FileBeat 负责收集日志，Kibana 负责界面。

1. Elasticsearch
   Elasticsearch是个开源分布式搜索引擎，提供搜集、分析、存储数据三大功能。它的特点有：分布式，零配置，自动发现，索引自动分片，索引副本机制，restful风格接口，多数据源，自动搜索负载等。
2. FileBeat
   Filebeat 隶属于 Beats，搜集日志数据并上载到 Elasticsearch、Logstash、Redis 等平台。
3. Kibana
   Kibana 提供日志分析的友好 Web 界面，可以帮助汇总、分析和搜索重要数据日志。

环境现状

1. 本地环境：Windows 10，Intel(R) Core(TM) i5-7500 CPU，内存 16G
2. 远程环境：SUSE Linux Enterprise Server 11，可用内存不足 1G
3. 本地可以启虚拟机，但没钱买额外的云服务器。

最初想法

目前有3种思路：

1. 本地启动Elasticsearch、Kibana、Filebeat，服务器启动FTP，并映射到本地网络驱动器，Filebeat配置从网络驱动器读取log。
2. 本地启动Elasticsearch、Kibana，用反向代理工具FRP暴露Elasticsearch的9200端口到公网（注意配置鉴权），远程启动Filebeat，输出到本地的Elasticsearch。
3. 本地启动Elasticsearch、Kibana，Logstash，远程启动Filebeat、Redis，远程的Filebeat输出到Redis，本地的Logstash从Redis上读取，转发给Elasticsearch。

修改 box 保存位置

在环境变量中添加：

修改虚拟机保存位置

打开VirtualBox，选择File->Preferences，修改Default Machine Folder：