[JavaScript知识库]vue之axios的封装

1.为什么需要封装axios？
当我们改变项目的使用环境时候，url也会随之改变，那么我们就需要改很多axios请求中的url配置
现在我们将axios封装，在项目使用环境改变时我们只用改变axios封装方法中的baseurl一项就行了，请求的接口地址不变。

2.Axios的封装方式

????????1.执行安装axios命令: ?npm i axios
????????2.对axios进行简单的封装
?? ?????????1.在src文件夹下创建utils文件夹，在utils文件夹下 创建request.js ? 并导出

import axios from "axios";//创建一个axios的对象
//生成一个axios的实例
const http=axios.create({
	baseURL:"http://www.xxx.top:8080/",// baseURL会在发送请求的时候拼接在url参数前面
	timeout:3000,//请求超时
});
export default http;//导出

? ? ? ? ?? ?2.在src文件夹下创建api文件夹，api文件夹下 ?创建index.js

//导入request.js
import request from "@/utils/request";//@==>src
//可以按需导出
//获取商品列表  方法一  返回一个请求的方法
export const getProduct=(params)=>request.get("/product/",{params});
//获取商品详情
export const getProductDetail=(id)=>request.get(`/product/${id}`);
//方法二 在api文件里出来异步请求
export const getCategory=async()=>{
	const res=await request.get(`/category/`);
	return res.data.results;
	};

3.在vue页面使用

? ? ? ? 1.在script标签中引入api文件，可以按需导入所需使用的方法

? ? ? ? ? ? ?import {getProduct} from "@/api//默认是api文件夹下的index.js文件

? ? ? ? 2.使用getProduct方法获取数据

            async _getProductList(){
				const res=await getProduct();
				this.productList=res.data.results;
				// console.log(res.data.results);
			},

有参数时：

const _getProductList=async()=>{
		const res=await getProduct({
			page:page.value,
			size:size.value,
			...query.value,//{key:"衣服"}
		});
		this.productList=res.data.results;
	}

方法2：

1.引入api文件import {getCategory} from '@/api';

2.使用getCategory方法

const _getCategory=async()=>{
		this.categoryTree=await getCategory();
	}

补充：

一、配合element-plus使用

使用步骤：

1.安装element-plus命令: ? npm i element-plus
2.在main.js中导入相关模块

import ElementPlus from 'element-plus'

//import zhCn from 'element-plus/es/locale/lang/zh-cn';//中文
3.在main.js中 ?注册使用 ?app.use（）?

?//app.use(ElementPlus);
??app.use(ElementPlus, {
? locale: zhCn,
});

二、初始化css样式

1.执行初始化样式指令：npm i normalize.css

2.在main.js中引入：import "normalize.css"

或通过cdn在index.html中引入

组件内的局部样式
1编译组件的模板时，会给这个组件模板中的所有标签上添加一个自定义属性，自定义属性有一个组件唯一的hash
2局部样式，编译时会在选择器规则添加属性选择器
3:deep原理就是给对应选择器规则不要直接添加属性选择器，而是作为属性选择器的后代选择器
?? ?:deep(img){display:block;}