自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(65)
  • 收藏
  • 关注

原创 html、css类名命名思路整理

开发页面时,老是遇到起名问题,越想越头疼,严重影响开发进度,都是在想名字,现在做一下梳理,统一一下思想,希望以后能减少这块的痛苦。

2023-12-08 17:28:50 799

原创 多个项目复用node_modules

多个项目使用的node_modules基本一致,每个项目都安装一遍依赖,对空间造成资源浪费。通过创建软链接的方式,共用一套node_modules。

2023-12-06 16:44:16 1284

原创 获取焦点后,样式异常的处理方法

难点:上面问题的难点在于,想要通过控制台查看问题标签样式结构时,就会失焦,提示框就会消失,无法看到问题标签内部结构。最终发现情况二的问题,样式被改写了,内部的样式类与外部的样式类同名,修改外部的样式类名解决的;在使用monaco-editor 设置代码提示未正常显示,提示框出现,看不到内容,如图。所有这种获取焦点后展示异常的问题都可以用这种方式解决。情况一:没有得到数据,所以没有展示;情况二:得到了数据,展示异常;

2023-11-30 21:54:20 262

原创 bug-跨域访问问题

做一个大屏项目时,设置图标数据为动态接口,通过这个接口返回数据,问题是有的接口能够正常返回数据,有的接口提示跨域,这些接口不用域名,对提示跨域的接口后端也进行支持跨域设置,结果还是提示跨域,通过测试发现,通过Axios直接请求,没有提示跨域,可以正常返回数据,查看项目代码发现,请求拦截器添加了一个自定义header,去掉就正常了;当访问网页的域与页面内调用接口的域不一致(域不一致包含协议、域名、端口号不一致),就会产生跨域问题。是浏览器本身的安全策略产生的问题。

2023-11-14 18:52:59 589

原创 bug-xss 攻击漏洞问题

前端使用wangeditor富文本编辑器,正常情况下编辑器都会把内容进行转码处理,转码之后就回避xss问题,这次的问题是通过一些手段提及内容(比如postman),这样提交的代码就没有经过编辑器进行转码,读取数据时就会触发恶意代码。XSS(Cross-Site Scripting)攻击:通过在网站上植入恶意脚本来攻击用户。当用户看到评论时,就会触发响应,将用户cookie发送到攻击者手中。

2023-11-14 18:25:51 881

原创 git关于项目的分支、版本、上线的说明

test:迭代分支,测试环境,从主分支拉取代码后,更新 bug、需求后,在测试环境进行验证,通过后,向 main 提交代码。develop:开发分支,开发环境,基于主分支,开发大版本内容,开发完成后,向 pre-release 分支,提交代码。开发大版本内容,代码要通过 develop开发环境验证 ,test测试环境验证 ,main生产环境验证。bug修改,代码要通过 dtest测试环境验证 ,main生产环境验证。main:主分支,生产环境,只有上线的时候,才能够提交代码。tagName:标签名。

2023-06-27 11:44:18 730

原创 vue 定义全局方法打开弹窗

1、dialog.vue2、dialog.ts3、引用或绑定全局

2022-10-19 10:30:14 2000 1

原创 前端解析xml

xml 解析 soap

2022-10-19 10:08:45 1460

原创 vue.config.js中proxy配置

pathRewrite :检查代理的请求中是否有 /api ,有的话把 /api 替换为冒号后面的内容,案例为替换成空字符串,也就是删去 /api。(^是正则表达式的内容,意思是限定开头)secure : 如果是https接口,需要配置这个参数(如果是http接口,也可以不写这个参数)target : 本地服务器地址改为后端接口地址 host:part。“/api”:{} : 引号中代表监测的是以 /api 开头的接口。ws : 如果要代理 websockets,配置这个参数。

2022-10-17 16:01:48 1527

原创 mac 使用 homebrew 安装软件问题及处理方法

解决方法:依次执行下面4个命令,然后重新打开终端后,执行sudo brew install redis,可以运行。然后等待在安装工程中可能需要多次输入开机密码,因为在安装过程中需要使用到系统权限。当选择了国内资源之后,会提示将要删除之前的brew版本,输入 Y 确认即可。使用 sudo brew install redis,仍然失败,提示如下。运行过程中会提示是否删除已安装的 homebrew源。确认删除已安装的homebrew源。输入要安装的镜像源数字,回车。卸载 homebrew。

