在vue项目中使用mockjs -（最简单的方法）

1.问题描述

前后端分离,前端与后端的联系主要体现在接口对接,即数据对接.这点也在一定程度上限制了前端的独立性。为了便于开发，通常会选择模拟数据，mockjs为我们很好的解决了这个问题。

2.解决方案

1.安装

# 安装
npm install mockjs

2.创建

在项目中创建一个mock.js文件

image.png

3.测试

//mock.js
//导入mock.js模块
var Mock = require('mockjs');
//mock.js语法数据
var user = Mock.mock({
  "code":200,
  "list|1-10":[{
    "id|+1":1,
    "email":"@email()"
  }]
});
console.log(JSON.stringify(data,null,4))

打印结果如图,证明数据已经mock成功.

image.png

4.导出数据

修改刚写的mock.js中的demo,为下面这种方式:

//导入mockjs
var Mock = require('mockjs');
//mock一个user数据并导出
export var user = Mock.mock({
  "code":200,
  "list|1-10":[{
    "id|+1":1,
    "email":"@email()"
  }]
});

5.使用数据

创建一个.vue文件,并项目中引入导出的我们创建的user数据,代码如下:

image.png

打印结果:

image.png

6.创建多组数据

创建多组数据,用export导出,export default默认一个文件只能导出来一次,export则可以导出多次.
下面的demo题主创建了user1,user2两组数据并导出,更多类似.

//使用Mock
var Mock = require('mockjs');
export var user1 = Mock.mock({
  "code":200,
  "list|1-10":[{
    "id|+1":1,
    "email":"@email()"
  }]
});

export var user2 = Mock.mock({
  "code":200,
  "list|1-10":[{
    "id|+1":1,
    "email":"@email()"
  }]
});

这样你就可以创建多个数据了.
最后,你只需要在你需要的地方引入这些mock数据就可以了.

7.备注:

mockjs语法链接地址
当然你也可以使用easymock来模拟数据.

人生如逆水行舟,不进则退!