vue mockjs 如何模拟增删改查的接口

Mock.js是一个强大的JavaScript函数式模拟数据库，它非常适合用于Vue.js项目中模拟API接口的请求。在Vue中使用Mock.js模拟数据通常涉及以下几个步骤：

1. 安装MockJS：首先需要通过npm或yarn安装MockJS。命令如下：

   npm install mockjs --save-dev
   # 或者
   yarn add mockjs --dev

2. 创建mock配置：在项目目录下创建一个`mock`文件夹，并在其中建立模拟数据的json文件。例如，对于一个用户列表的CRUD操作，可以创建`mock/userList.json`，内容类似：

   {
     "list": [
       {"id": 1, "name": "User1", "email": "user1@example.com"},
       {"id": 2, "name": "User2", "email": "user2@example.com"}
     ],
     "create": {
       "code": 201,
       "data": {"id": "3", "name": "New User", "email": "newuser@example.com"}
     },
     "update": {
       "code": 200,
       "data": {"id": 1, "name": "Updated User1"}
     },
     "delete": {
       "code": 204,
       "data": null
     }
   }

3. 使用MockJS拦截请求：在Vue组件或全局配置中，利用Mock.js的`get`, `post`, `put`, `del`等方法拦截HTTP请求。假设我们使用axios：

   // 全局mock
   import Mock from 'mockjs'
   Mock.mock('/api/user*', {
     'get': () => require('./mock/userList.json').list,
     'post': (options) => require('./mock/userList.json').create,
     'put': (options) => require('./mock/userList.json').update,
     'delete': (options) => require('./mock/userList.json').delete
   })

4. 在代码中处理响应：当你在Vue组件中发送请求时，MockJS会自动返回预设的数据。比如：

   axios.get('/api/user')
     .then(response => {
       console.log('获取用户列表:', response.data)
     })
     .catch(error => {
       console.error('获取用户列表失败:', error)
     });