- 博客(41)
- 收藏
- 关注
RSS订阅原创 在next.js的13.2.1版本中使用中间件，实现禁止特定ip访问网址所有页面
在实现实现禁止特定ip访问网址所有页面时，有两种方式，一种是针对单个页面，另一种是针对整个网站。
2024-01-31 10:28:08
771
原创 nextjs中beforePopState使用
在Next.js中，beforePopState是一个可选的生命周期函数，用于在浏览器的历史记录发生更改之前执行一些操作。如果你想在Next.js中使用beforePopState，你可以在_app.js文件中定义一个名为beforePopState的函数，并将其作为props传递给你的页面组件。然后，在你的页面组件中，你可以通过props访问beforePopState函数，并在需要的地方调用它。需要注意的是，beforePopState只在客户端执行，不会在服务器端渲染时触发。
2024-01-24 20:01:35
579
原创 nextjs通过使用getServerSideProps实现登录后跳转上一页
上述代码就把context.req.headers注入了props中，可以通过context.req.headers中的referer获取到上一个页面的路由地址，从而实现登录后跳转到上一页。在实际开发中，经常遇到登录后跳转到之前的页面，可使用getServerSideProps实现该功能，getServerSideProps 是 next.js 中的一项特色功能，可以让我们在给页面设置一些初始的 props 参数。因为每次请求都是从数据库读数据重新生成页面，页面加载速度会变慢。
2023-10-08 08:04:45
645
原创 使用script标签解决跨域问题，但是只能使用get请求，且不需要获取get请求的数据，例如埋点，只需要触发后发送get请求，而不需要获取返回的参数
这样就不会有报跨域的错了，不过这样不能拿到get的数据，只能适用于get请求且不需要获取其返回的数据。在项目中，使用埋点的时候，因为使用的是外部提供的接口，所以直接请求的时候，前端会报跨域的问题，本着不麻烦后端的想法，怎怎么前端实现跨域而完全不需要后段的配合，这时候就想到了通过script标签，不受浏览器同源策略的影响的特性。使用上述方法请求的，其在控制台中网络里的请求类型为script而不是我们平常通过ajax请求的xhr类型。
2023-08-13 21:25:45
397
原创 使用Facebook Pixel 埋点
在投放广告的时候，一般需要知道广告的产生的效益，所以就需要通过埋点去记录，这里使用到的是Facebook Pixel。CompleteRegistration是标准事件，指注册成功事件。
2023-08-13 21:08:43
1400
原创 react当我们有两个完全不相关的组件想要通信时，就可以利用这种模式，其中一个组件负责订阅某个消息，而另一个元素则负责发送这个消息。使用Context配合
使用 useEffect 包装下，否则会在服务端渲染，而服务端又没有浏览器对象，所以会报错，导致打包失败，下面代码中，注释的代码就会报找不到document，所以使用useEffect包装下创建了一个自定义hook勾子 useEvent，这个钩子创建一个变量用于接收EventBus这个类，为什么要在useEffect 创建EventBus呢，因为只有在useEffect中才能拿到浏览器对象，然后在返回变量。然后导出这个useEvent。
2023-07-24 19:30:45
633
原创 elementui el-upload一次请求上传多个文件
方法，从而实现多个文件上传，但是有时候，我们希望，当上传多个文件的时候，只给后端发送一次请求，这样就需要先把el-upload的自动上传改为手动上传。注意上传文件接口的请求头中headers中的’Content-Type’要为’multipart/form-data’在使用element中的el-upload是时，当我们要上传多个文件时，el-upload内部会多次调用。使用自定义上传的接口，而不是使用*this.$refs.upload.submit();
2023-06-19 21:09:22
7113
原创 在循环数组中使用随机函数作为key值引发的问题
在项目中使用函数循环的时候，因为数据中的字段都是重复了，然后突然好奇，如果使用随机函数生成的随机数是否可行，所以就使用随机函数生成一个随机值作为key。是因为当输入一个字符后，会触发模板编译，导致触发了随机函数，随机函数生成了一个新的随机数，vue就会重新渲染一个input框，所以就会自动失去焦点了。在循环中，创建了input输入框，当刚输入一个字符后就会自动失去焦点，导致不能连续输入。
2023-06-19 20:42:09
139
原创 自定义合并el-table表头的行和列
需要使用到header-cell-style的方法，它是表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。而在项目中的需求就是需要实现，红框处两个地址的下面只需要一个省份。
2023-05-07 18:35:00
398
原创 在项目中全局引入scss的变量，以及如何在js中使用scss变量
在项目中发现已经在main.js中全局引入了样式文件，但是对于scss中的变量还是不能在页面中直接使用，还需要再具体的页面中导入。上面这种方式比较麻烦。可以通过在vue.config.js中配置后只需要在main.js中引入就可以全局使用了。下图在main.js中引入了scss的样式文件。必须在具体页面中引入才能正常使用。
2023-05-07 18:13:27
2451
1
原创 使用git clone 拉去git仓库地址时报错 Failed to connect to github.com port 443: Timed out
使用git clone 拉去git仓库地址时报错 Failed to connect to github.com port 443: Timed out
2023-04-16 10:03:11
569
原创 在vue中使用变量给模板中的图片地址赋值失效问题，应使用require或import引入图片
在vue中使用变量给模板中的图片地址赋值失效问题，应使用require或import引入图片
2023-02-17 14:24:32
639
原创 element表格el-table组件实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题
element表格el-table组件实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题
2022-09-30 17:47:20
15067
9
原创 vue中子组件需调用父组件通过异步获取的数据，而子组件不能及时获取到异步数据问题
vue中子组件需调用父组件通过异步获取的数据，而子组件不能及时获取到异步数据问题
2022-09-29 11:33:10
1337
原创 el-table使用合并行和列功能
通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。
2022-09-19 09:40:40
5016
原创 vscode国际化插件i18n Ally配置
在Vue.js中使用Vue I18n来实现国际化多语言设置，以往都是手动去找到文件写翻译，比较繁琐复杂。通过使用这个插件直接在页面中就可以构建和自动化翻译。
2022-08-17 17:59:52
3265
原创 element中的table使用展开行功能，特定条件下才能点开展开行以及点击整行展开，以及使用合计不显示问题
在使用element中的table使用展开行功能时，官网给的示例中每行都可以展开，以及只能通过点击展开图标才能展开，但是需求中是点击整行展开，以及只有某些符合条件的行才有展开功能如下图所示通过设置type=“expand”和Scopedslot可以开启展开行功能，el-table-column的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的Scopedslot相同。...
2022-07-21 17:37:23
4197
2
原创 uni-app微信小程序单个页面横屏以及使用uni-datetime-picker、popup出现弹窗后还能滚动页面的问题
uni-app微信小程序单个页面横屏以及使用uni-datetime-picker、popup出现弹窗后还能滚动页面的问题。catchtouchmove以及pageOrientation属性
2022-06-28 17:23:35
2006
原创 在vue项目中使用文字转语音播报功能
在vue项目中使用文字转语音播报功能SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等。SpeechSynthesisUtterance基本属性
2022-06-07 11:15:42
1282
原创 promise
作用：Promise是解决异步编程的一种方案，比传统的回调函数和事件更加合理和强大，以往使用回调函数容易造成回调地狱。Promise是一个容器，保存着某个未来才会结束的事件的结果。特点：Promise对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）。只有异步结果决定当前是哪种状态，任何操作都无法改变这个状态一旦状态，就不会再变，任何时候都是这个结果。Promise对象的状态改变，只有两种可能
2022-03-17 18:10:09
59
原创 打印问题，需求是跳转到打印页面时直接弹出浏览器打印模式弹窗，当用户点击打印或取消打印时再关掉该打印页面并且返回到目标窗口源（父）页面并重载页面数据
打印问题，需求是跳转到打印页面时直接弹出浏览器打印模式弹窗，当用户点击打印或取消打印时再关掉该打印页面并且返回到目标窗口源（父）页面并重载页面数据afterprint
2022-03-11 17:41:26
2653
原创 使用table时，根据tb的多少而自适应的撑开整个表格
在项目中，有个需求就是用户可以选择其中的几个字段进行显示隐藏，也就是说tr中的td个数是不确定的，但是整个table确是固定宽度的，这就需要不管有几个td都要自适应去占满整个表格。如下图其实table本身是支持这种自适应的，但是有时候表格稍微复杂了，然后自己也不懂其中的一些特性就容易特别作死的自己去根据显示隐藏的个数手动去算每个表格所占的colspan属性，算到薅头发。例如下表格就是因为用户自定义选择几个字段不显示时而造成的页面乱了正常应该是下图注意红框中的字段是用户可以选择显示或隐藏的字段，而
2021-11-26 16:02:19
1515
原创 关于z-index层级优先级问题
在项目中遇到一个bug就是当点击某项出现下拉框时，点击除下拉框的任意处关闭下拉框，实现逻辑是出现下拉框的时候出现一个全屏的透明蒙层，这个蒙层的使用固定定位，z-index也设置到了999但是却发现右边的操作按钮的层级却要比这个全屏蒙层还要高，而这个操作按钮仅仅设置了一个相对定位而且也没有设置z-index。然后尝试着去掉操作按钮的相对定位发现是解决了操作按钮层级比蒙层还要高的问题，但是却一直不知道其原因。直到在网上找了一通发现，z-index还有一个规则从父（祖先）规则如果 A, B 节点都定义了
2021-08-20 17:22:44
716
2
原创 使用element的侧边菜单组件跳转报错问 Loading chunk {n} failed问题
使用element的侧边菜单组件跳转时一直报错，点击广告位列表时路由跳不过去，且报错路由规则片段{ path: '/course', name: 'course', component: () => import(/* webpackChunkName: 'course' */ '@/views/course/index.vue') }, { path: '/advert-space', na
2021-07-31 18:02:34
210
原创 git 各种奇怪报错合集
当刚创建远程仓库提交代码到git push -u origin main时报错fatal: unable to access 'https://github.com/ding-hao/edu-boss-fed.git/': OpenSSL SSL_read: Connection was reset, errno 10054然后网上找到解决方法为git config --global http.sslVerify "false"但是还是报错，然后试着把提交命令改为git push origi.
2021-07-18 17:03:16
126
原创 使用事件委托绑定document未触发问题，以及如何查看某个元素是否绑定了事件
在项目中使用一个组件发现一个bug，当点击多条分录时会同时出现多个弹窗，正常情况下是点击弹窗外任意地方都会把关闭弹窗，从而始终只展示一个弹窗然后看组件代码发现是通过给document绑定一个事件把整个弹窗给关闭发现并没有效果，还以为是没给document绑定上事件，所以一直再找原因，到最后才发现是事件机制的原因，因为这是绑定在document上而发现在使用这个组件时他的祖先级组件不能使用.stop阻止冒泡，导致未触发该事件。给绑定document或其他需要事件冒泡的时候要注意别阻止默认事件。另
2021-06-09 09:16:56
385
原创 position：fixed固定定位失效问题（不是以可视窗口定位）
在项目中遇到一个问题，明明使用的定位是fixed定位，应该按照元素相对于屏幕视口（viewport）的位置来指定元素位置，但是却发现而是以他的祖先盒子为参照的上图中的list-box下拉框虽然是固定定位但是以他的祖先盒子类名为content的弹窗为参照的，所以导致下拉框错位了，正常应该是如下图那是什么原因影响到他的呢，之前一直以为固定定位就一直是以可视区域为参照进行偏移的，其实不然，它还会受一些其他因素的影响fixed ：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口
2021-05-22 22:45:20
2787
原创 解决label标签包裹input后点击事件触发两次问题
通常在为了使用户体验更好，在一些复选框或单选框和输入框中，会使用label包裹input这样用户只需点击后面文字，即可选中当前项。代码结构如下<ul class="table-main " @mouseenter.stop="myMouseenter(index)" :class="{'table-main-active':mouseIndex==index?true:false, 'table-main-actived':selectIndexArr.indexOf(index)!=-1
2021-03-03 17:32:34
1420
1
原创 下载包时出错的解决方式
在安装依赖包的时候有些资源是在国外的网站，所以下载取来容易失败或者特别慢，可以使用以下方式试着解决，一下步骤依次使用，若操作到第一步就解决了则不需要继续操作后面步骤了一.设置 npm 镜像源# 设置为国内镜像源npm config set registry http://registry.npm.taobao.org# 查看当前镜像源npm config get registry# 恢复原来镜像源npm config set registry http://registry.npmjs.
2021-01-31 11:49:32
4477
转载 vue.nextTick()方法的使用详解
定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，<template> <div class="hello"> <div>
2021-01-26 17:20:29
216
原创 Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
项目中为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box，元素的的尺寸等于 width/height。参考：MDN...
2021-01-20 20:39:20
232
原创 前端打印界面分页问题，以及当一个表格数据过多自动分页时，出现断行问题即一行数据被切割在两页纸上
在做一个打印功能时，当一个表格数据过多而不能显示时，浏览器会自动进行分页处理，但是当一页显示不下一个表格时，自动分页会把一行数据暴力的切割显示在两页纸上。问题如下图：可以使用page-break-inside 属性用于设置是否在指定元素中插入分页符。有三个参数值描述auto默认。如果必要则在元素内部插入分页符。avoid避免在元素内部插入分页符。inherit规定应该从父元素继承 page-break-inside 属性的设置。注意： 您不能对绝对定位的元
2020-11-24 17:56:09
6205
2
原创 常用正则以及处理数据格式小方法
数字千位符//格式化数据 toFormatData(num) { if (num == '' || num == undefined) { return ''; } var data = parseFloat(num.toString().replace(/\,/g, "")); if (!isNaN(data)) { var .
2020-10-26 14:30:14
218
原创 css伪元素:before和:after用法以及在img中使用失效问题
伪元素是一个附加至css选择器末的关键词，允许你对被选择元素的特定部分修改样式。例如：使用伪元素after在类选择器box内容后面添加一些内容页面显示：在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 < iframe > 元素，可能具有自
2020-10-14 23:01:15
1484
原创 关于vue页面没有响应式更新的问题
关于vue页面没有响应式更新的可能原因和解决方法没有初始化该属性，后续添加的属性不是响应式的，可以使用set进行响应式的设置属性。数组使用下标的方式设置的值也是没有响应式的，因为直接通过下标操作数据Vue没法给他设置getter/setter，可以通过push等数组方法进行操作数据更新了computed却没触发，很可能是因为上述两种不当方法操作数据的，导致数据不是响应式的，就无法触发computed。有时使用上述不当方法进行操作数据后computed还能更新，是因为你computed所依赖的其他属
2020-09-17 15:35:19
1621
原创 iconfont字体图标的使用
登录iconfont后选择需要的图标添加到购物车点击购物车点击下载代码会下载一个压缩包，把他进行解压，使用字体图标文件我们直接使用到的只有iconfont.css这个文件，iconfont.css依赖其他是字体图标文件把其他字体文件统一放到font文件夹中，方便管理引入字体图标使用iconfont.css配合示例食用，效果更佳...
2020-09-01 11:50:30
2528
原创 一些数组/对象方法的巧妙/组合用法
filterfilter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。当过滤的是多维数组时，filter应该使用循环里面,你需要以那里的数据作为过滤条件，那么就在他所在的数组那个层级进行该数组过滤var ages = [32, 33, 16, 40];/** * @item 数组的每一项 * @index 索引 * @arr 过滤的数组本身 * 返回值是一个符合过滤条件的数组，不会对空数组进行过滤，也不会改变原数组 */const filterA
2020-08-29 11:07:04
108
原创 get请求通过路由传参时参数有#号等特殊字符串时，造成传参错误
前段时间遇到使用get方法通过url拼接方式传递过去的参数打印出来是没问题的，单传给后端却死活不对。原来是因为特殊字符的原因。这些特殊字符不能直接通过url地址传过去，必须要进行转义成十六进制值。转义成十六进制值var str = 'hh#kk%kkk&'; str=str.replace(/\%/g,"%25"); str=str.replace(/\#/g,"%23"); str=str.replace(/\&/g,"%26"); // hh%23kk%2
2020-08-06 12:00:23
1554
原创 每天一道面试题系列
20200714 阅读下面代码，写出打印结果（只考虑浏览器环境）function Foo() { getName = function () { console.log(1); } return this}Foo.getName = function () { console.log(2);}Foo.prototype.getName = function () { console.log(3);}var getName = functi
2020-07-15 15:56:27
241
原创 类似淘宝商品放大镜功能，以及offsetX、offsetY造成的鼠标移动时阴影部分会一闪一闪的不断回到左上角问题
效果：效果是当鼠标移入的时候小图出现一小块是以鼠标为中心的遮罩层，鼠标在小图移动时大图放大显示遮罩层所在的局部，且遮罩层不能超出小图位置。如下图所示：html部分从代码可知大图和小图是分别两个img标签图片其实也是一样的，只不过尺寸不一样<body> <div class="box"> <!-- 小图 --> <div class="left"> <div class="shadow
2020-07-13 15:28:17
846
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人