自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 vite解决前端跨域步骤

Vite 解决跨域问题的原理主要是通过其内置的开发服务器功能实现的,具体来说,是通过 HTTP 代理(HTTP Proxy)机制。在开发环境中,Vite 服务器可以配置为一个代理服务器,将前端应用发出的请求转发到实际的后端服务上,从而绕过浏览器的同源策略限制。为了使目标服务器接受请求,Vite 服务器会修改请求的 Host 和 Origin 头部,使其看起来像是从目标服务器的域发出的。整个代理过程对前端应用是透明的,即前端应用无需关心请求是如何被转发的,只需要按照正常的请求方式发出请求即可。

2024-07-30 09:56:30 603

原创 try catch 解决大问题

项目开发中遇到一个棘手的bug,react前端项目独自运行时一切正常,但是把项目集成到使用wujie的大平台微前端项目中之后,突然有个地方无故报错,导致程序运行停止,后续的方法不再执行。

2024-07-10 14:44:49 261

原创 ES6 .entries用法

返回数组的可迭代对象itarator,可以通过for of 来遍历数组或对象的值。但是它们的写法不一样。

2024-06-12 10:16:34 451

原创 大屏幕适配方法之:transform:scale()

CSS3新增的属性transform主要用于设置元素的变形,比如旋转、倾斜、缩放等。我们今天要用到的正式它的缩放功能transform:scale()

2024-05-24 16:01:01 1089

原创 重学ES6之一

* ES6声明变量的6种方式:** var function (es5) let const import class。ES6提供了顶层对象:globalThis,它方便我们在不同的环境中(浏览器、node)去访问顶层对象。

2024-05-14 11:04:53 359

原创 iframe通信postMessage

iframe嵌入页面是实现微前端的方式之一。由于浏览器的跨域限制,iframe与父页面之间的通信变得不是那么容易。postMessage解决了这个问题。从广义上讲,一个窗口可以获得对另一个窗口的引用(比如 targetWindow = window.parent),然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent 消息。

2024-05-08 11:30:21 497 1

原创 报错:Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the depen

从github下clone了一个wujie微前端演示项目,下载到本地运行不起来,报如下错误:看字面意思这个报错应该是说vue版本不正确导致的,于是安装了最新版的vue,结果还是无果。上网查询相关报错的解决方法,有人说是这个插件版本不正确导致,于是卸载重装,还是没有解决。有的说建议删掉node_modules,清除缓存后重新下载。依然没用。stackoverflow上有人对这个报错进行了提问,下面有回答说可能是node版本导致,突然想起来我们公司这个项目因为年代比较久远使用了比较老的node版本,然后使用nv

2024-04-29 09:13:09 2546 2

原创 微前端技术之Web Components

Web Component 是一套技术,允许你创建可重用定制的元素(它们的功能封装在你的代码之外)并且在你的web应用中使用它们。通俗来讲就是将部分可重用的代码抽离,封装成一个独立的组件,方便在其他地方引用。Web components旨在解决这个问题,它有三项主要技术组成,它们可以一起使用来创建封装功能的定制元素。

2024-04-28 10:49:11 487

原创 text-overflow:ellipsis失效

text-overflow:ellipses用于设置文本超出显示‘…’,工作中遇到设置不上的问题,所以总结一下。

2024-04-26 09:18:36 776 1

原创 善于利用window挂在全局变量

开发过程成中遇到一个奇怪的问题,打开一个echats图表之后,关闭echarts图再进入其他页面页面会报错提示“"赋值给window,在跳转的页面中let $ = window.$解决问题。却回不到原来的版本。最后的解决办法是在关闭。文件然后在本地绘制而成。图后,再页面中插入的引入。标签也会去掉,但程序中的。经过一步步定位,发现。文件中有另一个版本的。文件,导致原来使用的。

2024-03-15 14:32:49 748

原创 换个思路,豁然开朗

遇到一个bug参数的格式不对,导致原有逻辑报错,本以为是哪里定义参数的地方有问题,查询几个小时无结果,结果是antd组件升级导致的树组件TreeNode格式变化。按照现有的数据格式,稍微调整下原有逻辑,代码立刻跑通,问题解决!遇到长时间无法解决的问题,可以先喝口水冷静几分钟,推翻原有逻辑,换个思路说不定豁然开朗。

2024-03-08 10:18:35 370

原创 React Hooks的理解

React中的数据实现响应式相对于Vue2来说要麻烦一些,Vue2中所有的变量都存放在了data当中,只要定义在data当中的数据,Vue底层就会自动把他们设置为响应式。React中的响应式数据被称作"state",state区别于普通变量,它实现了响应式,当我们修改它时就会触发React进行重新渲染。Vue3应该是参考了React中对于响应式的设定,取消了内部自动设置响应式的方式,而是需要开发者手动添加变量的响应式(ref、reactive)。

2024-02-23 16:00:06 493

原创 前端安全之XSS、CSRF

而如果黑客要对银行网站实施 CSRF 攻击,他只能在他自己的网站构造请求,当用户通过黑客的网站发送请求到银行时,该请求的 Referer 是指向黑客自己的网站。当你登录一个网站A后,在没有登出的情况下,你又跑到一个其他的论坛上闲逛,然后你看到一个美女的图片,你出于好奇心,点击了美女图片,这个时候,可能就被攻击了;原因是美女图片的的超链接(link)可能是不法分子弄的,指向的可能是A网站,由于你在A网站还是登陆态,那么你点击的这个link就是以你登录态的进行的,比如可以用你的登录态发布评论;

2024-01-28 21:58:43 1074 2

原创 H5设备兼容处理方法

通过navigator.userAgent来判断设备类型,在需要差异化定制样式的地方,给相应的元素添加设定好的class。

