mockjs怎么写新增

<think>我们被要求使用Mock.js编写一个模拟新增数据接口的示例教程。根据引用资料，Mock.js主要用于拦截Ajax请求并返回模拟数据。在新增数据的场景中，通常前端会发送一个POST请求，携带要新增的数据，然后模拟接口需要返回一个成功或失败的响应。 参考引用[1]和[2]，我们可以看到如何设置一个模拟的POST接口。在引用[1]中，通过Express的app对象监听POST请求，然后返回模拟数据。在引用[2]中，使用Mock.mock方法直接定义接口的URL、请求方法和返回数据。 新增数据的模拟接口通常需要做以下几步： 1. 定义模拟的数据结构，包括新增成功后的响应（如状态码、消息、返回新增的数据等）。 2. 使用Mock.mock拦截特定的URL和请求方法（如POST）。 3. 在拦截的回调函数中，可以获取请求携带的数据（即要新增的数据），然后生成一个响应（比如返回一个包含新数据的成功响应）。 由于Mock.js可以拦截Ajax请求，我们可以模拟一个新增用户数据的接口，例如： - 请求URL: '/api/user/add' - 请求方法: POST - 请求体: 包含用户信息的对象，如{name: '张三', age: 25} - 响应: 返回一个操作成功的状态，并返回新增的用户信息（可能包含系统生成的id等） 下面是一个示例代码： 首先，安装Mock.js（如果尚未安装）： npm install mockjs --save-dev 然后，创建一个mock文件（例如mock.js）并编写如下代码： ```javascript // 引入Mock const Mock = require('mockjs'); // 模拟一个数据库，用于存储新增的数据（实际中Mock.js数据是临时的，刷新页面会重置） let users = []; // 模拟新增用户接口 Mock.mock('/api/user/add', 'post', function(options) { // 解析请求体，从options.body中获取，注意：body是字符串，需要转成对象 const newUser = JSON.parse(options.body); // 使用Mock.Random生成一个id（模拟数据库自动生成id） const id = Mock.Random.guid(); newUser.id = id; // 将新用户添加到模拟的数据库中 users.push(newUser); // 返回响应，模拟成功 return { status: 200, message: '新增成功', data: newUser }; }); // 注意：在实际项目中，你可能需要将模拟数据持久化，但Mock.js默认是临时的，刷新页面数据就没了。 ``` 但是，上面的代码有一个问题：Mock.js的Mock.mock方法在拦截请求时，回调函数的参数options是一个包含请求信息的对象，其中body属性是字符串形式的请求体。因此我们需要解析它。 另外，引用[5]中展示了如何设置一个全局的mock配置，包括超时时间等。我们可以根据项目需要设置。 如果项目使用webpack，可以像引用[5]那样组织多个mock文件。 但是，上述模拟的数据库（users数组）在页面刷新后会重置，因为它是内存中的。如果希望数据持久化，可以考虑结合浏览器的本地存储（localStorage）或者使用json-server（如引用[3]）来模拟一个简单的后端服务。 不过，根据用户需求，我们仅使用Mock.js来模拟接口，所以这里只展示Mock.js的用法。 因此，我们给出一个完整的示例： ```javascript // mock.js const Mock = require('mockjs'); // 设置请求的超时时间（可选） Mock.setup({ timeout: '200-600' // 200ms到600ms之间 }); // 初始化一些用户数据（可选） let users = [ { id: Mock.Random.guid(), name: '张三', age: 20 }, { id: Mock.Random.guid(), name: '李四', age: 22 } ]; // 新增用户接口 Mock.mock('/api/user/add', 'post', function(options) { // 解析请求体 const body = JSON.parse(options.body); // 生成用户id const newUser = { id: Mock.Random.guid(), ...body }; users.push(newUser); return { code: 200, message: '新增成功', data: newUser }; }); // 注意：在项目中，这个mock文件需要在入口文件（如main.js）中引入，这样在开发时就会拦截匹配的请求。 ``` 然后，在项目入口文件中引入这个mock文件（比如在Vue项目的main.js中）： ```javascript // main.js import Vue from 'vue'; import App from './App.vue'; // 如果是开发环境，引入mock if (process.env.NODE_ENV === 'development') { require('./mock'); } new Vue({ render: h => h(App) }).$mount('#app'); ``` 这样，在开发环境中，当应用启动时，mock文件就会被执行，从而拦截对`/api/user/add`的POST请求。 前端调用示例（使用axios）： ```javascript axios.post('/api/user/add', { name: '王五', age: 30 }) .then(response => { console.log(response.data); // 会输出新增的用户信息 }); ``` 这样，我们就完成了新增数据的模拟接口。 注意：Mock.js只能模拟请求，并不能真正持久化数据。页面刷新后，users数组会被重置（因为重新执行了mock.js文件，重新初始化了users数组）。如果需要持久化，可以结合localStorage，或者使用json-server作为模拟后端。 相关问题： 1. 如何使用Mock.js模拟删除数据的接口？ 2. Mock.js如何模拟分页查询接口？ 3. 在Vue项目中，如何按需引入Mock.js（只在开发环境使用）？ 4. 如何用Mock.js模拟登录接口并返回token？</think>### Mock.js 实现新增数据模拟接口教程 Mock.js 通过拦截 Ajax 请求来模拟后端接口数据，以下是实现新增数据接口的完整示例： #### 基础实现（单文件方式） ```javascript // mock.js const Mock = require('mockjs'); // 模拟数据库（内存存储） let mockDatabase = [ { id: 1, name: '张三', age: 25 }, { id: 2, name: '李四', age: 30 } ]; // 新增数据接口 Mock.mock('/api/users/add', 'post', function(options) { // 解析请求体 const newData = JSON.parse(options.body); // 生成唯一ID newData.id = Mock.Random.guid(); // 添加到模拟数据库 mockDatabase.push(newData); // 返回成功响应 return { code: 200, message: '新增成功', data: newData }; }); // 获取数据接口（用于验证） Mock.mock('/api/users', 'get', () => ({ code: 200, data: mockDatabase })); ``` #### 完整工程化方案（多文件组织） ```javascript // mock/index.js (主入口) const Mock = require('mockjs'); Mock.setup({ timeout: '200-600' }); // 自动加载所有mock模块 const modules = require.context('./modules', true, /\.js$/); modules.keys().forEach(key => { const mockModule = modules(key).default; mockModule.forEach(([method, url, response]) => { Mock.mock(url, method, response); }); }); ``` ```javascript // mock/modules/user.js (用户模块) const Mock = require('mockjs'); let users = []; // 模拟数据库 module.exports = [ // 新增用户接口 ['post', /\/api\/users\/add/, (options) => { const newUser = JSON.parse(options.body); newUser.id = Mock.Random.id(); users.push(newUser); return { code: 200, message: '用户新增成功', data: newUser }; }], // 用户列表接口 ['get', /\/api\/users/, () => ({ code: 200, data: users })] ]; ``` #### 前端调用示例 ```javascript // 前端调用新增接口 async function addUser(userData) { try { const response = await fetch('/api/users/add', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(userData) }); const result = await response.json(); console.log('新增结果:', result); } catch (error) { console.error('请求失败:', error); } } // 调用示例 addUser({ name: '王五', age: 28, email: '[email protected]' }); ``` #### 关键功能说明 1. **请求拦截**：Mock.js 会拦截匹配的 URL 请求 2. **数据生成**：使用 `Mock.Random` 生成随机数据 3. **请求解析**：通过 `options.body` 获取请求数据 4. **状态模拟**：返回包含状态码、消息和数据的标准响应 5. **数据存储**：使用内存数组模拟数据库存储 #### 使用场景 1. 前后端分离开发时前端独立开发 2. API 接口文档验证 3. 自动化测试用例 4. 演示环境数据模拟 > **注意**：Mock.js 数据存储在内存中，页面刷新后会重置。如需持久化存储，可结合 `localStorage` 或 `json-server`[^3]