前端
秋叶原の黑猫
这个作者很懒,什么都没留下…
展开
-
在next.js中进行全局状态管理
在next.js中进行全局状态管理往往需要用到上下文context,这在react中很常见,但受制于nextjs的服务端渲染的特性,我们不能直接使用上下文进行全局状态管理。(包括很多第三方库也需要用到context)简单来说就是创建一个自己的组件,标记为客户端渲染,该组件包裹住context,最后在根目录引用该组件即可。原创 2024-03-04 04:09:24 · 1723 阅读 · 0 评论 -
web基础和面试题
ARP地址解析协议:是根据IP地址获取物理地址的一个TCP/IP协议。http协议和TCP协议的区别:1、http协议是应用层的协议,TCP协议是传输层的协议,http协议是建立是TCP协议之上的,http是无状态的的短链接,而TCP是有状态的长链接。2、HTTP规定了数据传输的格式,以及能够处理请求响应,而TCP仅仅负责传送数据包。3纯裸TCP是能收发数据,但它是个无边界的数据流,上层需要定义消息格式用于定义消息边界,于是就有了各种协议如HTTP。原创 2023-12-13 06:43:04 · 1129 阅读 · 0 评论 -
前后端常见的几种鉴权方式
它是一种访问令牌,由服务器颁发给客户端,用于代表用户访问受保护的资源。OAuth 2.0是一种授权框架,用于授权第三方应用程序代表用户访问资源服务器上的受保护资源。它支持不同的授权流程,例如授权码授权流、密码授权流、客户端凭证授权流等。Basic Authentication是 HTTP 的基本身份验证方法,它通过在请求头中发送用户名和密码的 Base64 编码形式来验证用户身份。虽然它是一种简单的身份验证方法,但不太安全,因为凭证以 Base64 编码形式传输,容易受到中间人攻击。原创 2023-10-25 18:59:14 · 768 阅读 · 0 评论 -
session无法读取问题解决(cookie浏览器权限)
在同一个服务器上有目录如下:/test/,/test/cd/,/test/dd/,现设一个cookie1的path为/test/,cookie2的path为/test/cd/,那么test下的所有页面都可以访问到cookie1,而/test/和/test/dd/的子页面不能访问cookie2。了解了基本概念,解决问题就很简单了。domain表示的是cookie所在的域,默认为请求的地址,如网址为www.test.com/test/test.aspx,那么domain默认为www.test.com。原创 2023-07-30 09:32:32 · 665 阅读 · 0 评论 -
vue-element-plus-admin框架的tag上下文切换bug
问题就出在ref得到的变量中,数组里的路由一直在增加,导致后面出现一系列错误(错误原因未知)。对此,作者给出的回答是,template分支不再维护,因此并没有给出该问题的解决方案。变量获取了tag标签路由的ref,之后对该变量进行了获取值等一系列操作。变量,而是从自己维护的路由数组。我的解决方法页很粗暴,不使用。中得到tag的一系列信息。原创 2023-07-28 17:59:45 · 712 阅读 · 0 评论 -
css不常用属性
2、左右居中最常用的两种方法是margin: 0 auto和text-align:center。3、透明背景使用transparent属性而不是使用rgba中的透明度数值来调节。4、文字连字符样式使用hyphens属性。1、出现滑动使用overflow;原创 2023-02-22 22:33:40 · 241 阅读 · 0 评论 -
vue和react对比,next.js的优劣,electron的用法
vue在MVVM思想下,view和model没有直接联系,但是view和view-model、model和view-model之间是会交互的。组合式API围绕组件选项setup 而创建,setup 为 Vue 组件提供了状态、计算值、侦听器 和生命周期钩子,Vue 的响应性系统与组件层是解耦的,状态管理使用的是响应式对象ref()、reactive()。vue是一个典型的MVVM思想,数据驱动视图。View:视图层,用户操作页面,当view-model对model更新的时候,会通过数据绑定更新到view。原创 2023-02-21 03:41:39 · 2102 阅读 · 0 评论 -
electron与jquery起冲突,使用jquery报错解决方法
问题原因:Electron 为了整合 Node.js,会在 DOM 加入 module、exports、require 等模块和函数,和jQuery、RequireJS、Meteor、AngularJS 等发生冲突。暴力解决方法:去除node功能加持,在加载browserWindow或者browserView时就关闭nodeIntegration。原创 2023-01-05 17:40:44 · 1120 阅读 · 0 评论 -
Cookie,sessionstorage,localstorage,Token ,JWT,session的区别
HTML4开始使用,存储在客户端保存数据,不可跨域。Cookie 的本职工作是维持状态(后端使用),数据每次都会发给服务器端。第一次访问网站的时候,浏览器发出请求,服务器响应请求后,会在响应头里面添加一个Set-Cookie选项,将cookie放入到响应请求中,在浏览器第二次发请求的时候,会通过Cookie请求头部将Cookie信息发送给服务器,服务端会辨别用户身份。不设置有效期就是存储在内存,会话级别的存储;设置了有效期就是存储在硬盘里,有效期到了自动消失。原创 2022-12-14 00:51:07 · 384 阅读 · 0 评论 -
前端异步请求async/await,axios的错误用法
1、直接return请求,得到promise,获取不到返回值,2、post请求使用params传递参数。request为包装后的axios请求。3、没执行async函数。原创 2022-12-13 07:54:35 · 711 阅读 · 0 评论 -
js阻止冒泡事件发生(react)
其实就两个函数。原创 2022-11-29 10:45:24 · 750 阅读 · 0 评论 -
网络钩子webhook
webhook:发布订阅模式,与api不同的是,webhook无需发送请求即可收到监听地址发布的消息。网页开发中的网络钩子是一种通过自定义回调函数来增加或更改网页表现的方法。主要用途:更新客户端。原创 2022-11-21 14:11:43 · 229 阅读 · 0 评论 -
前端间隔查询的两种方法:Debounce和Throttle
中文名:防抖。在开始操作了之后,那么只有在一段 delay 时间段后不再有操作了,才执行操作。原创 2022-11-21 13:45:12 · 179 阅读 · 0 评论 -
npm run dev和npm run build调用api返回的数据不一致(build后调用api返回index.html)
然而在npm run build后,线上访问出现了问题。这样设置之后就能够在开发环境中访问此地址的api了。原创 2022-08-04 12:03:41 · 536 阅读 · 0 评论 -
vue中使用接口(搜狐接口)获取访客IP地址
花了1天时间踩坑,终于探索出来了最方便的解决方式。。网上大部分大厂的获取ip的方式都已不可用,只有搜狐接口还有一些小网站搞出来的接口能用。这里我使用的是搜狐获取IP的。原创 2022-08-04 11:51:09 · 3316 阅读 · 1 评论 -
vue3-ts中将接口类型转换为ref
代码】vue3-ts中将接口类型转换为ref。原创 2022-07-28 05:11:35 · 679 阅读 · 0 评论 -
实现nginx禁止直接通过ip进行访问并报错500的效果
之后重启nginx,我们访问ip就会直接跳转到nginx默认的500页面。原创 2022-07-27 09:16:37 · 824 阅读 · 0 评论 -
html跳转至外部链接
1)a标签实现原创 2022-07-27 07:51:37 · 1455 阅读 · 0 评论 -
vue,vite项目中使用mock(使用vite-plugin-mock插件)
mock属于一个我不怎么会用的功能,但又怕必要时忘记流程,因此在此做个记录,过程尽量简短。原创 2022-07-27 07:38:24 · 1682 阅读 · 0 评论 -
vite报错 process is not defined
在vite.config.ts中增加define。原创 2022-07-20 01:24:37 · 9318 阅读 · 0 评论 -
html、js、css3制作一款辉光管时钟
代码地址与作者:https://github.com/AmperiaWang/Nixie-Clock效果图:原创 2022-07-20 00:21:58 · 371 阅读 · 0 评论 -
vue3实现一个自己的Loading插件
从ElementUI的loading组件说起原创 2022-07-13 06:26:24 · 861 阅读 · 0 评论 -
vite项目内导入本地图片
vite+ts+vue3.2 项目内使用导入本地图片require报错原创 2022-07-13 06:19:23 · 948 阅读 · 0 评论 -
简单给element-plus的Skeleton做个Vue3组件——预加载骨架屏图像组件
简单给element-plus的Skeleton做个Vue3组件——预加载骨架屏图像组件原创 2022-07-13 01:52:00 · 1088 阅读 · 0 评论 -
flex弹性盒子实现圣杯布局
这里推荐一个我个人比较喜欢的圣杯布局,即当总宽度收缩时,左右两边优先收缩,最后收缩中间部分。原创 2022-07-12 17:41:51 · 379 阅读 · 0 评论 -
div宽度设置width:100%后再设置padding超出父元素( flex设置width: 100%后超过屏幕)|css:box-sizing
在全局css样式中设置该属性,可以使得在整个项目中设置的width和height方式都相同,设置的width即为所看到的宽度,不会出现容器“越界”的情况。如下图所示,子元素宽度大于父元素,这样可能会导致屏幕溢出,出现滑动条。最终将该样式文件引用到整个项目即可,具体引用方法这里不再赘述。我们可以在父元素中设置。...原创 2022-07-12 04:23:46 · 3534 阅读 · 0 评论 -
使用npm模块升级工具npm-check-updates升级/更新版本依赖,以及ncu命令(npm-check-updates)报错解决
npm-check-updates常用来一键升级 package.json 中依赖的版本在我使用命令安装了之后,使用ncu命令,出现与npm-check-updates不相关的命令选项,并且有以下输出原因以及解决办法在npm-check-updates的官方github库中,我们在issues中可以找到相同问题:ncu command conflict with Nvidia CUDA executable (ncu.exe) on Windows 10我们在-v命令中也能看出来,其实是与cuda.原创 2022-07-07 17:34:57 · 2168 阅读 · 1 评论 -
vue3项目npm install安装报错“npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve”
报错:其实就是版本不兼容导致的,可能是因为npm版本太高,而安装的vue版本过低。解决方法也很简单,一个是使用npm安装项目每个部件对应版本,还有一个是修改自己项目版本。第一个方法过于麻烦且没有必要,我选择修改自己项目版本,所有部件版本都使用最新版(需要注意查看新版本是否与自己项目的老版本兼容,比如vue2和vue3就不兼容)打开package.json文件,可以看到自己项目的各个部件版本,鼠标放到部件上,也能预览最新版本,逐个修改即可......原创 2022-07-04 15:34:19 · 13202 阅读 · 1 评论 -
Vue项目打包后报错: Uncaught SyntaxError: Unexpected token ‘<‘
在文件vue.config.js中,确保已经将资源公共路径修改为’/':原创 2022-06-29 15:22:07 · 2564 阅读 · 0 评论 -
在vue项目里面的全局页面加备案
打开src\App.vue文件代码如下我们在路由下方加上代码即可效果如图原创 2022-06-20 18:33:14 · 3327 阅读 · 1 评论 -
javascript 判断日期
用户输入最喜欢的一天 程序输出相应的信息原创 2022-05-31 20:24:24 · 704 阅读 · 0 评论 -
javascript 使用基本块级元素 输出倒三角形
一个那么简单的代码,我竟然想了那么久没想出来,遂过来做个笔记<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initia原创 2022-05-31 19:58:24 · 1271 阅读 · 0 评论 -
Vue webpack报错:npm ERR! vue-admin-template@4.4.0 dev: `vue-cli-service serve`
报如下错误: INFO Starting development server... ERROR ValidationError: webpack Dev Server Invalid Options options should NOT have additional propertiesValidationError: webpack Dev Server Invalid Optionsoptions should NOT have additional properties一般原创 2021-09-30 02:32:22 · 3035 阅读 · 1 评论