系列文章目录
Vue + Element-UI —— 项目实战（零）（项目概述）
文章目录
四、项目实战四
Ⅰ、axios 的使用和二次封装
1. axios 的基本使用
- Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
- 特性：
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
- 安装 axios
$ npm install axios
- main.js 文件中引入 axios
import http from "axios";
- 使用 axios，因为 axios 不是一个插件，所以要全局使用，只能将它绑定在 Vue 的 prototype 属性上
Vue.prototype.$http = http;
- axios 执行 get 请求案例
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 上面的请求也可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
- axios 执行 post 请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
2. axios 的二次封装
为什么进行二次封装？
api 可以统一管理，不管接口有多少，所有的接口都可以非常清晰，容易维护。
- 创建 config 文件夹，并在该文件夹下创建 index.js 文件
// 项目的配置文件
// 配置baseUrl，之后就可以传相对路径
export default {
baseUrl: {
dev: '/api/', //开发环境
pro: '', //生产环境
}
};
- 创建 api 文件夹，在该文件夹下创建 axios.js 文件
// 二次封装 将 axios 和 配置文件 进行结合
import axios from 'axios'
// 引入对路径的基本配置，便可以使用相对路径
import config from '../config/index'
// 设置配置，因为开发环境(dev)、测试环境(test)和生产环境(prod)的baseUrl地址不一样
// process.env 包含着有关系统环境的信息
// NODE_ENV:判断生成环境或开发环境还是测试环境的依据。
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
class HttpRequst {
constructor(baseUrl) {
// 将baseUrl 添加到当前实例的baseUrl属性上
this.baseUrl = baseUrl
}
// 定义 axios相关的配置
getInsideConfig() {
const config = {
// 拿到当前实例下的 baseUrl
baseURL: this.baseUrl,
// 请求头的信息
header: {
}
}
return config
}
// 拦截器：在请求或响应被then或catch处理前拦截它们
interceptors(instance) {
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
console.log('拦截处理请求');
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
console.log('处理相应');
// 对响应数据做点什么
return response.data;
}, function (error) {
console.log(error);
// 对响应错误做点什么
return Promise.reject(error);
});
}
// 接口请求时调用
request (options) {
// 创建 axios实例
const instanse = axios.create()
// 对相关的配置信息getInsideConfig()进行解构， 对传入的相关参数options解构
options = {
...(this.getInsideConfig()), ...options }
// console.log(options);
this.interceptors(instanse)
// 返回接口请求的结果
return instanse(options)
}
}
// 暴露传入baseUrl的实例
export default new HttpRequst(baseUrl)
- 在 api 文件夹中创建 data.js 文件，该文件写入接口请求
// 写入接口请求的文件
import axios from './axios'
export const getMenu = (param) => {
return axios.request({
url: '/permission/getMenu', //接口的相关地址
method: 'post', //请求方式
data: param //传入的参数
})
}
- 在 ./home/index.vue 中导入 getMenu
import {
getMenu } from "../../api/data.js";
- 在 ./home/index.vue 的 mounted 函数中使用，之后刷新控制台，会发现发出了请求，但有 404 错误（因为并没有获取到后台数据）
getMenu.then((res) => {
console.log(res)
})
Ⅱ、mock 数据模拟
1. mock 简单介绍
mock 可以干什么 ？
————————————————
答：生成随机数据，拦截 Ajax 请求
2. mock 的基本使用
- 基本语法解释：
（1）rurl：url 的规则(指定的url或者正则)
（2）rtype：接口请求的类型(get、post)
（3）template | function(options) 返回的数据 用模板或者回调函数
Mock.mock(rurl?, rtype?, template|function(options))
- 安装 mockjs
npm i mockjs
- 在 api 文件夹下创建 mockServerData 文件夹，在该文件夹下创建 home.js 文件，进行对 home 主页（列表、折线图、柱状图和饼状图）相关数据的模拟
import Mock from 'mockjs'
export default {
getStatisticalData: () => {
//Mock.Random.float 产生随机数100到8000之间 保留小数 最小0位 最大0位
//用于折线图的随机数据模拟（现在还用不到）
for (let i = 0; i < 8; i++) {
List.push(
Mock.mock({
苹果: Mock.Random.float(100, 8000, 0, 0),
vivo: Mock.Random.float(100, 8000, 0, 0),
oppo: Mock.Random.float(100, 8000, 0, 0),
魅族: Mock.Random.float(100, 8000, 0, 0),
三星: Mock.Random.float(100, 8000, 0, 0),
小米: Mock.Random.float(100, 8000, 0, 0)
})
)
}
return {
code: 20000, //状态码（20000表示正常的数据）
data: {
tableData: [
{
name: 'oppo',
todayBuy: 500,
monthBuy: 3500,
totalBuy: 22000
},
{
name: 'vivo',
todayBuy: 300,
monthBuy: 2200,
totalBuy: 24000
},
{
name: '苹果',
todayBuy: 800,
monthBuy: 4500,
totalBuy: 65000
},
{
name: '小米',
todayBuy: 1200,
monthBuy: 6500,
totalBuy: 45000
},
{
name: '三星',
todayBuy: 300,
monthBuy: 2000,
totalBuy: 34000
},
{
name: '魅族',
todayBuy: 350,
monthBuy: 3000,
totalBuy: 22000
}
]
}
}
}
}
- 在 api 文件夹下 创建 mock.js 文件，用于对使用到 mock 的文件进行导入和使用
import Mock from 'mockjs'
import homeApi from './mockServerData/home'
Mock.mock('/api/home/getData', homeApi.getStatisticalData)
- 在 main.js 中进行 mock 的引入
import "../api/mock.js";
- 把 ./home/index.vue 中 的 getMenu 换成 getMenu
import {
getMenu } from "../../api/data.js";
- 在 data.js 文件中定义 getData
// 写入接口请求的文件
import axios from './axios'
export const getData = () => {
return axios.request ({
url: '/home/getData', //接口的相关地址
method: 'get' //请求方式
})
}
- 在 ./home/index.vue 中，把 tableData中的数据置空，因为把这部分数据已经转移到了 home.js 中的 tableData 中存储
data() {
return {
tableData: []
}
},
mounted() {
// 将res下的code和data解构 data是数组List中的数据
const {
code, data } = res;
// 正常接口返回的时候
if (code === 20000) {
//获取home.js中定义好的tableData数据
this.tableData = data.tableData;
}
}
不积跬步无以至千里 不积小流无以成江海
点个关注不迷路（持续更新中…）