- 博客(117)
- 收藏
- 关注
RSS订阅原创 记录一次npm登录和发包报错
npm publish报错： 426 Upgrade Required今天更新一个npm包的时候，npm login 和 npm publish之后，出现了426 Upgrade Required的报错。报错log：npm login Username: ***Password: ***Email: (this IS public) ***npm ERR! code E426npm ERR! 426 Upgrade Required - PUT http://registry.npmjs.o
2021-11-10 15:53:36
1700
原创 webview 交互的两种方式
1 jsbridge promise 封装/*@Author: zhangyu@Email: zhangdulin@outlook.com@Date: 2021-06-11 11:00:48@LastEditors: zhangyu@LastEditTime: 2021-06-16 18:07:04@Description:*///JS注册事件监听var initflag = falsefunction connectWebViewJavascriptBridge(callba
2021-06-28 14:30:50
1117
原创 vuepress 搭建指南
版本Vuepress1.0Vuepress2.0主题比较火的主题reco插件增加github acionsVuepress + GitHub Actions 静态博客全攻略基本配置细节首页配置首页配置文件是doc目录下的README.md文件，以下是一个如何使用的例子：---home: trueheroImage: /hero.pngheroText: Hero 标题tagline: Hero 副标题actionText: 快速上手 →actionLink: /zh/gui
2021-06-28 14:25:07
607
原创 如何生成SSH key
SSH key提供了一种与GitHub通信的方式，通过这种方式，能够在不输入密码的情况下，将GitHub作为自己的remote端服务器，进行版本控制步骤检查SSH keys是否存在生成新的ssh key将ssh key添加到GitHub中gevin-essay-how-to-generate-SSH-key.png检查SSH keys是否存在输入下面的命令，如果有文件id_rsa.pub 或 id_dsa.pub，则直接进入步骤3将SSH key添加到GitHub中，否则进入第二步生成SS
2021-05-19 16:23:02
763
原创 git push上传代码到gitlab上，报错401或403
之前部署的gitlab代码托管平台，采用ssh方式连接gitlab，在客户机上产生公钥上传到gitlab的SSH-Keys里，则git clone下载和git push上传都没问题，这种方式很安全。后来应开发同事要求采用http方式连接gitlab，那么首先将project工程的“Visibility Level”改为“Public”公开模式，并且要保证gitlab的http端口像客户机开放。后面发现了一个问题:http方式连接gitlab后，git clone下载没有问题，但是git push上传有
2021-05-19 16:20:48
1799
原创 npm install安装node-sass包容易失败的问题
解决npm install安装node-sass包容易失败的问题问题：在编译nodejs项目的时候，使用npm install命令安装npm依赖包特别容易出现node-sass包安装失败，报npm ERR! Failed at the node-sass@XXX postinstall script类似的错误。原因：npm 安装 node-sass 依赖时，会从 github.com 上下载 .node 文件。由于国内网络环境的问题，这个下载时间可能会很长，甚至导致超时失败。解决方法一、手动下载bin
2021-05-18 16:17:07
423
原创 axios如何取消重复请求
axios如何取消重复请求在开发中，经常会遇到接口重复请求导致的各种问题。对于重复的get请求，会导致页面更新多次，发生页面抖动的现象，影响用户体验。对于重复的post请求，会导致在服务端生成两次记录（例如生成两条订单记录）。如果当前页面请求还未响应完成，就切换到了下一个路由，那么这些请求直到响应返回才会中止。无论从用户体验或者从业务严谨方面来说，取消无用的请求确实是需要避免的。当然我们可以通过页面loading来避免用户进行下一次的操作，但本文只讨论单纯的如何取消这些无用的请求。axios
2020-09-02 20:16:10
634
原创 android 解决webview, 页面关闭之后, 视频或者音频还在播放的
webView.loadUrl(“about:blank”);这个方法会 销毁所有的video和audio 包括js的所有正在运行的function方法2:复制代码@Overridepublic void onPause() {super.onPause();myWebView.onPause();myWebView.pauseTimers();}@Overridepublic void onResume() {super.onResume();myWebView.resumeTi
2020-06-15 17:21:04
1236
原创 如何使用chrome调试iphone页面？win10 remotedebug-ios-webkit-adapter 安装与使用
先放个原版教程链接，请戳这里 https://github.com/RemoteDebu…使用chrome devtools 调试 iphone 页面，需安装 remotedebug-ios-webkit-adapter 工具。这个 adapter 可牛批坏了，可以通过VS Code，Chrome DevTools，Mozilla Debugger.html和其他与Chrome调试协议兼容的工...
2020-04-27 13:54:59
3622
转载 那些让开发如虎添翼的在线工具
那些让开发如虎添翼的在线工具网上可以找到前端开发社区贡献的大量工具，这篇文章列出了我最喜欢的一些工具，这些工具给我的工作带来了许多便利。EnjoyCSS老实说，虽然我做过许多年前端开发，但我并不擅长 CSS。当我陷入困境时，EnjoyCSS 是我的大救星。EnjoyCSS 提供了一个简单的交互界面，帮助我设计元素，然后自动输出相应的 CSS 代码。EnjoyCSS 可以输出 CSS、L...
2020-04-26 20:06:18
191
转载 移动 web 最佳实践（干货长文，建议收藏）
移动 web 最佳实践（干货长文，建议收藏）笔者在公司用 web 技术开发移动端应用已经有一年多的时间了，开始主要以 vue 技术栈配合 native 为主，目前演进成 vue + react native 技术架构，vue 主要负责开发 OA 业务，比如报销、出差、crm 等等，react native 主要负责即时通信部分，是在 mattermost-mobile[1] 的基础上修改的（ma...
2020-04-26 14:11:14
377
转载 沉浸式，状态栏高度，刘海屏怎么开启，适配
沉浸式，状态栏高度，刘海屏怎么开启，怎么适配？看这！何为沉浸式？沉浸式就是app的头部和状态栏和何为一体的，webview即为整个手机的高度何为状态栏？状态栏就是手机顶部，显示时间电量那一行除此还有刘海屏，水滴屏，挖孔屏，全面屏，非刘海屏，不同手机状态栏高度又不太一样，需要我们去适配，有一个段子说，如果看到那个手机适配有问题，赶紧把那个手机藏起来，不要让测试发现了。我们用HBuilde...
2020-04-24 09:58:01
2651
原创 flex 上下固定中间滚动布局
flex上下固定中间滚动布局传统 pc 端中，子容器高度超出父容器高度，通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容，而移动web开发中，由于浏览器厂商的系统不同、版本不同，导致有部分机型不支持对弹性滚动，从而在开发中制造了所谓的 BUG。上图如果在PC端中，我们可以利用 position:fixed 和 overflow:auto 进行简单的布局实现我们需要的效果，而...
2020-04-21 10:38:28
554
1
原创 手机状态栏高度
this.$nextTick(() => { var immersed = 0; var ms = (/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent); if (ms && ms.length >= 3) { // 当前环...
2020-04-21 10:36:42
1307
原创 判断 浏览器 手机 版本信息
export function getBrowser () { const u = navigator.userAgent; // const app = navigator.appVersion; const data = { // 移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, // IE内核 presto: u...
2020-04-16 19:41:50
309
原创 前端之浅谈浏览器的垃圾回收机制和内存泄露
JavaScript使用垃圾回收机制来自动管理内存。JS的回收机制分两种：1.标记清除 2.引用计数。各大浏览器常用的是前者。比如，Chrome浏览器限制的所能使用的内存极限（64位为1.4GB，32位为1.0GB），这就意味着浏览器将无法直接操作一些大内存对象。标记清除：定义和用法：当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为：“离开环境”。某一个时刻，垃圾回收器会...
2020-03-07 11:47:03
645
1
原创 前端安全 xss csrf 点击劫持
一、基础知识1、XSS（Cross Site Scripting）跨站脚本攻击（1）原理：页面渲染的数据中包含可运行的脚本（2）攻击的基本类型：反射型（url参数直接注入）和存储型（存储到DB后读取时注入）（3）注入点：HTML节点内的内容（text）；HTML中DOM元素的属性；Javascript代码；富文本复制代码//HTML节点内容注入 //DOM属性注入//java...
2020-02-24 11:27:15
362
原创 js 点击拖动
点击拖动 (function(){var transform = getTransform();function Drag(selector){this.elem = typeof selector == ‘object’ ? selector : document.querySelector(selector);this.startX = 0;...
2020-02-02 10:36:46
553
原创 js基础易忽略点
1if ( typeof v === 'undefined') { // true}if ( typeof null === 'object') { // true}2Number(null) //05 + null //5Number(undefined) //NaN5 + undefined //NaN3 整数和浮点数JavaScript 语言的底层根本...
2020-01-19 18:26:49
611
原创 node项目报错had too many unstable restarts (16). Stopped. “errored”
node项目放到服务器上报错Script /www/nodejs/socket.io/bin/www had too many unstable restarts (16). Stopped. “errored”启动就秒级自动关闭，报上面那个错误用谷歌大法，查了好久，也没能解决后再某一个台湾的博主博客看到一些pm2的命令PM2 的幾個指令：pm2 start （啟動程序）pm2 re...
2020-01-03 10:29:33
9475
1
原创 nginx代理获取真实ip
function getClientIp(req) { let api = req.connection.remoteAddress || req.socket.remoteAddress || (req.connection.socket ? req.connection.socket.remoteAddress : null) || req.headers['x-forwarded-f...
2019-12-27 09:22:12
1106
原创 绕开 referrer 防盗链 以及服务器nodejs 作防盗链图片中转
最近处理了一个与referer有关的需求，发现里面还是有一点门道的。因此在本篇文章整理了referer相关知识点，主要涉及图片防盗链与如何绕开防盗链限制。参考：Referer-MDN使用refererReferer是HTTP请求头的一个字段，包含了当前请求页面的来源页面的地址，通过该字段，我们可以检测访客是从哪里来的。那么，referer到底有啥作用呢？交互优化在某些web应用的交互...
2019-12-13 14:14:11
1592
原创 linux 检查网络访问的配置
检查网络访问的配置getsebool -a | grep httpd_can_network_connect如结果如下httpd_can_network_connect --> off则执行如下命令打开：#SELinux命令，临时配置，重启后失效setsebool httpd_can_network_connect=1写入配置文件的命令，重启后保留setsebool -P h...
2019-12-11 16:47:38
748
原创 PM2 常用命令以及配置
PM2 常用命令$ pm2 start app.js # 启动app.js应用程序$ pm2 start app.js -i 4 # cluster mode 模式启动4个app.js的应用实例4个应用程序会自动进行负载均衡$ pm2 start app.js --name=“api” # 启动应用程序并命名为 “api”$ pm2 start app.js --watch...
2019-12-11 14:48:41
650
转载 notification2017_v0118.js
/**@浏览器桌面提醒@author limeizhang#tencent.com@time 2017-05-24@https*/window.FERD_UserData = function(res){var _this = FERD_NavNotice,_data = “”,date = new Date();if(res.code === 0){_data = res...
2019-11-30 10:28:37
491
原创 js 获取剪切板内容，控制图片粘贴。
目前只有Chrome支持获取剪切板中的图片数据。还好需要这个功能的产品目前只支持Chrome和Safari，一些Chrome的新特性是可以尽情使用了，还是能够覆盖到大部分用户的。所以本文只讨论Chrome如何使用和如何阻止Safari，原理大概了解了，再研究其他浏览器相关的问题就容易多了。paste事件可以用js给页面中的元素绑定paste事件的方法，当用户鼠标在该元素上或者该元素处于focu...
2019-11-21 13:31:57
1837
原创 react加载 外部html
将html加载器添加到您的项目中：npm i -D html-loader将以下规则添加到webpack.config文件中：{test: /.(html)$/,use: {loader: ‘html-loader’,options: {attrs: [’:data-src’]}}}现在您可以按如下方式导入html文件：import React, { Component ...
2019-11-11 15:50:59
2054
原创 Nodejs连接redis
Nodejs连接redis目前Nodejs端使用redis模块对redis服务进行连接，代码如下：var redisClient = redis.createClient(config.redisAuth);redisClient.on("error", function (err) { redisClient.quit() logger.error("Error " + ...
2019-10-16 19:22:42
1317
原创 认识并安装RabbitMQ（以Windows系统为例）
一、初识RabbitMQ百度百科有这么一句话：MQ是消费-生产者模型的一个典型的代表，一端往消息队列中不断写入消息，而另一端则可以读取或者订阅队列中的消息。MQ和JMS类似，但不同的是JMS是SUN JAVA消息中间件服务的一个标准和API定义，而MQ则是遵循了AMQP协议的具体实现和产品。他的官网中用大大的黑粗字体写着：RabbitMQ is the most widely dep...
2019-09-24 09:49:28
154
原创 eslint配置
/** * 参考文档 * 【eslint英文文档】https://eslint.org/docs/user-guide/configuring * 【eslint中文文档】http://eslint.cn/docs/rules/ *//** * eslint有三种使用方式 * 【1】js代码中通过注释的方式使用 * 【2】通过webpack的eslintConfig字段设置，e...
2019-09-23 16:33:19
543
原创 Nginx代理proxy pass配置去除前缀
一个种方案是proxy_pass后面加根路径/.另一种方案是使用rewrite使用Nginx做代理的时候，可以简单的直接把请求原封不动的转发给下一个服务。比如，访问abc.com/appv2/a/b.html, 要求转发到localhost:8088/appv2/a/b.html简单配置如下：upstream one {server localhost:8088 weight=5;}...
2019-09-05 15:22:43
1417
1
原创 使用 PostCSS 进行 CSS 处理
在 Web 应用开发中，CSS 代码的编写是重要的一部分。CSS 规范从最初的 CSS1 到现在的 CSS3，再到 CSS 规范的下一步版本，规范本身一直在不断的发展演化之中。这给开发人员带来了效率上的提高。不过与其他 Web 领域的规范相似的处境是，CSS 规范在浏览器兼容性方面一直存在各种各样的问题。不同浏览器在 CSS 规范的实现方面的进度也存在很大差异。另外，CSS 规范本身的发展速度与社...
2019-09-04 11:55:29
3272
1
转载 webpack搭建框架
搭建框架webpack 基本介绍Webpack 的特点Webpack 构建流程核心概念如何使用 Webpack搭建项目模板框架项目初始化安装 Webpack安装 Vue安装一些依赖npm install vue-routernpm install -D vue-loader vue-template-compilernpm install -D sass-loader n...
2019-09-04 10:22:30
265
原创 axios 发送post请求下载文件
发送post请求下载文件先说一下背景：这是一个以vue作为框架并用Axios来发送http请求的项目。我想要实现用axios来发送post请求，然后服务器会返回的response是一个文件流，我希望能将这个文件流写入excel,从而实现该excel文件的下载。可以实现的一种方案：exportData () { const form = this.getSearchForm()...
2019-09-02 17:15:12
1688
1
原创 vscode配置eslint，实现错误代码标识以及自动修复
ESLint插件一、安装 eslint 插件二、vscode 扩展设置依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件，添加如下配置："eslint.options": { "extensions": [".js", ".vue"]},"eslint.validate": [ "javascript", "javascriptre...
2019-09-02 15:47:52
12643
原创 ESLint配置：eslint默认及自定义规则介绍
ESLint 配置一、eslint 安装1、全局安装npm i -g eslint全局安装的好处是，在任何项目我们都可以使用eslint的全局命令进行代码规则操作，但是这对我们的意义并不大，后续会详细介绍；全局安装之后，要求相关的eslint插件页必须全局安装，这对多人开发项目来说会比项目安装更加繁琐。所以，我们这里采用在项目上安装eslint：2、项目安装npm i -D esli...
2019-09-02 15:44:51
24238
1
原创 如何发布第一个属于自己的npm包
什么是NPM？NPM是随同NodeJS一起安装的javascript包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。发布前的准备注册一个npm账号前往NPM官网进行注册...
2019-09-02 14:46:21
397
原创 发布一个 NPM 以及解决淘宝镜像报错
什么是NPM？NPM是随同NodeJS一起安装的javascript包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。发布前的准备注册一个npm账号前往NPM官网进行注册...
2019-08-30 11:23:06
1321
原创 实现双向绑定Proxy和defineproperty
<main> <p>请输入:</p> <input type="text" id="input"> <p id="p"></p></main>const obj = {};Object.defineProperty(obj, 'text', { get: function() { ...
2019-08-13 15:20:52
232
转载 JavaScript 正则表达式匹配汉字
一个可能有 20 年历史的正则表达式在谷歌搜索「JavaScript 正则表达式匹配汉字」的时候，前几条结果全都是/[\u4e00-\u9fa5]/。没有人怀疑这个正则表达式有什么问题，那么在 2018 年的今天，让我们站在 Chrome 64 的肩膀上，放飞一下自我。汉文（Han Script）是汉语、日本语、朝鲜语、韩国语的书写系统中的一种文字（Script），越南语在早期也曾在书写系统中...
2019-08-10 15:20:57
1054
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人