Mock.js的使用

Mock.js是一个模拟数据生成器，可以帮助前端开发和原型与后端进度分开，并减少一些单调，尤其是在编写自动化测试时。

使用方法

1. 安装：

npm i nockjs --save-dev

2. 在项目根目录新建mock文件夹，分别新建index.js和user.js，其中user.js用来定义模拟的数据

mock/index.js

// 导入mock.js
var Mock = require('mockjs')
// 导入用户数据
import {userinfo} from './user'

// 获取用户数据
// 参数:请求地址,请求类型,响应数据
Mock.mock("/api/userinfo","get",userinfo)

mock/user.js

// 导入mock.js
import Mock from 'mockjs'
// 声明响应状态码
const code=200
// 声明响应数据并暴露
export const userinfo=()=>{
    return {
        data:Mock.mock({
            id: '@id()',
            username: '@cname()',
            date: '@data(yyyy-MM-dd)',
            email: '@email()',
            'age|18-40': 0
        }),
        code
    }
}

main.js中引入mock数据 默认index.js

import Vue from 'vue'
import App from './App.vue'
// 引入mock数据
require('../mock')
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

在合适的时间请求模拟数据

import axios from 'axios'
export default {
  name: 'App',
  created(){
    axios.get('/api/userinfo').then(res=>{
      console.log(res);
    })
  }
}