1.app开发定制公司为什么需要封装axios?
app开发定制公司当我们改变项目的使用环境时候,urlapp开发定制公司也会随之改变,那么我们就需要改很多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.安装命令: 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;}