2022-09-22 11:33:58 1092

原创 使用spy-debugger进行真机调试步骤

Spy-debugger内部集成了weinre,通过代理的方式拦截所有html自动注入weinre所需的js代码。spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码。端口代理的端口为spy-debugger的启动端口(默认端口为9888);把node-mitmproxy文件夹下的node-mitmproxy.ca.crt传到手机上,点击安装即可。生成CA根证书,根证书生成在/Users/XXX/node-mitmproxy/目录下(Mac)。...

2022-07-15 10:53:01 878

原创 统一代码格式-配置vscode

统一代码风格1、安装 eslint 插件在 vscode 插件管理中,安装 eslint 插件2、配置 vscode 关于 eslint 的配置2.1 > 首选项 > 设置2.2 打开设置后,搜索 Eslint › Format: Enable ,勾选复选框3、设置文件的格式化类型3.1 选择要设置的文件,右键选择 使用…格式化文档3.2 在打开的弹窗中,选择 配置默认格式化程序…3.3 勾选要是使用的格式化文档3.4 对文件进行格式...

2022-06-06 19:23:50 614 1

原创 mock的使用,进行数据拦截,处理本地页面调试

Mock 使用步骤1、 安装 mockjs;~~~npm insatll mockjs -D~~~2、创建 mock 资源在根目录下创建 mock 文件夹,~~~// mock/index.js 文件import Mock from ‘mockjs’; // 引入mockjs// 设置延时Mock.setup({timeout: ‘200-1000’,});// 对 api/mobile/getInfo 请求方式为 post 的这个接口进行拦截// params 为请求参数

2022-04-28 10:52:39 1372 2

原创 git上的项目迁移,保留commit记录

1、创建新的项目目录2、将原工程的代码放入到新项目中3、找到 .git/comfig 文件,将 url 的值改成新项目的地址

2022-04-15 14:35:37 520

原创 vue项目配置环境变量

配置环境变量在vue项目中,通过环境变量的配置,通过不同的命令运行不同的运行环境,产出不同的包文件使用NODE_ENV区分本地运行(development),还是打包部署(production)使用VUE_APP_ENV区分本地环境、测试环境、生产环境不同的配置,如果本地运行时的代理地址运行命令local代表本地、dev代表开发环境、pro代表生产环境npm run serve dev // 本地运行测试环境npm run serve pro // 本地运行生产环境npm run bui

2022-03-04 15:17:54 618

原创 部属vue项目,访问路径设置非根,显示白屏

问题:访问页面,返回“We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.”环境:使用nginx部属vue项目时,没有把访问项目设置为根路径说明:当访问项目对应的nginx配置没有给项目的访问路径设置为根时,页面显示白屏,在network中可以看到所有资源都加载完成,index.html会显示“We’re sorry but XXX doesn’t work

2022-01-25 08:50:57 8130

原创 nginx-自带服务器相关数据

nginxnginx.conf 配置文件位置:/usr/local/etc/nginx/nginx.confnginx 安装目录:/usr/local/Cellar/nginxnginx 网站目录:/usr/local/var/www启动:sudo nginx重启:sudo nginx -s reload退出:sudo nginx -s quitmac 本地服务器文件名访问权限设置cd 你的文件夹路径的上一级目录。sudo chmod -R 777 你的文件夹名。输入密码。成功

2022-01-25 08:22:08 2100

原创 使用iframe嵌套,进行数据传递到方式总结

ifame数据传递总结了3中,跨域传递、同域传递、同源传递跨域传递能通过document.getElementById(‘frameObj’).contentWindow访问部分数据,但都是只读,不能够修改同域传递、同源传递可以通过 document.getElementById(‘frameObj’).contentDocument、 document.getElementById(‘frameObj’).contentWindow,访问到iframe内部,等同与内部的document和windo

2022-01-19 16:37:08 6553 2

原创 强缓存和协商缓存

Nginx配置浏览器缓存强缓存说明:当浏览器向服务器获取请求结果后,将请求结果在本地浏览器内缓存,之后的请求都先反问缓存内的结果,返回200在Response Headers中设置cache-control、expires,两种方式都设置,以cache-control为主cache-control,用来控制缓存方式cache-control: max-age=6000 设置缓存存储的最大周期,超过这个时间缓存被认为过期cache-control: no-store 不缓存 cache-

