Vue笔记：使用 mock.js 模拟数据

最新推荐文章于 2025-06-12 03:55:30 发布

原创最新推荐文章于 2025-06-12 03:55:30 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何利用Mock.js在后端接口未完成前进行前端开发，通过模拟接口调用和返回预设数据，实现前后端并行开发，提高项目整体开发效率。

在我们的项目实际开发过程中，后端的接口往往是较晚才会提供出来，并且还要写接口文档，如果前端的开发都要等到接口开发完成才开始就非常影响项目整体开发进度了，mock.js 的出现使前后端分离并行开发成为可能。使用 mock.js，前端调试可以模拟后台接口调用，返回我们定义的数据，解放了前后端开发的屏障。使用 mock.js 的过程如下：

1. 安装 mock.js 到项目。

npm intsall mockjs --save-dev

2. 在src目录下建立文件夹mock，mock文件夹下建立mock.js文件，代码如下：

import Mock from 'mockjs'; // es6语法引入mock模块

export default Mock.mock('http://localhost/user', { // 输出数据

  'name': '@name', // 随机生成姓名

  'age|1-10': 5

  // 其他数据
});

3. 在 vue 组件中引入。

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

4. 请求接口, 如使用axios发送请求。

computed:{
    created(){
      Vue.prototype.$http.get('http://localhost/user')
        .then(res => {
          console.log(res.data);
          this.msg=res.data.name;
          console.log(this.msg)
        })
    }
}

这样在发送请求的时候，mock 就会拦截对应的请求，并返回我们定义的数据了。

作者：朝雨忆轻尘
出处：https://www.cnblogs.com/xifengxiaoma/
版权所有，欢迎转载，转载请注明原文作者及出处。