Mockjs配合nodejs实现前后端分离开发

本文介绍Mockjs工具在前后端分离开发中的应用,演示如何利用Mockjs生成模拟数据以支持前端开发,包括数据模板定义、随机数据生成及Node.js集成示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前后端分离开发的前端开发工具Mockjs

作用:

前后端分离开发过程中,由于同时进行的原因,后台相应接口还没出来,我们只能先模拟接口的数据格式,进行前端开发工作。Mockjs可以拦截本地发起的ajax请求并随机生成相应的模拟数据返回给前端,暂时充当后台接口用的,后期后台接口出来之后再去掉就可以了。
Mockjs可根据需求随机生成相应的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等数据。
官网地址:http://mockjs.com/

方法函数:

  • Mock.mock(): 根据数据模板生成模拟数据。
  • Mock.setup(): 参数配置,仅支持timeout的设置,配置拦截 Ajax 请求时的行为。
  • Mock.Random(): 工具类,用于生成各种随机数据。
  • Mock.valid(): 数据校验
  • Mock.toJSONSchema(): 把 Mock.js 风格的数据模板 template 转换成 JSON Schema。

使用:

  • Mock.mock():
Mock.mock({
        resultCode: 200,
        resultJson: {
            'id|10000-20000': 10000,//id: 10000-20000之间的随机一个数字
            'name': '@cname',//name: 随机生成一个中文名
            'star|0-5': '☆',//star: 指定的字符串重复0-5次生成
            'image': '',//image: 
            'locked|1': false,//locked: 随机生成 truefalse
            'address|1': ['北京市','贵州省','浙江省'],// role: 北京、贵州、杭州 随机三选一
            'phone': /^(13|14|15|18)[0-9]\d{8}$/,//phone: 符合正则的随机字符串
            'order|10': [//order: 重复10次指定内容组成一个数组
                {
                  'id|+1': 10000,//id10000开始,每次+1
                  'orderName': '@title',//orderName: 随机生成一个中文标题
                  'orderTime': '@datetime',//orderTime: 随机生成一个 yyyy-MM-dd HH:mm:ss 格式的时间
                }
              ],
            'loginTime':function(){//loginTime: 函数的生成的特定返回值
                return new Date().getTime();
            }
        }
    });
  • mock.setup():
Mock.setup({
    timeout: '200-600'//响应时间介于 200600 毫秒之间
})
  • Mock.Random():
var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"

nodejs+mockjs实例

server.js:

// 导入路由
const http = require('http');
const express = require('express');
const server = express();
const data = require('./express/api/data/data');
server.use('/user', data);
//启动服务
http.createServer(server).listen(3000);
console.log(`Express server start, http://localhost:3000`);

data.js:

const request = require('request');
const express = require('express');
const router = express.Router();
const Mock = require('mockjs');

router.get('/data', (req, res, next) => {
    let data = Mock.mock({
        resultCode: 200,
        resultJson: {
            'id|10000-20000': 10000,//id: 10000-20000之间的随机一个数字
            'name': '@cname',//name: 随机生成一个中文名
            'star|0-5': '☆',//star: 指定的字符串重复0-5次生成
            'image': '',//image: 
            'locked|1-2': false,//locked: 随机生成 true 或 false
            'address|1': ['北京市','贵州省','浙江省'],// role: 北京、贵州、杭州 随机三选一
            'phone': /^(13|14|15|18)[0-9]\d{8}$/,//phone: 符合正则的随机字符串
            'order|10': [//order: 重复10次指定内容组成一个数组
                {
                  'id|+1': 10000,//id从10000开始,每次+1
                  'orderName': '@ctitle',//orderName: 随机生成一个中文标题
                  'orderTime': '@datetime',//orderTime: 随机生成一个 yyyy-MM-dd HH:mm:ss 格式的时间
                }
              ],
            'loginTime':function(){//loginTime: 函数的生成的特定返回值
                return new Date().getTime();
            }
        },
        resultMessage: '查询成功'
    });
    res.json(data)
});

module.exports = router;

npm run server 启动nodejs服务,在浏览器访问接口查看一下数据:
这里写图片描述

### 如何使用 MockJS 拦截 AJAX 请求 为了在前端开发过程中模拟服务器响应,MockJS 提供了一种简单有效的方式拦截 AJAX 请求并返回预设的数据。这使得开发者可以在没有实际后端服务的情况下推进前端工作。 #### 安装 MockJS 在项目根目录下通过 npm 安装 MockJS 作为开发依赖: ```bash npm install mockjs --save-dev ``` #### 配置 MockJS 创建一个新的 JavaScript 文件用于配置 MockJS 路径映射规则。此文件通常命名为 `mock.js` 或者放置在一个专门的 mocks 文件夹内。下面是一段简单的例子展示如何设置路径以及相应的假数据[^1]。 #### 设置 API 模拟规则 ```javascript // 导入 MockJS 库 import Mock from 'mockjs' // 定义 GET /api/users 接口的行为 Mock.mock('/api/users', { "users|1-10": [ { "id|+1": 1, "name": "@first", "age|18-60": 18, "address": "@county(true)" } ] }) // 如果是 POST 方法,则这样定义 Mock.setup({ timeout: '200-600' }) Mock.mock(/\/api\/login/, 'post', {"code":200,"msg":"success","data":{"token":"abc"}}) ``` 上述代码片段展示了两种不同类型的 HTTP 请求——GET 和 POST 的处理方式。对于 `/api/users` 这个 URL 下的所有 GET 请求都会被拦截下来,并按照给定模式生成一组虚拟用户列表;而针对登录操作 (`/api/login`) 发送过来的任何 POST 请求都将收到一个固定的 JSON 结构作为回应[^3]。 #### 启动应用时加载 MockJS 为了让这些设定生效,在应用程序入口处(比如 main.js 中),需要引入之前编写的 mock 文件: ```javascript if (process.env.NODE_ENV === 'development') { require('./mock/mock') } ``` 这段逻辑确保只有当环境变量 NODE_ENV 设为 development 即处于本地调试状态时才会启用模拟功能,从而不影响生产环境中真实的服务调用[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值