在vue中使用mockjs模拟后台数据

背景：

前端开发有时会需要自己模拟后台数据，mockjs可以帮我们达到这一效果

原理：

根据源码初步推断，重写了XHR，拦截XHR请求再转发到本地，从本地找对应的接口路径，然后将对应的内容返回

使用：

1.下载安装

npm install --save mockjs

 

2.引入---main.js

import { mockXHR } from "../mock";

　　

3.mock数据

在src文件夹新建mock文件夹，在mock文件夹下新建index.js（模拟接口和对应数据）

 

index.js

// 保存模拟数据路径 
import Mock from 'mockjs' 
import itemList from './itemList'
Mock.mock(/\/itemList\/getItemList/,'get',itemList.getItemList)

 

itemList .js

import Mock from 'mockjs'
let params =  Mock.mock({ // 数据池
    'userTableData|10': [{ // 图表过滤所需数据
        'name': '@cname',
        'date': '@date',
        'province': '@province',
        'city': '@city',
        'address': '@county(true) @ctitle() @natural(1000,9999) 号',
        'zip': '@zip'
    }]
})

export default {
    getItemList: () => ({
        code: 200,
        data: params
    })
}

　　

4、设置对应接口

 

api.js

// 保存访问接口 
import Axios from 'axios'
 export async function getItemList () {
     let result = await Axios.get(`/itemList/getItemList`).then(d => d.data);     return result 
}

5、使用

和正常接口使用是一样的

import {getItemList}from '../api/api.js'  
getItemList().then(res=>{  
               console.log(res)           
  }).catch(err=>{            
})