麦子的博客

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什么是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请求在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-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在移动端上绘制模糊的问题在移动端盛行，高清屏基本上已经普及的现在，1px的css像素实际上代表了4个甚至更多的物理像素。但是由于我们的代码问题，我们1px的css像素和1个canvas像素画上了等号，也就导致了1个canvas像素实际需要填充4个甚至更多物理像素，为了保证图像平滑处理，在填充剩余的物理像素时采用了原先颜色的近似值，导致了图像的模糊。解决该问题最重要的一点是让1个canvas像素和一个物理像素挂等号 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 ...

时间字符串格式问题在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

MariaDB无法登录[ERROR 1698(28000)]新安装的MariaDB用mysql -u root -p无法登录,提示ERROR 1698(28000),但是用sudo mysql -u root -p能登录成功.但是PHP是无法通过sudo来登录的,所以需要修改MariaDB的设置. 安装MariaDB1sudo apt-get install mariadb-server 设置密码执行以下命令,按照提示输入密码 1sudo mysql_secure_installation 解决办法123456sudo mysql -u root -puse mysqlupdate user set plugin='mysql_native_password';flush privileges;exitmysql -u root -p

web全栈工程师在Mac下的开发环境搭建开发依赖安装homebrew + git12/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"brew install git Javascript全局依赖 nodejs @vue/cli less nrm(npm镜像快速切换,官网下载依赖慢可以切换到淘宝,淘宝下载不了可以切回官网)1234brew install nodejsnpm install -g @vue/clinpm install -g lessnpm install -g nrm PHP环境 php swoole composer phpmd(代码美化)12345brew install phpbrew install phpmdbrew install composerpecl install redispecl install swoole mysql redis12brew install mysqlbrew insta ...

SourceTreeGit客户端 运行平台：Windows,macOS 下载地址：https://www.sourcetreeapp.com PS: 在Windows下安装提示需要注册,注册完成以后,经常卡在这个环节进行不下去了,建议下载3.1.3版本的,然后使用以下方法跳过注册. 下载链接: https://pan.baidu.com/s/1cWX9Lsn253tnbGYFsCV6Cw 提取码: f28x 下载并执行SourceTreeSetup-3.1.3.exe，会进入登录或注册bitbucket的界面 打开 %LocalAppData%\Atlassian目录，接着进入SourceTree目录，创建accounts.json文件，并修改accounts.json内容如下： 123456789101112131415161718192021222324[ { "$id": "1", "$type": "SourceTree.Api.Host.Identity.Model.Identit ...

OKHTTP3设置Timeout参数无效在使用okhttp3发送请求,用IP直接访问时,设置的超时时间是正常的.改成访问某个域名时,设置的超时时间是10s,但是实际测试是40s左右,程序才打印出错误信息.解决方法:自己实现一个okhttp3.Dns的类,处理域名解析超时问题. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374import java.net.InetAddress;import java.net.UnknownHostException;import java.util.Arrays;import java.util.List;import java.util.concurrent.Callable;import java.util.concurrent.FutureTask;import java.util.concurrent.TimeUni ...