【Vue2+Element ui通用后台】Mock.js

最新推荐文章于 2024-07-12 11:17:52 发布

Errol_King

最新推荐文章于 2024-07-12 11:17:52 发布

阅读量569

点赞数

分类专栏： Vue学习笔记文章标签： mock.js elementui

本文链接：https://blog.csdn.net/u010356768/article/details/128528393

版权

文章介绍了如何利用Mock.js生成随机数据并拦截Ajax请求，以完成首页的数据填充。首先，通过npm安装Mock.js并在api目录下创建mock.js设置拦截器。然后在mockServeData目录下创建home.js生成具体的数据。最后，修改mock.js导入并返回这些数据，成功地在首页布局中展示了模拟的数据。

摘要由CSDN通过智能技术生成

Mock.js

Mock.js 官网
 Mockjs Github地址
作用：生成随机数据，拦截 Ajax 请求

使用npm i mockjs进行安装，然后在 api 下新建 mock.js

import Mock from 'mockjs'

// 定义mock请求拦截
Mock.mock('/api/home/getData',function () {
    // 拦截到请求后的处理逻辑
    console.log('拦截到请求');
});

然后在 main.js 引入

import './api/mock'

我们运行项目，刷新首页，控制台信息：
在这里插入图片描述
我们看到已经拦截到了请求，但是data数据是空的，因为我们没有在mock中返回信息

我们来进行改造下，在 api 下新建 /mockServeData/home.js

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:2999
                    },{
                        name:'三星',
                        value:3999
                    },
                ],
                // 柱状图
                userData:[
                    {
                        date:'周一',
                        new:5,
                        active:200
                    },{
                        date:'周二',
                        new:10,
                        active:500
                    },{
                        date:'周三',
                        new:12,
                        active:550
                    },{
                        date:'周四',
                        new:3,
                        active:100
                    },{
                        date:'周五',
                        new:20,
                        active:600
                    },{
                        date:'周六',
                        new:8,
                        active:120
                    },{
                        date:'周日',
                        new:5,
                        active:330
                    },
                ],
                // 折线图
                orderData:{
                    date:['20221001','20221002','20221003','20221004','20221005','20221006','20221007'],
                    data:List
                },
                tableData:[
                    {
                        name:'oppo',
                        todayBuy:500,
                        monthBuy:3500,
                        totalBuy:22000
                    }, {
                        name:'vivo',
                        todayBuy:200,
                        monthBuy:1500,
                        totalBuy:2000
                    }, {
                        name:'小米',
                        todayBuy:1000,
                        monthBuy:5500,
                        totalBuy:42000
                    }, {
                        name:'三星',
                        todayBuy:800,
                        monthBuy:3500,
                        totalBuy:32000
                    }, {
                        name:'魅族',
                        todayBuy:80,
                        monthBuy:400,
                        totalBuy:1000
                    }, {
                        name:'苹果',
                        todayBuy:700,
                        monthBuy:5500,
                        totalBuy:42000
                    },
                ]
            }
        }
    }
}

然后修改刚才的mock.js

import Mock from 'mockjs'
import homeApi from './mockServeData/home'

// 定义mock请求拦截
Mock.mock('/api/home/getData',homeApi.getStatisticalData());

刷新首页，查看控制台，发现已经有了返回数据：
在这里插入图片描述

首页数据调用mock数据并完成布局

<template>
  <div>
    <el-row>
      <el-col :span="8" style="padding-right: 10px">
        <el-card class="box-card">
          <div class="user">
            <img src="../assets/profile.jpg">
            <div class="userInfo">
              <p