content.json

[{"title":"windows下mysql安装","date":"2020-03-04T05:49:43.286Z","path":"2020/03/04/win_mysql/","text":"windows下mysql安装下载：https://dev.mysql.com/downloads/mysql/ 安装环境变量环境变量 -> 系统变量 Path 新建(N) my.ini文件编写my.ini文件所在位置： my.ini文件内容： 12345678910111213141516[client]port=3306default-character-set=utf8[mysqld]# 设置服务器的访问端口和字符集port=3306character_set_server=utf8# 允许最大连接数max_connections=200# 设置为自己MYSQL的安装目录basedir=D:\\yaozu_download\\mysql-8.0.19-winx64\\mysql-8.0.19-winx64# 设置为MYSQL的数据目录datadir=D:\\yaozu_download\\mysql-8.0.19-winx64\\mysql-8.0.19-winx64\\data# 创建新表时将使用的默认存储引擎default-storage-engine=INNODB 初始化MySQL1mysqld --initialize --user=mysql --console 命令执行完毕之后，最后面会有默认密码，等下会用到 1mysqld --install 登录mysql1mysql -u root -p 接下来会让你输入密码，就把刚刚生成的默认密码复制进去 登录进去后，要设置成你容易记住的密码： 1set password='123'; Bugs Client does not support authentication protocol requested by server； 123use mysql;alter user 'root'@'localhost' identified with mysql_native_password by '********';flush privileges;","tags":[]},{"title":"arachni对网站进行安全检查","date":"2020-03-03T09:26:35.212Z","path":"2020/03/03/arachni/","text":"第一步：安装可以从官网去下载（下载很慢），我放了一份在百度云网盘地址：链接: https://pan.baidu.com/s/1dioWcTHx5qR6ffMwS8l-zA 提取码: aqfm 下载完成后，解压并进入到bin目录，命令行执行：./arachni_web 在浏览器打开：localhost:9292 需要输入用户名和密码 1234567# 管理员账户：账户: admin@admin.admin密码： administrator# 普通用户：账户：user@user.user密码： regular_user 登录成功之后： 输入要测试的URL，稍等片刻从上图可以看出网站需要优化的地方","tags":[]},{"title":"js相关","date":"2020-03-03T09:26:35.211Z","path":"2020/03/03/js/","text":"命名空间 作用：避免全局污染123456789101112131415161718192021222324252627(function () { var _NS = function () {} _NS.prototype.html = function (obj,value) { var isArray=this.isArrayLike(obj), i=0; if (typeof value == 'string') { if (!isArray) { obj.innerHTML = value; } else { var length = obj.length; while (i < length) { obj[i].innerHTML = value; i += 1; } } } else { if (!isArray) { return obj.innerHTML; } else { return obj[0].innerHTML; } } } window.NS = new _NS();})(); js常用库函数的npm1.在当前项目下安装 1npm install --save-dev outils 2.按需引入 12const getOS = require('outils/getOS')const OS = getOS() 获取一个字符串的字节长度12345678function GetBytes(str) { var len = str.length; for (var i = 0; i < len; i++) { //console.log(str[i],str.charCodeAt(i)); if (str.charCodeAt(i) > 255) len++; } return len;} 求一个数组的最大值 Math.max.apply(null, arr) 监听屏幕的变化1234567891011121314var mql = window.matchMedia('(orientation: portrait)');console.log(mql);function handleOrientationChange(mql) { if (mql.matches) { console.log('portrait'); // 竖屏 } else { console.log('landscape'); // 横屏 } } // 输出当前屏幕模式handleOrientationChange(mql);// 监听屏幕模式变化mql.addListener(handleOrientationChange); 安卓手机在input输入框获得焦点的时候，整个页面上移12345678910// window.onload 或者$(function() {})中添加var u = navigator.userAgent; if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机 var input = document.querySelector('input') input.addEventListener('focus', function () { setInterval(function () { input.scrollIntoView(true); // 核心 }, 100) }) } 使用正则实现一个千位符(从右向左，每隔三位插入一个逗号)123 vartoThousands = function(number) { return (number + '').replace(/(\\d)(?=(\\d{3})+$)/g, '$1,');} 移动端滚动穿透的问题1234var modal = document.querySelector('.mask'); // 弹窗dom对象 modal.addEventListener('touchmove', function(e) { e.preventDefault(); }, false); 这种方式的缺点是：当前元素也没法滚动 禁止双击选中1$('body').bind(\"selectstart\", function() {return false;});","tags":[]},{"title":"crontab 定时任务的编写","date":"2020-03-03T09:26:35.211Z","path":"2020/03/03/crontab/","text":"进入时间表编写模式crontab -e* * * * * 五颗星分别表示：分、时、日、月、周查看所有表单任务：crontab -l 注：第一次添加完任务之后，要重新启动crontab的进程，使用下面的命令： 1systemctl restart crond 查看crond当前的状态：systemctl status crond*/2 如果在分的这个位置，就表示每两分钟执行一次 注：如果同一时间需要执行多个任务，不能将多个任务放在一行，需要分开写","tags":[]},{"title":"Mysql for mac 配置","date":"2020-03-03T09:26:35.209Z","path":"2020/03/03/mysql_for_mac/","text":"主要参考了：https://blog.csdn.net/qq_32180569/article/details/83417656这篇文档 Mysql8.0版本更新密码的方式有点不一样，看了很多文章都是使用旧版的方法，一直报错1064错终端启停Mysql12345启动MySQL服务： sudo /usr/local/MySQL/support-files/mysql.server start停止MySQL服务： sudo /usr/local/mysql/support-files/mysql.server stop重启MySQL服务： sudo /usr/local/mysql/support-files/mysql.server restart 停止Mysql服务，我发现在系统设置里面停止，有时候会停止不了，建议使用命令行停止 重置密码：1234567891011cd /usr/local/mysql/bin/sudo su# 下面命令注意一下，如果是更新密码的话，执行：./mysqld_safe./mysqld_safe --skip-grant-tables &新建一个终端：/usr/local/mysql/bin/mysql -u root -p如果是更新密码，下面需要输入旧密码，如果是第一次设置密码，直接回车ALTER user 'root'@'localhost' IDENTIFIED BY '12345678'; # 建议使用8位密码FLUSH PRIVILEGES;sudo /usr/local/mysql/support-files/mysql.server restart","tags":[]},{"title":"","date":"2020-03-03T09:26:35.207Z","path":"2020/03/03/webpack/","text":"nuxt项目无法在本机ip下访问， 在package.json文件下添加,注：config是和script是同一级的123456\"config\": { \"nuxt\": { \"host\": \"0.0.0.0\", \"port\": \"3000\" } }, SPA无法在本机ip下访问,同样是在package.json文件下,在script -> dev 添加：–host 本机IP123456\"scripts\": { \"dev\": \"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.1.127\", \"start\": \"npm run dev\", \"lint\": \"eslint --ext .js,.vue src\", \"build\": \"node build/build.js\"},","tags":[]},{"title":"mongodb 安装与使用","date":"2020-03-03T09:26:35.205Z","path":"2020/03/03/mongod/","text":"看了不少的开源项目都是用mongdod数据库，就想也研究一下首先说一下在window下面的安装mongodb,主要是参照了菜鸟教程的安装教程，期间遇到了一点点坑 假如你在mongodb目录安装过mongo，第二次安装的时候要换一个目录去安装安装的时候要自定义目录去安装，不要安装在默认的目录假如遇到没有足够的权限去开启服务这个报错，就要换个新建一个目录去安装，网上说的用管理员权限去安装是没有成功 具体的环境变量配置、log、db目录的生成可以参考这篇文章","tags":[]},{"title":"pm2","date":"2020-03-03T09:26:35.204Z","path":"2020/03/03/pm2/","text":"为什么要使用pm2PM2是node进程管理工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，而且使用非常简单。 常用的一些API： –watch：监听应用目录的变化，一旦发生变化，自动重启。 -i：启用多少个实例，可用于负载均衡。如果-i 0或者-i max，则根据当前机器核数确定实例数目。 –ignore-watch：排除监听的目录/文件 -n –name：应用的名称。查看应用信息的时候可以用到。 -o –output ：标准输出日志文件的路径。 -e –error ：错误输出日志文件的路径。 常用的一些操作： 启动： pm2 start app.js –watch -n eleme -e 查看node服务列表： pm2 list 停止某个服务： pm2 stop id/name 停止所有服务： pm2 stop all # 这个只是停止，并没有从列表中删除 停止并移除某个服务： pm2 delete id/name 重启服务 pm2 restart app.js 设置pm2开机启动： pm2 startup 第一步执行完成之后，会让你执行一段命令 直接复制到命令行，回车执行 pm2 save （把需要自动启动的服务先执行起来） pm2执行npm命令：1pm2 start npm --name socket -- run start --watch","tags":[]},{"title":"eslint 配置相关","date":"2020-03-03T09:26:35.203Z","path":"2020/03/03/eslint/","text":"设置全局的变量, 在.eslintrc文件下添加1234globals: { 'getCookie': true, 'setCookie': true}","tags":[]},{"title":"破解wifi","date":"2020-03-03T09:26:35.202Z","path":"2020/03/03/crackWifi/","text":"准备安装macport和aircrack-ng 百度有很多通过airport查看附近的wifi1.没有把airport添加到系统命令的sudo /System/Library/PrivateFrameworks/Apple80211.framework/Versions/Current/Resources/airport -s2.把airport添加到系统命令sudo ln -s /System/Library/PrivateFrameworks/Apple80211.framework/Versions/Current/Resources/airport /usr/local/Cellar/aircrack-ng开始查看附近的wifiairport -sSSID 是 wifi名称，RSSI 是信号强度，CHANNEL 是信道。选择RSSI比较小的，越小信号越强，可以这么理解(负数的话，越大越好)查看自己的网卡信息点击桌面左上角的苹果 系统信息 系统报告 wifi 看是en0还是en1看是抓包sudo airport en0 sniff 1 //en0是你的网卡的信息，1是你要破解的wifi的信道CHANNEL打开finder，快捷键是： command+alt+space 点击左上角的：前往 或者快捷键是comman+shift+g 查看刚刚的抓包文件/tmp在桌面上创建一个文件夹wifi 把刚刚的抓包文件和密码字典放一起 分别命名为01查看是否抓到包cd ~/Desktop/wifi aircrack-ng -w 01.txt 01.cap在命令行里面查找1 handshake command+f 快捷键：command+f，并查看对应的行数 ，拉到命令行的最下方找到：index number of target network ? 在其后面输入刚刚对应的行数接下来就是漫长的等待","tags":[]},{"title":"docker 学习","date":"2020-03-03T09:26:34.961Z","path":"2020/03/03/docker/","text":"创建并运行一个容器：docker run ubuntu echo "hello world" # ubuntu内核，容器创建成功后，输出hello worlddocker ps -a -l -a 列出所有的容器 -l 列出最新创建的容器 查看容器详细信息：docker inspect ubuntu运行容器，并进入到容器，并在命令行进行交互docker run -i -t ubuntu如果要运行已经存在的容器，需要使用docker start [-i] IMAGE删除容器docker rm 容器ID守护式容器： 可以长期运行 没有交互式会话 适合运行应用程序和服务以守护形式运行容器： docker run –name test -d ubuntu /bin/sh -c “while true; do echo hello world; sleep 1;done” 容器在后台运行，再次进入容器： docker attach 容器ID 查看容器的状态：docker logs -tf --tail 0 test # tail后面跟现实最新的几条数据查看运行中容器的进程：docker top 容器ID在运行的容器中启动新的进程：docker exec -i -t test /bin/bash停止容器docker stop 容器ID # 稍微慢点 docker kill 容器ID # 更快列出镜像docker images查看一个镜像的详细信息docker inspect imageID删除镜像docker rmi imageID","tags":[]},{"title":"npm 相关","date":"2020-03-03T09:26:34.961Z","path":"2020/03/03/npm/","text":"npm查看一个包的所有版本npm view jquery versionsnpm查看最新的版本：npm view jquery versionnpm流的详细介绍：https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/ http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html https://github.com/RyanZim/awesome-npm-scripts#articles淘宝源的使用和撤回(发布npm包的时候需要使用)撤回： npm config set registry https://registry.npmjs.org使用： npm config set registry https://registry.npm.taobao.org","tags":[]},{"title":"babel、autoprefix 使用","date":"2020-03-03T09:26:34.960Z","path":"2020/03/03/js-babel/","text":"因为最近在新公司里面需要大量的写ES5，所以专门折腾了一下babel参考了一下别人的博客 本来是想借助webpack来运行babel 查看了一下webpack打包的文件会变得比较大，就只是单纯的把ES6变成ES5 全局安装babel-cli 1yarn add babel-cli -g 需要安装两个babel插件babel6以及以上 1yarn add babel-preset-es2015 babel-core 主要命令如下：监视一个文件的改动，并输出到另一个文件1babel --watch js/index.js -o index.js 把整个目录输出到另一个目录1babel src -d dist 也可以把整个目录的文件打包到一个js中1babel src -0 index.js","tags":[]},{"title":"arduino servo电机的使用，以及注意事项","date":"2020-03-03T09:26:34.958Z","path":"2020/03/03/arduino_servo/","text":"如何使用： 三条线的理解 红色连接5v 棕色连接GND 橘黄色连接模拟讯号接口（只能连接带波浪线的） arduino软件中使用：c++1234567891011121314151617// 引入操作库#include <Servo.h>// 给要操作的servo电机命名Servo myservo; // create servo object to control a servovoid setup() { // 连接9号接口 myservo.attach(9); // attaches the servo on pin 9 to the servo object}void loop() { // 旋转180度 myservo.write(180); // sets the servo position according to the scaled value delay(15); // waits for the servo to get there}","tags":[]},{"title":"前端性能优化","date":"2020-03-03T09:26:34.956Z","path":"2020/03/03/brower/","text":"为什么要了解浏览器的这些机制，为了性能优化1.加载：引用外部css，js文件时，把它们放到合适的位置，使浏览器更快的加载2.解析：构建DOM结构，组织css选择器时，选择最优的写法，提高浏览器的解析速率3.渲染：减少‘重绘’ 用户访问网页都发生了什么1.进行域名解析，拿到IP地址之后，向对应的服务器发送请求2.网络服务器接收请求，向数据库服务器发送请求3.数据库服务器将请求的资源发送给网络服务器，网络服务器解析数据，放入http的response中，生成html文件，返回给客户端4.浏览器解析http response5.下载html，以及html中包含的外部引用文件css，js，图片等资源 常见的状态码 200 成功 304 请求资源在本地缓存 400 客户端请求格式有误，服务器无法解析 401 要求用户进行身份验证 500 服务器内部错误 无法完成请求 加载 浏览器的5个常驻线程 GUI渲染线程 js引擎线程 定时器的执行线程 事件触发线程 http异步请求线程 预加载网页，利用空余时间来提前加载该网页的后续网页。 页面的渲染(reflow)和重绘(repaint)","tags":[]},{"title":"ubuntu Gogs安装","date":"2020-03-03T09:26:34.954Z","path":"2020/03/03/gogs/","text":"gogs 在linux中的安装步骤：1. 确保基本环境已经准备好 golang 测试: go version git 测试： git 具体参靠：https://gogs.io/docs/installation/install_from_source.html gogs可以设置钉钉webhook，比较实用，具体操作是进去到仓库里面，生成钉钉的webhook，在钉钉软件里面再去设置","tags":[]},{"title":"ssr","date":"2020-03-03T09:26:34.953Z","path":"2020/03/03/ssr/","text":"服务器端渲染用到的相关的库各个模块的作用 memory-fs： 读取内存中的文件 chokidar： 检查文件是否更改 lru-cache： 增加缓存 firebase: 实时数据库，存储， 云消息传递 compression：文件压缩 route-cache：路由缓存 rimraf: 每次打包之前都把dist目录删除掉 husky: 每次在提交之前对代码进行检查 nodemon: 监听文件的改动，然后重启node服务 concurrently：在命令行同时启动两个服务 vue-meta: 处理头标签 要用route 不要用router作为文件名或者变量名vue-ssr官方地址babel-plugin-syntax-dynamic-import: 动态加载异步组件需要的插件","tags":[]},{"title":"markdown语法测试","date":"2020-03-03T09:26:34.952Z","path":"2020/03/03/markdown语法测试/","text":"0.0.1. 下面是有序列表1.西游记2.红楼梦3.谁许传4.三国演绎 0.0.2. 下面是无序列表 苹果 香蕉 葡萄 0.0.3. 让书写的内容居中 $$ 我就是想居中 $$ 0.0.4. 引用一段自己的代码加上格式就会以相应的格式去渲染12345678910111213141516171819202122232425```html <!--.js #loader {--> <!--display: block;--> <!--position: absolute;--> <!--left: 100px;--> <!--top: 0;--> <!--}--> <!--</style>--> <!--<script--> <!--src="https://code.jquery.com/jquery-2.2.4.min.js"--> <!--integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="--> <!--crossorigin="anonymous"></script>--> <!--<script>--> <!--// Wait for window load--> <!--$(window).load(function () {--> <!--// Animate loader off screen--> <!--$("#loader").animate({--> <!--top: -200--> <!--}, 1500);--> <!--});--> <!--</script>--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <link href="/static/css/mint-ui.min.css" rel="stylesheet"> <link href="/static/css/all.min.css" rel="stylesheet"> <div>在markdown里面写html语法是比较慢，因为tab不好使</div>1<link href="/static/css/all.min.css" rel="stylesheet"> 这是引用名人的一句话 测试一下斜体 两种写法1.在字的左右两边加*号2.在字的左右两边加_ （下划线） 里面是斜体字这里面也是斜体字 下面全是在马克飞象说明文档里面看的@(示例笔记本)[马克飞象|帮助|Markdown] 一个-外加一个空格表示缩进 1.jflajsdfjal 功能丰富 ：支持高亮代码块、LaTeX 公式、流程图，本地图片以及附件上传，甚至截图粘贴，工作学习好帮手； 添加这个会对本MD文档做一个总结，就是把所有标题总结到一起最少三个减号表示一个下划线 0.0.1. 下面是有序列表 0.0.2. 下面是无序列表 0.0.3. 让书写的内容居中 0.0.4. 引用一段自己的代码 ```三个小撇号加上自己的代码个格式 加上格式就会以相应的格式去渲染 下划线前面要有一个空行，才会变粗 最上面一行是显示标题的 Col1 Col2 Col3 Col3 field1 field2 field3 suibianla Col1 Col2 Col3 zhegebijaio field1 field2 field3 我是最后","tags":[]},{"title":"linux系统无法启动提示give root password for maintenance","date":"2020-03-03T09:26:34.951Z","path":"2020/03/03/树莓派-无法进入到GUI桌面/","text":"命令行出现：123GIVE root password for maintenance(or type control-D to continue): 输入root的密码，进入root账户 重新挂载/，并给予rw读写的权限 1mount –o remount,rw / 编辑/etc/fstab文件： 1vi /etc/fstab 我这里是看到了两个盘，有一个盘前面有个me的标签，把后面的数字改为0即可，当时没有截图，无法具体指示","tags":[]},{"title":"vscode 常用快捷键","date":"2020-03-03T09:26:34.950Z","path":"2020/03/03/other-vscode常用快捷键/","text":"vscode 常用快捷键，主要还是对光标的操作插入多光标：Option+click格式化代码：shift+Option+F删除当前行：Cmd+d跳到当前行的头部，尾部：Fn+←，Fn+→显示搜索：Shift+Cmd+F全局替换：Shift+Cmd+H删除当前行光标左侧的所有内容： Cmd + del删除当前行光标右侧的所有内容： ctrl + k","tags":[]},{"title":"react 学习使用","date":"2020-03-03T09:26:34.948Z","path":"2020/03/03/react/","text":"1. 有状态组件和无状态组件的区别2. 组件的渲染和传参3. 行内样式的写法1style={{fontSize: '20px', color: 'red', zIndex: 3}} 项目里面使用lesscss模块化的配置和使用 配置：修改webpack.config.js,module -> rules -> css-loader改为css-loader?modules&localIdentName=[path][name]-[local]-[hash:6] 需要注意的是：模块化只针对class和id 使用：创建css文件，CommentList.css 内容： 12345678910.title { font-size: 15px; color: #e5e5e5;}/* 如果不想让某个class被模块化，使用下面的写法，不知道有没有小伙伴感觉这种写法很麻烦 哈哈 */:global(.test) { background: #0f0;} 1234567// 注意.css后缀名不能省略import styles from '@/css/CommentList.css'render () { return <div> <h1 className={styles.title}></h1> </div>} 让代码注释可折叠123//#region 这里面全部都是代码注释// 这里面都是注释了的代码//#endregion react中input传值 方法1：在onChange里面把e传进来 e.target.value 在input标签上绑定ref属性，this.refs.nameInput.value","tags":[]},{"title":"树莓派相关","date":"2020-03-03T09:26:34.947Z","path":"2020/03/03/树莓派-安装/","text":"树莓派折腾树莓派3.5屏幕的驱动安装指导(电阻屏，不是触摸屏)： 在线安装： 12345sudo rm -rf LCD-showgit clone https://github.com/goodtft/LCD-show.gitchmod -R 755 LCD-showcd LCD-show/sudo ./LCD35-show 离线安装需要拷贝“LCD-show.tar.gz”驱动到树莓派系统卡的根目录下; 1234cd /bootsudo tar zxvf LCD-show.tar.gzcd LCD-show/sudo ./LCD35-show 最后都需要重启一下 注意事项：安装此驱动后HDMI输出将会禁用，如需切换回HDMI显示，执行: 1sudo ./LCD-hdmi 屏幕旋转参考链接 树莓派配置远程桌面，就不用买树莓派的屏幕了，毕竟屏幕小不好玩123sudo apt-get install xrdpsudo apt-get install tightvncserver sudo apt update && sudo apt -y upgrade 如果没有显示屏，用手机连到与树莓派同一个网络的wifi下，打开dataplicity应用上扫描出树莓派的ip地址如果没有显示屏，用电脑连到与树莓派同一个网络的wif或者有线网络下，打开局域网ip扫描器，扫描出树莓派ip地址 树莓派详细配置https://github.com/TommyZihao/Zihao-Blog/blob/master/02%E4%B8%80%E5%8A%B3%E6%B0%B8%E9%80%B8%E9%85%8D%E7%BD%AE%E6%A0%91%E8%8E%93%E6%B4%BE.md pyaudio无法安装12345678910111213141516sudo apt-get install portaudio19-devpip install --allow-unverified=pyaudio pyaudio # 这个写法貌似是过期的写法，暂时不知道新的写法是什么，不过这样暂时是可以安装成功``` ### 安装node```codewget https://npm.taobao.org/mirrors/node/latest/node-v10.0.0-linux-armv7l.tar.xz// 具体想要哪个版本，请看：https://npm.taobao.org/mirrors/node/latest/xz -d node-v10.0.0-linux-armv7l.tar.xztar -xavf node-v10.0.0-linux-armv7l.tarsudo mv ./node-v10.0.0-linux-armv7l /usr/local/nodesudo ln -s /usr/local/node/bin/node /usr/bin/nodesudo ln -s /usr/local/node/bin/npm /usr/bin/npm 树莓派apt-get The value ‘\\stable’ is invalid for APT 错误解决方法：把/etc/apt/apt.conf.d/10defaultRelease这个文件删了。","tags":[]},{"title":"git学习","date":"2020-03-03T09:26:34.946Z","path":"2020/03/03/git/","text":"git学习克隆远程仓库 git clone xxxxx.git/https://xxxx 生成.git文件 git init 然后自己去修改一些东西 git status // 查看哪些文件被修改，或者增加删除了哪些文件 git diff // 查看本地与暂存区的不同 git diff master origin/master // 查看本地与远程的不同 将本地的修改添加到暂存区 git add . // 将本地所有的修改都添加进去 git add xxx // 将某个文件添加到暂存区 如果中间发现有些东西不能提交， 想反悔 git reset . // 把暂存区都反悔 后面还能添加别的参数，需要度娘 添加一个本次更改了什么内容，也就是说明 如果没有没有传更改内容的话，会弹出一个vim界面让你确定是不是真的不用提交参数https://www.cnblogs.com/yangjig/p/6014198.html 常用的vim命令 git commit -m “[FIX] [MRG] [ADD] #这里填写提交的内容” 把本地和远程仓库关联起来 git remote add origin xxxxxx.git 提交到远程 假如远程和本地有多个分支 本地： git branch 远程： git branch -a 首次： git push -u origin master // 提交到远程的哪个分支 以后： git push 查看一个文件修改了哪些内容： git log -p filename 查看最近的提交 git log git log -p -10 // -p显示最近提交的内容更改 -10最近十条记录 git log -100 // 显示最近提交的100条记录 实际开发中的版本控制 接到任务后，先把本地的dev更新到最新（前提是本地的dev是主角儿） 创建一个分支，分支的命名和任务要相关，方便以后好切换 如果这个任务还没完 又接到了一个紧急的任务 就要先把没完成的任务先暂存起来 git add -u //把本地修改添加到缓存git reset . // 撤销add的提交 git commit -m “#77 [ADD] …”git checkout . // 撤销所有的commit git branch devgit branch -b 新任务分支 紧急任务处理完之后 切换到没有完成任务的分支上面 继续干活 commit 但还没push git log //查看提交的ID git reset –hard commit_id //完成撤销,同时将代码恢复到前一commit_id 对应的版本。 git reset commit_id //完成撤销,但不对代码进行修改 想修改commit的内容 git commit –amend 撤销指定的提交 git revert 撤销指定文件的修改 git checkout refusing to merge unrelated histories 版本是2.13.0，网上说2.9.0之前的才会出现这种事，结果代码传码云的时候就出现了，解决方式：1git pull origin master --allow-unrelated-histories 如果每次提交的时候都要输入用户名和密码因为之前添加remote的时候，添加的是https的 不是ssh 先把本地的origin删除掉 1git remote rm origin 重新添加 1git remote add origin xxxxxx.ssh git默认是不区分文件名大小写的，如果要区分，需要1git config core.ignorecase false git删除远端的文件/文件夹12345671. 删文件git rm -r --cached dir/file.txt2. 删文件夹git rm -r --cached dirgit commit -m "删除远程文件/文件夹"git push fatal: refusing to merge unrelated histories git pull origin master –allow-unrelated-histories","tags":[]},{"title":"sentry本地安装","date":"2020-03-03T09:26:34.945Z","path":"2020/03/03/线上错误监控/","text":"官方是推荐使用docker安装，那么首先要安装好dockerhttps://download.docker.com/mac/stable/Docker.dmg git clone https://github.com/getsentry/onpremise.git docker volume create –name=sentry-data && docker volume create –name=sentry-postgres cp -n .env.example .env # 很多博客都没有这一步 docker-compose build # 这里会创建一个镜像，目前docker没有学习完，不能给出准确的答案，不执行这一步会有一个警告 docker-compose run –rm web upgrade # 更新配置 docker-compose up -d # 启动服务 docker-compose && docker-compose down # 停止服务并删除镜像 使用sentry-cli来创建releasehttps://docs.sentry.io/cli/installation/#installation-via-npm我是使用命令全局安装，使用于mac和linux： 1234567$ curl -sL https://sentry.io/get-cli/ | bash或者使用npm：$ npm install -g @sentry/cli安装好了之后，需要登录,把下面的地址换成你服务器的地址sentry-cli --url http://127.0.0.1:9000 login 创建一个版本：打开sentry的页面，通过url就能知道-o和-p对应的是什么：http://localhost:9000/sentry/javascript/，new后面跟你要创建的版本号 1sentry-cli releases -o sentry -p javascript new test-1 修改前端项目，使其自动上传map文件，我用的vue-cli3，vue-cli2的相关教程很多，请自行搜索 npm i @sentry/webpack-plugin raven-js 在src目录下创建settings.js,以后每次打包的时候，就修改一下RELEASE，内容为： 123export default { RELEASE: 'staging@1.0.1'} 在main.js里面添加： 123456789101112131415161718192021import Raven from 'raven-js'import RavenVue from 'raven-js/plugins/vue'import settings from './settings'// dsn配置需要说明一下，虽然官网有给说明，但是我感觉还是不够详细，/** * http://f4a7081fa0ea4e5cb22ef6c106d9d5a4@127.0.0.1:9000/2 * 本地或者你的服务器是http的，协议就使用http，要么就是https，不可省略 * f4a7081fa0ea4e5cb22ef6c106d9d5a4：这个需要从项目-> Security Header -> REPORT URI 这里里面去获取，我的REPORT URI是：/api/2/security/?sentry_key=f4a7081fa0ea4e5cb22ef6c106d9d5a4，就是sentry_key * 127.0.0.1:9000： 本地,sentry默认开启9000端口，如果是别的端口请自行修改 * /2 : 我的REPORT URI是：/api/2/security/?sentry_key=f4a7081fa0ea4e5cb22ef6c106d9d5a4 api后面跟的就是 * config.release 就是版本号，我这里图方便，直接写上了，可以在配置文件里面去配置一下，在两个地方去引用，z */// 只有在正式环境中，才监控process.env.NODE_ENV === 'production' && Raven .config('http://f4a7081fa0ea4e5cb22ef6c106d9d5a4@127.0.0.1:9000/2', { release: settings.RELEASE }) .addPlugin(RavenVue, Vue) .install() 在项目根目录下添加.sentryclirc文件，内容为： 123456789# token是在刚刚sentry-cl login的时候自动添加进来的[auth]token=25d724018b444073a67e16cc8eb55d79e701c6ea9f874d33a58daa34a7749d5e# 打开本地sentry的项目，路径为：http://127.0.0.1:9000/sentry/javascript/，一一对应即可[defaults]url=http://127.0.0.1:9000project=javascriptorg=sentry 修改vue.config.js 123456789101112131415const SentryCliPlugin = require(\"@sentry/webpack-plugin\");const settings = require('./src/settings')module.exports = { configureWebpack: { plugins: [ new SentryCliPlugin({ include: \".\", release: settings.RELEASE, ignore: ['node_modules'], configFile: \".sentryclirc\" }) ] }} 在vue文件里面随便制造点错误，开始愉快的玩耍吧~ npm run build的时候 后续：等会了Docker，把项目稍做修改，直接部署到服务器上，","tags":[]},{"title":"服务器压力测试","date":"2020-03-03T09:26:34.943Z","path":"2020/03/03/对服务器进行压力测试/","text":"和后端的小伙伴交流，讨论node、python、go搭建的web服务的性能，需要对服务器进行压力测试，朋友推荐了Apache的ab，我这里介绍的是webbench和Siege（Mac上面使用 window和linux百度自行解决）第一步： 安装webbench：先安装依赖: 1brew install ctags 下载并安装： 12345wget http://blog.zyan.cc/soft/linux/webbench/webbench-1.5.tar.gztar -zxf webbench-1.5.tar.gzcd webbench-1.5sudo mkdir -pv /usr/local/man/man1sudo make && sudo make install 使用： webbench -c 并发数 -t 运行测试时间 URLeg： webbench -t 60 -c 100 http://www.baidu.com/ 安装Siege：123456wget http://download.joedog.org/siege/siege-latest.tar.gztar -zxvf siege-latest.tar.gzcd siege-* # 这里需要查看解压的目录./configuremake && make install 相关命令： 1234567891011121314151617181920212223-V, --version VERSION, prints the version number. -h, --help HELP, prints this section. -C, --config CONFIGURATION, show the current config. -v, --verbose VERBOSE, prints notification to screen. -q, --quiet QUIET turns verbose off and suppresses output. -g, --get GET, pull down HTTP headers and display the transaction. Great for application debugging. -c, --concurrent=NUM CONCURRENT users, default is 10 -i, --internet INTERNET user simulation, hits URLs randomly. -b, --benchmark BENCHMARK: no delays between requests. -t, --time=NUMm TIMED testing where "m" is modifier S, M, or H ex: --time=1H, one hour test. -r, --reps=NUM REPS, number of times to run the test. -f, --file=FILE FILE, select a specific URLS FILE. -R, --rc=FILE RC, specify an siegerc file -l, --log[=FILE] LOG to FILE. If FILE is not specified, the default is used: PREFIX/var/siege.log -m, --mark="text" MARK, mark the log file with a string. -d, --delay=NUM Time DELAY, random delay before each requst between .001 and NUM. (NOT COUNTED IN STATS) -H, --header="text" Add a header to request (can be many) -A, --user-agent="text" Sets User-Agent in request -T, --content-type="text" Sets Content-Type in request eg: 1000个人，没人请求100次，测试5秒钟siege -c 1000 -r 100 -t 5s http://www.youku.com","tags":[]},{"title":"docker 搭建web服务","date":"2020-03-03T09:26:34.940Z","path":"2020/03/03/docker搭建web服务/","text":"设置容器的端口映射：有四种写法 只设置容器端口 1docker run -p 80 -i -t ubuntu /bin/bash 同时制定宿主机端口和容器端口 1docker run -p 8080:80 ubuntu /bin/bash 指定ip和容器端口 1docker run -p 0.0.0.0:80 ubuntu /bin/bash 指定ip，宿主端口和容器端口 1docker run -p 0.0.0.0:8080:80 ubuntu /bin/bash 在容器中部署nginx服务，以下步骤： 创建80端口的交互式容器 安装nginx 安装vim 创建静态页面 修改nginx配置文件 运行nginx","tags":[]},{"title":"代码标准","date":"2020-03-03T09:26:34.938Z","path":"2020/03/03/codeStandard/","text":"Code Standard[TOC] GeneralModule NameThe module named should be named as it meaning, easy to understand and match the requirement documentation. e.g. Auth – authentication, used for SignIn, SignOut, SignUp etc. The module name should be confirmed with PM before you make the decision. ComponentsThinking in Vue wayThinking in React ENThinking in React ZHThinking in Vue之一：组件扩展的尝试Thinking in Vue之二：Vue 与 MV* How we organize componentsA single page app is consist of Pages. A Page is consist of multiple components. The code structure looks as follow: 12345678- modules/ - Todo - components - TodoHeader.vue - TodoFooter.vue - TodoList.vue - pages - TodoPage.vue APITODO HTML 代码风格基本设置 2 空格缩进 UTF-8 编码 统一符号 所有标签和属性名称一律小写。理由：如果不这么做可能导致与 Angular 的不兼容。 属性值一律使用双引号。理由：统一是必须的，难道会有人想统一成单引号？ 可省略部分 在没有特殊需求的情况下不省略可选的结束标签。理由：这样更容易看出标签的范围，但是要注意下面这种特殊情况。 1234567891011<style>li { display: inline-block; }</style><ul> <li>1</li> <li>2</li></ul><ul> <li>1 <li>2</ul> 不省略可选的自结束标签末尾斜杠。理由：它会影响到外部标记语言的解析。 123<div> <img src=\"eleme.png\" alt=\"饿了么\" /></div> 建议自结束标签包含属性时在结束的斜杆前面加空格。理由：这是 XHTML 规范？其实我只是觉得这样比较漂亮。 12<input type=\"text\" /><hr/> 建议无值属性不写等号和值。理由：这个真没必要写，不过 DOM 操作时可能会写。 12<input type=\"checkbox\" checked /><script src=\"···\" async defer></script> 所有 <a> 必须有 href 属性，如果用不到可以置为 href="javascript:"。理由：href 不是可选属性，只是浏览器能解析而已。 最佳实践 不要使用 input （<input type="button"> 、 <input type="submit">）来代替 button 理由：给这类 input 只设置 height 属性的话，在 safari 和 chrome 下并不会出现意料中的样式。另外，button 可以内嵌 HTML，实现更灵活的结构，如：带图标的按钮。 声明相关 使用 <!DOCTYPE html> 作为唯一的 DTD。理由：它简洁，并能在所有浏览器触发标准模式。 使用 <meta charset="UTF-8" /> 指定文件编码。理由：只设置 charset 即可，不需要 Content-Type。 所有页面必须有 <title>，并尽可能地在不同页面使用不同的标题。理由：传统 SEO 考量，对于单页应用也可以增加用户体验。 结构相关 尽可能地简化 HTML 结构。理由：太复杂的结构难以维护。 严格遵守标签嵌套规则，禁止让标签出现在不正确的地方。理由：规范没有约束，未来版本可能不兼容。 1234567891011121314151617<!-- 禁止 --><dl> <dt>...</dt> <ul> <li>...</li> </ul></dl><!-- 允许 --><dl> <dt>...</dt> <dd> <ul> <li>...</li> </ul> </dd></dl> DOM 相关 建议不使用 Level 0 的事件绑定。理由：Level 0 的事件绑定是非规范的，而且容易发生冲突。 123456789<!-- 不建议 --><button id=\"btn\" onclick=\"onBtnClick()\">ELE</button><script>var onBtnClick=function() { // ...};// 不建议btn.onclick = onBtnClick;</script> 但是，addEventListener / attachEvent 需要做兼容处理，推荐使用框架封装。 1234// jQuery 方案$(\"#btn\").click(function() { // ...}); 12<!-- Angular 方案 --><button id=\"btn\" ng-click=\"onBtnClick()\">ELE</button> 不在视图中处理复杂逻辑，事件处理代码过长时做成函数。理由：在视图中堆积逻辑会影响代码阅读和维护。 12<!-- 不推荐 --><button id=\"btn\" ng-click=\"'此处省略100字'\">ELE</button> 12<!-- 推荐 --><button id=\"btn\" ng-click=\"onBtnClick()\">ELE</button> 123456module.controller('foo', ['$scope', function($scope) { // ... $scope.onBtnClick = function() { '此处省略100字'; };}]); 其它建议 给图片添加 alt 属性。 给无文字超连接添加 title 属性。 给可视听的替换型元素内添加描述。 123<audio>这是一段神奇的音效</audio><canvas>这是一个神奇的效果</canvas><iframe src=\"http://ele.me\">这是 ele.me 的首页</iframe> SASS 代码风格基本设置 2 空格缩进 UTF-8 编码 zindex使用规范zindex.scss 用来统一项目中的 z-index 值，方便管理 z-index 的层级关系，避免 z-index 的值过大或者层级相互覆盖。 12345678$zindexlist: searchbox /* 搜索框 */ premiumsign /* 在 rstblock 中显示的品牌馆图标 */ dropbox /* 显示信息的 hover 浮动框 */ sidebar /* 右侧栏 */ toolbardropbox /* 右侧栏显示信息的 hover 浮动框 */ modalshade /* 浮动弹出框遮罩 */ modal /* 浮动弹出框 */ $zindexlist 中的数组元素决定 z-index 值，从上到下 z-index 值越大，层级越高。 #####使用方法： 1@include zindex($ele); $ele 参数值，需要在 $zindexlist 中定义数组元素，注意变量的位置； 也可以使用 $zindexlist 中的已经定义的数组元素，但需要注意以后增删改不会有影响； 只支持正数，负数还是按照普通的方式。 CSS 代码风格基本设置 2 空格缩进 UTF-8 编码 空白与格式 大括号与选择器之间留空，冒号后面留空，注释内外前后留空。理由：据说这样比较漂亮。 12345/* 我是注释 */div { /* 我是注释 */ }span { color: red; /* 我是注释 */} 在只有一条样式时允许和选择器写到同一行，不强制。理由：写三行太占屏幕空间。 一个选择器中有多个样式声明时每条写一行。理由：使报错可以精确到具体的规则上，便于排错。 多个选择器使用逗号隔开时写在不同的行，大括号不要另起一行。理由：修改时不容易漏掉逗号后面的选择器。 12345div,span { color: red; font-size: 12px;} 每条样式声明后面都加上那个分号。理由：复制起来方便。 所有最外层引号使用双引号。理由：与 HTML 保持一致。 用逗号分隔的多个样式值写成多行。理由：便于阅读与编辑。 1234567.block { box-shadow: 0 0 0 rgba(#000, 0.1), 1px 1px 0 rgba(#000, 0.2), 2px 2px 0 rgba(#000, 0.3), 3px 3px 0 rgba(#000, 0.4), 4px 4px 0 rgba(#000, 0.5);} 功能限定 避免使用 ID 选择器。理由：权重太高，不易维护。 禁止使用 @import 引入 CSS 文件。理由：各种坑不解释。 命名与模块化 0 值的单位建议省略，但不强制。理由：大部分 0 值的单位是没用的。 16 进制颜色值中的字母统一小写。理由：切换大小写麻烦。 类名中的字母一律小写。理由：它不区分大小写，难道有人想统一大写？ 类名中只使用字母、数字以及“-”。理由：要是没有限制的话我怕一些猴子使用阿拉伯文。1234.hello {} /* OK */.module-title {} /* OK */.panel-level1 {} /* OK */.导航栏 /* Fuck */ CSS 模块化命名规则基本设置 2 空格缩进 UTF-8 编码 声明兼容 IE 8 以上浏览器。 基本命名类名使用完整英文单词或抽掉空格的英文词组。 12345678/* 推荐 */.module {}.helloworld {}/* 不推荐 */.konnichiwa {} /* 非英文单词会导致大家无法正常阅读 */.modl {} /* 每个人的缩写未必一致，会造成不统一 */.hello-world {} /* 类名请只使用一个没有分隔[-_]的词 */ 驼峰写法或下划线分割单词的写法都存在一个问题，我们的主观无法判断单词的分割。比如yellowgreen这个单词，如果使用分单词的写法可能被写成yellowGreen或yello_green，造成风格不统一。 当然，抽掉空格也会带来另外的问题，比如a synchronous request和asynchronous request的意思是完全相反的，这时候抽掉空格就会出问题。不过这种情况是开发者们可以主动避免的，在代码 review 时也可以找出存在歧义的命名。 另外，在能确保准确描述目标元素的情况下，尽可能地让类名更加简短。 12.form-submit {} /* 推荐 */.form-submittingbutton {} /* 不推荐 */ 组件名称尽量使用名词或抽掉空格的名词性词组，这样可以降低冲突的可能性。 有且仅当有层级关系时使用“-”连接，比如组件内的元素类名采用组件名“-”子类名的形式： 1234<div class=\"uploader\"> <input type=\"text\" class=\"uploader-text\" /> <input type=\"button\" class=\"uploader-button\" /></div> 这时选择器在 CSS 中应该平行地定义，以便降低优先级，便于覆写。 123.uploader {}.uploader-text {}.uploader-button {} 不要求类名的层级结构和 HTML 保持一致。 1234567891011<div class=\"grid\"> <div> <div class=\"grid-caption\"> <div class=\"grid-caption-text\"></div> <div class=\"grid-caption-button\"></div> </div> </div> <ul class=\"grid-row\"> <li class=\"grid-cell\"></li> </ul></div> 允许模块穿插使用。 123456<div class=\"header\"> <div class=\"container\"> <!-- 穿插一个别的组件 --> <div class=\"header-logo\"></div> <div class=\"header-nav\"></div> </div></div> 但不建议在高层级中放置低层级元素，这样会破坏逻辑。 1234567891011<div class=\"module\"> <div class=\"module-caption\"> <div class=\"module-caption-content\"> <!-- 推荐:低层嵌入高层 --> <div class=\"module-text\"></div> <!-- 不建议:高层嵌如低层 --> </div> <!-- 允许:同级嵌套 --> <div class=\"module-captioncontent\"> <div class=\"module-text\"></div> </div> </div></div> 保持结构灵活性我们的设计应该尽可能地让样式可以用于更多标签。 12345678910111213<style>.section {}.section-head {}.section-body {}</style><div class=\"section\"> <div class=\"section-head\"></div> <div class=\"section-body\"></div></div><dl class=\"section\"> <dt class=\"section-head\"></dt> <dd class=\"section-body\"></dd></dl> 甚至可以任意调整结构。 123456789101112131415161718192021<style>.article {}.article-main {}.article-title {}</style><div class=\"article\"> <div class=\"article-main\"> <div class=\"article-title\"> <!-- ... --> </div> <!-- ... --> </div></div><div class=\"article\"> <div class=\"article-title\"> <!-- ... --> </div> <div class=\"article-main\"> <!-- ... --> </div></div> 样式修饰一个组件可能有多种状态多种样式，可以在组件上添加修饰符来选择所需的样式。 在先前的命名规范中“-”被用于表示组件与其后代元素的关系。如果此处再使用“-”，逻辑上可能造成混乱。 考虑到这些修饰符可能和组件名冲突，在词法上推荐使用状态名词或形容词。 123456789<div class=\"popup success\"> blah blah blah</div><div class=\"popup warning\"> blah blah blah</div><div class=\"popup error\"> blah blah blah</div> 在选择器中使用多类来声明其样式。 123.popup.success {}.popup.warning {}.popup.error {} 这样可以避免嵌套的冲突问题。 JavaScript 代码风格优先参考优先参考Airbnb的代码风格 基本设置 2 空格缩进 UTF-8 编码 严格模式建议打开严格模式，但不要依赖严格模式中语言特性的变化（仅当需要支持 IE8、IE9 时） 1'use strict'; 引号使用单引号，这样可以跟 HTML 的双引号更好的一起工作。 分号在语句（Statement）的结尾加分号 12345678910// 不建议var fn = function() { // Long code} // 没有分号// 建议var fn = function() { // Long code}; // 这里有分号 以防万一，在可能有坑的地方手工加分号 12345678910111213141516171819var f1 = function ff1() { return function() { return 1; };} // 此处漏写分号(function() { // 此处调用了上面的ff1，WAT})();console.log(f2); // 1var f2 = function ff2() { return function() { return 1; };} // 此处漏写分号// IIFE;(function() { // 注意前面的分号})();console.log(f2); // function 或者使用 void function() {}() 的写法，见下 空白与格式在二元和三元运算符的符号与操作数之间添加空格，在非行末的 , ; } 后添加空格，在 { 前添加空格。并在每个逻辑块中间添加空白行。特别的，在 if、while 等关键字后加空格，与函数调用做区分 1234567891011121314151617181920212223242526272829// 不推荐var foo='bar',hello=foo+2,test=true;function hi(){ // ...}if(foo&&hello){ // ...}else if(foo){ // ...}else if(! test){ // ...}// 推荐var foo = 'bar';var hello = foo + 2;var test = true;function hi(arg1, arg2) { // ...}if (foo && hello) { // ...} else if (foo) { // ...} else if (!test) { // ...} 注释使用 // 作为注释符，可以使用 /* */ 作为多行注释符。注释符号与注释内容之间留空，注释的位置尽量放在代码之上： 1234567/*不推荐*///不推荐; // 不推荐/* 推荐 */// 推荐; 建议在今后需要完善的代码中注释以 // TODO。请在 TODO 后标注你要做的事 1234if (condition) { console.log('尚未实现'); // TODO: condition 成立时需要做额外的工作} 不要为大括号另开一行123456789101112131415161718192021// 不推荐if (foo){ // ...}// 推荐if (foo) { // ...}// 不允许return{ a: 1};// 一定要return { a: 1}; 只有一行语句时允许不带括号，但需把语句紧跟当前行后 12if (foo) doSomething();for (var i = 0; i < 10; i++) doSomething(); 语句太长时写成两行，这时请加大括号 12345678910111213// 不推荐for (var i = 0; i < 10; i++) doSomething(aaaa, bbbb);// 推荐for (var i = 0; i < 10; i++) { doSomething(aaaa, bbbb);}// 因为某些人调试时喜欢注释代码，于是就出现了for (var i = 0; i < 10; i++) // doSomething(aaaa, bbbb); 写 else 时不要另起一行 1234567891011121314151617// 不推荐if (test) { things1(); things2();}else { things3();}// 推荐if (test) { things1(); things2();} else { things3();} var 语句使用变量之前必须先定义，不要定义全局变量。1234567891011121314151617181920212223242526// 变量 undefinedVar 从未定义过undefinedVar = 1; // 严格模式中报错console.log(global.undefinedVar); // 1// 鉴于 js 中 var 的坑，可以在函数头统一定义所有变量（不强制，我也讨厌把变量定义堆一起。。。）void function () { for (var i = 0; i < arr.length; ++i) { (function () { console.log(i); // undefined // 很长的代码，你已经忘记了之前做了什么 for (var i = 0; i < 10; ++i) { // Do some other things } })(); }}();// 小心 var 与 closure 合用时的坑var elements = [ div1, div2, div3 ];for (var i = 0; i < elements.length; ++i) { elements[i].addEventListener('event', function() { console.log(i); // 3 });} 如果变量有初始赋值则使用单独的 var：1234567// 不推荐var hello = 1, world = 2;// 推荐var hello = 1;var world = 2;var foo, fee, fxx; 另外强调，不推荐使用下面这种风格的变量定义方式。 123// 不推荐var hello = arr.pop(), world = arr.pop(); 123// 不推荐var hello = arr.pop() , world = arr.pop(); 原因： 当需要修改变量定义顺序时不容易做整行移动 过不了 eslint 的 indent 验证 变量的命名使用以小写字母开头的驼峰命名（camelCase）法： 12345// 不推荐var foo_bar = 'hello eleme';// 推荐var fooBar = 'hello eleme'; 常量大写123456// 不推荐var prefix = 'http://api.ele.me/v1/';var Prefix = 'http://api.ele.me/v1/'// 推荐var PREFIX = 'http://api.ele.me/v1/'; 使用字面量123456789101112131415161718192021222324252627282930// 不建议var obj = new Object();var array = new Array();// 推荐var obj = {};var array = [];// 鉴于 Array 构造函数的特殊性，不建议var arr1 = new Array(4, 5, 6); // [4, 5, 6]// 以免与下面混淆var arr2 = new Array(4); // [ undefined * 4 ]// 等价于（不推荐）var arr3 = [];arr3.length = 4;// 等价于（不推荐）var arr4 = [,,,,];console.log('0' in arr2, '0' in arr3, '0' in arr4); // false, false, false// 不推荐var str = new String('str');console.log(str === 'str'); // falsevar bool = new Boolean(false);if (bool) console.log('wat'); // wat// 当真需要使用字面量包装类时，使用显式强制转换（请先三思）var strObject = Object('str');strObject.customProperty = someValue; 比较建议使用 ===/!== 而非 ==/!=。 123456789101112131415// 不推荐function foo(a) { if (a == 123) { // ... }}// 推荐function foo(a) { a = Number(a); if (a === 123) { // ... }} == 的规则比较复杂，大家可能记不住。 1234567var a = '';// falseif (a === 0);// trueif (a == 0); 对于可能不存在的全局引用可以先做如此判断： 123if (typeof localStorage !== 'undefined') { // 此时访问 localStorage 绝对不会出现引用错误} 或者 123if ('localStorage' in self) { // 此时访问 localStorage 绝对不会出现引用错误} 但注意它们的区别 12345678var a = undefined;// 判断一个全局变量是否有声明'a' in self; // true// 判断一个变量是否为 undefined 并将未声明的引用作为 undefined 处理typeof a !== 'undefined'; // false 避免无必要的 if 语句、三元运算符12345678910111213141516var arr = [1, 2, 3];// 不推荐var flag1 = arr.length > 0 ? true : false;// 不推荐var flag2;if (arr.length > 0) { flag2 = true;} else { flag2 = false;}// 推荐var flag3 = arr.length > 0; 合理的格式化三元运算符12345678// 不推荐var flag1 = veryLooooooooooonnnnggggggCondition ? resultWhenTruth : resultWhenFalsy;// 推荐var flag2 = veryLooooooooooonnnnggggggCondition ? resultWhenTruth : resultWhenFalsy; 复杂逻辑中建议使用显式转换1234567891011121314151617+num === Number(num);!!bool === Boolean(bool);str + '' === String(str);// 特别的if (bool)// 等价于if (Boolean(bool))// 故if ([]) console.log('true'); // true// 而if ([] === true) console.log('true'); // 无输出// 另外if (Boolean(String(false))) console.log('true'); // true// 这点在保存 localStorage 时需要注意 不要使用 parseInt 做整数转换，如需使用 parseInt，请给它传入第二个参数 10，避免老式浏览器的坑（IE8？） 12345678910var floatValue = 123.456;// 不要var intValue = parseInt(floatValue);// 可以用var intValue2 = floatValue | 0;// 更显然的var intValue3 = Math.floor(floatValue); 特别地，使用 parseFloat 做部分转换 123456789// 例如有：// <div id=\"div\" style=\"width: 10px\"></div>var divWidth = getComputedStyle(document.getElementById('div')).width; // '10px'console.log(parseFloat(divWidth)); // 10console.log(Number(divWidth)); // NaNconsole.log(+divWidth); // NaN 函数定义建议使用表达式来定义函数，而不是函数语句。 123456789// 不推荐function fee() { // ...}// 推荐var foo = function() { // ...}; 因为函数语句是在进入作用域时声明，破坏了程序从上到下的执行顺序。可能出现定义在 return 后的情况。 12345678void function() { // 此处可以正常使用函数，但逻辑不清晰 foo(); return null; function foo() {};}(); 只引用一次的函数建议匿名定义，因为名称存在主观因素。 12345678910// 不推荐var foo = function() { // ...};element.onclick = foo;// 推荐element.onclick = function() { // ...}; 自执行函数123456789101112131415161718// 不推荐(function() { // ...})();+function() { // ...}();// 推荐~function() { // ...}();// 推荐void function() { // ...}(); 括号和加号不是上下文无关的，可能受到上文缺分号的影响而出现奇怪的问题，这些问题甚至不会报错，极难调试，所以不推荐此种用法，比如： 1234567var a = 1 // 此处无分号+function() { return 2}();// 此处 a 的值为 3 避免嵌套过深可以使用 Promise 解决深层嵌套问题： 123456789101112131415161718192021222324252627282930313233// 不推荐async1(function() { // TODO 1 async2(function() { // TODO 2 async3(function() { // TODO 3 }); });});// 推荐Promise.resolve() .then(function() { return new Promise(function(resolve) { async1(resolve); }); }) .then(function() { // TODO 1 return new Promise(function(resolve) { async2(resolve); }); }) .then(function() { // TODO 2 return new Promise(function(resolve) { async3(resolve); }); }) .then(function() { // TODO 3 }); 禁止事项 禁止使用未定义的变量 禁止使用 eval，非用不可时可以使用 Function 构造器替代。 禁止使用 with 语句。 禁止在块作用域中使用函数声明语句。 12345678910if (true) { // 禁止 function func1() { // ... } // 允许 var func2 = function() { // ... };} 禁止使用 8 进制词法 12// trueif (010 === 8); 禁止使用 arguments 映射 1234void function(a) { arguments[0]++; // 此处 a 为 2}(1); 禁止使用重名参数 禁止使用保留字做变量名如 interface 等 文案风格指南这是文书表述上的一些文字格式规范，目的在于增强文字的可读性和保持对外形象的一致性，适用范围包括但不限于软件界面、帮助文档等严肃内容平台，博客和微博等网络宣传媒体平台的用词风格可较轻松活泼些。本指南会不断增补修订。 标点符号中文文书原则上请使用全角标点符号，英文文书请使用半角标点符号。中英夹杂原则上请使用全角标点符号。下面有另行规定者例外。 括号的使用：中文文书中，括号中包括数字时采用半角括号，并在括号外留一个空格（连续两个标点符号之间不留空格）。例如：「全部联系人 (12)」。 英文文书逗号和句号后请留一个半角空格；中英夹杂文书中英文 (包括数字) 与汉字之间留一个半角空格。 正确：「这是 1 只 HTC 手机」错误：「这是1只HTC手机」 正确：「2011 年 8 月 14 日」错误：「2011年8月14日」 百分号写法：56.8% 是对的，56.8 % 是错的。百分号和它前面的数字之间不留空格。 段落之间使用 <p> 标签分隔 (一般来说实施效果是，段落间的视觉空隙为一倍 line-height)。段首不要空格。 不要使用「。。。」代替「……」 ，也不要使用三个英文句点「.」代替。 引号一律使用「」，而不是 “”。 严禁出现「！！」。尽量避免使用「！」。请先冷静下来再坐电脑前敲键盘。 遣词造句 对用户称呼「你」，不再使用「您」。 能用中文就尽量避免英文罗马字。 名词：一些特写的名词可以直接使用原文而不必强译为中文。例如：HTTP、TCP。 用主动语态，不要用被动语态。一般情况下，主动语态比被动语态更有力。 使用具体、明确、展示细节的词汇，能激发想象，使读者自己代入情境。「把硬币放进口袋里，他咧开嘴笑了」，远远强过「他满意地拿走了辛苦挣来的奖赏」。 减少形容词的使用，少用 「的」，避免使用「哈，哈哈」、「呵，呵呵」等。 尽量使用常用词汇，不要用网络新词、科学术语和行话，该解释的要解释清楚。 记住，不要让用户来猜你在写什么。 记住，如果你写了一条文案觉得非常聪明非常好笑，很可能需要停下来想一下用户是否能理解了。（本条感谢 37signals 的文案建议） 「的」「地」「得」要用对。是的，小学都不要求这个了，但是要用对。（「的、地、得」的用法有何区别？- 知乎） 卖萌和幽默建议： 以下情况下幽默卖萌需要非常谨慎：报错信息，涉及支付、安全和隐私的信息； 以下情况下推荐卖萌或幽默文案：用户引导、新功能介绍。 用字规范 根据软件发布流程的一般写法，所有用户可见的版本有：Beta、Release Candidate，未来可能对开发者可见的版本：Alpha。统一为首字母大写。两侧不出现中文或英文引号，也不出现括号。 用 root（小写字母）直接表达 root，不用引号。 「USB 调试」开关 账号（错误：帐号，账户，帐户） 登录账号（错误：登陆） 硬盘空间（不建议使用：磁盘） 开源软件文案要求开源、内部开源文档，需要回答如这几个问题： 是什么？能做什么？ 为谁服务？ 如何使用？ 如何为它贡献代码 / 内容？CONTRIBUTING.md 是否有设计 / 架构介绍 版权CopyRight: 本规范引用自 豌豆荚文案风格指，略作修改。","tags":[]},{"title":"","date":"2020-03-03T09:26:34.937Z","path":"2020/03/03/electro/","text":"","tags":[]},{"title":"deepin linux 的快速使用（双系统）","date":"2020-03-03T09:26:34.936Z","path":"2020/03/03/deepin/","text":"1. 下载系统1https://www.deepin.org/download/ 2.制作启动盘，启动盘制作工具（window）1http://cdimage.deepin.com/applications/deepin-boot-maker/windows 如何制作：https://www.deepin.org/original/deepin-boot-maker/ 3. 如果系统只有一个盘，记得先分一个区出来4. 系统装好之后，进window系统会出现时间显示不准确，解决： sudo apt-get install ntpdate sudo ntpdate time.windows.com sudo hwclock –localtime –systohc 5. 进系统之后，如果出现window盘是只读模式，那是因为你的电脑开启了快速启动，需要进boot把快速启动关闭掉即可，如果是win7的话不存在这个事，win7没有快速启动，win8、win10开启快速启动之后，硬盘并没有休眠6. 装好的新系统，好多文件夹只能读，没法修改1sudo chmod 777 /file_dir 切换为root账户，首先要创建root密码1sudo passwd root 然后输入两次密码就可以了要切换的话 terminal直接输：su 然后把刚刚设置的UNIX密码输一下就好了 如果在网上下载的.deb安装包没法安装，有可能是在深度软件里面安装过了，要先把之前的软件卸载掉，才能安装","tags":[]},{"title":"flutter 学习","date":"2020-03-03T09:26:34.935Z","path":"2020/03/03/flutter/","text":"在vscode中运行flutter项目 首先看下vscode的右下角有没连接的设备，如果没有连接设备，需要在android studio 或者 xcode中去添加 flutter run 即可运行成功 成功后下面会有几个提示，分别是：r,h,d,q,p 需要了解这几个键的作用 r: 重新加载 h：帮助 p：把元素分割开，可以看到分割线，q,d：退出 o: 安卓ios切换查看效果 i: 查看页面组件 P:显示性能 限制子元素的宽高比例AspectRatio 组件","tags":[]},{"title":"ubuntu系统学到的知识","date":"2020-03-03T09:26:34.934Z","path":"2020/03/03/linux/","text":"ubuntu系统学到的知识查看一个文本 两种方式cat gedit用vscode打开一个文本code filename添加环境变量的命令sudo gedit /etc/profile添加完环境变量之后，立即生效的命令source ~/.bashrc显示隐藏的文件快捷键ctrl+hmaven编译项目,先进入到项目里面，然后mvn compilests添加一个项目1import -> maven -> exiting maven projext -> 选择编译过的maven项目 -> **变成ss 查看所有进程ps -A || ps -A | grep redis杀死一个命令 -9是强制杀死 5689是进程编号kill -9 5689把当前的查询结果输入到一个文件里面ll > 1.txt创建一个文件的命令 cd.>1.txt 全局查找一个文件 find / -name fileName 查找指定的程序ps -aux | grep nginx || ps -ef | grep nginxxz文件的解压：xz -d 要解压的文件 然后： tar -xvf 刚刚解压出来的tar包更新阿里云源1echo -e "deb [by-hash=force] http://mirrors.aliyun.com/deepin unstable main contrib non-free \\ndeb-src http://mirrors.aliyun.com/deepin unstable main contrib non-free" | sudo tee /etc/apt/sources.list npm包没法安装，多数情况是usr目录没有操作权限1sudo chown -R $USER /usr 服务器重新安装系统之后，要做的一些事情对本地的ssh进行重置 1vi /Users/yaozu/.ssh/known_hosts // 把ip以及ip后面的部分给删掉 安装node 毕竟我是前端嘛，node肯定是少不了,最简单、最省事的方式是先安装nvm 123curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bashsource ~/.bashrcnvm install v10.13.0 ssh的连接数过多，就没法进行ssh连接，所以要经常清理没用sshd123456// 列出所有的sshdps aux | grep sshd// 查看当前正在使用的sshdwho// 删除多余的sshidkill id //（注意： ps 列出的第一个不要删除） 修改/usr的权限之后，sudo命令就会报错： sudo: error in /etc/sudo.conf, line 0 while loading plugin ‘sudoers_policy’12345解决方式： chmod 644 /usr/lib/sudo/sudoers.so chown -R root /usr/lib/sudo sudo: unable to resolve host iZ2zecsdy8flu603bmdg1bZ12vim /etc/hosts在localhost后面添加 iZ2zecsdy8flu603bmdg1bZ node安装的时候，强烈建议大家不要用编译安装，太慢了,请使用nvm安装，但是使用nvm安装node之后，每次启动都要nvm use，解决方法: nvm alias default stable 查看端口被占用情况 lsof -i:端口号 netstat -tunlp|grep 端口号 删除目录下所有.xml后缀名的文件 find . -name ‘*.xml’ -delete find . -name “*.xml” -exec rm -rf {} ; ubuntu安装mysql，参考链接：https://blog.csdn.net/qq_38737992/article/details/81090373 12345678sudo apt-get updatesudo apt-get install mysql-server<!-- 初始化配置 -->sudo mysql_secure_installation<!-- 检查mysql的运行状态 -->systemctl status mysql.service 登录的时候： mysql -u root -p密码 Ubuntu安装redis：sudo apt-get install redis-serverkali安装nodejs1234wget -qO- https://deb.nodesource.com/setup_12.x | sudo -E bash -apt-get updateapt-get install nodejsapt-get install npm Unbutu卡在“waiting for headers”123rm -rf /var/lib/apt/lists/*rm -rf /var/lib/apt/lists/partial/* linux下npm安装的全局命令无法执行https://blog.csdn.net/qq_33788609/article/details/90691574 对当前用户有效 12vi ~/.bashrcexport PATH=$PATH:/usr/local/node/bin 所有账户均有效 12sudo vi /etc/profileexport PATH=$PATH:/usr/local/node/bin The following packages have unmet dependencieshttps://blog.csdn.net/qiqzhang/article/details/87862556 https://github-production-release-asset-2e65be.s3.amazonaws.com/48378947/80a21000-fdc5-11e9-9f07-6de93f1b7ddd?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20191104%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20191104T155456Z&X-Amz-Expires=300&X-Amz-Signature=698116f5582a724906985da257e7990461f776ec5617e4c9a5601d6f22834b9d&X-Amz-SignedHeaders=host&actor_id=23499946&response-content-disposition=attachment%3B%20filename%3Dfrp_0.29.1_linux_arm.tar.gz&response-content-type=application%2Foctet-stream ubuntu安装Golang123456789101112131415161718192021<!-- 卸载旧版 -->sudo apt-get remove golang-gosudo apt-get remove --auto-remove golang-go<!-- 安装 -->wget https://studygolang.com/dl/golang/go1.12.5.linux-amd64.tar.gztar -zxvf go1.12.5.linux-amd64.tar.gz sudo mv go /usr/local/<!-- 配置 -->vim ~/.bashrcexport GOROOT=/usr/local/go # 安装目录。export GOPATH=$HOME/go # 工作环境export GOBIN=$GOPATH/bin # 可执行文件存放export PATH=$GOPATH:$GOBIN:$GOROOT/bin:$PATH # 添加PATH路径source ~/.bashrc<!-- 测试是否安装成功 -->go version apt-get update时卡在 waiting for headers12rm -rf /var/lib/apt/lists/* rm -rf /var/lib/apt/lists/partial/*","tags":[]},{"title":"ssh远程登录无法被建立","date":"2020-03-03T09:26:34.933Z","path":"2020/03/03/ssh远程登录无法被建立/","text":"The authenticity of host ‘120.xx.x.x (120.x.x.x)’ can’t be established.解决方式：1ssh -o StrictHostKeyChecking=no 120.xx.x.x 严格的域名验证检查","tags":[]},{"title":"node学习","date":"2020-03-03T09:26:34.931Z","path":"2020/03/03/node/","text":"Mac设置全局路径 export NODE_PATH=/usr/local/lib/node_modules node中全局对象 __dirname 和 __filename __dirname 只包含当前文件的路径 __filename 包含路径和文件名 npm升级某个包的命令 npm update -g webpack pm2常用命令以及解释参考pm2 启动程序： 先进入app，然后pm2 start app.js || pm2 start npm – run XXX指定pm2的普通日志文件和错误日志文件： pm2 start app.js -o ./logs/out.log -e ./logs/error.log pm2自动启动，程序运行完之后运行： pm2 save pm2 startup 或者在根目录下创建config.json1234567{ \"script\" : \"app.js\", // 启动文件 \"error_file\" : \"./logs/err.log\", // 错误日志目录 \"out_file\" : \"./logs/out.log\", \"merge_logs\" : true, \"log_date_format\" : \"YYYY-MM-DD HH:mm Z\"} nunjucks给页面里面的js赋值1.普通的赋值 1let title = `{{ title }}` 2.传对象或者数组1):传的时候要JSON.stringify2):在页面上获取的时候需要先解码： 1234// 参数a是需要解码的数据function unescapeHTML(a){ return a.replace(/</g, \"<\").replace(/>/g, \">\").replace(/&/g, \"&\").replace(/"/g, '\"').replace(/'/g, \"'\");} 3):JSON.parse 数据库存储emoji表情的问题：12<!-- utf8mb4 可以存储四个字节的数据 -->ALTER TABLE {表名} CHANGE {表字段名} {表字段名} VARCHAR(200) CHARACTER SET utf8mb4;","tags":[]},{"title":"位运算相关","date":"2020-03-03T09:26:34.930Z","path":"2020/03/03/位运算/","text":"位运算的执行效率比较高按位与(&) 作用：判断奇偶数12345if (n % 2 === 1) { console.log(\"n是奇数\");} else { console.log(\"n是偶数\");} 按位或(|) 作用：取整 var num = 1.1 | 0; // 1 按位非(~) 求二进制的反码，实际操作中可以用来取整，相当于Math.floor1~~1.7 === 1 //true 按位异或(^) 作用：交换两数123num1 ^= num2;num2 ^= num1;num1 ^= num2; 有符号左移(<<) 作用：就是*2的几次幂 1<<5 // 32","tags":[]},{"title":"面试题","date":"2020-03-03T09:26:34.928Z","path":"2020/03/03/mianshi/","text":"jsonp跨域服务端1234567891011var http = require('http');var url = require('url');http.createServer(function(req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); // 解析 url 参数 var params = url.parse(req.url, true).query; // jsonpCallback 为前后端约定的字段，用于获取回调函数的名称 res.end(params.jsonpCallback + \"('This is JSONP.')\");}).listen(8888); 本地12345678910111213141516<script> // 定义回调函数 var cb = function(data) { var oDiv = document.getElementById('content'); oDiv.innerHTML = data; } var url = 'http://localhost:8888?jsonpCallback=cb'; // 创建 script 标签，并设置其 src 属性 var script = document.createElement('script'); script.src = url; // 插入 body，此时调用开始 document.body.appendChild(script);</script> jquery中使用jsonp服务端代码不变本地123456789101112131415161718var oDiv = document.getElementById('content');// 定义回调函数// 只是用于服务端获取名称，也可以自行实现，从而在 `success` 中进行调用var cb = function() {};$.ajax({ url: 'http://localhost:8888', type: 'get', dataType: 'jsonp', // 预期服务器返回的数据类型 jsonp: 'A_callback', // 指定回调查询参数的名称，即前后端约定的字段，默认为“callback\" jsonpCallback: 'cb', // 指定回调函数名称 cache: true, success: function(data) { // jQuery 将 JSON 数据剥离出来，传入 success 和 error console.log(data); // 'This is JSONP realized by jQuery.' oDiv.innerHTML = data; }}); jsonp的缺点JSONP 的主要缺点有两个：一、是只能 GET 不能 POST，因为是通过引用的资源，参数全都显式的放在URL里，和 AJAX 没有半毛钱关系。二、是存在安全隐患，动态插入标签其实就是一种脚本注入，XSS HTTP TCP/IP协议TCP/IP分为四层：链路层，网络层，传输层，应用层1.链路层：用于处理链接网络的硬件部分。包括控制操作系统，硬件的沈北驱动网卡，及光纤等物理可见部分，硬件上的范畴均在链路层的作用范围之内；2.网络层：用来处理网络上流动的数据包，数据包是网络传输最小的数据单位。该层规定了通过怎样的路径到达对方的计算机，并把数据包传送给对方。在与对方计算机进行传输时，网络层所起的作用就是在众多的选项内选择一条传输路线3.传输层：TCP（传输控制协议） UDP（用户数据包协议）4.应用层：FTP（文件传输协议） DNS（域名系统HTTP协议） 从服务端到客户端应用层 -> 传输层（添加TCP头部）-> 网络层 （添加IP头部）-> 链路层（添加以太网头部） 客户端收到之后则一层一层删掉头部IP协议的作用是在茫茫的网海中找到对方TCP协议就是安全的把数据给对方，就是三次握手就是在这个协议内DNS协议就如同人的记忆，当你访问过一个网站的时候，它就会把对方的IP地址记住，下次访问的时候就不用去外网服务器查找对方的IP地址了对原型链的理解每创建一个函数都会有一个prototype属性，这个属性是一个指针，指向一个对象（通过该构造函数创建实例对象的原型对象）。原型对象是包含特定类型的所有实例共享的属性和方法。原型对象的好处是，可以让所有实例对象共享它所包含的属性和方法。使用：利用原型让一个引用类型继承另一个引用类型的属性和方法。每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数想指针(constructor)，而实例对象都包含一个指向原型对象的内部指针(proto)。 1234function animals(){}// animals.prototype.constructor 指向函数本身var a1 = new animals();a1.__proto__ === animals.prototype; // true 快速排序123456789101112131415161718192021222324function sortA(arr){ // 如果只有一位，就没有必要比较 if(arr.length<=1){ return arr; } // 获取中间值的索引 var len = Math.floor(arr.length/2); // 截取中间值 var cur = arr.splice(len,1); // 小于中间值放这里面 var left = []; // 大于的放着里面 var right = []; for(var i=0;i<arr.length;i++){ // 判断是否大于 if(cur>arr[i]){ left.push(arr[i]); }else{ right.push(arr[i]); } } // 通过递归，上一轮比较好的数组合并，并且再次进行比较。 return sortA(left).concat(cur,sortA(right));} 实现深浅拷贝 浅拷贝 1234567var obj1 = { a: 10, b: 20, c: 30 };var obj2 = obj1;obj2.b = 100;console.log(obj1);// { a: 10, b: 100, c: 30 } <-- b 被改到了console.log(obj2);// { a: 10, b: 100, c: 30 } 深拷贝 1234567var obj1 = { a: 10, b: 20, c: 30 };var obj2 = Object.assign({}, obj1);obj2.b = 100;console.log(obj1);// { a: 10, b: 20, c: 30 } <-- 沒被改到console.log(obj2);// { a: 10, b: 100, c: 30 } 响应式图片，其实就是根据屏幕的大小加在不同尺寸的图片详细介绍","tags":[]},{"title":"arduino 学习 如果有不正确的，请指出啊，感觉学的很不踏实，你要是看到的话，就当个参考了","date":"2020-03-03T09:26:34.927Z","path":"2020/03/03/arduino/","text":"线的标识：红色代表电源，黑色代表接地，绿色代表信号 GVS三个字母代表的意思： v：代表电源 g：代表的是地 s：代表信号","tags":[]},{"title":"MAC 相关","date":"2020-03-03T09:26:34.925Z","path":"2020/03/03/mac/","text":"Mac清理命令sudo periodic daily MAC查看隐藏文件的快捷键cmd + shift + . 把下面的内容添加进去即可JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_131.jdk/Contents/Home CLASSPAHT=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar PATH=$JAVA_HOME/bin:$PATH: export JAVA_HOME export CLASSPATH export PATH Mac 升级node到最新稳定版 在全局安装node的版本管理工具 ： n npm install -g n n latest n stable mac使用wireshark进行抓包， 因为布吉岛青花瓷怎么抓取安卓端的数据若运行 wireshark.app 弹窗提示“You don’t have permission to capture on that device”： sudo wireshark // 亲测有效 wireshark界面的每个部分详细介绍 mac使用charles进行手机代理1.先到微云或者百度云去安装charles2.proxy -> Proxy setting 查看http代理的端口是否是88883.保证手机端和mac在一个局域网下面4.iphone端需要安装一个插件， 下载Charles证书: http://www.charlesproxy.com/ssl.zip 发送给自己，点击安装即可，(2) 在手机浏览器中访问地址：http://charlesproxy.com/getssl，即可打开证书安装的界面5.安卓端就直接修改http的代理设置，主机名为mac的ip地址，端口是8888， iphone一样6.移动端配置好之后，charles会询问是否允许某个ip进行代理，选择allow即可7.想要抓取那个服务器的包，proxy -> recording Setting -> Include -> Add -> 填写相关域名 -> OK 详细介绍 打断点： 在想要打断点的链接上右键 breakpoint 然后请求这个接口 charles会自动打开可编辑请求的界面 底部有个execute按钮，就是提交的意思；接下来能看到刚刚提交的那个接口箭头朝下了，这样就可以对返回的数据进行编辑了 详细使用 wget使用下载文件并命名1wget -O wordpress.zip http://www.linuxde.net/download.aspx?id=1080 限速下载1wget --limit-rate=300k http://www.linuxde.net/testfile.zip 使用wget断点续传1wget -c http://www.linuxde.net/testfile.zip 使用wget后台下载12wget -c http://www.linuxde.net/testfile.ziptail -f wget-log // 查看进度 伪装代理名称下载1wget --user-agent="Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.204 Safari/534.16" http://www.linuxde.net/testfile.zip 镜像网站 下载整个网站到本地1wget --mirror -p --convert-links -P ./LOCAL URL 爬取一个网站，并可以在本地预览1wget -c -r -npH -k http://v4.bootcss.com 参数说明-c：断点续传-r：递归下载-np：递归下载时不搜索上层目录-nd：递归下载时不创建一层一层的目录,把所有文件下载当前文件夹中-p：下载网页所需要的所有文件(图片,样式,js文件等)-H：当递归时是转到外部主机下载图片或链接-k：将绝对链接转换为相对链接,这样就可以在本地脱机浏览网页了 –miror开户镜像下载。 -p下载所有为了html页面显示正常的文件。 –convert-links下载后，转换成本地的链接。 -P ./LOCAL保存所有文件和目录到本地指定目录 mac terminal打开软件 或者用finder打开指定的目录12open -a Safari touch.htmlopen -a finder /usr/local/etc/nginx mac terminal打开软件 或者用finder打开指定的目录 open -a Safari touch.html open -a finder /usr/local/etc/nginx 使用ngrok将本地端口映射到外网给别人看 下载软件 把软件解压 把本地项目跑起来, 假如端口是8080 假如我下载在Download文件夹， cd Download ngrok http 8080 forwarding后面就是外网的地址 需要注意的是新版本的webpack出于安全考虑，默认检查hostname，如果hostname不是配置内的，将中断访问。 处理方式是： 在webpack.dev.conf.js 找到devServer对象里面添加 1disableHostCheck: true 这种方式映射到外网，会出现本地图片显示不出来比较好的方式是先打包一下，然后用python跑起来，把python端口映射出去即可自己的id： ./sunny clientid 956b67e3d71bc6fd 卫星地图MAC上使用剪切复制 cmd + c 复制 cmd + option + v 移动 注：必须要在mac键盘上按 外接键盘没反应 MAC上卸载输入法要先下载输入法安装包，然后再进行卸载看html5视频没有快进？？试试谷歌的这款插件吧 html5 video speed controller(需要翻墙安装)，安装完成之后，看视频就会在左上角看到有个1.0， 鼠标移动上去就可快进MAC上命令行听歌 github地址查看端口占用情况，并杀死123sudo lsof -i tcp:portsudo kill -9 PID mac下谷歌浏览器解决跨域：（前提是要在Documents文件夹下面创建MyChromeDevUserData空目录，下面的用户名也记得改一下）1open -n /Applications/Google\\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/yaozu/Documents/MyChromeDevUserData Mac 下基本命令command not found 解决办法step1.在terminal里面输入：export PATH=”/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin” 然后命令暂时可以用了 step2.赶紧用open -e ~/.bash_profile在文本编辑器里面打开.bash_profile文件：step3.更改PATH环境变量设置,添加上这一行，export PATH=”/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin” 命令行获取iphone/ipad的uuid1system_profiler SPUSBDataType | grep "Serial Number:.*" | sed s#".*Serial Number: "## 记得还有一个更简短的命令，等想起来了 再补充 Parallels Desktop破解版无法打开参考这个 vmware funsion11下载、激活链接参考这个链接 禁止生成.DS_Store文件12345# 禁止defaults write com.apple.desktopservices DSDontWriteNetworkStores -bool TRUE# 恢复生成defaults delete com.apple.desktopservices DSDontWriteNetworkStores","tags":[]},{"title":"vue学习","date":"2020-03-03T09:26:34.924Z","path":"2020/03/03/vue/","text":"计算属性可以缓存 优化的时候可以用到复杂的数据变化，应该使用计算属性运行 vm.fullName = ‘John Doe’ 时， setter 会被调用， vm.firstName 和 vm.lastName 也相应地会被更新。1234567891011121314computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } }} vue项目引入阿里云图标字体1.在static目录下创建icon文件夹2.把阿里云下载的压缩文件解压，把有用的文件放到icon目录下3.在index.html页面引入iconfont.css4.在浏览器打开demo_fontclass.html,查看相关的class5.在页面中使用<i class="iconfont icon-xxx"></i> 路由传参的方式12345678910// 这种传参不会显示在url中，但是收到的页面刷新以后，数据会丢失 注：参数的第一个属性名称是namethis.$router.push({name: 'index', params: { id: 000, count: 9}})// 这种会在url中经过encode编码后传过去，数据格式会改变，传之前最后JSON.stringify转化this.$router.push({path: '/index', query: { id: 000, count: 9}}) dom操作 created要进行dom操作就要放到this.$nextTick(() => {// function})函数中 小型项目不用vuex，进行兄弟页面之间的传参，使用eventBus，实际使用中出现触发多次的bug1.在src目录下创建一个bus.js 12import Vue from 'vue';export default new Vue(); 2.在要传参的页面和接受参数的页面引入bus.js3.点击的时候，调用toBus 12345let data = 'faljdlal';toBus() { Bus.$emit('getTarget', data); this.$router.push('/my')}, 4.接收页面，created 函数里面添加 123 Bus.$on('getTarget', target => { console.log(target); }); vue项目中使用typescript1.安装TypeScript相关依赖和项目其余依赖，用npm或cnpm 1npm install typescript ts-loader --save-dev 2.修改目录下bulid/webpack.base.conf.js文件，在文件内module>rules添加以下规则 12345678{ test: /\\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\\.vue$/], }}, 3.在src目录下新建一个文件vue-shims.d.ts，用于识别单文件vue内的ts代码 1234declare module \"*.vue\" { import Vue from \"vue\"; export default Vue;} 4.在项目根目录下建立TypeScript配置文件tsconfig.json 12345678910111213{ \"compilerOptions\": { \"strict\": true, \"module\": \"es2015\", \"moduleResolution\": \"node\", \"target\": \"es5\", \"allowSyntheticDefaultImports\": true, \"lib\": [ \"es2017\", \"dom\" ] }} 5.重命名src下的main.js为main.ts 修改webpack.base.conf.js下的entry>app为’./src/main.ts’ 修改src下的App.vue文件 1<script lang=\"ts\"> 遇到横竖屏的情况，better-scroll无法准确计算content的高度，better-scroll的div高度不能用100%，用100vh最近vue项目无法在局域网中访问，解决方案： host：0.0.0.0 nuxt项目同样适用vue项目url中取消#，在路由文件中添加: mode: ‘history’12345678910111213const router = new VueRouter({ mode: 'history', routes:[ { path: '/video', name: 'video', component: Video, meta:{ verify: true } } ]}); 打包之后的js、css文件路径问题解决 webpack.base.conf.js12345678output: { path: config.build.assetsRoot, filename: '[name].js',- publicPath: process.env.NODE_ENV === 'production'- ? config.build.assetsPublicPath- : config.dev.assetsPublicPath+ publicPath: './'或者''}, 打包之后的背景图片的路径会找不到，so，如果用到背景图片的话，最好放到assics目录下，测试放在assets目录下一样是找不到 哈哈vue项目在vscode下使用eslint，最好在生成项目的时候就安装eslint，配置.eslintrc.js 需要安装两个插件 1cnpm install eslint-plugin-html eslint-plugin-vuefix -D 1234567plugins: [ 'vuefix' // 这里需要修改一下 ], // add your custom rules here rules: { \"vuefix/vuefix\": [2, {\"auto\": true}] // 这里直接粘贴过去，也没人给解释，在保存vue文件的时候，就会自动格式化，个人认为比较方便 } 新创建的项目报错 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.(found in )解决方式：参考这个 vue项目调用微信扫码首付款1.首先要引入jsSDK2.在app.vue里面添加： 12345678wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: '', // 必填，公众号的唯一标识 timestamp: '', // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机串 signature: '',// 必填，签名，见附录1 jsApiList: [] // 必填，需要使用的JS接口列表 }) 3.在需要调用的页面里面调用，因为每个设备加载速度的不一样，所以要定时器一直调一直加载 12345678910111213let c = setInterval(() => { wx.scanQRCode({ // eslint-disable-line needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果， scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有 success: function (res) { clearInterval(c) setTimeout(() => { that.isScan = true }, 1000) that.$vux.loading.hide() } }) }, 100) vue页面缓存1234<keep-alive> <router-view v-if=\"$route.meta.keepAlive\"></router-view></keep-alive><router-view v-if=\"!$route.meta.keepAlive\"></router-view> 同时路由页面也要添加 123meta: { keepAlive: false} vue页面的首屏加载优化 vue多页面加载 想要启动vue的样式热更新 要用vue-style-loader如果当前域名会自动保存密码： 在input标签上加属性1autocomplete=\"new-password\" 对象或者数组中的数据更新，视图不会跟着更新由于js的限制，Vue 不能检测以上数组的变动，以及对象的添加/删除，很多人会因为像上面这样操作，出现视图没有更新的问题。 解决方式: this.$set(你要改变的数组/对象，你要改变的位置/key，你要改成什么value) 12this.$set(this.arr, 0, \"OBKoro1\"); // 改变数组this.$set(this.obj, \"c\", \"OBKoro1\"); // 改变对象 如果你只在子组件里面改变父组件的一个值，不妨试试 $emit(‘input’) ,会直接改变 v-modelmockjs在开发和生产环境的切换-> 修改dev.env 1234module.exports = merge(prodEnv, { NODE_ENV: '\"development\"', MOCK: 'true',}) -> 修改prod.env 1234module.exports = { NODE_ENV: '\"production\"', MOCK: 'false',} [Vue CLI 3] 配置 webpack-bundle-analyzer 插件<<<<<<< HEAD 在vue.config.js里面添加 ======= 在vue.config.js里面添加 603dd87d554166584c781088820992004b9c4ad1 123config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) 在package.json里面添加 1\"analyz\": \"npm_config_report=true npm run build\" diff算法 tree diff component diff element diff","tags":[]},{"title":"微信小程序相关","date":"2020-03-03T09:26:34.923Z","path":"2020/03/03/小程序相关/","text":"微信小程序相关设置和获取全局属性 设置this.globalData.info = ‘’;获取getApp().globalData.info 小程序实现动画1<view animation=\"{{animationData}}\">{{toastTitle}}</view> 12345678910111213createGlobalAnimate() { // 页面初始化的时候就可以去执行，duration可以不用写，在step里面可以加 var animation = wx.createAnimation({ duration: 500, timingFunction: 'ease', }); this.animation = animation;}showAnimate() { animation.opacity(1).step(); this.setData({ animationData: animation.export() });}, 页面之间传参 wx.navigateTo({url:’/pages/xiangqing/xiangqing?id=上一页的参数’}) 点击事件传参1<view class='block' bindtap='fun' data-type='{{item}}'></view> 1234// 获取参数fun(e) { let type = e.currentTarget.dataset.type;} vue项目转小程序项目1231.把单个页面的less文件复制出来到一个test.less 把经过编译的css拿到小程序的页面，注：如果less文件的路径不对的话，是不会编译的，还会遇到background无法加载本地图片2.把div, p, h1-h6标签统一换成view; 把v-if，v-show换成wx:if; 把img标签换成image； v-for换成wx:for="{{arr}}" wx:key="index"; @click换成bindtap,并把要传的参数写成data-xxx="{{item.xxx}}"3.把编译过的css文件里面的div，h5,span， img 替换掉 小程序里面使用icon,需要把iconfont.css 以及字体文件放到目录下 注意iconfont.css里面的路径小程序input双向数据绑定 还要注意的是 input结尾要有/1<input placeholder=\"请输入密码\" value=\"{{pwd}}\" type=\"password\"/> 小程序里面的css无法使用本地图片作为背景，需要线上的图片 或者base64位的 网页可以直接把图片转换成base64位，但是微信会控制小程序的整体大小 所以最好还是使用服务器上面的图片地址微信小程序设置全局的属性123const app = getApp()app.globalData.userInfo = e.detail.userInfo 小程序里面改button的样式，必须要::after微信小程序使用canvas画图步骤：1.下载图片2.getImageInfo3.拿到图片信息之后再画4.下载图片的域名必须在白名单内，不然调试可以打开，真机打不开 开发小程序的文件关联配置：针对vscode -> file -> associations12345\"files.associations\": { \"*.vue\": \"vue\", \"*.wxss\": \"css\", \"*.mpx\": \"vue\"}","tags":[]},{"title":"pyenv 的安装和使用","date":"2020-03-03T09:26:34.922Z","path":"2020/03/03/pyenv/","text":"","tags":[]},{"title":"koa相关使用","date":"2020-03-03T09:26:34.921Z","path":"2020/03/03/koa/","text":"koa的使用koa-router可以作为处理API请求，也可以做为页面的相应处理get请求1.query传参（?后面跟参数）-> 获取参数方式：ctx.request.query.id (注：query是个对象) 2.parems传参 （/后面的参数） 123router.get('/home/:id', (ctx, next) => { console.log(ctx.params.id)}) -> 获取参数方式：ctx.params.id 如果是post请求，就要解析客户端发过来的json数据，使用koa-bodyparser来解析-> 注意：需要在router之前引进来","tags":[]},{"title":"nginx 学习","date":"2020-03-03T09:26:34.919Z","path":"2020/03/03/nginx/","text":"nginx配置文件里面的详解每一个server就是一个虚拟主机，我们有一个当作web服务器来使用 12345listen 80; 代表监听80端口server_name xxx.com; 代表外网访问的域名location / {}; 代表一个过滤器，/匹配所有请求，我们还可以根据自己的情况定义不同的过滤，比如对静态文件js、css、image制定专属过滤root html; 代表站点根目录index index.html; 代表默认主页 mac下,使用brew安装nginx：安装： 1brew install nginx 启动： 1brew services start nginx || sudo nginx 停止： 1brew services stop nginx || sudo nginx -s stop 修改nginx配置文件：vi /usr/local/etc/nginx/nginx.conf 检查修改的配置文件是否可用：sudo nginx -t # 需要加sudo，不然那会报错 Windows下Nginx的启动、停止等命令 注：需要在命令提示符里面打开，不能用git bash1.启动 C:\\server\\nginx-1.0.2>start nginx或 C:\\server\\nginx-1.0.2>nginx.exe2.停止 C:\\server\\nginx-1.0.2>nginx.exe -s stop或 C:\\server\\nginx-1.0.2>nginx.exe -s quit3.重启 修改配置文件之后需要重启 C:\\server\\nginx-1.0.2>nginx.exe -s reload","tags":[]},{"title":"提升用户体验","date":"2020-03-03T09:26:34.916Z","path":"2020/03/03/vue-图片懒加载/","text":"图片加载方面，可以使用渐进式图片，或者使用vue-lazyload123456// 在main.jsVue.use(VueLazyload, { preLoad: 1, loading: require('./assets/loading1.gif'), error: require('./assets/error.png')})","tags":[]},{"title":"appium 搭建时候用到的资料","date":"2020-03-03T09:26:34.914Z","path":"2020/03/03/appium/","text":"appium的作用：表面上是测试ios和安卓应用，实际上可以做各种有趣的事情，比如：薅羊毛~ 查看本机可用的虚拟设备(ios)xcrun simctl list devices查看可用的模拟器SDK：xcodebuild -showsdks安装fbsimctl：brew tap facebook/fb brew install fbsimctl --HEAD安装fbsimctl不成功，可以参考：https://github.com/facebook/homebrew-fb/pull/23 # 主要的操作： cd /Users/这里要换成你的电脑名称/Library/Caches/Homebrew/fbsimctl--git ./build.sh fbsimctl build /usr/local/Cellar/fbsimctl/HEAD-9911af8安装applesimutils：brew tap wix/brew brew install wix/brew/applesimutils检测ios/android的运行环境：appium-doctor --ios / appium-doctor --android安装opencv4nodejsbrew install cmake brew install opencv@3 echo 'export PATH="/usr/local/opt/opencv@3/bin:$PATH"' >> ~/.bash_profile cd ~ && source .bash_profile cnpm i -g opencv4nodejs获取apk的包名和activityname：https://blog.csdn.net/xiaosongbk/article/details/82903148查看安卓可用的虚拟设备：adb devices","tags":[]},{"title":"ES6相关","date":"2020-03-03T09:26:34.913Z","path":"2020/03/03/ES6/","text":"浏览器兼容ES6找到一个安装了babel的node_module的模块 找到browser.min.js 12345<script src=\"browser.min.js\"></script><script type=\"text/babel\"> const Name = '张三';//使用新增的关键字：const声明常量 alert(Name);</script>","tags":[]},{"title":"redis","date":"2020-03-03T09:26:34.912Z","path":"2020/03/03/redis/","text":"为什么要使用redis 如果有一些数据短时间内不会发生变化，而它们还要被频繁访问，为了提高用户的访问速度和降低服务器的负载，就把这些数据缓存到读取更快的内存中(或者通过较少的计算量就能获取该数据) 安装mac 安装 brew install redis 启动： brew services start redis linux安装 到redis官网找到最新版本，并使用wget下载到服务器 解压 进入到目录并执行make 把src目录下的redis-server、redis-cli 和redis.conf拷贝到usr/local/redis目录 验证redis是否安装成功： 进入到usr/local/redis，执行./redis-server 设置redis后台启动: cd usr/local/redis vi redis.conf 在命令行模式下输入/daemonize 把no变为yes (vim 的查找操作) ./redis-server redis.conf 就是后台启动redis 进入到交互模式： ./redis-cli 在linux下的简单使用：1234567891011121314151617181920212223242526272829303132333435363738# 进入到交互模式./redis-cli# 设置一个值set name burgess# 获取值get name# 删除所有数据库中的keyflushall# 删除当前数据库中的keyflushdb# 查看所有的keykeys *# 查看此 key 是否存在exists key# 查看当前库中key的数量dbsize# 更改key的名字rename name username# 删除指定的key，可以同时删除多个del name 。。。# 给指定的key设置过期时间 超过过期时间，自动消失expire key time# 返回指定key的过期秒数ttl key# 选择指定的数据库select db-index 对字符串进行操作 拼接： 使用append方法：append key string 截取：使用substr方法： substr key start_index end_index 如果是整数的话，还能进行++、–操作 eg： incr key、 decr key 对列表进行操作-","tags":[]},{"title":"css 相关","date":"2020-03-03T09:26:34.911Z","path":"2020/03/03/css/","text":"使页面的内容变成可编辑状态 -webkit-user-modify: read-write-plaintext-only; 响应式解决方案 需要配合rem来使用1document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth/10 + \"px\"; 1234div{ width:1rem; height:1rem;} 方案2：写页面用320像素去写，然后动态的改变initial-scale, maximum-scale, minimum-scale,缺点是不能在安卓2.2及以下不能兼容1<meta name=\"viewport\" content=\"width=320,initial-scale=1,minimum-scale=1,maximum=1\"> 前天面试的时候被问到，怎样能让一个容器以固定的宽高比例显示123<div class=\"wrapper\"> <div class=\"inner\"></div></div> 12345678910111213.wrapper { height: 0; padding-bottom: 200px; position: relative; border: 1px solid #ddd;}.inner { position: absolute; top: 0; width: 50%; height: 50%; border: 1px dashed #f00;} css3实现平行四边形 123456789/*因为外层倾斜了之后，内层也会跟着倾斜，所以内层要往相反的方向倾斜*/.wrapper { border: 1px solid #44a5fc; color: #333; transform: skew(-20deg);}.inner { transform: skew(20deg);} 文字超出显示三个点12345word-break:keep-all;white-space:nowrap;text-overflow:ellipsis; 两个span没有放在同一行，中间会有点间距 解决办法: 两个span的父元素上添加font-size: 0 1px像素边框1234567891011@media only screen and (-webkit-min-device-pixel-ratio:2) { .border1px:after { position: absolute; height: 1px; right: 0; width: 100%; content: ' '; transform: scaleY(0.5); -webkit-transform: scaleY(0.5); }} 彩色图片变成黑白12345678910.gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;} 安卓机上input获得焦点时，输入框会把整个页面往上挤1.页面外层元素不能有固定定位，据对定位是可以的2.input的高度不能用百分比，或者vh，用vw和px是可以的 input获得焦点时，让整个页面往上移动1<input @focus=\"move('-20%')\"> 1move(val) {this.distance(val)} icon图标在安卓和ios上显示不一样1234.className{ display: flex; align-items: center;} flex 新认识的属性 平分多余的空间1justify-content: space-evenly; 粘性底部布局: 在外层容器中添加1min-height: fill-available; 要在底部的元素 12margin-top: -13.333333vw;height: 13.333333vw; 去掉滚动条123456789::-webkit-scrollbar { width: 0px; height: 1px;}::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);} http-equiv属性详解(转)[http-equiv属性详解(转)] (http://kinglyhum.iteye.com/blog/827807) 改变placeholder的默认颜色1234567891011121314<style> input::-webkit-input-placeholder{ color:red; } input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:red; } input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color:red; } input:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:red; }</style> 使用css的sticky实现吸顶效果 设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。 缺点：兼容性 文字两端对齐1234<div class=\"flex-jus\"> <!-- 中文后面要跟一个空格 后面要有一个空的span --> 两 端 对 齐<span></span></div> 12345678910.flex-jus { text-align: justify; width: 300px; height: 100px; line-height: 100px;}.flex-jus span { display: inline-block; padding-left: 100%;} 什么是BFCBFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 如何创建一个BFC（或者如何触发一个BFC） float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible","tags":[]},{"title":"python 学习","date":"2020-03-03T09:26:34.908Z","path":"2020/03/03/python/","text":"python 学习Python搭建简易的服务器 前提是已经安装了python1.在任意位置创建一个文件夹 进入2.执行命令：python -m SimpleHTTPServer 后面可以跟上想要的端口 不写的话 默认是80003.把自己的文件放到这个文件夹里面 例如：test.html4.打开浏览器firefox 输入localhost:8000/test.html5.python3的写法： python3 -m http.server 8080 python爬虫步骤https://www.liaoxuefeng.com/api/ref/001432004374523e495f640612f4b08975398796939ec3c000/topics?page=1 pip3升级 pip3 install –upgrade pip python项目运行：把所有的依赖写到以txt文件里面 pip install -r requirements.txt python虚拟环境 作用是为了和全局的环境分隔开 安装 pip install virtualenv 创建虚拟环境目录 virtualenv venv #venv为虚拟环境目录名，目录名自定义 激活环境 source venv/bin/activate 退出虚拟环境 source deactivate is 和 == 的区别is: 判断两个对象在内存中的存储位置是否一样==： 判断两个值是否相等 在外界访问私有属性和方法： _类名__私有属性/方法类的继承： class Animal: def eat(self): print(‘eat’) class Dog(Animal): def bark(self): print(‘wangwang’) 对父类方法的重写：只需要在子类的里面定义一个同名的方法即可对父类方法的扩展： 在Dog的方法里面：super().eat()定义类属性，以及访问类属性的注意事项12class Animal: count = 0 访问类属性可以Animal.count 也可以用实例化的对象去访问count，一定要用前者 定义类方法123456789101112class Animal: count = 0 @classmethod def classmethod(cls): print('%s' % cls.count)# 调用类的方法Animal.classmethod() 定义类方法需要注意两个事项： 定义方法之前 @classmethod 方法的第一个参数是cls class的缩写 静态方法: 既不需要访问类属性，也不需要访问实例属性123456789101112class Animal: count = 0 @staticmethod def staticmethod(): print('i am static method')# 调用类的方法Animal.staticmethod() Python爬虫利器二之Beautiful Soup的用法，看这里朗读文本库：pyttsx3 在mac环境下需要安装：pyobjc 这个库，不然会报Foundation module找不到更改python3的链接，前提是你已经安装了python3.61alias python3="/Library/Frameworks/Python.framework/Versions/3.6/bin/python3.6" opencv for mac安装教程： 参考的是这个链接，需要翻墙 12345brew install python3brew link pyhton3brew install opencv // 这里我安装的是4ln -s /usr/local/opt/opencv@4/lib/python3.7/site-packages/cv2/python3.7/cv2.cpython-37m-darwin.so cv2.sopip3 install numpy scipy matplotlib scikit-image scikit-learn ipython pandas opencv-python brew想安装指定的版本软件 百度了一下，看了好几篇文章：https://www.jianshu.com/p/e47fc32060e6?utm_source=oschina-app，这篇文章说的还比较详细一点 因为我已经换了brew的源，所以git log python.rb,根本看不到python3.6和python3.5的id（我用的是清华源） 接下来是我自己的步骤： 从：https://www.python.org/downloads/mac-osx/ 下载指定的版本，python这个东西还是不要尝新，我现在换回了3.5的版本 pkg安装的默认目录是：/Library/Frameworks/Python.framework/Versions/3.5/bin/python3 mv /Library/Frameworks/Python.framework/Versions/3.5/bin/python3 /usr/local/bin/ 记得把.bash_profile里面的路径也改一下，source一下 因为先用brew安装了python3，版本过高，就用下载pkg的方式去安装，安装好了之后，使用pip3 install 。。不会安装到当前版本的库中，下面是解决方式，感觉会有更好的解决方式，如果你知道，麻烦分享一下，1640644790@qq.com！一起进步1python3 -m pip install itchat","tags":[]},{"title":"使用natapp内网穿透访问本地vue项目无法访问","date":"2020-03-03T09:26:34.906Z","path":"2020/03/03/使用natapp内网穿透访问本地vue项目无法访问/","text":"映射到本地8080端口，发现报：Invalid Host header,这是由于新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的，将中断访问。 解决方法：编辑webpack.base.conf.js1234567module.exports = { ... // 添加如下 devServer: { disableHostCheck: true }} natapp的搭建就不用说了，这个是快速搭建的图文教程，非常详细了：这样就可以访问了，试了一下速度不是很快，但是能查看内网就不错了！","tags":[]},{"title":"为树莓派更换国内镜像源","date":"2020-03-03T09:26:34.902Z","path":"2020/03/03/树莓派-更换清华源/","text":"在实际使用中，发现清华源安装一些库的时候，不会出现丢包情况，所以以后就尽量使用清华源编辑/etc/apt/sources.list文件$ sudo vi /etc/apt/sources.list用#注释掉原文件内容，用以下内容取代：12deb http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ stretch main contrib non-free rpideb-src http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ stretch main contrib non-free rpi 编辑/etc/apt/sources.list.d/raspi.list文件1$ sudo vi /etc/apt/sources.list.d/raspi.list 更换成一下内容： 12deb http://mirror.tuna.tsinghua.edu.cn/raspberrypi/ stretch main uideb-src http://mirror.tuna.tsinghua.edu.cn/raspberrypi/ stretch main ui 1sudo apt-get update","tags":[]},{"title":"婚后生活细节","date":"2020-03-03T09:26:34.901Z","path":"2020/03/03/婚后生活细节/","text":"1、要获得彼此的信任，就要做到不玩暧昧，不玩消失，让彼此的行踪、朋友、同事都大大方方地透明化。 2、在心爱的女人面前，越贱越快乐! 3、两人吵完架后，可以互换角色再重复一遍刚才吵架的内容，保准你们笑破肚皮!(觉得这条很好用，哈哈，下次试试) 4、婚后一定要时刻把结婚戒指戴在左手无名指上!佩戴结婚戒指明确表明了你的婚姻状态，同时也明确表明了你拒绝外来诱惑的坚定态度。 5、两人一起出去参加饭局的时候，看到喜欢的菜又不好意思夹太多次的时候，可以互相夹给对方吃。 6、经常参加另一半的朋友聚会。这样可以扩大社交圈，也可以增加许多共同的话题。 7、单独在外要经常把另一半挂在嘴边。 8、从很久以前开始，谈话中“我们”出现的次数超过了“我”的次数。 9、男人工作再忙也要承担一点家务，这是对家庭的责任。像我，负责洗碗、洗衣服、倒垃圾、锁门、拿报纸这几项常规任务，还有许多临时任务，最多的临时任务就是找东西。许多人都讨厌洗碗，而我特别喜欢洗碗。看着一堆油腻的脏碗逐渐被洗干净很有成就感。 10、在她洗澡的时候悄悄帮她把拖鞋换个方向，要刷牙的时候帮她把牙膏挤好漱口水倒好，一些平时生活上的举手之劳虽然小，但是能一直让她感到温暖和贴心。 11、和同事朋友聊天的时候(特别是异性)，要经常把另一半挂在嘴边，亲身体会事实证明，可以与桃花绝缘。 12、有空不妨参与另一半的工作，比如帮忙上网找资料，整理整理东西。一方面可以两人合作做点事情，另一方面了解另一半的工作，可以增加许多话题。 13、夫妻之间不需要隐私!我们的电子邮件、msn、QQ、阿里旺旺的密码互相都知道，有时需要帮忙收发邮件很方便，手机也经常互相借用。心里坦坦荡荡，有什么不能让对方知道的呢? 14、副驾驶的位子是老婆的专座，除非老婆批准，别的异性只许坐在后排。 15、和朋友聊天，得出这样的结论：女人喜欢给家里订下许多规矩。例如，每块毛巾的职责是什么;洗完澡一定要把水迹擦干净;上完厕所一定要把马桶盖盖上。。。一旦没有遵守，就会说：“和你说过多少遍了?!怎么又XXX?” 16、身为男人，应该有这样的自觉，如果安排有变，比如说要加班，或是临时有约，必须要打电话报备一下。 17、有觉得有趣的两人的对话或事情，不妨记录下来，日积月累，每隔半年或一年翻出来一起看看，重温一下快乐的时刻，乐趣无穷。 18、昨天堵在南北高架的时候听电台，话题是道歉。有个听众来信说每次她一生气，老公就装身体不舒服，弄得她也不好发作，老公接着道歉，气就消了。听了不禁笑了，我也做过这种事，还挺管用。不过不能多用。 19、还在单身的女人不要抱怨怎么总是找不到成熟体贴的男人，男人是要调教的。也许有天生就很体贴，很有责任感，善解人意的男人，但是那是极少数，被你找到的几率是很小很小的。大多数的男人是像我这样，脑子里少根筋的。是靠老婆从谈恋爱的时候就开始不厌其烦苦口婆心经年累月地教导出来的。所以，不妨眼界放宽，找个可造之材开始调教吧。 20、从小就被电视电影误导，觉得男主角如果事业未成，怕耽误了优秀的女主角而忍痛分手是很有责任感，特自我牺牲，特酷的一种表现。错!错!错!为了事业牺牲爱情才是自私。结婚誓言里不是写得清清楚楚吗?不论贫穷或富有，不论疾病或健康，都要在一起，这样的感情才经得起考验。如果等到你真的事业有成了，那看上你的人是爱你，还是爱你的财富和地位呢? 21、有时候在msn的时候我帮她做了什么事，她说了句：“谢谢亲爱的。”我顿时警觉起来，怀疑老婆的账号被黑客盗用了，马上问一句：“你真的是XX吗?”老婆顿时怒：“滚!”我这才放心。 22、要做一个有生活情调的女人。生活情调不只是爱打扮，在家里点个熏香而已。是能够不断发现生活中的新乐趣，并且分享和感染周围的人。老婆一直能发现生活中的乐趣，例如新的好餐馆、咖啡馆，插花，装修，旅游，找到好书，认识新朋友。让我们的生活一直有新鲜感。 23、每天上班出门前(以前是我出门比她早，现在是她出门比我早)要和老婆吻别，这是一个好习惯。 24、介绍一个两人可以玩的小游戏。只要一支笔，一张纸。轮流画东西让对方猜是什么，但是要说明猜的东西的范围，是成语，人名，地名，还是事件等等。不要担心自己画画水平烂，这与画画水平无关，而是与联想能力有关。无聊的时候(坐火车坐飞机，平时在家也可以)玩，很有乐趣的哦!(这个我俩玩不了，我俩画画水平差太多啦，哈哈哈) 25、男人不要以为沉默很酷，两个人在一起还是要多沟通比较好。有什么想法，对对方有什么意见，不要闷在肚子里，说出来对方才会知道，才有机会去改善。一个人生闷气只会越来越气，看看对方一副毫无知觉的样子更气，对解决问题毫无帮助。 26、谈恋爱，包括婚后，都是需要很长一段时间去磨合的，小到生活习惯，大到脾气性格做事方式，都需要慢慢调整适应，这个磨合的过程会伴随无数的争吵和眼泪，但是这个过程越到后面，苦恼会越来越少，而幸福感会越来越强。我们恋爱三年，结婚七年，头七年可能都算磨合期，直到现在偶尔还是有小小的摩擦，但是总体感觉非常幸福美满。所以，恋爱和婚姻中，只要不是原则性的大问题，小吵小闹还是不要轻易分手，一定要有耐心，好日子在后头呢! 说到以前吵架比较多的时候，经常是在深夜，因为关了灯，在黑暗中，精神就会集中在刚才发生的事情上面。但是我是个沾上枕头就很容易睡着的人，经常是老婆在愤愤不平和我算账的时候，忽然听到边上传来我香甜的打呼声，那叫一个怒啊!她就会凑到我的耳边，大喊一声：“睡吧!”(这个跟我俩很像，哈哈哈~经常我还在生气呢，等着他来哄哄呢，就听到人家熟睡的鼾声，相当郁闷) 27、介绍男士们一个道歉的方法。以前我犯了错，只会反复说“对不起”、“我错了”、“原谅我吧”。老婆很不满意。后来她教我道歉三步曲：第一步，陈述事实，今天我犯了什么错;第二步，说明理由，为什么会犯这个错;第三步，改正措施，以后有什么措施来确保不再犯同样的错。试验多次，效果不错。 祝愿全天下有情人都能找到自己的幸福!","tags":[]},{"title":"vim 常用的操作快捷键","date":"2020-03-03T09:26:34.897Z","path":"2020/03/03/vim使用/","text":"vim常用的快捷键G 移至行行首nG 移至第n行行首n+ 移n行行首n- 移n行行首n$ 移n行(1表示本行)行尾0 所行行首$ 所行行尾^ 所行首字母h,j,k,l 左移移移右移H 当前文件第一行行首L 当前文件最后一行行首shift + a： 移动到光标所在行的行未shift + i: 移动到光标所在行的行首 清空一个文件内容1.首先按 i 键 ，进入编辑模式2.然后按esc键3.按gg，跳到文件的开头4.按dg，就清空了 删除光标位置到本行开头：【d0】点命令【.】含义是重复上次修改","tags":[]},{"title":"马克飞象官方文档","date":"2020-03-03T09:26:34.896Z","path":"2020/03/03/markdown/","text":"欢迎使用马克飞象(示例笔记本)[马克飞象|帮助|Markdown] 马克飞象是一款专为印象笔记（Evernote）打造的Markdown编辑器，通过精心的设计与技术实现，配合印象笔记强大的存储和同步功能，带来前所未有的书写体验。特点概述： 功能丰富 ：支持高亮代码块、LaTeX 公式、流程图，本地图片以及附件上传，甚至截图粘贴，工作学习好帮手； 得心应手 ：简洁高效的编辑器，提供桌面客户端以及离线Chrome App，支持移动端 Web； 深度整合 ：支持选择笔记本和添加标签，支持从印象笔记跳转编辑，轻松管理。 [TOC] Markdown简介 Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— 维基百科 正如您在阅读的这份文档，它使用简单的符号标识不同的标题，将某些文字标记为粗体或者斜体，创建一个链接或一个脚注[^demo]。下面列举了几个高级功能，更多语法请按Ctrl + /查看帮助。 代码块12345678910@requires_authorizationdef somefunc(param1='', param2=0): '''A docstring''' if param1 > param2: # interesting print 'Greater' return (param2 - param1 + 1) or Noneclass SomeClass: pass>>> message = '''interpreter... prompt''' LaTeX 公式可以创建行内公式，例如 $\\Gamma(n) = (n-1)!\\quad\\forall n\\in\\mathbb N$。或者块级公式： 1$$ x = \\dfrac{-b \\pm \\sqrt{b^2 - 4ac}}{2a} $$ 表格 Item Value Qty Computer 1600 USD 5 Phone 12 USD 12 Pipe 1 USD 234 流程图12345678st=>start: Starte=>endop=>operation: My Operationcond=>condition: Yes or No?st->op->condcond(yes)->econd(no)->op 以及时序图: 123Alice->Bob: Hello Bob, how are you?Note right of Bob: Bob thinksBob-->Alice: I am good thanks! 提示：想了解更多，请查看流程图语法以及时序图语法。 复选框使用 - [ ] 和 - [x] 语法可以创建复选框，实现 todo-list 等功能。例如： 已完成事项 待办事项1 待办事项2 注意：目前支持尚不完全，在印象笔记中勾选复选框是无效、不能同步的，所以必须在马克飞象中修改 Markdown 原文才可生效。下个版本将会全面支持。 印象笔记相关笔记本和标签马克飞象增加了@(笔记本)[标签A|标签B]语法, 以选择笔记本和添加标签。 绑定账号后， 输入(自动会出现笔记本列表，请从中选择。 笔记标题马克飞象会自动使用文档内出现的第一个标题作为笔记标题。例如本文，就是第一行的 欢迎使用马克飞象。 快捷编辑保存在印象笔记中的笔记，右上角会有一个红色的编辑按钮，点击后会回到马克飞象中打开并编辑该笔记。 注意：目前用户在印象笔记中单方面做的任何修改，马克飞象是无法自动感知和更新的。所以请务必回到马克飞象编辑。 数据同步马克飞象通过将Markdown原文以隐藏内容保存在笔记中的精妙设计，实现了对Markdown的存储和再次编辑。既解决了其他产品只是单向导出HTML的单薄，又规避了服务端存储Markdown带来的隐私安全问题。这样，服务端仅作为对印象笔记 API调用和数据转换之用。 隐私声明：用户所有的笔记数据，均保存在印象笔记中。马克飞象不存储用户的任何笔记数据。 离线存储马克飞象使用浏览器离线存储将内容实时保存在本地，不必担心网络断掉或浏览器崩溃。为了节省空间和避免冲突，已同步至印象笔记并且不再修改的笔记将删除部分本地缓存，不过依然可以随时通过文档管理打开。 注意：虽然浏览器存储大部分时候都比较可靠，但印象笔记作为专业云存储，更值得信赖。以防万一，请务必经常及时同步到印象笔记。 编辑器相关设置右侧系统菜单（快捷键Ctrl + M）的设置中，提供了界面字体、字号、自定义CSS、vim/emacs 键盘模式等高级选项。 快捷键帮助 Ctrl + /同步文档 Ctrl + S创建文档 Ctrl + Alt + N最大化编辑器 Ctrl + Enter预览文档 Ctrl + Alt + Enter文档管理 Ctrl + O系统菜单 Ctrl + M 加粗 Ctrl + B插入图片 Ctrl + G插入链接 Ctrl + L提升标题 Ctrl + H 关于收费马克飞象为新用户提供 10 天的试用期，试用期过后需要续费才能继续使用。未购买或者未及时续费，将不能同步新的笔记。之前保存过的笔记依然可以编辑。 反馈与建议 微博：@马克飞象@GGock 邮箱：hustgock@gmail.com 感谢阅读这份帮助文档。请点击右上角，绑定印象笔记账号，开启全新的记录与分享体验吧。 [^demo]: 这是一个示例脚注。请查阅 MultiMarkdown 文档 关于脚注的说明。 限制： 印象笔记的笔记内容使用 ENML 格式，基于 HTML，但是不支持某些标签和属性，例如id，这就导致脚注和TOC无法正常点击。","tags":[]},{"title":"调试的小技巧","date":"2020-03-03T09:26:34.895Z","path":"2020/03/03/debug/","text":"console.table ：可以把对象以表格的形式输出12345var animals = [ { animal: 'Horse', name: 'Henry', age: 43 }, { animal: 'Dog', name: 'Fred', age: 13 }, { animal: 'Cat', name: 'Frodo', age: 18 }]; console.table(animals); console.counts() 可以查看某个函数的调用次数在代码里面添加 debugger;可以进行断点调试Object.keys(obj) 返回：obj的所有key组成的数组Object.values(obj) 返回：obj的多有value组成的数组eslint全局配置: .eslintrc.js1234globals: { AMap: true, wx: true } 访问某个接口报net::ERR_BLOCKED_BY_CLIENT错，是因为谷歌浏览器的拦截插件作怪，用没有插件的浏览器测试就没问题","tags":[]},{"title":"图片生成icon","date":"2020-03-03T09:26:34.892Z","path":"2020/03/03/图片生成icon教程/","text":"图片生成icon首先要将图片转化为svg，如果已经是svg，就可以跳过这步 https://www.vectorizer.io/，这个网站可以将图片转化成svg 选择UPLOAD IMAGE 生成之后，在第二个页面点击downLoad便可 参考这个网站， 将svg生成图标字体","tags":[]}]