一篇搞定面试中的跨域问题

2 月 16 日
阅读 4 分钟
788
同源策略在web应用安全模型中是一个重要的概念。在这个策略下,浏览器允许第一个网页中包含的脚本可以获取第二个网页的数据,前提是这两个网页在同一个源下。
封面图

当你在浏览器中输入网址后发生了什么?

2 月 15 日
阅读 2 分钟
142
什么是 DNS?域名系统 (Domain Name System)是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网。DNS使用TCP和UDP端口53。
封面图

onMounted is called when there is no active component 已解决

2023-05-19
阅读 1 分钟
1.1k
If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

【彻底搞懂】vite proxy如何解决跨域问题

2023-05-11
阅读 1 分钟
2.7k
场景描述:本地起了两个服务前端vue项目跑在[链接]端口后端接口服务跑在[链接]端口前端项目请求后端接口时,浏览器给出了跨域的提示,接口请求失败。下面给出通过配置前端代理解决跨域问题的方法👇🏻

vue项目部署后提示用户有新版本

2023-05-09
阅读 4 分钟
1.3k
你可能在浏览器见到过上面这种UI,这是在vue项目重新build在服务端部署后,浏览器刷新页面弹出的提示,这时如果用户点击更新就会重载页面,清除之前的缓存获取最新内容。

vue项目引入pwa使网页应用可安装

2023-05-09
阅读 4 分钟
1.2k
最近在使用vue项目时看到一个这样的效果,如图:现在其实有很多网站都支持把网页安装到电脑或手机(IOS Safari支持较好),如下图安装后的效果:这些都是网页应用。接下来介绍一下如何让你的vue2项目变得可以安装。添加cli-plugin-pwa给现有的vue项目添加,使用下面命令: {代码...} 执行完之后会自动在package.json添加...

css变量实现动态改变主题色

2023-04-25
阅读 1 分钟
1.2k
最近思考了一下如何实现网站主题颜色切换,解决方案就是使用css变量。如今网站开发过程中css变量被使用到的频率越来越高,而且 Element plus 也是用 css 变量来重构了几乎所有组件的样式系统。CSS 变量是一个非常有用的功能,几乎所有浏览器都支持。这篇文章就来说一下css变量的使用方式。
封面图

Property 'context' does not exist on type 'NodeRequire'.ts(2339)

