Fetch 与 Axios

Jul 17, 2019

什么是 fetch ？

以前通过JS进行网络请求都是使用ajax也就是XMLHttpRequest实现的。如果用原生方式实现起来比较麻烦。

Fetch API是浏览器提供的一个代替XMLHttpRequest的新方法。

怎么使用 fetch ？

最简单的形式：

fetch('http://example.com/movies.json')
.then(function(response) {
  // return response.text();
  return response.json();
})
.then(function(myJson) {
  console.log(myJson);
});

⚠️需要注意:

fetch()方法返回的是promise。
当Http状态码是404或者500时也是resolve，但是会将resolve的返回值的ok属性设置为false。
只有当网络故障或者请求被阻止时才会是reject。
resolve中进行response.json()才能拿到返回数据。
response.json()会读取body，如果是json格式的，会将其转化。如果是不是json要用response.text()

怎么设置 method、header等参数呢？

fetch() 方法接受第二个可选参数——一个对象——用来设置请求的参数：

fetch(url, {
  body: JSON.stringify(data), // must match 'Content-Type' header
  cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
  credentials: 'same-origin', // include, same-origin, *omit
  headers: {
    'user-agent': 'Mozilla/4.0 MDN Example',
    'content-type': 'application/json'
  },
  method: 'POST', // *GET, POST, PUT, DELETE, etc.
  mode: 'cors', // no-cors, cors, *same-origin
  redirect: 'follow', // manual, *follow, error
  referrer: 'no-referrer', // *client, no-referrer
})

⚠️credentials: 'include' 这个字段可以让请求带上 cookie 。

…

Read more ⟶

利用useContext使用ReactRouter

Jul 8, 2019

利用React Hook的useContext使用React Router的history.push等api，使用useReducer管理数据。

Read more ⟶

web前端对密码加密的意义

Jul 6, 2019

web前端对密码加密的意义

有的运维或者后台会记录包含请求体的 access log，如果不加密，log 里面就是明文密码。这种在架构上垂直扩展&多层的公司很容易发生。GitHub 就翻车过一次，在请求日志里发现了明文密码，然后就群发邮件通知用户改密码。 @lincanbin

用单向函数“加密”等同于明文 @hanru

能增加攻击的难度。安全领域并不是非黑即白的，如果小量成本能挡住小学 3 年级的傻子攻击，那就有意义 @otakustay

任何提高攻击门槛的做法都是有意义的 @newmlp

感觉一般加密意义不大，中间人重放就可以了，但聊胜于无。顺便一说 B 站采用的是前端非对称加密 @lzvezr

非对称加密。用公钥加密，知道 JS 源码也没用。但是我觉得在 HTTPS 下面没必要。另外，如果进日志，肯定不要存密码啊。如果原封进日志，那所有加密都没有意义。因为这个加密过的密码本来就可以从前端登录进去。我只是不知道明文而已。CDN 商是可以拦截保存，所以不要啥的都经过 CDN。基于上面的分析，还有一种比较稳妥的方式是前端密码提交的时候，附上 timestamp，用 RSA 公钥加密，服务器私钥解密后验证时间，然后登录一次 timestamp 作废。这样日志泄露或者被拦截，也无法用原密文重放 @lhx2008

看了下苹果、微软、谷歌、fb 这几个登录页面都是明文传输密码的，百度、淘宝、qq 都是先前端加密，总结一下就是在国外没意义，国内有意义 @iiji86

用户密码安全性设计

即使被拖库，也可以保证密码不泄露

前端rsa私钥加密

Web前端密码加密是否有意义？ - w2014的回答

