目的：实现当组件/DOM元素进入浏览器可视区域再发送Ajax请求加载数据。 我们可以使用 @vueuse/core 中的 useIntersectionObserver 来实现监听进入可视区域行为，但是必须配合vue3.0的组合API的方式才能实现。1.安装@vueuse/corenpm i @vueuse/core@5.3.0
// 安装依赖包的时候要注意版本，有时最新版本会与项目之间有冲突2.
转载
2024-10-22 01:25:59
133阅读
系统开发中按钮级权限控制也是非常重要的功能之一，可以严格控制不同角色用户所拥有的功能权限。自定义v-permission指令首先可以通过vue的自定义指令来控制按钮（div，link也阔以）等的显示与否以及是否禁用状态。具体可查看官方文档vue自定义指令。/**
* 定义vue permission指令
*
* el：指令所绑定的元素，可以用来直接操作 DOM
* binding：一个对
转载
2024-05-29 10:15:23
851阅读
目录一. AJAX基础1.1.AJAX简介1.2.第三方数据接口1.3.AJAX实例1.4.AJAX的异步特性二. axios框架2.1.get方式与post方式请求2.2.axios的get方式请求2.3.axios的post方式请求2.4.axios响应数据结构2.5.axios的全局配置2.6.axios拦截器三. 在Vue-cli中使用axios四. 在Vue-cli中实现跨域访问4.1.
产品说，出于安全考虑，用户长时间不操作，就回到登录页面，让用户重新登录，就像银行的app一样。本文就记录一下实现这种效果的两种方式，分别是前端控制和后端控制，各有细节及适用使用场景前端控制（方式一）思路首先，用户长时间不操作具体表现形式是啥？其实就是事件是否长时间没有被触发执行。比如用户长时间不操作，就没有鼠标点击(click)事件、鼠标滚轮(mousewheel)事件、鼠标移动(mousemov
在 Vue 组件中，有几种常见的方式可以发送请求，以下是在 methods、mounted、computed 和 watch 中发送请求的对比：方式适用场景发起请求时机数据处理和更新方式methods用户操作触发的事件、组件内部方法调用手动触发，如按钮点击、方法调用等通过回调函数处理响应数据，并手动更新
转载
2024-10-28 10:56:39
61阅读
1、Vue上线打包移除console再发开阶段我们为了方便输出都会利用大量的console，但是在项目上线以后我们是不需要的，因此我们就要想办法去除，这里用到了两个方法一个是babel-plugin-transform-remove-console，一个是terser-webpack-plugin1.babel-plugin-transform-remove-console1.1.1.
vue的request请求封装
原创
2023-02-24 12:22:46
353阅读
export const getConsumablesInfoReq = (current, size, queryVo) => { return request({ url:'/api/manage/list', method:'get', params:{ current, size, ...q
文章目录 代理改变了什么？
为什么需要完整路径？
Proxy-Connection 是什么？
最后
代理改变了什么？ 为了彻底弄清这个问题，我们先来看下设置浏览器代理之后，HTTP 请求头有那些变化。下面分别是设置代理前后访问同一 URL 的请求头（省略了无关内容）： GET / HTTP /1 .1
要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)1.首先先安装axiosnpm install axios -S2.安装成功后，在src目录下新建一个axios文件夹，用来存放封装接口的js文件, 在axios/axios.js文件中写入代码：import Vue from 'vue'
import
讲到 Vuex 状态管理的内容，先来简单的回顾一下 Vuex ，Vuex 中有五个核心属性：state 、getter、mutation、action、module 。state: 存放数据状态，不能被直接的修改；getter: 基于 state 的计算属性；mutation: 直接更新 state 的多个方法的对象；action: 通过 mutation 间接更新state；module：分模块
转载
2024-08-05 13:11:42
67阅读
前言在任何一个平台中，如果需要增加用户黏度，除了用户需要的基本内容外，用户登录注册提交信息也是非常重要的一环，可以了解用户基本信息，用户喜欢等。 抛出前后端混合开发外，vue可以轻松的实现路由拦截。Vue Router对路由集中统一管理，所以我们可以在main.js中添加如下代码，对所有路由进行拦截：router.beforeEach((to, from, next) => {
转载
2024-10-22 07:03:01
69阅读
1、active-class是哪个组件的属性？嵌套路由怎么定义？答：vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？ 答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id 3、vue-router有
数据请求### 数据请求在前端开发中的使用有两种形式使用原生javascript提供的数据请求ajax( 四部曲，一般需要我们结合Promise去封装，使用不是很便利，但是效率很高 )fetch( 本身结合了Promise,并且已经做好了封装，可以直接使用 )
使用格式：使用别人封装好的第三方库 目前最流行的，使用率最高的是 axiosvue中我们最常使用的vue 1.x 的版本提供了一个封
转载
2024-06-18 14:13:41
364阅读
#vue# 超级详细步骤！vue项目封装网络请求接口思路及方法一. 后端接口文档的解析二. 接接口之前的准备工作（host）（1）host概念（2）host5大特点（3）在哪里设置？怎么设置？三. 接口的工程化封装（1）目的（2）接口复用（3）配置目录详解（4）域名地址拼接详解四. 几种接接口的情况（1）在当前页的网络请求（2）在不同页的网络请求 一. 后端接口文档的解析当我们拿到后端同事的接口以
转载
2024-05-01 09:23:16
148阅读
68.vue如何优化首屏加载速度？问题描述：在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。几种常用的优化方法：
1. 路由的按需加载
2. 将打包生成后 index.html页面 里面的JS文件引入方式放在 body 的最后
3. 用c
转载
2024-10-12 12:05:33
48阅读
初始化对接端台API上一篇了完成了项目初始化，但是那个只是把 vue-admin-template 模版简单的初始化了一下，新增了tagsview标签快捷导航栏,其他的没什么变化。这一篇了就完成了和后端的Jwt token认证，登录，退出，基本的table list接口数据请求。首先看看效果。其实看起来和第一篇的初始化效果差不多，唯一的区别是，第一篇初始化接口还是用的Mock接口， 而这一篇是对接
转载
2024-09-06 11:18:12
192阅读
1. 计算属性computed 的说明： 计算属性computed是根据data中自己已有的属性 计算得到的一个新的属性，创建计算属性，通过computed关键字 他是一个对象，计算属性是基于他们的以来进行缓存的，computed 对象里面是计算属性，它是一个函数 但是可以当做属性来使用 实例如下： &nbs
1、前言最近在做毕业设计，我是做后端的，前端并不是很懂，看vue这个框架看了近两个礼拜才有点入门的感觉，所以这篇文章写的可能不怎么好，仅作记录，有什么不对或不足的地方欢迎大神指出。2、问题做一个登录界面，我选择的是用token进行验证登录，我用的前端框架是Vue.js 和 element-ui,如何在vue 中使用token进行验证登录3、思考1、利用token进行验证登录，用户进行登录操作时，后
转载
2024-04-01 13:52:36
1317阅读
2020.7.20今天继续开发前端vue。遇到了一个问题：在前后端分离的情况下，本地启动了前端项目与后端项目后，由于端口不一致的问题，导致前端调用后端接口时报错403，跨域，没有权限访问。vue跨域解决方法（本地测试时）：1.可以在后端Controller上加注解，@CrossOrigin，这样后端就支持跨域访问了;2.在前端vue项目的【项目/vue.config.js】中的"devServer
转载
2024-07-22 18:22:42
535阅读
