前端开发效率翻倍！MockJS 实现接口 Mock 与分页模拟
在前后端分离的开发模式下，前端开发者常常面临 “等后端接口开发完成才能调试” 的困境。MockJS 的出现完美解决了这一问题，它能让前端自主伪造接口数据，提前完成页面开发与调试，上线时只需切换真实接口地址即可无缝对接。本文结合实战代码，详细讲解 MockJS 的使用场景、安装教程、核心用法（含分页模拟）及核心价值。
一、MockJS 的核心使用场景
MockJS 是前端接口伪造工具，核心解决前端开发中 “接口依赖” 的痛点，典型使用场景包括：
- 前后端并行开发：后端未完成接口开发时，前端基于接口文档提前 Mock 接口，无需等待后端，大幅提升开发效率；
- 接口文档先行：前后端先敲定接口文档（如
GET /api/posts?page=1&limit=10），前端基于文档 Mock 数据，确保接口格式 100% 匹配； - 多场景数据模拟：可灵活模拟分页、空数据、大数量级数据等场景，覆盖开发与测试全流程；
- 无缝切换真实接口：开发阶段用 Mock 接口，上线前只需替换接口地址，无需修改业务代码。
二、MockJS 环境搭建（基于 Vite）
以 Vite 项目为例，完成 MockJS 的安装与基础配置：
1. 安装依赖
需要安装mockjs（核心 Mock 库）和vite-plugin-mock（Vite 的 Mock 插件）：
# npm安装
npm install mockjs vite-plugin-mock --save-dev
# yarn安装
yarn add mockjs vite-plugin-mock -D
2. 配置 Vite
在vite.config.js中配置 mock 插件，让 Vite 启动时加载 Mock 接口：
import { defineConfig } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
plugins: [
// 配置Mock插件
viteMockServe({
mockPath: './mock', // Mock文件存放目录（本文示例中为posts.js所在目录）
localEnabled: true, // 开发环境启用Mock
prodEnabled: false, // 生产环境关闭Mock（上线时自动切换真实接口）
})
]
})
三、MockJS 核心用法（结合 posts 接口实战）
以 “文章列表（posts）” 接口为例，讲解 MockJS 的基础语法、接口 Mock 及分页逻辑实现。
1. 基础：MockJS 随机数据语法
MockJS 通过@符号提供丰富的随机数据生成能力，满足不同数据类型的伪造需求：
| 语法 | 说明 | 示例（对应 posts.js） |
|---|---|---|
@ctitle(min,max) | 生成随机中文标题 | title:'@ctitle(8,20)'（8-20 字标题） |
@integer(min,max) | 生成随机整数 | totalLikes:'@integer(0,500)'（0-500 点赞） |
@cname | 生成随机中文姓名 | name:'@cname(2,3)'（2-3 字姓名） |
@image(w*h) | 生成随机图片地址 | avatar:'@image(300*200)'（300x200 图片） |
Random.pick(arr, n) | 从数组中随机选 n 个元素 | tags:() => Mock.Random.pick(tags,2)（选 2 个标签） |
2. 实战：Mock 文章列表接口
新建mock/posts.js文件，按接口文档实现GET /api/posts的 Mock 接口，核心步骤如下：
步骤 1：生成基础 Mock 数据
首先用Mock.mock生成 45 条模拟文章数据，包含标题、简介、点赞数、用户信息、标签等字段：
import Mock from "mockjs"
// 定义标签池
const tags = ["前端","后端","职场","AI","副业","面经","算法"];
// 生成45条模拟文章数据
const posts = Mock.mock({
'list|45':[ // 生成45条数据（|45表示数量）
{
title:'@ctitle(8,20)', // 随机中文标题（8-20字）
brief:'@ctitle(20,100)', // 简介
totalComments:'@integer(1,30)', // 评论数
totalLikes:'@integer(0,500)', // 点赞数
publishedAt:'datetime("yyyy-MM-dd HH:mm")', // 发布时间
user:{ // 用户信息
id:"@integer(1,100)",
name:'@cname(2,3)',
avatar:'@image(300*200)' },
tags:() => Mock.Random.pick(tags,2), // 随机2个标签
thumbnail:'@image(300*200)', // 缩略图
pics:['@image(300*200)','@image(300*200)','@image(300*200)'], // 图片组
id:'@increment(1)' // 自增ID
}
]
}).list;
步骤 2：定义 Mock 接口并实现分页
接口文档要求GET /api/posts?page=1&limit=10返回分页数据，需解析分页参数、切割数据并返回分页信息：
export default [
{
url:'/api/posts', // 匹配接口地址
method:'get', // 匹配请求方法
response:({ query },res) => {
// 1. 解析分页参数（默认page=1，limit=10）
const { page = '1',limit = '10' } = query;
const currentPage = parseInt(page,10);
const size = parseInt(limit,10);
// 2. 校验参数合法性
if(isNaN(currentPage) || isNaN(size) || currentPage < 1 || size < 1){
return {
code: 400,
msg:"Invalid page or pageSize",
data: null
}
}
// 3. 计算分页数据：总条数、起始/结束索引
const total = posts.length; // 数据总条数
const start = (currentPage - 1) * size; // 数据起始位置
const end = start + size; // 数据结束位置
const pagenatedData = posts.slice(start,end); // 切割分页数据
// 4. 返回分页结果
return {
code:200,
msg:'success',
items:pagenatedData, // 当前页数据列表
pagination:{ // 分页信息
current:currentPage, // 当前页码
limit:size, // 每页条数
total, // 总条数
totalPage:Math.ceil(total/size) // 总页数
}
}
}
}
]
分页核心逻辑解析
分页是列表接口的必备能力，Mock 中实现分页的核心步骤：
- 参数解析：从请求参数中获取
page（当前页）和limit（每页条数），转为整数并校验合法性； - 数据切割：通过
(currentPage - 1) * size计算起始索引，start + size计算结束索引，用slice(start, end)切割总数据得到当前页数据； - 分页信息返回：需返回
当前页、每页条数、总条数、总页数，方便前端渲染分页组件。
四、MockJS 的核心意义
- 提升开发效率：前后端并行开发，前端无需依赖后端接口进度，独立完成页面开发与调试；
- 降低联调成本：基于接口文档 Mock 数据，确保前端数据格式与后端完全一致，联调时只需切换接口地址即可无缝对接；
- 灵活模拟场景：可自由调整 Mock 数据量（如本文 45 条）、分页参数，模拟 “第一页”“最后一页”“无数据” 等边界场景；
- 解耦开发流程：前端专注页面逻辑，后端专注接口开发，符合前后端分离的核心思想。
五、上线切换真实接口
Mock 仅用于开发阶段，上线前只需：
- 关闭 Vite 的 Mock 插件（
prodEnabled: false）； - 将 axios 的请求基础地址从 Mock 地址切换为后端真实接口地址；
- 无需修改业务代码，即可无缝对接真实后端数据。
