配置代理
- 1、项目下载 axios 并引入 npm i axios
- 【java系列|Vue —— axios、插槽】2、配置文件 vue.config.js 中配置代理:
module.exports = defineConfig({ ... devServer: {proxy: { '/proxy01': {//代理前缀 target: 'http://localhost:5000',//代理目标服务器 pathRewrite:{'^/proxy01':''},//重写路径,把含 /proxy01 前缀替换为空字符 ws: true,// 用于支持webSocket ChangeOrigin: true//用于控制请求头中的host值 },//可以配置多个服务器代理 '/proxy02': {//代理前缀 target: 'http://localhost:4000',//代理目标服务器 pathRewrite:{'^/proxy02':''},//重写路径,把含 /proxy02 前缀替换为空字符 ws: true,// 用于支持webSocket ChangeOrigin: true//用于控制请求头中的host值 } } } })
- 3、xxx.vue
...
import axios from 'axios' //引入axios
...
getData01(){axios.get('http://localhost:8080/proxy01/data01').then(
Response => {
console.log('请求成功了',Response.data)
},
error => {
console.log('请求失败了',error.message)
}
)
},getData02(){
axios.get('http://localhost:8080/proxy02/data02').then(
Response => {
console.log('请求成功了',Response.data)
},
error => {
console.log('请求失败了',error.message)
}
)
}
- 3、创建 api 文件夹 { index.js、request.js }
- request.js
//对 axios 进行二次封装
import axios from "axios";
//1.利用axios对象的create,去创建一个axios实例
//2.request就是axios,只不过稍微配置一下
const requests = axios.create({
//配置对象
//基础路径,发请求的时候,路径当中会出现api
baseURL:"/api",
timeout:5000,
});
//请求拦截器
requests.interceptors.request.use((config)=>{
//config:配置对象,对象里面有一个属性很重要,headers请求头
return config;
});
//响应拦截器
requests.interceptors.response.use(
(res)=>{
//响应成功的回调函数
return res.data;
},
(error)=>{
//响应失败的回调函数
return Promise.reject(new Error('faile'));
})//暴露
export default requests;
- index.js
// 此 index.js:对 API 进行统一管理//引入二次封装的axios ==> requests
import requests from "./request";
//三级联动接口//1.已知请求后端的路径为'/api/product/getBaseCategoryList'
export const reqCategoryList = () =>{
//发请求:axios发请求返回结果 Promise 对象
// 因为 api/request.js 中配置了 baseURL:"/api",所以下面不需要加 /api
return requests({url:'/product/getBaseCategoryList',method:'get'});
}// 可以简写为 export const reqCategoryList = () =>requests({url:'/product/getBaseCategoryList',method:'get'});
总结
![java系列|Vue —— axios、插槽](http://img.readke.com/220723/0QFMX4-0.jpg)
文章图片
插槽 slot
作用域插槽 :数据不在插槽使用者上时,可以由定义插槽的组件传递过来
![java系列|Vue —— axios、插槽](http://img.readke.com/220723/0QFGJ0-1.jpg)
文章图片
![java系列|Vue —— axios、插槽](http://img.readke.com/220723/0QFK420-2.jpg)
文章图片
![java系列|Vue —— axios、插槽](http://img.readke.com/220723/0QFI527-3.jpg)
文章图片
![java系列|Vue —— axios、插槽](http://img.readke.com/220723/0QFI608-4.jpg)
文章图片
推荐阅读
- 小程序|uni-app与uviewUI实现仿小米商城app(附源码)
- #|【小程序项目开发-- 京东商城】uni-app之商品列表页面 (下)
- ui|Thor UI - 轻量简洁的免费开源移动端 UI 组件库,支持原生小程序和 uni-app
- 明道云在网络服务行业中的应用场景
- Vue技术|关于Vue你不知道的那点事儿,Vue知识总结大全,让你彻底搞懂Vue
- 通向架子工的前端开发利器推荐
- Linux修改ssh端口
- javascript|事件循环、宏任务与微任务、Promise与 Async/Await以及常见面试题
- javascript|promise原理与async 及 await