vue使用mock.js模拟数据

关于mockjs，官网描述的是

1.前后端分离

2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。

3.数据类型丰富

4.通过随机数据，模拟各种场景。

等等优点。

首先安装mock.js

npm install mockjs

然后在src目录下新建mock目录,mock目录下新建mock.js

在mock.js中写入

const Mock = require("mockjs");
import queryString from "../../utils/queryString";
const Random = Mock.Random;

const count = 60;
const data = (options: any) => {
  const { page = 1, pageSize = 20 } = queryString(options.url);

  let tableData: any[] = [];
  for (let i = 0; i < count; i++) {
    const template = Mock.mock({
      conut: Random.natural(1, 100),
      "level|1": ["高级", "初级", "入门"],
      date: Mock.mock('@date("yyyy-MM-dd")'),
      title: Random.ctitle(3, 20),
      "type|1": ["vue", "node", "React"]
    });
    tableData.push(template);
  }
  const tableList = tableData.filter(
    (item, index) => index < pageSize * page && index >= pageSize * (page - 1)
  );
  return {
    tableList,
    total: count
  };
};

Mock.mock(/getList/, data);

然后安装axios

npm install --save axios

在main.js中引入axios和mock.js

import axios from 'axios';
import mockData from './mock/mock.js';

请求代码

this.$axios.get('/getList/').then((res)=>{
	console.log(res);
})

例如定义一个登陆的接口

新建user.js,写入

const userinfo = [
  {
    id: 1,
    username: 'admin',
    password: '123456'
  }
];

export default userinfo;

在mock.js中引入user.js

// 引入mockjs
const Mock = require('mockjs');
const Random = Mock.Random;
import user from './user.js';
const produceNewsData = function() {
    let articles = [];
    for (let i = 0; i < 100; i++) {
        let newArticleObject = {
            title: Random.csentence(5, 30), //  Random.csentence( min, max )
            thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
            author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
            date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
        }
        articles.push(newArticleObject)
    }
 
    return {
         articles
    }
}
Mock.mock(/getList/,{
	'list|5':produceNewsData()

})
console.log(user)
Mock.mock(/userinfo/,{
	'info':user

})