2021-11-25 10:07:40 520

原创 群魔乱舞的bug

1、现象:form表单渲染显示问题,有时候正常显示、有时候不显示数据;原因:这个模块有两部分,一部分是方案列表、一部分是展示方案form表单,点击方案在form中展示,每次打开模块都会重新加载form表单,form表单是动态渲染的,里面会涉及到参展类的数据加载,动态渲染是使用forEach进行遍历的,所以参展类的数据加载快慢,就会改变form表单的排序,这个排序就是导致与方案列表中提供的数据产生了错位,进而导致数据显示异常;解决方案:在获取到方案,进行遍历的时候,在原form表单的中查找当条数据,进行

2021-10-22 15:21:23 105

原创 乱七八糟的记录

ts中忽略下一行代码的检测 // @ts-ignore进行多层组件监听 <bottom v-bind="$attrs" v-on="$listeners" />

2021-10-21 13:50:53 90

原创 项目搭建问题收集

一、 创建项目与远端项目关联本地创建项目与远端项目建立连接cd existing_foldergit initgit remote add origin 远端git项目地址git add .git commit -m "Initial commit"git push -u origin master2.1. git push出现以下git上传文件出错[rejected] master -> master (fetch first) error: failed to push

2021-08-13 10:53:48 208

原创 浏览器兼容记录

1、请求时,汉字、符号需要进行encodeURI编码2、input框,type为number时,不会限制其他字符的输入box-shadow: none;可以去掉红框使用正则/[^(\d|\.)]/g进行替换

2021-01-06 23:33:34 136

原创 字符串匹配的KMP算法-JavaScript

KMP学习资源http://www.ruanyifeng.com/blog/2013/05/Knuth%E2%80%93Morris%E2%80%93Pratt_algorithm.htmlJavaScript代码实现// 1、部分匹配值的计算// 对传入的字符串,前缀、后缀去重,获取最大长度function prefix_suffix (str) { const prefix = [] const suffix = [] const obj = {} let num = 0

2020-08-10 17:19:59 169

原创 数组的递归调用,对广度优先和深度优先对比

// 测试数据var arr=[ { id:1, chlid:[ { id:11, chlid:[ { id:111, chlid:[] }, { id:112, chlid:[] } ] }, { id:12,

2020-07-30 14:07:36 258

原创 cli3-webpack相关配置

cli3-webpack相关配置学习资源https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8Fhttps://www.jianshu.com/p/356f78773f11不自己敲敲,还是不靠谱cli3中webpack的配置文件是根目录下的vue.config.js,默认是没有的,需要配置的时候,手动创建,需要哪项就添加哪项module.e

2020-06-12 17:46:44 224

原创 cli3-环境变量和模式

cli3-环境变量和模式学习资源https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8Fhttps://www.jianshu.com/p/4d1d94b5099a不自己敲敲,还是不靠谱1、package.json添加命令“alpha” "scripts": { "dev": "vue-cli-service serve --mode alpha", "serve": "vue-cli-service serv

2020-06-12 17:40:21 146

原创 We’re sorry but XXX doesn’t work properly without JavaScript enabled(解决方案汇总)

我遇到的问题:本地开发环境,访问接口状态为200,但没有正确但返回数据,返回信息提示为“We’re sorry but template doesn’t work properly without JavaScript enabled. Please enable it to continue.”网上搜索的解决方法没有解决问题,最终是在服务代理发现了问题,代理信息写错了,修改代理信息就改好了。以下汇总了其他的情况的解决方法1、mode类型前端修改方式:将mode类型由history改成hash;

2020-06-10 11:03:22 183344 23

原创 前端总结100点-3-BEM

flex学习资源https://en.bem.info/BEM是什么block-element-modifier的简写;块(block):代表高级别的抽象或组件;元素(element):代表block的后代,用于形成一个完整的block的整体;修饰符(modifier):代表block的不同状态或不同版本命名规则block-name__element-name_mod-name_mod-val名称以小写字母书写单词之间用中横行(-)分割块名称为其元素和修饰符定义名称空间元素名称与

2020-06-07 12:33:14 147

原创 前端总结100点-2-transform

transform学习资源https://www.runoob.com/cssref/css3-pr-transform.htmlhttps://c.runoob.com/codedemo/3391不自己敲敲,还是不靠谱// 语法transform:none|transform-funcitons;(none)值描述none定义不进行转换matrix(n,n,n,n,n,n)定义2D转换,使用6个值的矩阵matrix3d(n,n,n,n,n,n,n,n,n

