Welcome to Logan's Blog!

博客主题访问地址：https://github.com/logan70/logan70.github.io

• 慕课ES6入门与Promise入门

  2018-06-06

  Logan

  Javascript

  ES6  Promise
  • ES6入门
    • 常量
      • ES5中常量的写法
      • ES6中常量的写法
    • 作用域
    • 箭头函数

  ES6入门

  常量

  ES5中常量的写法

  Object.defineProperty(window, 'myPI', {
    value: 3.141592653,
    writable: false
  })
  

  ES6中常量的写法

  const PI = 3.141592653
  console.log(PI)
  PI = 1 // error
  

  作用域

  块级作用域的存在

  箭头函数

  () => {
    //***
  }
  

  • 小括号内的参数如果只有一个，则可以省略小括号
  • 花括号内只存在返回值，则可以省略花括号和return

  // ES5写法
  arr.map(function(val) {
    return val + 1
  })
  
  // ES6写法1
  arr.map((val) => {
    return val + 1
  })
  
  // ES6写法2
  arr.map(val => val + 1)
  

  阅读全文

  ---

• Mac配置

  2018-05-05

  Logan

  Tools

  Mac
  • 一、系统配置
    • 1. 修改用户名后导致无法获得管理员权限
    • 2. 允许第三方APP安装
    • 3. 触摸板设置
    • 4.开启三指拖移
    • 5. 调节按键重复速度及重复前延迟时间
    • 6. 修改大写键为Control键
    • 7. 开启全键盘控制
    • 8. 设置触发角（依据个人喜好）
    • 9. 切换桌面快捷键设置（依个人喜好）
    • 10. 设置聚焦搜索快捷键（依个人喜好）
    • 11. 设置上一个输入法快捷键（依个人喜好）
    • 12. 关闭自动纠正拼写
    • 13. 显示所有文件扩展名
    • 14. 百分比方式显示电量
    • 15. 数码方式显示日期
  • 二、常用快捷键
    • 1. 各应用程序之间切换
    • 2. 应用程序内Tab页之间切换
    • 3. 编辑快捷键（部分程序内会有冲突）
  • 三、 安装Homebrew
  • 四、iTerm2 + zsh + oh-my-zsh 终端配置
    • 1. 安装iTerm2
    • 2. 安装oh-my-zsh
  • 五、 安装Git
  • 六、安装nvm来管理node的版本
  • 七、安装Visual Studio Code
    • 1. 安装
    • 2. 同步配置
    • 3. 如何使用命令行工具打开VS Code
  • 八、Vim配置
    • 1. 安装vunble
    • 2. vim配色方案molokai
    • 3. 配置vim
  • 九、MongoDB 的安装
  • 十、 其他配置

  一、系统配置

  1. 修改用户名后导致无法获得管理员权限

  在修改用户名后导致无法获得管理员权限。解决方法如下

  开机，启动时按cmd+S。这时，你会进入Single User Model，出现像DOS一样的提示符 #root>。请在#root>下输入 (注意空格, 大小写，一句一回车)

  fsck -y
  mount -uaw /
  rm /var/db/.AppleSetupDone
  reboot
  

  紧接着，苹果电脑会重启，并且在开机后出现新装机时的欢迎界面。你需要像第一次打开苹果电脑一样，重新建立一个新的管理员账号（数据会保留）。当开机完毕之后，在新的管理员下请打开系统预制－账户。打开最下面的锁，当跳出密码框时，输入新的管理员帐号密码。这时，你会看到出现至少两个账号，包括了新的管理员的帐号和你原来的帐号。你可以点中原来的账号, 选密码－更改密码，你也可以选择删除之前的账户。

  2. 允许第三方APP安装

  macOS Sierra (10.12)以后的版本在系统偏好设置 -> 安全性与隐私 -> 通用中不再有任何来源选项。

  打开macOS自带的Terminal.app也就是终端，键入

  sudo spctl --master-disable
  

  苹果默认关闭了非官方应用商店app的安装，但是实际使用过程中，有大量的app都因为种种原因而没有上应用商店

  再次进入设置，选择任何来源

  

  3. 触摸板设置

  如图设置即可

  

  • 查询与数据检测器：多用于浏览网页取词翻译
  • 辅助点按：相当于鼠标右键
  • 轻点来点按：相当于鼠标左键

  

  

  • 应用Expose：显示同一应用下的多窗口

  4.开启三指拖移

  打开系统偏好设置 -> 辅助功能 -> 鼠标与触控版 -> 触控版选项，启用三指拖移。

  三指拖移相当于按下鼠标并拖动，常用于文件移动、窗口移动、选中文本等操作。

  

  5. 调节按键重复速度及重复前延迟时间

  此设置主要是为了配合coding时的各种操作，使之更加敏捷。

  打开系统偏好设置 -> 键盘 -> 键盘

  

  6. 修改大写键为Control键

  大写键使用频率较低，为了指位舒服及效率，将其设置为Control键。

  打开系统偏好设置 -> 键盘 -> 键盘 -> 修饰键

  

  7. 开启全键盘控制

  针对一般的对话框，回车键可以执行操作，但是取消键必须使用鼠标点击的痛点，开启全键盘控制。

  打开系统偏好设置 -> 键盘 -> 快捷键

  

  这样就可以达到以下效果：

  

  • 回车键：触发蓝色实心按钮
  • 空格键：触发蓝框空心按钮
  • Tab键：切换选项
  • Esc键：取消

  8. 设置触发角（依据个人喜好）

  作用是当鼠标滑动到屏幕角落时触发制定操作。

  打开系统偏好设置 -> 调度中心 -> 触发角

  

  9. 切换桌面快捷键设置（依个人喜好）

  四指上滑切换至调度中心，在右上角添加若干个桌面，依据个人喜好在桌面上放置对应程序。

  打开系统偏好设置 -> 键盘 -> 快捷键 -> 调度中心

  设置对应桌面快捷键为Option + 数字

  

  10. 设置聚焦搜索快捷键（依个人喜好）

  将聚焦搜索快捷键设置为Control + 空格

  打开系统偏好设置 -> 键盘 -> 快捷键 -> 聚焦

  

  11. 设置上一个输入法快捷键（依个人喜好）

  将选择上一个输入法快捷键设置为Command + 空格

  打开系统偏好设置 -> 键盘 -> 快捷键 -> 输入法

  

  12. 关闭自动纠正拼写

  打开系统偏好设置 -> 键盘 -> 文本

  

  13. 显示所有文件扩展名

  打开访达，Command + ,打开访达偏好设置，打开高级选项卡

  

  14. 百分比方式显示电量

  

  15. 数码方式显示日期

  

  二、常用快捷键

  1. 各应用程序之间切换

  • Command + Tab：从左往右切换选择应用程序
  • Command + Shift + Tab：从右往左切换选择应用程序

  2. 应用程序内Tab页之间切换

  • Command + [：从左往右切换选择应用Tab
  • Command + ]：从右往左切换选择应用Tab

  3. 编辑快捷键（部分程序内会有冲突）

  • Control + d：向后删除一个字符
  • Control + h：向前删除一个字符
  • Control + t：交换光标前后字符
  • Control + f：光标向右移动一个字符
  • Control + b：光标向左移动一个字符
  • Control + p：光标向上移动一行
  • Control + n：光标向下移动一行
  • Control + Option + f/b：光标向右/左以单词移动
  • Command + Delete：删除光标位置到行首的所有内容
  • Control + f：光标向右移动一个字符

  三、 安装Homebrew

  简介

  brew是mac系统下最好用的包管理软件，绝大多数开发相关的软件甚至是常用的软件都可以在brew下管理了，各个工具的官网基本也都会优先推荐用brew安装他们的服务，用brew管理的好处就是：

  • 你可以在一个地方管理你所有的软件，不用再去网上找各种安装包的地址
  • 不用再手动下载和安装依赖库，以及遇到的嵌套依赖库问题
  • 自动执行安装前配置、编译和安装的过程
  • 用一行命令可以更新所有的软件，维护起来非常方便

  所以原则就是：能用brew管理的软件都使用brew进行管理，其次是 App Store

  安装

  在命令行内输入命令安装Homebrew

  /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  

  常用命令

  # 安装服务或工具
  brew install git
  # 模糊搜索brew支持的服务或工具，不加搜索名则展示所有
  brew search google
  # 显示软件的相关信息
  brew info git
  # 卸载服务或工具
  brew uninstall git
  # 列出本机通过brew安装的所有服务和工具
  brew list
  # 清楚下载的各种缓存
  brew cleanup
  # 更新Homebrew以及brew安装管理的所有服务和工具
  brew update && brew upgrade
  

  brew-cask

  brew-cask 是在brew的基础上增强的一个工具，二者的差别在于：

  • brew主要用来下载一些不带界面的命令行下的工具和第三方库来进行二次开发
  • brew-cask主要用来下载一些带界面的应用软件，下载好后会自动安装，并能在mac中直接运行使用

  brew-cask常用的命令

  brew cask install goole-chrome # 下载安装软件
  brew cask uninstall wechat # 卸载软件
  brew cask search qq # 模糊搜索软件，如果不加软件名，就列出所有它支持的软件
  brew cask info iterm2 # 显示这个软件的详细信息，如果已经用cask安装了，也会显示其安装目录信息等
  brew cask list # 列出本机按照过的软件列表
  brew cask cleanup #  清除下载的缓存以及各种链接信息
  brew update && brew upgrade brew-cask # 更新cask自身
  

  四、iTerm2 + zsh + oh-my-zsh 终端配置

  配置一个实用又炫酷的终端

  1. 安装iTerm2

  brew cask install iTerm2
  

  Iterm2配置教程

  2. 安装oh-my-zsh

  Mac系统默认使用dash作为终端，可以使用命令修改默认使用zsh：

  chsh -s /bin/zsh
  

  如果想修改回默认dash，同样使用chsh命令即可：

  chsh -s /bin/bash
  

  然后我们安装oh-my-zsh

  # 如果没有安装zsh，则首先执行brew install zsh zsh-completions
  sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
  

  剩余的字体、主题等配置可自行搜索挑选，可参考iTerm2 + Oh My Zsh 打造舒适终端体验

  五、 安装Git

  首先我们使用Homebrew安装并关联git

  brew install git
  brew link git
  

  然后根据提示进行操作，如果提示某些文件夹已存在，则删除后再试，如果删除时提示Operation not permitted，原因是系统加入了Rootless机制

  于是尝试关闭 Rootless。重启按住 Command+R，进入恢复模式，打开Terminal终端。

  csrutil disable
  

  重启后删除相关文件夹再次尝试brew link git即可。如果要恢复默认，那么

  csrutil enable
  

  之后查看git位置及版本

  which git
  git --version
  

  六、安装nvm来管理node的版本

  首先我们用Homebrew安装nvm（node version manager）

  brew install nvm
  # 等待安装好之后进行配置
  mkdir ~/.nvm
  vi ~/.zshrc
  # 把下面这段添加到后面，注意，如果使用bash的话，请把这段话贴在 ~/.bash_profile 里面
  export NVM_DIR="$HOME/.nvm"
  . "/usr/local/opt/nvm/nvm.sh"
  # 然后
  source ~/.zshrc
  # 如果使用bash的话，执行 source ~/.bash/profile
  # 安装最新版的node
  nvm install node
  # 使用node
  nvm use node
  

  使用nvm安装并使用指定版本的node，示例如下

  nvm install 4.6
  nvm use 4.6
  # 查看node版本
  node --version
  

  七、安装Visual Studio Code

  1. 安装

  使用Homebrew安装 VSCode

  brew cask install visual-studio-code
  

  2. 同步配置

  推荐插件Syncing，可以同步VSCode设置，而且可以设置代理

  具体使用详见VSCode同步设置插件Syncing

  需要设置代理的注意不仅要设置插件代理（方法见上面链接），还要设置VSCode的代理（在用户设置里覆盖）

  同步设置完成之后，还要在设置内修改Git可执行文件的路径，不知道路径在哪的，可以使用命令which git查看，具体配置如下

  {
      ...
      // 设置代理
      "http.proxy": "http://web-proxy.google.com:8080",
      // 控制是否根据提供的 CA 列表验证代理服务器证书
      "http.proxyStrictSSL": false,
      // Git 可执行文件的路径。
      "git.path": "/usr/local/bin/git"
  }
  

  3. 如何使用命令行工具打开VS Code

  打开 VS Code，打开控制面板（f1）,输入 shell command，在提示里看到 Shell Command: Install 'code' command in PATH，运行它就可以了。

  

  之后就可以在终端中输入 code .，使用 VS Code 打开当前文件夹。

  八、Vim配置

  1. 安装vunble

  $ git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim
  

  然后，在~目录下新建.vimrc，输入：

  set nocompatible
  filetype off
  set rtp+=~/.vim/bundle/Vundle.vim
  call vundle#begin()
  Plugin 'VundleVim/Vundle.vim'
  

  然后esc退出vim的编辑模式，输入:BundleInstall（注意前面要有冒号），此时插件开始安装。

  2. vim配色方案molokai

  配色方案molokai

  配置很简单，在~/.vim/colors下，复制进去molokai.vim即可

  3. 配置vim

  前端Vim配置方案

  将上面地址内的myVimrc文件内的内容复制到~/.vimrc内

  然后esc退出vim的编辑模式，输入:BundleInstall（注意前面要有冒号），此时插件开始安装。

  安装完成后，vim配置就完成了

  九、MongoDB 的安装

  用Homebrew来安装MongoDB

  Cause running homebrew as root is extremely dangerous and no longer supported. So we use command brew install mongodb instead of sudo brew install mongodb

  启动MongoDB服务 ： brew services start mongodb

  停止MongoDB服务 ： brew services stop mongodb

  查看Homebrew安装的服务情况 ： brew services list

  之后就可以在命令行进行MongoDB的操作了

  十、 其他配置

  到这里，一些基本的配置就差不多完成了，之后就是安装一些常用的软件以及自己的工具。

  下面介绍一些常用软件的brew-cask包名

  软件名	brew-cask包名	用途备注
  Google浏览器	google-chrome
  QQ	qq
  网易云音乐	neteasemusic
  解压软件	the-unarchiver
  CleanMyMac	cleanmymac	系统清理软件
  iTerm2	iterm2	终端模拟器
  微软Office套装	microsoft-office	需要自行激活
  Atom	atom
  搜狗输入法	sogouinput	需要根据终端提示进一步安装
  迅雷	thunder
  Google Earth	google-earth-pro
  flux	flux	护眼工具，根据日光信息自动调整屏幕亮度
  Free Download Manager	free-download-manager	下载工具

  阅读全文

  ---

