vue使用mockjs配置和使用

最新推荐文章于 2024-08-05 14:39:04 发布

玉面小达摩suki

最新推荐文章于 2024-08-05 14:39:04 发布

阅读量1.6k

点赞数 3

分类专栏： web前端技术 vue2 axios mockjs server http web nodejs

本文链接：https://blog.csdn.net/qq_33964336/article/details/88352274

版权

本文介绍了在前后端分离的开发模式下，如何利用MockJS进行模拟数据的配置和使用，以避免前端在后端接口未完成时的工作内耗。详细步骤包括：安装MockJS，创建mock文件夹及index.js，将模拟接口数据引入main.js，以及在组件中调用虚拟接口。在生命周期钩子中使用axios调用接口，并在项目接口调试完成后移除MockJS的相关引用，以保持组件代码的简洁。

摘要由CSDN通过智能技术生成

需求：
在前后端分离的开发中，需要前后端同时开发，但是在后端完成前，暂时是没有数据返回给前端使用的，如果先写静态后面再改，就有重复工作的内耗存在。所以我们需要一种简单快速的模拟数据的模块，本文选的是mockjs。
步骤：
1、安装mockjs

npm install mockjs

2、在项目的src文件夹下建mock文件夹，在mock文件夹下建index.js(存放所有的http模拟返回的接口数据);以下我写了两个接口：

import Mock from 'mockjs';
const vehicle = Mock.mock(
  '/api/car', 'post', (req, res) => {
    return {
      code: 200,
      data: [{
        id: 1,
        name: 'BYD',

      }, {
        id: 1,
        name: 'baojun',
      }],
      message: '查询成功'
    }
  })
const user = Mock.mock(
  '/api/user', 'get', (req, res) => {
    return {
      code: 200,
      data: {
        id: 1,
        sex: 1,
        age: 25,
        createTime: '2017-04-01'
      },
      message: '查询成功'
    }
  })

export default {
  vehicle,
  user
}

</