JS
文章平均质量分 56
咻咻ing
全栈开发工程师
展开
-
YAPI 安全漏洞问题,一文修复全解决
YApi 是高效、易用、功能强大的 api 管理平台,旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 API,YApi 还为用户提供了优秀的交互体验,开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的管理。目前Yapi在GitHub的关注数有523,Star数21.7k,Fork数3.7k,使用的企业非常广泛,包括阿里巴巴、腾讯、百度、去哪儿等等。近日,不少用户反映YApi平台存在高危漏洞,攻击者可利用该漏洞在目标服务器上执行任意代码,可原创 2021-08-09 11:41:58 · 833 阅读 · 0 评论 -
NodeJS Koa超时时间设置
Koa 框架默认超时时间是 2 minutes。对于一个超过两分钟的请求,Koa框架会自动关闭连接,导致客户端报错:unexpected end of stream on okhttp3.Address。所以对于超时时间的控制,不仅要设置client的读写超时时间,服务端的超时时间也要考虑。接下来,讲述如何设置Koa框架的超时时间:全局设置let app = new Koa();let server=app.listen(3000);server.timeout=5*60*1000;单个请求原创 2021-03-09 10:49:30 · 3393 阅读 · 0 评论 -
js实现复制到剪切板,超级简单的方法
1、npm安装插件npm install copy-to-clipboard --save2、使用#引入copyimport copy from 'copy-to-clipboard';goCopy = (url) => { if(copy(url)){ Message.success("复制成功"); }else{ Message.error("复制失败,请手动选中后右键点击复制"); }};...原创 2020-12-08 22:13:43 · 283 阅读 · 0 评论 -
快捷键Ctrl+s快速保存,屏蔽保存网页到本地
在Web开发过程中,对于编辑页面有时候希望能够使用Ctrl+s快捷键直接保存标记的内容,像文本编辑一样。但是,默认情况下的Ctrl+s会调起浏览器的保存网页到本地的功能。所以,我们需要自己监控键盘输入和阻止浏览器的网页保存功能。实现流程监听键盘事件:onkeydown(键盘按键按下) 或 onkeyup(键盘按键释放)。判断指定按键是否被按下:e.ctrlKey: Ctrl 键是否被按下,是则返回 true。e.metaKey: Meta 键 (Mac上是 ⌘ Command 键;Wind原创 2020-12-08 21:59:49 · 4150 阅读 · 0 评论 -
Element UI Table 设置全局showOverflowTooltip
Table 作为前端开发中最常用的一个控件,在使用Table展示数据时,可能会因为某列的内容过长,导致表格换行比较难看。使用Element UI的同学可以使用showOverflowTooltip属性,默认值为false,设置为true后,在某列内容展示不下时,自动添加…缩略,鼠标移动到这列时,展示tooltip来展示 完整内容。但是,如果每个使用到Table的地方都设置,那要设置的地方就多了。可以使用全局修改showOverflowTooltip的默认值为true,就不需要在列表的地方设置了。在m原创 2020-11-17 10:54:51 · 2639 阅读 · 0 评论 -
Vue使用highlightjs实现代码高亮
highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用。使用highlight.js过程中遇到的问题:highlight提供了专门针对Vue的版本vue-highlightjs,可以直接使用,不用再自定义插件了。选择highlight的代码风格,记得在main.js中导入。使用highlight时遇到对象更新时View不更新的问题。接下来,将直接使用vue-hig原创 2020-11-13 09:52:40 · 1084 阅读 · 0 评论 -
Vue配置vue.config.js打包时删除console.log日志
在Vue项目开发过程中,我们通常需要通过console来输出日志信息,协助我们进行代码调试,但是对于线上发布时,不能输出日志。可以通过vue.config.js配置在打包时统一删除console日志。方法1: 如果需要根据打包环境来判断是否需要删除:// vue.config.jsmodule.exports = {...configureWebpack: config => { if (process.env.NODE_ENV === 'production') { c原创 2020-10-27 10:52:12 · 6755 阅读 · 7 评论 -
Yapi cross-request支持文件上传的解决方案
背景chrome 在 73 版本后,限制了 content-script 跨域请求目前只有一个解决办法,废弃 content-script 跨域请求,使用background.js 执行跨域请求,但这样有个最大的问题是无法支持文件上传。问题cross-request不支持文件上传Yapi测试集合不支持文件上传,导致测试用例无法运行。解决方案**思路:**将需要上传的文件转化为Base64字符串,这样接口可以保存文件数据,测试集合也可以保存。**改动:**修改cross-request插件,原创 2020-06-15 16:37:29 · 2785 阅读 · 6 评论 -
JS中常用数组操作,提升代码效率
本文主要讲解数组的转换和过滤操作:以下面定义的数组为例:var arr = [ {name:'Anne', age: 23, gender:'female'}, {name:'Leila', age: 16, gender:'female'}, {name:'Jay', age: 19, gender:'male'}, {name:'Mark', age: 40...原创 2020-04-10 21:13:46 · 204 阅读 · 0 评论 -
UglifyJs打包报错:Unexpected token: keyword const
UglifyJS Webpack Plugin插件用来缩小(压缩优化)js文件,至少需要Node v6.9.0和Webpack v4.0.0版本。webpack 4之前的版本是通过webpack.optimize.CommonsChunkPlugin来压缩js,webpack 4版本之后被移除了,使用config.optimization.splitChunks来代替。最近,JavaScrip...原创 2020-03-11 13:54:55 · 5331 阅读 · 0 评论 -
JS错误:Cannot assign to read only property exports of object Object
今天更新了一下JavaScript依赖库,结果碰到莫名的错误,页面加载不出来,错误信息: Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' at Module.eval (BaseClient.js?e917:12) at eval (Base...原创 2020-02-17 16:24:50 · 1835 阅读 · 1 评论 -
零代码做成中国疫情地图,简单实用,已收藏
最近爆发的武汉新冠病毒疫情严重,大家可能每天都在查询疫情情况,或者在朋友圈看到中国疫情地图。作为技术宅,这个疫情图是怎么实现的呢?今天就来教大家如何零代码实现中国疫情地图,简单实用,记得收藏哦,先上实现的效果图。看到这个疫情地图,很容易就能想到使用大名鼎鼎的图表库Echarts来实现。实现步骤在浏览器中打开以下Echarts的官方示例链接:https://www.echartsjs.c...原创 2020-02-12 22:08:12 · 4158 阅读 · 2 评论 -
Yapi服务部署,二次开发问题集锦
命令行部署如果 github 压缩文件无法下载,或需要部署到一些特殊的服务器,可尝试此方法mkdir yapicd yapigit clone https://github.com/YMFE/yapi.git vendors //或者下载 zip 包解压到 vendors 目录(clone 整个仓库大概 140+ M,可以通过 `git clone --depth=1 https://gi...原创 2019-09-27 13:46:40 · 3036 阅读 · 0 评论 -
Vue 面试题精选30道,内涵详细讲解(下)
21、Vue 是如何实现数据双向绑定的?Vue 数据双向绑定主要是指:数据变化更新视图,视图变化更新数据,如下图所示:即:输入框内容变化时,Data 中的数据同步变化。即 View => Data 的变化。Data 中的数据变化时,文本节点的内容同步变化。即 Data => View 的变化。其中,View 变化更新 Data ,可以通过事件监听的方式来实现,所以 Vu...原创 2019-09-08 00:23:50 · 594 阅读 · 0 评论 -
30 道 Vue 精编面试题,内含详细讲解(上)
前言本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性、框架的原理以问题的形式进行整理汇总,意在帮助作者及读者自测下 Vue 掌握的程度。本文章节结构以从易到难进行组织,建议读者按章节顺序进行阅读,当然大佬级别的请随意。希望读者读完本文,有一定的启发思考,也能对自己的 Vue 掌握程度有一定的认识,对缺漏之处进行弥补,对 Vue 有更好的掌握。文章最后一题,欢迎同学们积极回答,分享...原创 2019-09-05 22:42:19 · 1131 阅读 · 0 评论 -
vue-router的hash和history模式的区别
为什么要有 hash 和 history对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义。前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求。为了达到这一目的,浏览器当前提供了以下两种支持:hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。比如这个 UR...原创 2019-09-04 10:10:17 · 661 阅读 · 1 评论 -
Mac下安装grunt
当你在使用grunt命令时提示:grunt: command not found,说明你的本地环境没有grunt命令。执行命令安装grunt:npm install grunt使用命令grunt -version查看安装的版本碰到错误提示:Fatal error: Unable to find local grunt.使用命令npm install grunt --save-dev 更...原创 2018-10-08 20:07:50 · 2230 阅读 · 0 评论 -
js 时间日期格式化
格式化日期函数传入Date 和 格式export function FormatTime(date, fmt) { const o = { "y+": date.getFullYear(), "M+": date.getMonth() + 1, //月份 "d+": date.getDate(), ...原创 2019-02-21 12:06:41 · 825 阅读 · 0 评论 -
busboy文件上传遇到的坑,已解决
有个需求是需要实现文件上传的功能,原本打算参考koa2进阶教程中的busboy模块来实现:https://chenshenhai.github.io/koa2-note/note/upload/busboy.html,示例代码:const inspect = require('util').inspect const path = require('path')const fs = req...原创 2019-03-19 14:52:29 · 1486 阅读 · 0 评论 -
使用koa-body实现文件上传下载
在前端中上传文件,我们都是通过表单来上传,而上传的文件,在服务器端并不能像普通参数一样通过 ctx.request.body 获取。我们可以用 koa-body 中间件来处理文件上传,它可以将请求体拼到 ctx.request 中。首先在app.js中使用koa-body:// app.jsconst koa = require('koa');const app = new koa();...原创 2019-03-19 15:08:00 · 2174 阅读 · 0 评论 -
js使用RSA加密
为了防止Web页面的敏感信息泄露,我们需要使用RSA加密算法对数据进行加密。JS中常用的RSA加密库有:jsencrypt,jsrsasign,js-crypto-rsajsencrypt库的使用比较简单:安装库npm i jsencrypt使用:import JSEncrypt from ‘jsencrypt‘var publicKey = "-----BEGIN PUBLIC ...原创 2019-05-09 11:24:53 · 26233 阅读 · 11 评论 -
cross-request插件下载
cross-request 赋予一个 html 页面跨域请求能力,该扩展仅支持 YApi 接口管理平台2.9版本修复了 chrome72 版本无法发送 cookie 问题3.0修复 chrome 73 版本无法发送请求问题,新版本因 chrome 安全策略改动,不再支持文件上传Chrome 在 73 版本后,限制了 content-script 跨域请求,导致cross-request2....原创 2019-05-15 10:09:31 · 18178 阅读 · 4 评论 -
Vue格式化Json数据展示
有时候我们在展示Json数据时,希望能按照Json的格式来展示,这样比较清晰明了。在Vue中可以直接使用<pre>标签来实现。<pre>{{ JSON.stringify(obj, null, 4) }}</pre>这样就可以直接把obj的内容按照Json的格式来展示来,第三个参数是要留几个空格。...原创 2019-05-24 15:55:02 · 11317 阅读 · 0 评论 -
JS中filter的使用
有时候我们想筛选出一个对象列表中符合某个属性特征的列表,这个时候我们就可以使用js中的filter功能了。假设list是一个对象列表,我们想匹配出对象中name为xiaoming的对象数据,filters = list.filter(item => item.name.indexOf("xiaoming") !== -1)返回的filters是一个list列表。上面的示例只是筛选...原创 2019-05-24 16:10:32 · 14719 阅读 · 0 评论 -
Vue页面数据换行展示
直接上代码,重点是Render里面的处理:{ title: "地址", dataIndex: "addr", key: "addr", customRender: (text) => { const array = text.split(","); const br = <br></br>; ...原创 2019-06-26 16:52:11 · 8708 阅读 · 0 评论 -
使用XMLHttpRequest实现跨站请求
普通网页可以通过 XMLHttpRequest 对象向远程服务器发送和接收数据,但是它们受到相同来源策略的限制。扩展程序不受这一限制,只要首先请求跨站权限,扩展程序就可以与来源范围外的远程服务器通信。扩展程序的来源每一个运行中的扩展程序在它自己的安全来源中存在,如果不请求额外的权限,扩展程序只能使用 XMLHttpRequest 获取自己的资源。例如,如果扩展程序包含一个名为 config.j...原创 2019-08-08 14:48:03 · 735 阅读 · 0 评论 -
JS 中Json常用操作
直接定义json var json = {"name": "小明", "age": 12}; console.log(json);json 转 String var str = JSON.stringify(json); console.log(str);String 转 Jsonjson = JSON.parse(str);console.log...原创 2019-08-26 15:54:17 · 157 阅读 · 0 评论 -
JS常用操作,提升代码效率
对象数组转某个属性数组例如:我有一个如下的对象数组[{"name": "ali","age": 12},{"name": "baba","age": 22}]我想获取名字的数组:["ali","baba"]可以直接使用数组的map操作,得到name的数组:array.map(it => it.name)判断一个数组是否包含另外一个数组le...原创 2019-08-28 23:57:08 · 153 阅读 · 0 评论 -
Vue使用Nginx发布后刷新页面报404错误
问题现象:使用Vue-cli构建的项目,在本地调试运行都是OK的,打包之后使用Nginx发布后,指定跳转页面是ok的,但是刷新页面,reload页面时,报错404,找不到页面。Nginx端日志显示找不到资源路径。解决方案:第一种:首先,出问题的原因是:在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转。使用history模式的配置是:e...原创 2019-08-30 13:59:53 · 6249 阅读 · 2 评论 -
JS 中Json常用操作
直接定义json var json = {"name": "小明", "age": 12}; console.log(json); json 转 String var str = JSON.stringify(json); console.log(str); String 转 Json json = JSON.parse(str); console.log(js..原创 2018-08-07 14:03:03 · 298 阅读 · 0 评论