- 博客(45)
- 收藏
- 关注
RSS订阅原创 前端FormData上传file文件时 payload丢失文件问题
一个浏览器奇怪的特性，当该文件的来源是由用户选择时，不论附件多大payload不会隐藏FormData，但是如果file文件是通过代码生成的，例如由blob在通过new File([blob], fileName)生成，如果file大于10M，浏览器控制台netwoek的payload的FormData入参就会整个被隐藏，并不会影响请求执行，而且此时respone里也是隐藏的，其实请求正常成功了。FormData传输file文件时，超过10M payload丢失FormData问题。
2024-11-20 19:21:25
155
原创 vue-router router实例方法 getMatchedComponents、matched 的使用
vue-router router实例方法 getMatchedComponents、matched 的使用
2022-12-16 14:50:11
1870
转载 rel=external nofollow和rel=noopener noreferrer
rel=external nofollow和rel=noopener noreferrer
2022-12-16 10:36:36
138
原创 vue-router导航钩子beforeRouteEnter 内获取即将进入的组件实例对象
vue-router导航钩子beforeRouteEnter 内获取即将进入的组件实例对象
2022-12-14 16:38:34
801
原创 vue-router路由跳转的onComplete、onAbort函数使用方法
vue-router路由跳转的onComplete、onAbort函数使用方法
2022-12-13 17:43:21
1096
原创 vscode编辑器 取消import自动排序
编辑前端代码时，经常会遇到main.js里面的import在保存之后顺序会被自动排序，但是我们并不想要让它改变顺序，此时，我们可以选择使用文本编辑器打开它保存，但是这样太麻烦，下面的办法可以一劳永逸的解决该问题。...
2022-08-02 10:56:03
4633
原创 升级谷歌浏览器到90版本后导致设置set-cookie失败，登录接口成功但还是401问题
如题，现象如图：登录接口成功，但是setcookie失败，samesite处有叹号提示，只出现在前端本地调试，前端发到服务器就正常。下图为感叹号里的翻译：问题原因：谷歌的90版本把samesite的默认值从none改成了lax，导致了setcookie失败，并且90版本不支持更改samesite的默认值，必须降回89版本才可以修改默认值。推荐解决方式：降回89版本，谷歌浏览器地址栏输入：chrome://flags/找到：SameSite by default cookies 设置禁用即可
2021-06-07 11:10:54
2474
1
原创 JS异步事件轮询
JS异步事件轮询本文参考自【javascript】异步-事件轮询-任务队列-工作队列（job queque）1.什么是异步事件轮询？以下为个人的抽象不严谨理解，仅供参考，深入学习请参考上面链接js在运行是有异步的事件，当读取到异步事件时并不会执行该异步函数，而是将其暂时挂起，并将其添加到一个异步事件队列里面，等待同步执行的程序执行完毕，在回过头来按顺序一个一个执行异步程序，本文的目的就是来探讨异步事件的加载顺序的。注意，异步事件与异步事件之间也有区别，并不是按顺序一个个向异步事件队列里面塞，不是按先
2021-03-28 23:24:02
860
原创 ES6 for of 的使用
ES6 for of 的使用一、for of多用于循环遍历数组，因为他能直接获取数组每位的值，而不是像for in一样先获取索引再获取值let arr = ['a','b','c'];for(let item in arr){ console.log(item);//a b c}二、for of 不能直接遍历对象，但通过手动实现迭代器接口是可以的该例子来自ES6系列教程第二篇–Iterator 详解var obj={ 0:"rrr", 1:"444", //实
2021-03-02 15:10:00
310
原创 ES6 Generator简单使用与抽象理解
ES6 Generator简单使用与抽象理解1.什么是Generator，及其简单用法。先看代码：注：此处并非最简结构，只是一个总结，如果你对Generator没有初步了解，建议先看恰恰虎的Generator 详解function* fun() { yield "a"; yield "b";}function* forFun() { yield "A"; yield "B"; yield "C";}function* gen(x, y) {
2021-03-02 12:01:14
186
原创 ES6 Promise的应用场景及注意事项
ES6 Promise的应用场景及注意事项场景一： 通过接口1得到的结果为参数调用接口二，使用接口二得到的数据作为参数调用接口三，最后返回接口三的数据。代码如下： //模拟接口let fakeInterface = (url, param) => { return new Promise((resolve, reject) => { setTimeout(() => { //模拟一个异步的接口 //想让哪个接口报错（走reject）就把inde
2021-02-26 14:35:14
656
原创 vue 路由懒加载
vue 路由懒加载{ path:'/about', name:'About', component:()=>{ import(/* webpackChunkName:"about" */'../views/About.vue') }}只有跳转到about时才会向服务器请求about.vue对应的独立的about.js文件，如果不用懒加载about对应的js会一起封装在app.js中，在第一次请求首页时就被获取。注：import里面的注释并不是不生效的，它决定改了生成的js的文件名
2021-02-19 23:13:31
292
转载 vue3 portal传送门
将dom元素移动到相应的位置，可以应用于使用模态框时需要将模态框dom写在body下，但是又想将模态框dom写在有逻辑关系的dom下。使用方式如下：1.在index.html的body下加入目标容器即modal-target 的div2.在vue文件 中自己想要的位置写自己的模态框dom，并用Portal包裹，并指明目标容器3.就会发现模态框的dom出现在了body下的modal-target 的div中本文转载自B站哈默...
2021-02-19 22:36:20
960
转载 css多行文字垂直居中-——table布局
css多行文字垂直居中-——table布局代码如下：效果如下：转载自B站哈默：https://www.bilibili.com/video/BV1uN411d7bs
2021-02-18 12:02:58
291
转载 CSS —— BFC清除浮动
CSS —— BFC清除浮动1.什么是BFC？Block formatting context 块级格式化上下文形成独立的渲染区域，内部元素的渲染不会影响外界2.常用触发BFC方式：display:inline-block;overflow:hidden;（不是visible都可以，hidden为常用的）float:right/left;position:absolute/fixef;(可以触发但是由于不在同一层无效果)3.为什么要清除浮动？因为块级元素看不到浮动元素，所以会占据浮动元素
2021-02-14 12:39:52
248
原创 promise 在.then中return时并不会return出.then中的data
如题，看一段代码function promise() { let promise = new Promise((resolve, reject) => { setTimeout(() => { resolve(123); }, 1000) }); return promise;}function father(){ return promise().then(a=>{ return a*100; })}console.log
2021-02-03 21:37:32
4586
原创 清空echarts内容区重新绘制
$("#echartsContent").removeAttr("_echarts_instance_").empty();//清空echarts画布 var myChart = echarts.init(document.getElementById('echartsContent')); myChart.setOption(option);
2021-01-29 14:41:32
2619
原创 return函数中异步获取到的数据———使用promise
首先来看一段错误代码。（db.query里传入的函数是异步函数）const getList = (id) => { //从数据库里拿数据 let sql = "SELECT * FROM blog WHERE id = "+id; let data; db.query(sql, (err, result) => { if (err) { console.log(err); } else { console.log(r
2021-01-25 14:59:36
3172
原创 vue事件修饰符 stop capture self prevent once @scrol.passive
vue事件修饰符 stop capture self prevent once @scrol.passive1.事件冒泡<div @click="fatherEvent"> 父元素 <div @click="sonEvent"> 子元素 </div></div>当点击子元素三个字时会发现先触发sonEvent函数，再触发fatherEvent函数，就叫做事件冒泡。2.stop事件修饰符:阻止事件冒泡<div @click="fat
2021-01-14 22:06:50
166
原创 if for try catch作用域问题
在js中，如果使用var在if、for中 声明变量则为全局变量，如果使用let const则为块级变量try catch为特殊情况在try catch中var声明变量则为全局变量，const则为块级变量，参数err为块级变量（不能把try catch想象为函数，因为如果是函数，try catch中var声明的变量全局是访问不到的，但是实际却是能访问到，但是如果不为函数，err参数并没有经过let或者const声明，因此应该在全局可以访问到，但实际是不能的，因此try catch是一个特殊情况）...
2021-01-09 20:37:01
369
原创 vue v-once只在第一次渲染时获取数据，以后数据怎么变化均无视
<div v-once>{{mess}}</div>只在第一次渲染时获取数据，以后数据怎么变化div内的文字内容均不改变，相当于一个只执行一次的{{mess}}
2021-01-09 19:40:39
859
原创 vue动态参数
<div @[event]="eventMethod" :[attr]="dynamicId">hello</div>data(){ return{ event:'click', attr:'id', }}可以动态的改变事件的触发方式与dom的自定义属性
2021-01-09 19:25:14
409
原创 echarts配置项图文介绍——xAxis
echarts配置项图文介绍——xAxis本文仅用于个人学习笔记，文中出现错误或不恰当请在评论区指出。本文仅介绍稍有难度的配置项，极其简单易懂的配置项请自行移步官网查阅文档。一、用途直角坐标系 grid 中的 x 轴，单个grid支持多个x轴。二、配置项1.gridIndex：x 轴所在的 grid 的索引，默认位于第一个 grid。例如：当grid（直角坐标系）有多个时，使用该配置项表明当前x轴对应的是哪个grid组件。2.nameLocation ：坐标轴名称显示位置。 &nb
2021-01-09 11:57:55
17040
原创 vue中v-for中: key的作用
在使用vue列表渲染v-for时，我们最好在后面加上: key，它的作用是当v-for所绑定的数据发声变化时只重新渲染变化的项，而不是重新渲染整个列表，这除了可以节约资源以外更重要的是可以避免一些bug，比如使用列表渲染生成的一个多选项，我们勾选了其中的第一项，勾选后我们在向数据的开头加入一个数据，如果我们没有使用key的话，就会发现勾选的变成我们新加的项，而之前的第一项变成了第二项，且没有被勾选。加了key之后就可以避免这个现象， key的值只要是一个唯一的数据就可以，一般情况我们使用列表渲染中的inde
2021-01-07 22:24:26
4683
3
原创 vue中v-if优先级大于v-for
vue中v-if优先级大于v-for因此在v-if中不可出现v-for中定义的属性，否则会出现报错，提示属性被使用但未定义。例如:下文代码会报错: Property “key” was accessed during render but is not at <div v-for="(value,key,index) in obj" v-if=" key!=123" : key=index>{{value}}:{{key}}:{{index}}</div>修正后的代码如下
2021-01-07 22:13:16
1293
原创 vue中 可以触发重新渲染的方法
变更方法(改变原数组)push pop shift unshift splice sort reverse替换数组(返回新数组)filter concat slicevue2不支持vue3支持的this. data[0]=123;//在vue3中会重新渲染对象中新增一个属性this. obj.name=‘MySQL’;//在vue3中会重新渲染...
2021-01-07 21:49:50
1501
原创 echarts配置项图文介绍——grid
echarts配置项图文介绍——grid一.用途grid组件用于决定直角坐标系内绘图网格的位置，ECharts 3 及其以上允许存在多个grid，代码如下二.配置项介绍（只介绍稍有复杂的配置项，其余请自行移步官网查看文档）1.containLabel：grid 区域是否包含坐标轴的刻度标签。（用于避免坐标轴上名称过长导致溢出现象）2.backgroundColor ：网格背景色，默认透明。3.tooltip:本坐标系特定的 tooltip 设定。(鼠标移动到坐标轴上触发的提示如下图)(1
2021-01-04 22:17:10
7783
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人