vue3.0-axios拦截器、proxy跨域代理
目录
1. vue-cli
1)vue-cli
2)安装vue-cli
①解决Windows PowerShell不识别vue命令的问题
3)创建项目
4)基于vue ui创建vue项目
5)基于命令行创建vue项目
2. 组件库
1)vue组件库
2)vue组件库和bootstrap的区别
3)最常用的vue组件库
4)ELement UI
①在vue2的项目中安装element-ui
②引入element-ui
③完整引入
④按需引入
⑤把组件的导入和注册封装为独立的模块
3. axios拦截器
1)在vue3的项目中全局配置axios
2)在vue2的项目中全局配置axios
3)拦截器
4)配置请求拦截器
①请求拦截器-Token认证
②请求拦截器-展示Loading效果
5)配置响应拦截器
①响应拦截器-关闭Loading效果
4. proxy跨域代理
1)接口的跨域问题
2)通过代理解决接口的跨域问题
3)在项目中配置proxy代理
1. vue-cli
1)vue-cli
vue-cli(vue脚手架)是vue官方提供的、快速生成vue工程化项目的工具。
官方首页:Vue CLI
特点:
- 开箱即用
- 基于webpack
- 功能丰富且易于扩展
- 支持创建vue2和vue3的项目
2)安装vue-cli
vue-cli是基于Node.js开发出来的工具,因此需要使用npm将它安装为全局可用的工具:
①解决Windows PowerShell不识别vue命令的问题
3)创建项目
4)基于vue ui创建vue项目
步骤1:在终端下运行vue ui命令,自动在浏览器中打开创建项目的可视化面板:
步骤2:在详情页面填写项目名称:
步骤3:在预设页面选择手动配置项目:
步骤4:在功能页面勾选需要安装的功能(Choose Vue Version、Babel、CS预处理器、使用配置文件)
步骤5:在配置页面勾选vue版本和需要预处理器:
步骤6:将刚才所有的配置保存为预设(模板),方便下一次创建项目时直接复用之前的配置:
步骤7: 创建项目并自动安装依赖包:
vue ui的本质:通过可视化的面板采集到用户的配置信息后,在后台基于命令行的方式自动初始化项目:
项目创建完成后,自动进入项目仪表盘:
5)基于命令行创建vue项目
步骤1:在终端下运行vue create demo2命令,基于交互式的命令行创建vue的项目
步骤2:选择要安装的功能
步骤3:使用上下箭头选择vue的版本,并使用回车键确认选择
步骤4:使用上下箭头选择要使用的CSS预处理器,并使用回车键确认选择
步骤5:使用上下箭头选择如何存储插件的配置信息,并使用回车键确认选择
步骤6:是否将刚才的配置保存为预设
步骤7:选择如何安装项目中的依赖包:npm
步骤8:开始创建项目并自动安装依赖包:
2. 组件库
1)vue组件库
开发者可以把自己封装的vue组件整理、打包、并发布为npm的包,从而供其他人下载和使用,这种可以直接下载并在项目中使用的现成组件,就叫做vue组件库。
2)vue组件库和bootstrap的区别
二者之间存在本质的区别:
- bootstrap只提供的纯粹的原材料(CSS样式、HTML结构以及JS特效),需要由开发者做进一步的组装和改造
- vue组件库是遵循vue语法、高度定制的现成组件,开箱即用
3)最常用的vue组件库
PC端:
- ElementUI:Element - The world's most popular Vue UI framework
- View UI:iView - A high quality UI Toolkit based on Vue.js
移动端:
- Mint UI:Mint UI
- Vant:Vant 3 - Mobile UI Components built on Vue
4)ELement UI
Element UI是饿了么前端团队开源的一套PC端vue组件库。支持在vue2和vue3的项目中使用:
- vue2:Element - The world's most popular Vue UI framework
- vue3:一个 Vue 3 UI 框架 | Element Plus
①在vue2的项目中安装element-ui
运行终端命令 npm i element-ui -S
②引入element-ui
开发者可以一次性完整引入所有的element-ui组件,或是根据需求,只按需引入用到的element-ui组件:
- 完整引入:操作简单,但是会额外引入一些用不到的组件,导致项目体积过大
- 按需引入:操作相对复杂一些,但是只会引入用到的组件,能起到优化项目体积的目的
③完整引入
在main.js中写入以下内容:
import Vue from 'vue'
import App from './App.vue'// 1.完整引入element ui的组件
import ElementUI from 'element-ui'
// 2.导入element ui组件的样式
import 'element-ui/lib/theme-chalk/index.css'// 3.把ElementUI注册为vue组件,注册之后即可在每个组件中直接使用element ui的组件
Vue.use(ElementUI)Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')
④按需引入
借助babel-plugin-component,可以只引入需要的组件,以达到减小项目提及的目的。
- 安装babel-plugin-component:npm install babel-plugin-component -D
- 修改根目录下的babel.config.js配置文件,新增plugin节点:
module.exports = {presets: ['@vue/cli-plugin-babel/preset'],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]] }
- 只希望引入部分组件,比如Button,那么需要在main.js中写入:
import { Button } from 'element-ui'Vue.use(Button)
⑤把组件的导入和注册封装为独立的模块
在src目录下新建element-ui/index.js模块,并声明如下的代码:
3. axios拦截器
1)在vue3的项目中全局配置axios
2)在vue2的项目中全局配置axios
需要在main.js入口文件中,通过Vue构造函数的prototype原型对象全局配置axios:
// 1.导入axios
import axios from 'axios'// 2.配置请求根路径
axios.defaults.baseURL = 'https://www.escook.cn'
// 3.通过Vue构造函数的原型对象,全局配置axios
Vue.prototype.$http = axios
3)拦截器
拦截器(Interceptors)会在每次发起ajax请求和得到响应的时候自动被触发。
应用场景:
- Token身份认证
- Loading效果
- 等等
4)配置请求拦截器
通过axios.interceptors.request.use(成功的回调,失败的回调)可以配置请求拦截器。
注意:失败的回调可以被省略。
①请求拦截器-Token认证
// 1.导入axios
import axios from 'axios'// 2.配置请求根路径
axios.defaults.baseURL = 'https://www.escook.cn'// 配置请求拦截器
axios.interceptors.request.use(config => {// 为当前请求配置Token认证字段config.headers.Authorization = 'Bearer xxx'console.log(config);return config
})// 3.通过Vue构造函数的原型对象,全局配置axios
Vue.prototype.$http = axios
结果为:
②请求拦截器-展示Loading效果
借助于element ui提供的Loading效果组件(Element - The world's most popular Vue UI framework)可以方便的实现Loading效果的展示。
// 1)按需导入Loading效果组件
import { Loading } from 'element-ui'
// 2)声明变量,用来存储Loading组件的实例对象
let loadingInstance = null// 配置请求拦截器
axios.interceptors.request.use(config => {// 3)调用Loading组件的service()方法,创建Loading组件的实例,并全屏展示Loading效果loadingInstance = Loading.service({ fullscreen: true })return config
})
5)配置响应拦截器
通过axios.interceptors.response.use(成功的回调,失败的回调)可以配置响应拦截器。
注意:失败的回调可以被省略。
①响应拦截器-关闭Loading效果
调用Loading实例提供的close()方法即可关闭Loading效果。
// 响应拦截器
axios.interceptors.response.use(response => {// 调用Loading实例的close方法即可关闭Loading效果loadingInstance.close()return response
})
4. proxy跨域代理
1)接口的跨域问题
vue项目运行的地址:http://localhost:8080/
API接口运行的地址:https://www.escook.cn/api/users
由于当前的API接口没有开启CDRS跨域资源共享,因此默认情况下,上面的接口无法请求成功。
2)通过代理解决接口的跨域问题
通过vue-cli创建的项目在遇到接口跨域问题时,可以通过代理的方式来解决:
- 把axios的请求根路径设置为vue项目的运行地址(接口请求不再跨域)
- vue项目发现请求的接口不存在,把请求转交给proxy代理
- 代理把请求根路径替换为devServe.proxy属性的值,发起真正的数据请求
- 代理把请求到的数据,转发给axios
3)在项目中配置proxy代理
- 在main.js入口文件中,把axios的请求根路径改造为当前web项目的根路径:
// 2.配置请求根路径 // axios.defaults.baseURL = 'https://www.escook.cn' axios.defaults.baseURL = 'http://localhost:8080'
- 在项目根目录下创建vue.config.js的配置文件,并声明如下的配置:
module.exports = {devServer: {// 当前项目在开发调试阶段:会将任何位置请求(没有匹配到静态文件的请求)代理到 https://www.escook.cnproxy: 'https://www.escook.cn'} }
注意:
- devServe.proxy提供的代理功能,仅在开发调试阶段生效
- 项目上线发布时,依旧需要API接口服务器开启CORS跨域资源共享
vue3.0-axios拦截器、proxy跨域代理相关推荐
- 全局配置axios、axios 拦截器 和 proxy 跨域代理
目录 一.全局配置axios 1. 为什么要全局配置 axios 2. 如何全局配置 axios 3. 在 vue3 的项目中全局配置axios 4. 在 vue2 的项目中全局配置 axios ...
- uniapp 配置proxy 跨域代理
1.在manifest.json 文件中的 devServer添加: "devServer" : {"https" : false,"proxy&qu ...
- axios拦截器_78.1K 的 Axios 项目有哪些值得借鉴的地方
Axios 是一个基于 Promise 的 HTTP 客户端,同时支持浏览器和 Node.js 环境.它是一个优秀的 HTTP 客户端,被广泛地应用在大量的 Web 项目中. 由上图可知,Axios ...
- 封装axios加载动画Loding——vuex+axios拦截器
封装axios加载动画Loding--vuex+axios拦截器 前言:我们在axios发送请求时候,会存在请求等待时长,我们一般会加一个动画,如果很多个时候一个一个的加动画代码看起来很臃肿很冗余,我 ...
- Vue学习笔记:axios 拦截器的用法
Vue学习笔记:axios 拦截器的用法 什么是axios 拦截器? 拦截器就是拦截每一次的请求和响应,然后进行相应的处理.请求拦截器,它可以统一在你发送请求前在请求体里加上token:响应拦截器,是 ...
- 5 拦截器拦截请求路由_手写简易版axios拦截器,实现微信小程序wx.request的封装与拦截...
前言: axios是一个功能强大的网络请求库,其中拦截器又是axios的精髓.在小程序的开发或者需要手动实现ajax的时候,没有实现对请求的拦截,开发的时候非常不方便,因此手写一个简易版的axios拦 ...
- axios vue 加载效果动画_vue中使用axios拦截器实现数据加载之前的loading动画显示 @劉䔳...
首先新建一个 loading.vue组件,写loading动画效果 .loader { width: 100%; height: 100%; display: flex; align-items: c ...
- Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
- axios请求跨域前端解决_Vue-创建axios实例并实现跨域请求(完整过程-前端)
Vue-创建axios实例并实现跨域请求 .env配置文件 VUE_APP_BASE_API=/server request.js import axios from 'axios' const te ...
最新文章
- 高并发下的接口幂等性解决方案
- 【PHPExcel】生成xls文件并下载
- 一图理解腾讯本次组织结构重大变革的方向和目的
- 计算机学院心理节活动,计算机学院举办“3.20”心理健康系列活动——心理健康周,公寓心理文化节...
- UE4学习-程序崩溃,如何恢复工程
- attiny13a程序实例_ATtiny13A图文构成
- 7.13. parallel - build and execute shell command lines from standard input in parallel
- 【实践】多场景下的搜索词推荐算法及在腾讯的应用实践.pdf(附下载链接)
- ofo 退押金出新招;快手回应“弃拼多多联手阿里”;Julia 1.3 发布 | 极客头条...
- Linux系统的头文件和库文件搜索路径
- 数据结构---哈希表的C语言实现
- 配置快速生成vue模板
- Vue基础案例-----Todos(1)
- 古诗词网站源码 php,帝国cms 诗词整站源码
- 绘制一个stm32最小系统的电路原理图;完成STM32+SD卡 的系统原理图设计
- 模拟电路 二极管门电路(二)
- 虎书学习笔记3:图形学基础数学(正交基与坐标系、二维梯度)
- BN/Batch Norm中的滑动平均/移动平均/Moving Average
- 花千骨服务器维护10月22号,CF10月21、22日全区全服维护更新公告
- 【k8s实战一】Jenkins 部署应用到 Kubernetes
热门文章
- 计算机会越来越神作文,未来在电脑在作文300字
- 创建一个含有初始化数据库的mysql docker镜像
- 阿里 P10、腾讯 T4、华为 18,互联网公司职级、薪资、股权大揭秘-巴分巴秒
- 基于SpringBoot+Vue的校园招聘管理系统(Java毕业设计)
- 图像压缩Vs.压缩感知
- 【C语言程序】利用‘*‘打印出“HELLO”的形状
- 找到卡顿来源,BlockCanary源码精简分析
- 防火墙、IDS和IPS之间有什么区别?
- 两轮自平衡小车双闭环PID控制设计
- 什么是STC89C52单片机