本节课将开始学习异步库axios(重要!!!)和mockjs模拟后端数据,axios是一个基于promise的HTTP库,使用npm i axios。在main.js中引入,需要绑定在Vue的prototype属性上,并重命名。
main.js文件
import http from 'axios'
Vue.prototype.$http = http
在home的index.vue中添加mounted
1.axios简单例子
mounted(){
this.$http.get('/user?ID=123')
.then(function(response){
console.log(response);
})
.then(function(error){
console.log(error);
});
}
在控制台中可以发现请求已发送,状态为404
2.axios函数封装(枯燥,难点)
在根目录下新建config文件夹,新建index.js,主要是让系统判断当前处于生产状态还是用户状态。
export default{
baseUrl:{
dev:'/api/',
pro:''
}
}
对axios函数进行二尺封装,方便后续使用。在根目录下新建api文件夹,新建axios.js文件。
import axios from 'axios'
import config from '../config'
// 将config和anios进行有机结合,对axios进行简单封装。
// 判断是不是生产环境,并拿到config中的dev环境,否则拿到config中的pro环境。
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
// axios工具类,工具类拿到对应的url后,进行相应配置
class HttpRequest {
constructor (baseUrl) {
this.baseUrl = baseUrl
}
用于定义anios的相关配置的方法
getInsideConfig(){
const config = {
base:this.baseUrl,
header:{}
}
return config
}
// 拦截器部分
interceptors (instance) {
// 添加请求拦截器
instance.interceptors.request.use(function(config){
// 在发送前做什么
return config;
},function (error){
// 对请求错误做什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function(response){
// 对响应数据前做什么
return response;
},function(error){
// 响应错误后做什么
return Promise.reject(error);
});
}
request(options){
const instance = axios.create()
// 解构,三点表示解构
options = {...this.getInsideConfig(), ...options}
// 调用拦截器
this.interceptors(instance)
return instance(options)
}
}
export default new HttpRequest(baseUrl)
3.接口调用
在api下新建data.js文件
// 这里引入的是文件,不是依赖
import axios from './axios'
export const getMenu = (param) => {
return axios.request({
url:'/permission/getMenu',
method:'post',
data:param
})
}
4.对响应拦截器进行更改
instance.interceptors.response.use(function(response){
console.log(response)
// 对响应数据前做什么
return response;
},function(error){
console.log(error)
// 响应错误后做什么
return Promise.reject(error);
});
5.mockjs使用
mock可以拦截ajax请求,在mock的回调函数中返回接口的响应数据。可以模拟后端发送过来的接口数据。mock可以使用数据模板生成数据。
在api下新建mock.js,先npm i mockjs。Mock.mock(url,回调函数),这里模块化编程,提前准备好数据模板,在api下新建mockServeData文件夹,新建home.js文件,存放home页面下的mock的模拟数据。
//mock.js
import Mock from 'mockjs'
import homeApi from './mockServeData/home.js'
Mock.mock('/home/getData',homeApi.getStatisticalData)
//home.js
// mock数据模拟
import Mock from 'mockjs'
// 图表数据
let List = []
export default {
getStatisticalData: () => {
//Mock.Random.float 产生随机数100到8000之间 保留小数 最小0位 最大0位
for (let i = 0; i < 7; 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,
data: {
// 饼图
videoData: [
{
name: '小米',
value: 2999
},
{
name: '苹果',
value: 5999
},
{
name: 'vivo',
value: 1500
},
{
name: 'oppo',
value: 1999
},
{
name: '魅族',
value: 2200
},
{
name: '三星',
value: 4500
}
],
// 柱状图
userData: [
{
date: '周一',
new: 5,
active: 200
},
{
date: '周二',
new: 10,
active: 500
},
{
date: '周三',
new: 12,
active: 550
},
{
date: '周四',
new: 60,
active: 800
},
{
date: '周五',
new: 65,
active: 550
},
{
date: '周六',
new: 53,
active: 770
},
{
date: '周日',
new: 33,
active: 170
}
],
// 折线图
orderData: {
date: ['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007'],
data: List
},
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
}
]
}
}
}
}
在main.js中引入import '../api/mock.js'。
在home下index.vue中引入getData。import { getData } from '../../api/data.js',并暴露使用。
//home下index.js
mounted(){
getData().then(res => {
console.log(res)
})
}
在api中data.js中编写getData,这里没有写请求类型,默认是get请求。
//data.js
export const getData = () =>{
return axios.request({
url:'/home/getData'
})
}
接口拦截成功,并返回数据。
将数据进行解构
对home的index.vue的mounted进行修改,并将return中的tableData定义为空数组,tableData:[]。
mounted(){
getData().then(res => {
const { code,data } = res.data
if (code === 20000){
this.tableData = data.tableData
}
console.log(res)
})
}
前后数据区别:一个是原本写死的数据,一个是模拟后端的mock数据。