订单统计，axios与mock的使用

订单统计

在views的文件夹下Home.vue组件中vue实例中data传入countData数组：

export default {
data(){
return{
 countData: [
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
        {
          name: "本月支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "本月收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "本月未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
      ],
      }
      }
      }

在Home.vue组件中，写入以下代码

实现效果：

mock模拟数据的实现

一.axios基本使用,首先安装axios包

npm install axios -S

在src文件下的main.js引入axios

import http from 'axios'

Vue.prototype.$http=http

if(process.env.NODE_ENV==='development') require('@/api/mock')

在views文件夹下的Home.vue中

import { getHome } from '../../api/data';
export default {
data(){
return{
  tableData:[],
  }
  }
 methods:{
      getTableData(){
          getHome().then((res)=>{
              this.tableData=res.data.tableData;   
       })
}
}
mounted(){
 this.getTableData()
  }
  }

二次封装axios,拦截器 在src文件夹下新建api文件夹再新建一个axios.js

//二次封装axios 拦截器

import axios from 'axios';
import config from '../config/index';
// 设置配置 根据开发和生产环境不一样
const baseUrl=process.env.NODE_ENV==='development'?
config.baseUrl.dev:config.baseUrl.pro

class HttpRequst{
    constructor(baseUrl){
        this.baseUrl=baseUrl
    }
    getInsideConfig(){
        const config={
            baseURL:this.baseUrl,
            header:{

            }
        }
        return config
    }
    interceptors(instance){        
        instance.interceptors.request.use(function (config) {
    // Do something before request is sent
    console.log('拦截处理请求');
    return config;
  }, function (error) {      
    // Do something with request error
    return Promise.reject(error);
  });

  instance.interceptors.response.use(function (response) {
      console.log('处理响应');
    // Do something with response data
    return response.data;
  }, function (error) {
      console.log(error);
    // Do something with response error
    return Promise.reject(error);
  });
}

request(options){
    //请求
    const instance=axios.create()
    options={...(this.getInsideConfig()),...options}
    this.interceptors(instance)
    return instance(options)
}
}

export default new HttpRequst(baseUrl)

在src文件夹下新建config文件夹下新建index.js

export default{
    title:'admin',
    baseUrl:{
        //开发环境
        dev:'/api/',
        pro:''
    }
}

axios使用 在src文件夹下的api文件下新建data.js

import axios from "./axios";

export const getMenu=()=>{
    return axios.request({
        url:'menu',
        method:'get'
    })
}

export const getHome=() =>{
    return axios.request({
        url:'/home/getData',
        method:'get'
    })
}

mock数据模拟的实现,首先安装mock.js

npm install mockjs -S

在api文件夹下新建mock.js

getStatisticalData是一个方法

import Mock from "mockjs";

import homeApi from './mockServerData/home'
Mock.mock('/api/home/getData',homeApi.getStatisticalData)

在api文件夹下新建mockServeData文件夹下新建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
          }
        ]
      }
    }
  }
}

实现效果,mock模拟数据展示：