哈利路亚_-CSDN博客

原创 vue2中无法监听数组、对象的变化情况

数组vue2中可以监听数组变化直接给数组赋值通过响应式数组方法改变数组响应式数组方法 : push(),pop(),shift(),unshift(),splice(),sort(),reverse()非响应式数组方法 : slice(),filter(),concat()vue2中无法监听数组变化通过数组索引改变数组元素的值改变数组的长度对象vue2中可以监听对象变化通过对象.属性名修改对象的值vue2中无法监听对象变化通过对象.属性名添加对象的值

2021-09-22 09:37:47 878

原创 vue中判断元素是否进入“视口“

1.获取DOM位置，手动判断domRect = element.getBoundingClientRect();DOMRect 它是包含整个元素的最小矩形，包括其填充和边框宽度。2.使用useIntersectionObserver()作用 : 就是依靠h5的直接判断元素进入可视区域的比例来实现监听进入可视区域行为使用方法 : 1.下载@vueuse/corenpm i @vueuse/core2.使用useIntersectionObserver方法c

2021-09-22 09:36:04 2403

原创 v-model在vue2与vue3中的区别

vue2在vue2中传递一个value属性监听一个input事件<Son v-model="msg" />  <Son :value="msg" @input="val=>msg=val" />`不能多次使用但可以借助.sync属性完成vue3在vue3中传递modelValue属性,监听一个update:modelValue事件<Son v-m

2021-09-22 09:33:21 402

原创基于vue实时搜索的关键字高亮显示

分析：观察api的返回结果，我们发现axios在处理接口返回值时，默认会自动给包裹一个data字段，这导致我们每次在业务模块获取数据都需要写res.data.data.xxxx解决：返回有效数据时，直接返回res.data// 响应拦截器service.interceptors.response.use(response => { if (response.data.success) { // 操作成功+ return response.data ..

2021-09-22 09:29:50 802

原创 vue中如何在父组件中修改子组件中的数据

原理父组件修改子组件数据步骤给子组件添加 ref 属性<组件名 ref="xxx"/>通过this.$refs.子组件引用.子组件数据=新值。 this.$refs.xxx.子组件数据 = 新值

2021-09-22 09:24:24 2969 1

原创解决获取有效数据代码冗余的问题（脱壳）

分析：观察api的返回结果，我们发现axios在处理接口返回值时，默认会自动给包裹一个data字段，这导致我们每次在业务模块获取数据都需要写res.data.data.xxxx解决：返回有效数据时，直接返回res.data// 响应拦截器service.interceptors.response.use(response => { if (response.data.success) { // 操作成功+ return response.data }

2021-09-22 09:21:47 289

原创跨域的原因及解决方案

如何判断跨域请求在A地址（发起请求的页面地址）向B地址（要请求的目标页面地址）发起请求时，如果A地址和B地址的协议，域名，端口不全相同，则说明请求是跨域的跨域请报错的原因请求是跨域的，并不一定会报错。普通的图片请求，css文件请求是不会报错的跨域请求出现错误的条件：浏览器同源策略 && 请求是ajax类型解决方案1.前端用JSONP方式去发请求（jsonp不是ajax请求）2.后端写代码(CORS)在响应中添加必要的响应头，让响应回来之后浏览器不报错

2021-08-30 10:45:53 129

原创 Vue登录失败但不报错的处理方法

问题：登录时，填写错误的用户名密码，没有错误提示(没有进入catch分支)axios内部的报错机制：如果本次请求得到的响应的状态码不是2开头的（如：400，500），就会主动抛出错误。如果本次请求出现网络错误，就会主动抛出错误当我们提供错误的用户名和密码时，本次请求的状态码是正常的（但是：success字段是false），也没有网络错误，所以axios并不会报错。如下图示解决思路：在响应拦截器中，根据本次请求返回的数据中的success字段值，来决定是否主动抛出错误。

2021-08-30 10:29:46 2233

原创退出再登录能回到原先页面功能

1.退出系统时回传当前路径目标：在退出时，跳回login时，回传当前的路径logout() { // 弹层询问，是否退出 this.$confirm('你确定要离开吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(async() => { // 确认 //

2021-08-30 10:28:12 690

原创路由导航守卫-如何实现登录跳转限制

目标登陆用户不能再次回到login没有登陆就不能访问除login之外的其它页思路白名单：那些不需要token就可以直接访问的页面import router from './router'import store from '@/store'// 全局前置路由守卫// to: 要去哪个页面// from:从哪里来// next:它是一个函数。// 如果直接放行 next()// 如果要跳到其它页 next(其它页)const whiteLis

2021-08-30 10:26:21 581

原创 token失效401处理

场景token作为用户的关键令牌信息不是长久有效的，一般都会有一个失效时间(由后端来决定什么时长后失效)，如果超过失效时间，当前token就不能再作为用户标识请求数据了，这时候我们需要做一些额外的失效处理处理方法后端：收到接口请求时，检查当前token是否失效，如果token已经失效，返给前端一个约定好的状态码 10002前端：在响应拦截器中，分析接口的返回值，如果状态码为10002，则进行token失效操作// 响应拦截器中// 1. 根据后端返回数据判断本次操作是否成功,

2021-08-30 10:25:02 7135

原创如何通过VUE请求拦截器添加token

原理axios有一个请求拦截器机制，所有的axios请求在发出来之前都会经过请求拦截器, 在请求或响应被 then 或 catch 处理前拦截它们检查vuex中是否有token信息，有就直接加在headers中。代码实现// 在普通的.js模块中去使用store需要import导入import store from '../store/index.js'// 添加请求拦截器instance.interceptors.request.use(function (config) {

2021-08-30 10:22:23 2530

原创如何将token存到vuex中

步骤流程具体实现在login/login.vue中调用actions方法async doLogin () { try { await this.$store.dispatch('userLogin', this.user) //调用actions方法 this.$toast.success('登录成功') } catch (err) { console.log(err) this.$toast.fail('登录失败') }}在s

2021-08-30 10:20:53 1469

原创 Vue中如何给router-view设置key值

key的作用由于 Vue 会复用相同组件, 所以当同一个组件不同路由发生跳转时将不在执行created, mounted之类的钩子函数 , 设置key之后会在虚拟DOM阶段比对跳转前后得key值,如果不同则重新销毁重建页面key的属性值key属性值为 $route.path<router-view :key="$route.path"/> 1.当路由地址变化为 /category/sub1 ==> /category/sub2时由于这两个路由的$rou

2021-08-30 10:18:59 3495

原创 Vue中如何解决路由缓存问题

问题描述问题 : 当两个地址都匹配同一个组件时 , 路由地址发生变化内容并没有跟着更新原因 : 这个组件在路由切换的过程中，并没有重新销毁生成不会重复执行setup解决办法方法1 : 给router-view 添加key属性<router-view :key="$route.fullPath"/> 方法2 : 使用watch监听id变化重新拉取接口// (对象|数组|函数, (newVal, oldVal) => {}, {immediate: true|false

2021-08-30 10:15:17 1306

原创 vuex用法总结

原理概念Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。特点集中式管理数据状态方案 (操作更简洁)数据变化是可预测的 (响应式)使用场景实现多组件状态管理, 即多个组件之间需要数据共享时需要使用vuex, 比如用户的登录状态，用户名称，头像等等实现步骤安装vuex使用npm下载 : npm install vuex --save 使用vue-cli构建项目时选

2021-08-30 10:09:07 302

原创 VUE项目中axios的封装

需求 : 在项目中如果将axios请求全都放在vue组件中会造成代码冗余而且不利于复用,就需要对axios请求代码进行封装步骤 : 主要分为两次封装一次封装在request.js文件中设置基地址 ; 二次封装是在对应功能模块的js文件中封装该模块所需的所有axios请求具体实现一次封装 : 在src目录下新建utils/request.js文件导入axios模块用axios自带的create方法创建一个新的axios实例并将基地址赋值到baseURL上(baseUR...

2021-06-04 21:06:23 277

weixin_37834123的博客