事实上现代密码学已经可以做到很多让人难以想象的事情了下面是一些有一点“反常识”的结论
1.A可以向B证明自己拥有一个密码，但是如果B是假冒的验证者，A不会透露关于密码的任何信息给B。——“零知识证明”
2.A可以和B比较自己持有的一个值的大小关系，而不泄露这个值给对方。——“百万富翁问题”
3.A可以给B发来的一段信息进行电子签名，而不知道信息的内容。——“盲签名”
4.A和B可以，在没有公正第三人的情况下，进行等概率胜负的博弈。——“电子博弈”
5.邮件服务，如果不考虑法律风险的话，是可以做到让服务器看不到你的邮件内容的。——PGP
6.破解4096位RSA是困难的。——即使用超算也如此。破解256位AES是困难的。——即使用量子计算也如此。破解OTP系统是困难（划掉）不可能的。——即使天顶星人来了也如此。
7.一个好的加密算法真的应该是公开的——它可以接受更多人的检验。一个好的密码系统不一定是公开的——但是它应该按照可以公开除了密码之外的一切而依旧安全来设计。
8.可以实现这样的算法，使得班干部中的任何一个均可以以班委会的名义下达通知，且其他人，除了班长之外，都不知道具体下达者。
9.密码系统的安全性取决于最弱的一环……当年是谁说的“只用https保护登录界面就够了”的来着…你的token也会被盗
10.大多数密码系统都不是被正面攻破的…而是实现过程中出了差错…
11.以上内容，真的，真的，在大多数的密码学教材上都能找到——甚至还有用到的一些算法安全性的数学证明…

…

Read more ⟶

博客在线编辑器

Jun 23, 2019

初衷

博客的内容时使用git管理的。在公司的电脑和家里的两台电脑上都有写博客的需求，那么在3个端的每次的pull和push就显得有一点麻烦。如果有一个基于浏览器访问的编辑器就舒服多了。

构思

我的博客使用了hugo，它的内容是基于markdown或html的，所以如果把博客源文件放在服务器上，同时搭建一个可以编辑这些源文件的后台，就可以实现基于浏览器编辑博客了。

vscode开源了他们的编辑器monaco-editor，可以使用它作为浏览器中的编辑器。

在搭建一个后台程序来读取博客文章内容，配合若干接口实现保存、创建、删除、登录等功能即可。

editor项目

此项目作为后台服务，需要提供的接口有：

创建文章
保存文章
提交到git并push到仓库，并打包发布。

准备使用golang实现。需要用到的golang的api有： ……

制作image

sudo docker image build -t myeditor .

启动容器

sudo docker container run -d  --rm -p 3000:3000 -v "/home/wang/code/hugo/content/posts":/app/blog myeditor

hugo项目中的docker

生成image

sudo docker image build -t site .

启动nginx容器

sudo docker container run --rm --name myblog \
-p 80:80 -p 443:443 -d \
--volume "$PWD/public":/usr/share/nginx/html site

打包hugo

hugo --baseURL https://wowfriday.cn/

hugo serve --renderToDisk --baseURL https://wowfriday.cn/ --appendPort=false
hugo serve --renderToDisk --appendPort=false

…

Read more ⟶

前端知识点

Jun 17, 2019

左耳朵耗子

css

选择器
- 优先级
- 伪类
- 伪元素
盒子
- 盒子模型
- 内容、内边距、边框、外边距、box-sizing
- 背景颜色、背景图片、背景渐变色
- outline、box-shadow
外边距合并
布局
浮动和定位在内的传统布局方法
弹性盒（flexbox）布局
书写规范
less

JS核心原理

了解好的特性和各种坑。

《JS语言精粹》
《JS忍者秘籍》
《Effective JS》的68条精华建议
《深入浅出ES6》

浏览器原理

How browsers works

原文的翻译How browsers works

Virtual

网络协议

High Performance Browser Networking
http2
websocket

前端性能

框架

实践

跨域
AJAX & Fetch & Axios

…

Read more ⟶

将emoji表情作为网站的favicon

Jun 12, 2019

先加一个这个

<link rel="icon" data-emoji="🛰" type="image/png">

在来一段js

const favicon = document.querySelector("link[rel=icon]");

if (favicon) {
  const emoji = favicon.getAttribute("data-emoji");

  if (emoji) {
    const canvas = document.createElement("canvas");
    canvas.height = 64;
    canvas.width = 64;

    const ctx = canvas.getContext("2d");
    ctx.font = "64px serif";
    ctx.fillText(emoji, 0, 64);

    favicon.href = canvas.toDataURL();
  }
}

…

Read more ⟶

Linux的简单使用

Jun 11, 2019

过滤 grep

history | grep chmod

chmod