2023-04-13
阅读 1 分钟
1.6k
最近使用vue3官方脚手架创建的项目,在执行下面的代码后报错: {代码...} 查阅相关资料,有人提出解决方法如下,安装@types/webpack-env依赖: {代码...} 修改tsconfig.json: {代码...} 但是发现,开始的报错并没有消失。在项目根目录找到tsconfig.vitest.json,在"types": ["node", "jsdom"]中加入"webpack-env" {代码....

Element Plus按需引入图标

2023-04-06
阅读 2 分钟
1.6k
自从使用了vue3就需要升级element ui到plus了。而相应的图标库也需要单独引入,这篇文章来记录一下 全局全部引入 和 按需引入 的方法。

The client-side rendered virtual DOM tree is not matching(已解决)

2023-04-03
阅读 3 分钟
802
使用nuxt.js或者vue.js有时会出现下面的报错:[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content
封面图

nuxt3使用markdown-it

2023-04-03
阅读 2 分钟
1.5k
使用markdown语法记录博客是一个高效的方式,前端加载时需要解析markdown字符串。在nuxt3框架中vue3解析markdown语法可以直接使用markdown-it来解析。
封面图

Nuxt使用@element-plus/icons-vue

2023-04-03
阅读 1 分钟
2.6k
Element Plus 的图标使用和Element UI的略有区别,需要单独安装。在nuxt3中你可能并不能直接像Element Plus官网这样加载图标: {代码...} nuxt3对vue app实例做了封装,我们可以使用useNuxtApp这个组合式方法中获取到vue app: {代码...} 这样就可以正常使用图标了: {代码...}
封面图

监听div滚动高度

2023-03-24
阅读 3 分钟
1.3k
前端开发经常会遇到监听窗口滚动事件的情况,检测到页面滚动距离做一些操作。有时候也会监听一些容器的滚动如:div,与前者有一些差别,本文会先后介绍这两种情况如何实现。

JavaScript获取img的原始尺寸

2023-03-24
阅读 3 分钟
703
在前端开发中我们几乎不需要获取img的原始尺寸,因为只要你不刻意设置图片的宽高它都会按照最佳比例渲染。但是在微信小程序开发时,它的image标签有一个默认高度,这样你的图片很可能出现被压缩变形的情况,所以就需要获取到图片的原始尺寸对image的宽高设置。

微信小程序自定义tabbar图标切换点击两次才选中解决方法

2023-01-13
阅读 2 分钟
2.9k
微信小程序开发过程中使用了自定义tabBar,运行官网提供的demo是没有问题的,但是自己添加了新的tab-item后点击会出现错误,具体表现为:点击一次tab跳到指定的页面,但是tabBar的状态还停留在上一个,再次点击才能更新。

Assertion failed: (thread_id_key != 0x7777)

2022-11-08
阅读 1 分钟
1.9k
使用npm run build时报了这个错误:Assertion failed: (thread_id_key != 0x7777), function find_thread_id_key, file ../src/coroutine.cc, line 134.error Command failed with signal "SIGABRT".

React Hooks: useEffect()调用了两次

2022-10-17
阅读 1 分钟
2.8k
使用create-react-app脚手架创建的React前端项目,在函数式组件中使用useEffect加载接口数据时 发现一个奇怪的问题:刷新页面接口调用了两次!!。

react项目热更新自动插入了iframe

2022-09-25
阅读 1 分钟
1.4k
最近使用create-react-app创建了前端项目,热更新触发后,查看DOM元素发现在整个页面插入了一个iframe,层级很高,会影响查看其他元素。如上图所示:

使用OpenSSL生成自签名证书

2022-09-15
阅读 2 分钟
1.1k
OpenSSL 用于传输层安全(TLS)协议的开源工具包,以前称为安全套接字层(Secure Sockets Layer)协议。自签名SSL证书的风险自签名SSL证书是不受浏览器信任的,即使网站安装了自签名SSL证书,当用户访问时浏览器还是会持续弹出警告。为了网站的安全,请停止使用自签名SSL证书,推荐使用受信任的CA机构提供的免费且安全的SSL...
封面图

浏览器检测麦克风音量

2022-09-14
阅读 8 分钟
2.1k
Web Audio API 中的音频处理运行在一个单独的线程,这样才会比较流畅。之前提议处理音频使用audioContext.createScriptProcessor,但是它被设计成了异步的形式,随之而来的问题就是处理会出现 “延迟”。

浏览器获取摄像头、麦克风设备

2022-09-13
阅读 3 分钟
2.1k
开发直播类的网页应用时,往往需要在开播前检测摄像头和麦克风是否正常,本文介绍一下浏览器如何获取到可用的摄像头和麦克风设备列表。媒体接口mediaDevices.getUserMedia()mediaDevices.enumerateDevices()需要用到上面两个媒体接口,getUserMedia()用于获取用户授权,enumerateDevices()用于获取可用设备列表。代码实...
封面图

CSS Grid Layout(网格布局)

2022-09-12
阅读 2 分钟
1.2k
CSS 有一些属性经常被用来解决布局问题:如(浮动float、定位postion)这些比较 hack 的方法经常会给页面遗留下一些问题。弹性盒子Flexbox是一个非常好的布局工具,网格布局 CSS Grid Layout 是最新、更强大的布局方式。本文就来简单介绍一下什么是网格布局。

网站SEO效果分析

2022-09-09
阅读 1 分钟
733
当我们使用了 SEO 技巧把网站发布上线后,过一段时间就应该检测一下网站 SEO 的效果了。本文介绍一下应该从哪些角度来考量,以及可以借助哪些工具来做数据分析。
封面图

使用Promise.race()实现控制并发

2022-09-06
阅读 3 分钟
1.4k
之前做过一个 Node.js实现分片上传 的功能。当时前端采用文件切片后并发上传,大大提高了上传的速度,使用Promise.race()管理并发池,有效避免浏览器内存耗尽。
封面图

JavaScript阻塞与非阻塞

2022-09-06
阅读 1 分钟
1.1k
JavaScript 的代码是运行在单线程上的,也就是说同一时刻只能有一个操作被执行。这样的好处是不用考虑并发问题,只需关注写得代码不要阻塞线程。通常情况,大多数浏览器当你打开一个tab就会开启一个Event Loop,而且每个网页之间是隔绝的,可以避免出现阻塞线程时导致整个浏览器卡死。
封面图

JavaScript中的异步、同步

2022-09-06
阅读 3 分钟
1.3k
程序需要执行的操作都会被放入Call Stack(A LIFO (Last In, First Out) Stack),先进后出的数据结构。
封面图

CSS设置高斯模糊效果

2022-09-04
阅读 1 分钟
1.7k
高斯模糊(英语:Gaussian Blur),也叫高斯平滑,是在Adobe Photoshop、GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果,通常用它来减少图像噪声以及降低细节层次。这种模糊技术生成的图像,其视觉效果就像是经过一个毛玻璃在观察图像。

用js获取当前月份的天数

2022-09-01
阅读 2 分钟
1.7k
本文介绍一下如何使用js获取指定时间对应月份的天数。获取当前月份天数我测试的时间是2022-09-01: {代码...} 假如要获取2022-02的天数: {代码...} 注意:new Date()接收的第三个参数是0,第二个参数是人类意识中的月份(因为date.getMonth()得到的值比想象中的小1)补充月份是从0开始计算的: {代码...} 获取指定日期 ...
封面图

Web字体的使用

2022-08-31
阅读 2 分钟
1.1k
在Web开发中有时候会需要一些特殊样式的字体(不要问我为什么:为了装逼)。你一般都会怎么处理这个问题呢?font-family这个是css设置字体的属性: {代码...} 但是这种方式能设置的样式非常大众,很难给人一种耳目一新的感觉。所以我试图找到一种其他的方式,来设置字体样式。这里可以找到了一些线索@font-face在 CSS 的开...

RangeError: Array buffer allocation failed

2022-08-29
阅读 3 分钟
4.1k
const buffer = Buffer.concat(bufferList, len);定位到是上边这行出现了问题,检查了一下服务器,node应用的内存占用是 192.1mb。