2024-01-28 20:20:10 440

原创 前端缓存机制

浏览器的localStorage和sessionStorage等不属于浏览器的缓存概念,准确的说应该属于“浏览器的本地存储”不要讲两者混淆。

2024-01-22 13:08:53 1127

原创 tsconfig.json配置详解

【代码】tsconfig.json配置详解。

2024-01-21 10:49:55 4756 1

原创 自定义指令实现按钮防抖

created(el,binding,vnode,preNode){} // 在绑定元素的属性之前beforeMounted(el,binding,vnode,preNode) {} //在被插入到Dom前调用mounted(el,binding,vnode,preNode){} //在绑定他的父组件和他所有的子组件都挂载完毕后调用beforeUpdate(el,binding,vnode,preNode) {} //在绑定的父元素更新前调用。

2024-01-20 22:56:11 685

原创 ios适配虚拟home键

在H5开发过程中遇到一个兼容性问题。iphone手机的虚拟home键会对屏幕底部的内容造成遮挡。要处理此问题,需要清楚安全区域这个概念。

2024-01-20 16:48:02 1643

原创 如何更好的制定开发规范

制定开发规范能够使项目代码具有更高的可维护性、可靠性、可复用性。制定开发规范可以从这些方面着手。

2024-01-18 14:03:40 407

原创 手写Webpack-Plugin

通过插件我们可以扩展webpack,使webpack可以执行更广泛的任务,拥有更强的构建能力。

2024-01-13 16:07:07 1396

原创 手写webpack的loader

帮助webpack将不同类型的文件转换为webpack可识别的模块。

2024-01-13 14:37:57 1240

原创 箭头函数与普通函数的差异

箭头函数的this指向通常有两种情况。

2024-01-12 12:03:08 427

原创 ts字面量类型

实际上单个的字符串字面量类型并不是很有用,但是可以使用联合类型将多个字符串字面量组合成一个类型(形成类似于字符串枚举的作用)。

2024-01-07 06:24:30 565 1

原创 ts非空断言“!”

TS 中的感叹号,称作『非空断言』操作符,Non-null assertion operator。

2024-01-04 19:34:43 881

原创 javaScript原型

2024-01-01 00:43:40 392

原创 字体文件压缩工具font-spider-plus

font-face是css3中允许使用自定义字体的模块,他主要是吧自己定义的web字体嵌入到网页中。

2023-12-27 20:14:33 1687

原创 图片懒加载

图片懒加载是一种节省性能的图片加载方法。通过判断图片是否进入可视区来控制它是否加载。我们为window.scroll做了防抖控制,这样能更好的提升性能。

2023-12-27 09:26:01 378

原创 元素的位置属性offset、client、scroll

引用一张图可以直观表示这些属性。

2023-12-27 08:55:32 521

原创 React尝鲜

react的组件就是一个js函数,函数内部return一个由jsx语法创建的html代码片段。在需要引入组件的地方import导入组件,并放在相应位置。

2023-12-21 14:43:53 607

原创 BFC块级格式化上下文

BFC(Block Formatting Context)块级格式化上下文。是CSS渲染的一块独立区域,在这块区域内的元素布局不会影响到外面,同样,外面的元素布局也不会影响到里面。

2023-12-20 23:55:24 346

原创 webpack总结

我们从 4 个角度对 webpack 和代码进行了优化:

2023-12-15 03:47:19 550

原创 webpack的配置与优化

webpack打包主要针对js文件,包括eslint、babel、terser(webpack内置插件,用于js压缩),因此我们主要对这三个工具开启多线程打包。每次打包js文件都要经过Eslint和Babel编译,速度比较慢,因此我们可以缓存之前的编译结果,提高下次打包速度。webpack 5的生产模式默认启动,它的作用是忽略文件中那些没有引用到的代码,从而减小代码体积、提高打包速度。打包时每个文件都会经过所有的Loader处理,虽然因为test正则原因没有实际处理,但是都要过一遍,比较慢。

2023-12-14 17:36:20 813 1

原创 ES6模块化

ES6模块化主要包含三种用法。

2023-12-12 13:39:56 549

原创 webpack的使用

webpack 本身只能处理 js、json 等资源,其他资源需要借助 loader,Webpack 才能解析。指示 Webpack 打包完的文件输出到哪里去,如何命名等。指示 Webpack 从哪个文件开始打包。扩展 Webpack 的功能。

2023-12-12 10:53:28 580

原创 express框架使用

官方定义: 路由确定了应用程序如何响应客户端对特定端点的请求中间件(Middleware)本质是一个回调函数 中间件函数 可以像路由回调一样访问 请求对象(request) , 响应对象(response)每一个请求 到达服务端之后 都会执行全局中间件函数声明中间件函数//实现功能代码//.....//执行next函数(当如果希望执行完中间件函数之后,仍然继续执行路由中的回调函数,必须调用next)next();应用中间件声明时可以直接将匿名函数传递给 use。

2023-12-11 22:03:19 1108

原创 Mongoose 对象文档模型库

Mongoose是一个对象文档模型库,官网:http://www.mongoosejs.net/

2023-12-11 21:19:49 668

原创 MongoDb数据库

1.显示所有数据库:show dbs2.切换到指定数据库,如果没有则自动创建数据库3.显示当前所在数据库db4.删除当前数据库use 库名。

2023-12-09 22:07:18 531

原创 我的记事本

uniform resource locator. 统一资源定位符。

2023-12-05 21:56:25 478

原创 手写vue响应式

【代码】手写vue响应式。

2023-11-21 22:21:44 228

原创 手写call方法

【代码】手写call方法。

2023-09-24 05:06:34 253

空空如也

空空如也

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

TA关注的人

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