- 博客(107)
- 收藏
- 关注
RSS订阅
转载 处理v-html的潜在XSS风险
没有进行防止xss攻击的例子<p v-html="test"></p> export default { data () { return { test: `<a οnclick='alert("xss攻击")'>链接</a>` }}结果，js事件被执行，弹出弹框，我们要杜绝这种情况，保留a标签，拦截onclick事件解决办法法一：使用一个xss的npm包来过滤xss攻击代码，给指令的value包上一层xss
2020-09-25 10:11:54
1692
原创 （十一）进阶算法之“搜索排序”
进阶算法之“搜索排序”排序和搜索简介排序和搜索是什么？JS中的排序和搜索排序算法搜索算法Javascript实现：冒泡排序Javascript实现：选择排序Javascript实现：插入排序Javascript实现：归并排序Javascript实现：快速排序Javascript实现：顺序搜索Javascript实现：二分搜索LeetCode：21.合并两个有序链表LeetCode：374.猜数字大小思考题排序和搜索简介排序和搜索是什么？排序：把某个乱序的数组变成升序或者降序的数组搜索：找出数组中某个
2020-09-24 15:44:33
614
原创 三、如何手动实现一个微前端框架雏形
如何手动实现一个微前端框架雏形一、了解微前端1. 什么是微前端为了解决一整块儿庞大的前端服务所带来的变更和拓展方面的限制，将整体前端服务拆分成一些更小、更简单的，能够独立开发、测试部署的小块儿。但是在整体表现上还是一个整体的产品的服务称为微前端。2. 为什么要学习微前端2.1 关键优势每个分模块的规模更小，更利于维护松散各个模块之间的耦合。可以实现增量升级，避免在重构的时候影响整体逻辑技术栈无关，可以在每个子模块之间选取合适的技术栈进行开发独立开发独立部署2.2 为什么要学在重构项目
2022-01-03 19:29:40
802
原创 （二）架构基础知识
软件设计原则与分层软件设计原则单一职责原则永远不应该有多余一个原因来改变某个类理解：对于一个类而言，应该仅有一个引起它变化的原因应用：如果一个类拥有了两种职责，那就可以将这个类分成两个类开放封闭原则软件实体扩展应该是开放的，但对于修改应该是封闭的理解：对扩展开放，对修改封闭，可以去扩展类，但不要去修改类应用：当需求有改动，尽量用继承或组合的方式来扩展类的功能，而不是直接修改类的代码里氏替换原则理解：父类一定能够被子类替换最少知识原则只与你最直接的对象交流理解：低耦合，高内聚应用
2022-01-03 19:28:48
1230
原创 vite打包编译后类名混淆冲突问题处理
vite打包编译后类名混淆冲突问题处理背景在项目开发过程中，发现同个views引用的不同stora打包编译后的类名偶发性存在一致的情况，都为n，导致类名冲突解决方案类名不进行打包混淆处理，防止丢弃或修改类名找到vite官网发现有terserOptions的配置，于是增加terserOptions配置，配置如下： build: { minify: 'esbuild', // 进行压缩计算 brotliSize: false, outDir: e
2021-12-30 10:52:59
8085
2
原创 gulp与node版本兼容问题
背景今年打包一个旧项目时，发现打包报错，报发现是node和gulp版本兼容问题，gulp是4以下，node版本是14的，用nvm把node版本降至12以下，例如11.15.1就可以了但是我的电脑是macbook pro m1，执行nvm install v11.15.1时又出现如下问题：执行arch -x86_64 zsh，再执行nvm install v11.15.1就可以了...
2021-12-08 19:32:17
1661
原创 （一）导学
导学了解微前端什么是微前端为什么要学习微前端关键优势为什么要学手写一个框架可以给我们带来什么微前端实现方式对比iframe优势：劣势：基于 SPA 的微前端架构优势：劣势：确定技术栈项目架构图前端架构的前世今生初始后端mvc架构前后端分离架构Nodejs的广泛使用促进了前端技术的飞速发展单页面架构大前端时代微前端等新型架构--天下大势合久必分分久必合了解微前端什么是微前端为了解决一整块儿庞大的前端服务所带来的变更和拓展方面的限制，将整体前端服务拆分成一些更小、更简单的，能够独立开发、测试部署的小块儿。
2021-11-22 22:19:11
223
原创 静态资源部署到服务器不能访问
静态资源部署到服务器不能访问背景前端静态资源部署到服务器后不能访问，手机上可以访问，发现是10080端口的锅，谷歌浏览器认为10080端口是不安全的端口
2021-11-10 19:51:16
932
原创 本地开发环境与生产环境布局有偏差问题
本地开发环境与生产环境布局有偏差问题背景本地开发布局时好好的，发现打包部署后有偏差，发现本地开发环境和生产环境获取的document.body.clientWidth值不一致同个窗口大小，本地http://localhost:3000/#/big-screen/bighorn访问获取的是2056，生产环境获取的是1542经过测试发现用本地ip不用localhost访问的是正确的总结以后本地开发用ip访问进行布局吧，以免和生产环境出现一些布局偏差，也还不知道啥原因，哪位大佬知道原因的评论区
2021-11-10 17:39:32
460
原创 （七）传输加载优化（前沿技术解决高访问量网站性能优化问题）
传输加载优化启用压缩Gzip【必会的传输压缩方案】Gzip安装ngnix启用Keep Alive【通过一个参数提速连接】Keep AliveHTTP资源缓存【必会的HTTP缓存方法】看看第三方如何缓存的启用压缩Gzip【必会的传输压缩方案】Gzip是用来做网络资源压缩，帮我们减小资源文件在网络传输大小的技术，网络传输的过程中，去进行这种实时的动态的一个压缩，这个可以说是我们唯一可以选择的一个技术，Gzip压缩比和压缩效率比较高在传输层进行的动态压缩和我们之前讲的对资源文件的压缩是不同的概念Gzip
2021-06-20 12:14:04
482
转载 uniapp自定义条件编译-定制化产品
背景最近有个uniapp小程序产品，产品需要根据不同地区有不同的定制化需求，这边用到的是uniapp的自定义条件编译uniapp从2019年8月就已经支持自定义条件编译，如果不自定义，uni-app默认支持如下枚举值：h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qq，我们可以通过在package.json文件中增加uni-app扩展节点（开发中需要去掉注释），可实现自定义条件编译平台（如钉钉小程序、微信服务号等平台）package.json配置扩展节点
2021-05-21 15:02:58
1148
1
原创 markdown写法
分享主题目录一常用功能代码高亮：代码片cssjspowershell无序列表：有序列表：引用：粗体：斜体：链接：图片：分割线：表格：制作待办事项To-do List：高效绘制 流程图：序列图：甘特图：四级标题目录二二级标题三级标题四级标题目录一常用功能代码高亮：alert('hello world')代码片css.container { width: 100%;}js// js代码片alert(1);powershellcp -r dir1 dir2无序列表：列表1
2021-05-20 19:28:37
112
原创 chrome新版本中iframe嵌套cookie跨域携带问题
问题：新版chrome浏览器嵌套frame页面一直没法显示出来（空白页面），页面未报错问题分析：Google 在2020年2月4号发布的 Chrome 80 版本默认屏蔽所有第三方 Cookie，即默认为所有 Cookie 加上 SameSite=Lax 属性（https://www.chromestatus.com/feature/5088147346030592），并且拒绝非Secure的Cookie设为 SameSite=None（https://www.chromestatus.com/fe
2021-05-19 16:34:49
8137
1
原创 eslint规范
eslint规范背景配置eslint检测不通过，错误显示在浏览器，且编译失败vscode配置eslint代码提示和自动格式化功能安装eslint插件开启错误提示配置自动格式化背景在开发过程中eslint没有进行强制规范，导致项目代码很多警告，代码不规范，为此从根源上解决进行强制规范配置eslint检测不通过，错误显示在浏览器，且编译失败vue.config.js配置如下内容：module.exports = { devServer: { overlay: {
2021-05-19 11:24:03
771
原创 原生JS实现Ajax和JSONP跨域请求
背景：对接身份证录入和门锁卡号录入设备中，安装驱动完成后，提供的接口服务是http://localhost:8099/?cmd=readbcardid&charset=gbk，返回的数据格式如下：要求在vue项目上实现JSONP跨域请求，不想因此加载第三方资源，于是利用原生JS构建简单的AJAX，还有跨域请求JSONP的实现AJAX的根本是XMLHttprequest,而一个完整的AJAX请求一般包括以下步骤：实例化XMLHttpRequest对象连接服务器发送请求接收响应数据下面
2021-04-26 09:09:05
351
原创 background-image引用svg問題
background-image: url('data:image/svg+xml;charset=utf-8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 180 320" style="enable-background:new 0 0 180 320;" xml:sp
2021-04-23 09:47:30
4362
原创 git常用命令
远程仓库相关命令git config --global user.name "xxx" # 配置用户名 git config --global user.email "xxx@xxx.com" # 配置邮件 git init // 本地初始化git add . // 添加所有文件git commit -m "first commit" // 提交git remote add [name] [url] // 添加远程仓库git
2021-03-13 18:08:21
111
原创 ps切图
1.用CTRL + ++ 放大图像，ctrl + --缩小图像，将图像放大至每像素（最大）2.CTRL+R调出标尺（视图>标尺），将要切的图形框住3.快捷键M调出矩形选框工具，将要切的图形按标尺划分的框全部选中4.用ctrl + shift + c 合并复制 选中的图形5.用ctrl +n新建文件，该文件尺寸已按刚被复制的图形尺寸设定，注意选择图像为透明状态6.在新建文件内按ctrl + v 粘帖到新文件上7.用ctrl + shift + alt + s 或者在“文件”菜单选择“存储为w
2021-03-13 16:36:51
145
原创 vue.extend的问题
问题场景使用Vue.extend时<template> <div> <div id="mount-point"></div> </div></template><script>import Vue from 'vue'export default { mounted() { const Profile = Vue.extend({ data() {
2021-01-03 21:57:33
697
原创 Linux上搭建verdaccio私服
Linux上搭建verdaccio私服安装node环境1.wget下载到本地目录2.解压及重命名3.设置node全局环境变量4.让修改的环境变量文件生效5.验证安装verdaccio1.安装2.修改配置文件3.在配置文件末尾最后添加监听端口4.启动verdaccio利用pm2一直守护verdaccio进程1.安装pm22.pm2启动verdaccio3.查看pm2 守护下的进程verdaccio的实时日志安装node环境1.wget下载到本地目录wget https://nodejs.org/dist
2020-12-29 22:48:30
1128
转载 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory今天项目运行时，会中途退出，并且报错百度得知是nodejs内存溢出问题网上有很多解决方案这边先记录下这个问题，用如下方法解决全局安装：npm install -g increase-memory-limit项目目录下执行命令：increase-memory-limit...
2020-12-09 15:00:52
664
原创 安装NVM、NRM
root: C:\Users\zhong\AppData\Roaming\nvm path: C:\Program Files\nodejs arch: 64 proxy: none node_mirror: http://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/
2020-11-23 21:47:47
190
原创 （三）HTTP再邂逅--熟悉HTTP协议结构和通讯原理
HTTP再邂逅--熟悉HTTP协议结构和通讯原理HTTP协议特点URL和URI的区别和联系HTTP报文结构分析HTTP请求方法剖析HTTP响应状态码拆解用telnet分析http协议的通讯过程HTTP状态管理：Cookie与SessionHTTP协议特点URL和URI的区别和联系HTTP报文结构分析HTTP请求方法剖析HTTP响应状态码拆解用telnet分析http协议的通讯过程HTTP状态管理：Cookie与Session...
2020-11-12 14:59:20
307
1
原创 （二）HTTP初相识--了解HTTP协议
HTTP初相识--了解HTTP协议浏览器背后的故事浏览器背后的故事通过DNS服务器查询域名所映射的IP地址，浏览器通过查询到的ip地址和WEB服务器进行通讯，通讯的协议就是HTTP协议WEB服务器收到请求，自然会到后端来执行，然后将执行结果以响应报文的形式回传给浏览器，浏览器将响应报文进行渲染，渲染以后就是我们看到的页面了渲染引擎是根据我们的html文件描述对应相对应的数学模型，调用我们浏览器的各个零部件，把我们网页资源的源代码展示成图像结果HTTP超文本传输协议（HTTP）是一种通信协议，它
2020-11-09 11:18:14
274
原创 （一）导学
导学对于程序员，HTTP只是表面上简单，底层原理非常复杂，很少去深究HTTP背后的细节对于运维人员，部署环境应用，应用https安全，大型分布式设计，都离不开http底层原理互联网必备的HTTP协议基础：HTTP工作方式、HTTP协议结构、HTTP通讯原理、HTTP协议特性接下来的章节会细化体系地讲HTTP的一个恋爱路线，了解底层原理...
2020-10-29 17:15:47
102
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人