2020-06-02 22:36:27 130

原创 前端总结100点-1-flex

flex学习资源阮一峰的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlhttp://www.ruanyifeng.com/blog/2015/07/flex-examples.html不自己敲敲,还是不靠谱1、容器的属性~~~// 1.1 主轴方向flex-direction:row/row-reverse/column/column-reverse;(row)// 1.2 是否可以换行flex-wrap:nowra

2020-06-01 23:13:29 188

原创 chrome devtools记录

命令(Command) 菜单按Cmd + Shift + P(如果使用Windows,则按Ctrl + Shift + P)打开“命令”菜单。截图DOM元素:截取特定节点对应上图命令是Screenshot Capture node screenshot;截取整个页面:Screenshot Capture full size screenshot重新发起xhr请求Network面板了,通过google提供的Replay XHR的方式去发起一条新的请求。编辑页面上的任何文本在控制台输入docume

2020-05-28 22:54:04 201

原创 使用axios配置下载文件,500异常,无法拿到response里的报错信息

blob流文件转json使用axios配置下载文件,参数里要传递responseType: ‘blob’,那么后端返回的数据就是blob流文件,返回的报错信息不能直接使用,要处理一下才可以。~~~if (err.config.responseType === ‘blob’) {const data = err.response.data;const reader = new FileReader();reader.onload = evt => {try {const resultOb

2020-05-21 17:00:44 1889

原创 async和await的使用感受

业务场景,单点登录单点逻辑:从地址栏获取code及相关信息,处理加工后,找到对应接口,发起单点请求原来逻辑思路:1、获取地址栏参数信息2、判断code是否存在,不存在,获取后在继续执行3、获取单点接口信息4、执行单点请求这个逻辑有个问题,就是我的初衷是要执行单点,但是现在最开始要获取地址信息,然后一个回调套一个回调,读代码和理解起来,感觉不舒服,总是感觉应该是我需要什么,去拿什么这个...

2020-03-05 00:17:14 147

原创 一个网页打开很慢的分析过程

一个网页打开很慢的分析过程页面打开慢的原因有网络问题、渲染问题、代码问题等等1、查看网络情况打开chrome浏览器的开发者选项,选择Network菜单,刷新页面,对请求情况进行分析,记录DOMContentLoaded时间、Load时间、页面文件大小找出无效的请求、失败的请求、耗时长的、文件大的资源,并按分类统计请求数量无效的请求、失败的请求:查明原因并解决,如地址失效、拼写错误等耗时...

2020-01-15 15:34:22 753

原创 移动端bug整理

重绘相关safari浏览器textarea标签的placeholder多行时显示不全ios键盘收起页面错位手机兼容bug汇总-之前记录的其他移动端-富文本链接处理

2020-01-07 21:31:38 204

原创 safari浏览器textarea标签的placeholder多行时显示不全

问题:使用textarea标签时,placeholder的内容很长,会换行,首次显示正常,当输入内容后,在清除,就会只显示placeholder的第一行内容,其之后的就看不到了解决方案:使用js动态的重绘textarea标签,来使placeholder显示完成调试解决:通过调试我发现,清除内容后,展示的placeholder只有一行,j经过反复调试属性,发现和textarea标签的重绘有关系,...

2020-01-07 21:26:43 2004

原创 webWorker学习

webWorker学习简单理解worker的作用就是一个处理复杂大量数据的js函数,如下图,在index.html代码中,1、先对Worker进行实例化创建work,创建work.onmessage对事件监听,通过work.postMessage方法传递参数param,work.js创建message事件监听,通过message监听事件获得参数param,在work.js进行数据处理,完成后,...

2020-01-03 21:04:54 184

原创 js 测试数据

测试数据var testData={ null:null, undefined:undefined, num1:0, num2:1, num3:.334455, num4:-42433, boolean1:false, boolean2:true, str1:'', str2:'string', array1...

2019-12-20 14:14:26 304 2

原创 js 数组、对象深度拷贝及方法的注意点

对数组、对象进行深度拷贝的方法function deepClone (data, newData) { if (typeof data === 'object' && data) { if (Array.isArray(data)) { newData = [] data.forEach((k) => ...

2019-12-20 14:06:10 117

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除