前端技术分享
0%

【041】vue-cli4.0基础学习：mock.js的简单使用

发表于 分类于

前后分离的开发流程

  1. 项目需求分析
  2. 前端和后台商量所需接口数据
  3. 前端和后台各自开发
  4. 前端对接接口，此时后台很大可能是还没有开发完接口，所以前端需要按照第二步所商量的结果模拟数据
  5. 后台开发接口完成，开始联调
  6. 如果调试没有任何问题，将项目提交至测试环境交给测试人员进行测试
  7. 根据测试文档进行让人头疼的 bug 修改
  8. 测试通过，项目正式发布

什么是 mock.js

生成随机数据，拦截 Ajax 请求

在第一节中提到了需要模拟一些假数据，那么该怎么模拟呢？很多人可能会说直接在页面书写点数据就好了。这样做也是可以的，但是太麻烦了，不规范，虽然前期能够快速完成开发，但是后期对接完接口后需要对这些假数据进行删除是一件令人头疼的事。

简单使用

安装

首先打开vue-cli项目，然后在项目根目录下打开cmd窗口，输入指令npm install mockjs进行安装

模拟

在src文件夹下新建名称为mock.js的文件，用于生成模拟数据。完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 引入mockjs
import Mock from 'mockjs';
// Mock.Random 是一个工具类，用于生成各种随机数据
const Random = Mock.Random;
let data = [];
for(let i = 0; i < 10; i ++) {
    data.push({
        title: Random.title(),
        time: Random.datetime()
    })
}

// 模拟新闻列表
Mock.mock('/news/lists', 'get', data);

引用

打开main.js文件并进行引用，完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import Vue from 'vue'
import App from './App.vue'

// 引入我们配置好的路由
import router from './router';

Vue.config.productionTip = false

// 引入样式
import './assets/css/app.css';

// 引入 mock 模拟数据
require('./mock');

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

mock.js 的优点

通过上面的简单使用，我们能直观体会到的优点有：

  1. 让前端工程师独立于后端进行开发
  2. 通过随机数据，模拟各种场景
  3. 符合直觉的接口
  4. 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等

总结

其实在敲代码时，我们可以发现mock.js其实是一个很好玩的东西，完全没有想象中的那么麻烦，当后台提供了接口后，我们只需要把在main.js的引用去掉就可以开始和后台进行联调了，简直不要太方便了。
那么，我们应该如何在v-news.vue文件中使用ajax请求模拟的新闻列表数据呢？请看下一章。