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;}