- 博客(65)
- 收藏
- 关注
RSS订阅原创 html、css类名命名思路整理
开发页面时，老是遇到起名问题，越想越头疼，严重影响开发进度，都是在想名字，现在做一下梳理，统一一下思想，希望以后能减少这块的痛苦。
2023-12-08 17:28:50
632
原创 多个项目复用node_modules
多个项目使用的node_modules基本一致，每个项目都安装一遍依赖，对空间造成资源浪费。通过创建软链接的方式，共用一套node_modules。
2023-12-06 16:44:16
901
原创 获取焦点后，样式异常的处理方法
难点：上面问题的难点在于，想要通过控制台查看问题标签样式结构时，就会失焦，提示框就会消失，无法看到问题标签内部结构。最终发现情况二的问题，样式被改写了，内部的样式类与外部的样式类同名，修改外部的样式类名解决的；在使用monaco-editor 设置代码提示未正常显示，提示框出现，看不到内容，如图。所有这种获取焦点后展示异常的问题都可以用这种方式解决。情况一：没有得到数据，所以没有展示；情况二：得到了数据，展示异常；
2023-11-30 21:54:20
141
原创 bug-跨域访问问题
做一个大屏项目时，设置图标数据为动态接口，通过这个接口返回数据，问题是有的接口能够正常返回数据，有的接口提示跨域，这些接口不用域名，对提示跨域的接口后端也进行支持跨域设置，结果还是提示跨域，通过测试发现，通过Axios直接请求，没有提示跨域，可以正常返回数据，查看项目代码发现，请求拦截器添加了一个自定义header，去掉就正常了；当访问网页的域与页面内调用接口的域不一致（域不一致包含协议、域名、端口号不一致），就会产生跨域问题。是浏览器本身的安全策略产生的问题。
2023-11-14 18:52:59
472
原创 bug-xss 攻击漏洞问题
前端使用wangeditor富文本编辑器，正常情况下编辑器都会把内容进行转码处理，转码之后就回避xss问题，这次的问题是通过一些手段提及内容（比如postman），这样提交的代码就没有经过编辑器进行转码，读取数据时就会触发恶意代码。XSS(Cross-Site Scripting)攻击：通过在网站上植入恶意脚本来攻击用户。当用户看到评论时，就会触发响应，将用户cookie发送到攻击者手中。
2023-11-14 18:25:51
684
原创 git关于项目的分支、版本、上线的说明
test：迭代分支，测试环境，从主分支拉取代码后，更新 bug、需求后，在测试环境进行验证，通过后，向 main 提交代码。develop：开发分支，开发环境，基于主分支，开发大版本内容，开发完成后，向 pre-release 分支，提交代码。开发大版本内容，代码要通过 develop开发环境验证 ，test测试环境验证 ，main生产环境验证。bug修改，代码要通过 dtest测试环境验证 ，main生产环境验证。main：主分支，生产环境，只有上线的时候，才能够提交代码。tagName：标签名。
2023-06-27 11:44:18
661
原创 vue.config.js中proxy配置
pathRewrite ：检查代理的请求中是否有 /api ，有的话把 /api 替换为冒号后面的内容，案例为替换成空字符串，也就是删去 /api。（^是正则表达式的内容，意思是限定开头）secure : 如果是https接口，需要配置这个参数（如果是http接口，也可以不写这个参数）target : 本地服务器地址改为后端接口地址 host:part。“/api”:{} : 引号中代表监测的是以 /api 开头的接口。ws : 如果要代理 websockets，配置这个参数。
2022-10-17 16:01:48
1406
原创 mac 使用 homebrew 安装软件问题及处理方法
解决方法：依次执行下面4个命令，然后重新打开终端后，执行sudo brew install redis，可以运行。然后等待在安装工程中可能需要多次输入开机密码，因为在安装过程中需要使用到系统权限。当选择了国内资源之后，会提示将要删除之前的brew版本，输入 Y 确认即可。使用 sudo brew install redis，仍然失败，提示如下。运行过程中会提示是否删除已安装的 homebrew源。确认删除已安装的homebrew源。输入要安装的镜像源数字，回车。卸载 homebrew。
2022-09-22 11:33:58
1006
原创 使用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
824
原创 统一代码格式-配置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
532
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
1243
2
原创 git上的项目迁移，保留commit记录
1、创建新的项目目录2、将原工程的代码放入到新项目中3、找到 .git/comfig 文件，将 url 的值改成新项目的地址
2022-04-15 14:35:37
485
原创 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
580
原创 部属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
7968
原创 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
2043
原创 使用iframe嵌套，进行数据传递到方式总结
ifame数据传递总结了3中，跨域传递、同域传递、同源传递跨域传递能通过document.getElementById(‘frameObj’).contentWindow访问部分数据，但都是只读，不能够修改同域传递、同源传递可以通过 document.getElementById(‘frameObj’).contentDocument、 document.getElementById(‘frameObj’).contentWindow，访问到iframe内部，等同与内部的document和windo
2022-01-19 16:37:08
5606
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
490
原创 群魔乱舞的bug
1、现象：form表单渲染显示问题，有时候正常显示、有时候不显示数据；原因：这个模块有两部分，一部分是方案列表、一部分是展示方案form表单，点击方案在form中展示，每次打开模块都会重新加载form表单，form表单是动态渲染的，里面会涉及到参展类的数据加载，动态渲染是使用forEach进行遍历的，所以参展类的数据加载快慢，就会改变form表单的排序，这个排序就是导致与方案列表中提供的数据产生了错位，进而导致数据显示异常；解决方案：在获取到方案，进行遍历的时候，在原form表单的中查找当条数据，进行
2021-10-22 15:21:23
81
原创 乱七八糟的记录
ts中忽略下一行代码的检测 // @ts-ignore进行多层组件监听 <bottom v-bind="$attrs" v-on="$listeners" />
2021-10-21 13:50:53
69
原创 项目搭建问题收集
一、 创建项目与远端项目关联本地创建项目与远端项目建立连接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
167
原创 浏览器兼容记录
1、请求时，汉字、符号需要进行encodeURI编码2、input框，type为number时，不会限制其他字符的输入box-shadow: none;可以去掉红框使用正则/[^(\d|\.)]/g进行替换
2021-01-06 23:33:34
108
原创 字符串匹配的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
144
原创 数组的递归调用，对广度优先和深度优先对比
// 测试数据var arr=[ { id:1, chlid:[ { id:11, chlid:[ { id:111, chlid:[] }, { id:112, chlid:[] } ] }, { id:12,
2020-07-30 14:07:36
231
原创 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
204
原创 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
125
原创 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
181609
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
119
原创 前端总结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
105
原创 前端总结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
166
原创 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
172
原创 使用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
1748
原创 async和await的使用感受
业务场景，单点登录单点逻辑：从地址栏获取code及相关信息，处理加工后，找到对应接口，发起单点请求原来逻辑思路：1、获取地址栏参数信息2、判断code是否存在，不存在，获取后在继续执行3、获取单点接口信息4、执行单点请求这个逻辑有个问题，就是我的初衷是要执行单点，但是现在最开始要获取地址信息，然后一个回调套一个回调，读代码和理解起来，感觉不舒服，总是感觉应该是我需要什么，去拿什么这个...
2020-03-05 00:17:14
121
原创 一个网页打开很慢的分析过程
一个网页打开很慢的分析过程页面打开慢的原因有网络问题、渲染问题、代码问题等等1、查看网络情况打开chrome浏览器的开发者选项，选择Network菜单，刷新页面，对请求情况进行分析，记录DOMContentLoaded时间、Load时间、页面文件大小找出无效的请求、失败的请求、耗时长的、文件大的资源，并按分类统计请求数量无效的请求、失败的请求：查明原因并解决，如地址失效、拼写错误等耗时...
2020-01-15 15:34:22
698
原创 移动端bug整理
重绘相关safari浏览器textarea标签的placeholder多行时显示不全ios键盘收起页面错位手机兼容bug汇总-之前记录的其他移动端-富文本链接处理
2020-01-07 21:31:38
160
原创 safari浏览器textarea标签的placeholder多行时显示不全
问题：使用textarea标签时，placeholder的内容很长，会换行，首次显示正常，当输入内容后，在清除，就会只显示placeholder的第一行内容，其之后的就看不到了解决方案：使用js动态的重绘textarea标签，来使placeholder显示完成调试解决：通过调试我发现，清除内容后，展示的placeholder只有一行，j经过反复调试属性，发现和textarea标签的重绘有关系，...
2020-01-07 21:26:43
1844
原创 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
130
原创 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
250
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
99
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人