• 学习webpack4

  2018-05-04

  Logan

  HTML

  responsive
  • 一、Webpack介绍
    • webpack是什么
    • webpack的作用
    • webpack的构成

  一、Webpack介绍

  webpack是什么

  • webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

  webpack的作用

  • 打包（把多个文件打包成一个js文件，减少服务器压力、带宽）
  • 转化（less/sass/ts）需要loader
  • 优化（SPA越来越盛行，前段项目复杂度高，webpack可以对项目进行优化）

  webpack的构成

  • entry 入口
  • output 出口
  • module 模块
  • plugins 插件
  • devSever 开发服务器
  • mode 开发模式 development/production
  阅读全文

  ---

• 响应式布局详解

  2018-03-13

  Logan

  HTML

  responsive
  • 响应式设计的步骤
    • 题外话：低版本浏览器支持html及css3设置
    • 布局及meta标签

  响应式设计的步骤

  题外话：低版本浏览器支持html及css3设置

  <!--[if lt IE 9]>     
  <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  

  布局及meta标签

  • 先写非响应式布局，页面固定宽度大小

  • 添加媒体查询（Media Query)和响应式代码

  设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。

  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="HandheldFriendly" content="true">
  

  阅读全文

  ---

• HTTP协议详解

  2018-03-12

  Logan

  HTTP

  http协议
  • HTTP协议
    • 简介
    • 主要特点

  HTTP协议

  简介

  HTTP是Hyper Text Transfer Protocol（超文本传输协议）的缩写。

  RFC 2616定义了今天普遍使用的一个版本——HTTP 1.1。

  主要特点

  1、简单快速：客户向服务器请求服务时，只需传送请求方法和路径。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。

  2、灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。

  3.无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

  4.无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。同一个客户端的这次请求和上次请求是没有对应关系。

  5、支持B/S及C/S模式。

  阅读全文

  ---

• Vue打造移动音乐App-1

  2018-03-10

  Logan

  VUE

  vue

  #

  阅读全文

  ---