给脚本运行的权限

chmod 777 proxy.sh
chmod u+x deploy-hugo.sh

远程执行命令

ssh t "service 77kpi stop"

t 使ssh配置文件中的别名，会连接到服务器，在服务器上执行引号中的命令。

scp

scp -i ~/.ssh/证书 /mnt/c/Users/aa/bb.txt  [email protected]:~/bb.txt

-i 使用证书本地文件名绝对路径用户名@ip:绝对路径

压缩与解压文件夹

压缩 public 文件夹为 blog.tar.gz

tar -zcvf blog.tar.gz public

解压 blog.tar.gz的内容到 public 文件夹内

tar -zxvf blog.tar.gz public

安装二进制软件

下载tar.gz压缩包
use the command tar vxzf hugo.tar.gz
move lib to /usr/local/bin, command:mv ~/download/hugo /usr/local/bin/hugo
set path vim ~/.zshrc
add export PATH=/usr/local/bin/hugo:$PATH
source ~/.zshrc

复制

sudo cp -r public /usr/share/nginx/html/blog

端口被占用

lsof -i :80

解析域名

apt install dig

dig wss.cool

设置梯子-客户端

使用shadowsocks-libev，

…

Read more ⟶

docker

Jun 6, 2019

ubuntu安装docker

使用清华源安装，地址，按照文档操作即可。

设置docker源为阿里镜像

sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": ["https://2sjdzxnu.mirror.aliyuncs.com"]
}
EOF
sudo systemctl daemon-reload
sudo systemctl restart docker

操作

进入 container

docker exec -it container-name/id /bin/sh

最后的 /bin/sh 可以换成 /bin/bash

tensorflow

系统ubuntu 18.04，显卡Gtx950，驱动390。

安装nvidia-docker和nvidia-container-runtime

curl -s -L https://nvidia.github.io/nvidia-docker/gpgkey | \
  sudo apt-key add -
distribution=$(. /etc/os-release;echo $ID$VERSION_ID)
curl -s -L https://nvidia.github.io/nvidia-docker/$distribution/nvidia-docker.list | \
  sudo tee /etc/apt/sources.list.d/nvidia-docker.list
sudo apt-get update

sudo apt-get install -y nvidia-docker2=2.0.3+docker18.09.1-1 nvidia-container-runtime=2.0.0+docker18.08.1-1
sudo pkill -SIGHUP dockerd

测试一下

…

Read more ⟶

网站的兼容性

Apr 3, 2019

适配方案

两种方案做适配不同屏幕：一种是淘宝的按照尺寸缩放，一种是bootstrap的响应式布局。

bootstrap有一个react-bootstrap的项目，如果需要支持ie9，需要引入bootstrap3的css。因为4不支持ie9，有些特性使用不了。

回流与重绘 (Reflow & Repaint)

ie（9-11）中使用absolute和fixed，滚动式抖动。在整个文档中间某些位置设置了absolute和fixed，会导致页面抖动，查看性能记录，会有大量时间在【画图】，将absolute和fixed的元素移动到文档的尾部，也就是他们的后面没有其他元素，就能解决抖动的问题。

利用 ReactDOM.createPortal将absolute\fixed的元素放置到整个文档最后

利用modernizr检测浏览器不支持的功能\样式。

IE9的某些样式与标准写法不同

文字两段对齐:

text-align: justify;
text-justify: distribute; //IE9
-ms-text-align-last: justify;
text-align-last: justify;

文字竖排：

writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;//IE9

居中写法（top/left有bug）：

position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);

…

Read more ⟶

CSS模块化

Mar 27, 2019

使用less和css module。在A和B两个less文件中分别写如下的样式。

.textfillsContainer{
  background-color:red;
  .textfills{
      background-color:red;
  }
}

A文件： A文件

B文件： B文件

在编译打包后的文件中观察：

A文件打包出来的css代码： B文件

B文件打包出来的css代码： B文件

可以看到，即使是相同的class名，由于less或者css module的作用，会视文件为一个模块，在打包时，根据模块对class名做混淆哈希。

所以只要不在一个文件（模块）中使用相同class名就能避免命名冲突。

…

Read more ⟶