监控浏览器打开开发者工具事件
监控浏览器打开开发者工具事件在某些情况下我们需要检测当前用户是否打开了浏览器开发者工具，比如前端爬虫检测，如果检测到用户打开了控制台就认为是潜在的爬虫用户，再通过其它策略对其进行处理。
12345678910111213141516171819202122232425<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div>test</div> <script> const element = new Error('test' ...
使用 verdaccio 搭建私有npm镜像(续)
使用 verdaccio 搭建私有npm镜像(续)背景
私有包,统一管理,方便开发和使用,自然也可以使用npm的付费服务,可惜贫穷限制了消费能力
安全性,内部开发的模块和一些内容并不希望其他无关人员能够看到,但是又希望内部能方便使用
加速,自己搭建npm 服务器,本身可以自带常用package的缓存, cnpm 有一些包存在路径问题,而npm 的速度有些感人,自建的服务器会缓存下载过的包,能节省时间
部署流程基础安装可以查看上一篇文章使用 verdaccio 搭建私有npm镜像
配置nginx反向代理直接运行 verdaccio, 控制台会有提示配置文件的路径,修改一下配置文件vim xxx/config.yaml
123listen: 0.0.0.0:4873# 在文件末尾增加以下配置url_prefix: /verdaccio/
修改nginx配置文件 vim xxx/verdaccio.com.conf
123456789101112131415server{ listen 80; server_name v.com; location ~ ^/v ...
Canvas拖尾效果的实现
Canvas拖尾效果的实现背景经常看到canvas的一些拖尾效果(如彗星，烟花等),看了下别人的demo发现原来实现很简单.
在我的想象中，实现这种效果是一定需要一个数组的，用来储存彗星的尾巴的位置，透明度，生命时长等信息。然后遍历这个数组，将这个尾巴画在canvas上。然而，万万没想到，真正的实现却简单的不像实力派，不需要数组.这里的技巧在于，在重绘制下一帧前，不是调用clearRect清除掉上一帧的内容，而是在上一帧基础上加上一个半透明蒙层，然后继续画下一帧。画的帧数多了，也就有了拖尾效果，拖尾效果的长短，跟蒙层的透明度有关，透明度越小，拖尾越长。
项目实战
修改前伪代码:
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455init() { this.canvas = document.getElementById('canvas'); this.ctx = this.canvas.getConte ...
使用 verdaccio 搭建私有npm镜像
使用 verdaccio 搭建私有npm镜像背景
私有包,统一管理,方便开发和使用,自然也可以使用npm的付费服务,可惜贫穷限制了消费能力
安全性,内部开发的模块和一些内容并不希望其他无关人员能够看到,但是又希望内部能方便使用
加速,自己搭建npm 服务器,本身可以自带常用package的缓存, cnpm 有一些包存在路径问题,而npm 的速度有些感人,自建的服务器会缓存下载过的包,能节省时间
部署流程安装相关包123npm i -g verdaccionpm i -g pm2npm i -g nrm
配置 verdaccio直接运行 verdaccio, 控制台会有提示配置文件的路径,修改一下配置文件vim xxx/config.yaml
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071# path to a directory with all packagess ...
Vue Cli 搭建PWA项目
Vue Cli 搭建PWA项目背景Native app或者Hybird APP缺点:
软件上线需要审核
版本更新需要将新版本上传到不同的应用商店
传统web网页缺点:
手机桌面入口不够便捷，想要进入一个页面必须要记住它的url或者加入书签
没网络就没响应，不具备离线能力
不像APP一样能进行消息推送
PWA技术优点
可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
实现了消息推送
项目实战初始化项目并安装必要依赖1234567vue create pwa-democd pwa-demovue add routervue add storevue add pwanpm i axiosvue add style-resources-loader vue-cli-plugin-style-resources-loader
PWA相关配置
修改public/index.html文件
123456<!-- 在head标签里面增加以下配置 --><link rel="apple-t ...
Vue.js 接入OAuth2
Vue.js 接入OAuth2什么是OAuth2OAuth（开放授权）是一个开放标准，允许用户授权第三方移动应用访问他们存储在另外的服务提供者上的信息，而不需要将用户名和密码提供给第三方移动应用或分享他们数据的所有内容，OAuth2.0是OAuth协议的延续版本
应用场景
第三方应用授权登录：在APP或者网页接入一些第三方应用时，时长会需要用户登录另一个合作平台，比如QQ，微博，微信的授权登录。
原生app授权：app登录请求后台接口，为了安全认证，所有请求都带token信息，如果登录验证、请求后台数据。
前后端分离单页面应用（spa）：前后端分离框架，前端请求后台数据，需要进行oauth2安全认证，比如使用vue、react后者h5开发的app。
演示代码本机演示环境如下:服务端: https://laravel.test (Laravel(6.x)+passport PHP环境)客户端: http://localhost:8020 (Vue.js基础模板项目)
安装 vue-auth-client vue-axios axios123npm i axiosnpm i vue-ax ...
使用Charles抓包手机的https请求
使用Charles抓包手机的https请求在PC端可以比较方便地通过Chrome浏览器的开发者工具查看网页请求数据,到了手机端,特别是一些混合APP里面,网页的请求数据就不太容易看到,这个时候就需要借助Charles或者Fiddler等抓包工具来查看了.
Mac开启热点,供手机组成局域网Mac通过网线连上网以后,打开Mac的互联网共享,可以开启一个热点.
共享来源为网线端口(比如我是用USB以太网转换接口连的网,就选USB LAN)
共享的目标端口为 Wi-Fi
下方的Wi-Fi选项可以设置热点的名称和密码
Charles设置开启代理https请求是加密的.默认情况下,Charles抓取的内容是无法查看的,需要设置好证书才能解密
手机设置好代理并信任证书手机连上Mac开启的热点,点击热点右侧的图标,设置好http代理(IP填写Mac电脑USB网卡的IP,端口填写Charles代理设置步骤填写的端口),并将Charles证书保存到手机上
愉快地查看手机https请求报文
解决Hexo看板娘引起的页面重渲染
解决Hexo看板娘引起的页面重渲染原因由于hexo-helper-live2d的依赖项live2d-widget.js强行修改document.head的内容,增加样式,导致整个头部的资源重新加载了(包括头部引入的css文件),所以造成了页面重渲染.
解决方案
进入/node_modules/live2d-widget/文件夹,安装依赖npm install
按照下面代码片段修改/node_modules/live2d-widget/src/dialog/index.js文件
打包npm run build:prod
重新运行hexo1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071// 将以下代码删除document.head.innerHTML += `<style> .live2d-widget-dialog-container { wi ...
解决canvas在移动端上绘制模糊的问题
解决canvas在移动端上绘制模糊的问题在移动端盛行，高清屏基本上已经普及的现在，1px的css像素实际上代表了4个甚至更多的物理像素。但是由于我们的代码问题，我们1px的css像素和1个canvas像素画上了等号，也就导致了1个canvas像素实际需要填充4个甚至更多物理像素，为了保证图像平滑处理，在填充剩余的物理像素时采用了原先颜色的近似值，导致了图像的模糊。解决该问题最重要的一点是让1个canvas像素和一个物理像素挂等号
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 ...
时间字符串格式问题在iPhone导致的显示异常
时间字符串格式问题在iPhone导致的显示异常问题常见的时间格式2020-10-17 21:55:00在PC和安卓上经过new Date()转化以后能正常返回Date,在iOS上却提示Invalid Date
解决方案将2020-10-17 21:55:00替换为2020/10/17 21:55:00