Mockjs：项目实战，以 “用户管理系统” 为例，展示如何在实际开发中使用 Mock.js 模拟后端接口，实现独立开发与测试

原创 已于 2025-11-01 09:21:06 修改 · 517 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #前端 #html5 #前端框架 #ajax #vue.js

于 2025-11-01 00:44:27 首次发布

以下是一个基于 Mock.js 的前端项目实战案例，以 “用户管理系统” 为例，展示如何在实际开发中使用 Mock.js 模拟后端接口，实现独立开发与测试。

项目背景

假设我们需要开发一个用户管理系统，包含用户列表查询、用户详情查看、新增用户、删除用户四个核心功能。后端接口尚未开发完成，前端需基于接口文档用 Mock.js 模拟数据，先行开发页面与交互。

技术栈

  • 前端框架：Vue 3（或 React，思路一致）
  • 请求库：Axios
  • 模拟工具：Mock.js
  • UI 组件库：Element Plus（可选）

实战步骤

步骤 1：环境搭建

  1. 创建 Vue 项目并安装依赖：

    # 创建项目
vue create mock-demo
cd mock-demo

# 安装依赖
npm install axios mockjs --save
npm install element-plus --save # 可选，用于快速搭建 UI

  2. 目录结构规划：

    src/
├── api/           # 接口请求封装
│   └── user.js    # 用户相关接口
├── mock/          # Mock 配置
│   └── userMock.js # 用户接口模拟规则
├── views/         # 页面组件
│   └── UserManage.vue # 用户管理页面
├── main.js        # 入口文件（引入 Mock）

步骤 2：定义接口文档（模拟）

假设后端提供的接口文档如下：

接口功能请求地址方法请求参数响应格式
获取用户列表/api/usersGETpage（页码）、size（每页条数）{ code: 200, data: { list: [], total: 100 } }
获取用户详情/api/users/:idGETid（用户 ID）{ code: 200, data: { id, name, ... } }
新增用户/api/usersPOSTname、age、email{ code: 200, data: { id, ... } }
删除用户/api/users/:idDELETEid（用户 ID）{ code: 200, message: "删除成功" }

步骤 3：编写 Mock 规则（src/mock/userMock.js）

根据接口文档，用 Mock.js 定义模拟数据和请求拦截规则：

import Mock from 'mockjs';
import { param2Obj } from '../utils'; // 工具函数：解析 URL 参数（见下文）

// 模拟用户数据（全局变量，用于模拟“数据持久化”）
let userList = Mock.mock({
  'list|100': [{ // 初始生成 100 条用户数据
    'id|+1': 1, // 自增 ID
    'name': '@cname', // 中文姓名
    'age|18-60': 1, // 年龄 18-60
    'email': '@email', // 随机邮箱
    'gender|1': ['男', '女'], // 性别
    'phone': '@phone', // 手机号
    'address': '@city(true)', // 地址（省+市）
    'createTime': '@datetime("yyyy-MM-dd HH:mm:ss")' // 创建时间
  }]
}).list;

// 1. 拦截：获取用户列表（分页）
Mock.mock(/\/api\/users/, 'get', (options) => {
  // 解析请求参数（page、size）
  const { page = 1, size = 10 } = param2Obj(options.url);
  const startIndex = (page - 1) * size;
  const endIndex = startIndex + parseInt(size);
  
  // 模拟分页逻辑
  const mockList = userList.filter((_, index) => index >= startIndex && index < endIndex);
  return {
    code: 200,
    data: {
      list: mockList,
      total: userList.length // 总条数
    }
  };
});

// 2. 拦截：获取用户详情
Mock.mock(/\/api\/users\/(\d+)/, 'get', (options) => {
  // 从 URL 中提取 ID（如 /api/users/123 → 123）
  const id = parseInt(options.url.match(/\/api\/users\/(\d+)/)[1]);
  const user = userList.find(u => u.id === id);
  
  return user 
    ? { code: 200, data: user } 
    : { code: 404, message: '用户不存在' };
});

// 3. 拦截：新增用户
Mock.mock(/\/api\/users/, 'post', (options) => {
  // 解析请求体（新增用户的信息）
  const newUser = JSON.parse(options.body);
  // 生成新 ID（最大 ID + 1）
  const maxId = Math.max(...userList.map(u => u.id), 0);
  newUser.id = maxId + 1;
  newUser.createTime = Mock.mock('@datetime("yyyy-MM-dd HH:mm:ss")'); // 补充创建时间
  
  // 添加到用户列表
  userList.unshift(newUser); // 新增用户放最前面
  return { code: 200, data: newUser, message: '新增成功' };
});

// 4. 拦截：删除用户
Mock.mock(/\/api\/users\/(\d+)/, 'delete', (options) => {
  const id = parseInt(options.url.match(/\/api\/users\/(\d+)/)[1]);
  const index = userList.findIndex(u => u.id === id);
  
  if (index !== -1) {
    userList.splice(index, 1); // 从列表中删除
    return { code: 200, message: '删除成功' };
  } else {
    return { code: 404, message: '用户不存在' };
  }
});

// 工具函数：解析 URL 参数为对象（如 ?page=1&size=10 → { page: '1', size: '10' }）
export function param2Obj(url) {
  const search = url.split('?')[1];
  if (!search) return {};
  return JSON.parse(
    '{"' +
    decodeURIComponent(search)
      .replace(/"/g, '\\"')
      .replace(/&/g, '","')
      .replace(/=/g, '":"') +
    '"}'
  );
}

步骤 4：封装 API 请求（src/api/user.js）

用 Axios 封装接口请求，与 Mock 拦截的地址对应：

import axios from 'axios';

// 1. 获取用户列表（分页）
export const getUserList = (page, size) => {
  return axios.get('/api/users', { params: { page, size } });
};

// 2. 获取用户详情
export const getUserDetail = (id) => {
  return axios.get(`/api/users/${id}`);
};

// 3. 新增用户
export const addUser = (userData) => {
  return axios.post('/api/users', userData);
};

// 4. 删除用户
export const deleteUser = (id) => {
  return axios.delete(`/api/users/${id}`);
};

步骤 5：在页面中使用（src/views/UserManage.vue）

开发用户管理页面，调用 API 接口（实际会被 Mock 拦截）：

<template>
  <div class="user-manage">
    <el-card>
      <div class="header">
        <h2>用户管理</h2>
        <el-button type="primary" @click="showAddDialog = true">新增用户</el-button>
      </div>

      <!-- 用户列表 -->
      <el-table :data="userList" border>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="handleDetail(scope.row.id)">查看</el-button>
            <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        :current-page="page"
        :page-size="size"
        :total="total"
        @current-change="handlePageChange"
      ></el-pagination>

      <!-- 新增用户弹窗 -->
      <el-dialog v-model="showAddDialog" title="新增用户">
        <el-form :model="newUser" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="newUser.name"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model.number="newUser.age"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="newUser.email"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="newUser.gender">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="showAddDialog = false">取消</el-button>
          <el-button type="primary" @click="handleAdd">确定</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getUserList, addUser, deleteUser } from '../api/user';
import { ElMessage } from 'element-plus';

// 分页参数
const page = ref(1);
const size = ref(10);
const total = ref(0);
const userList = ref([]);

// 新增用户弹窗
const showAddDialog = ref(false);
const newUser = ref({ name: '', age: 18, email: '', gender: '男' });

// 初始化加载用户列表
const loadUserList = async () => {
  try {
    const res = await getUserList(page.value, size.value);
    userList.value = res.data.data.list;
    total.value = res.data.data.total;
  } catch (err) {
    console.error('加载用户失败', err);
  }
};

// 分页切换
const handlePageChange = (newPage) => {
  page.value = newPage;
  loadUserList();
};

// 新增用户
const handleAdd = async () => {
  try {
    await addUser(newUser.value);
    ElMessage.success('新增成功');
    showAddDialog.value = false;
    newUser.value = { name: '', age: 18, email: '', gender: '男' }; // 重置表单
    loadUserList(); // 刷新列表
  } catch (err) {
    ElMessage.error('新增失败');
  }
};

// 删除用户
const handleDelete = async (id) => {
  try {
    await deleteUser(id);
    ElMessage.success('删除成功');
    loadUserList(); // 刷新列表
  } catch (err) {
    ElMessage.error('删除失败');
  }
};

// 查看详情（简化处理）
const handleDetail = (id) => {
  ElMessage.info(`查看 ID 为 ${id} 的用户详情`);
};

// 页面挂载时加载数据
onMounted(loadUserList);
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style>

步骤 6：在入口文件中引入 Mock（src/main.js）

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

// 引入 Mock 配置（生产环境可注释掉）
import './mock/userMock';

createApp(App)
  .use(router)
  .use(ElementPlus)
  .mount('#app');

关键实现说明

  1. 数据持久化模拟：用全局变量 userList 存储用户数据，新增 / 删除操作直接修改该变量，模拟后端数据库的 “持久化” 效果，确保页面刷新后数据状态一致（实际开发中可结合 localStorage 进一步优化）。

  2. 动态参数处理：通过正则匹配 URL（如 /api/users/:id）和解析请求参数（page、size），模拟真实接口的动态路由和分页逻辑。

  3. 业务逻辑模拟：模拟了 “用户不存在”“删除成功 / 失败” 等场景，使前端能完整测试各种交互流程。

  4. 环境隔离：Mock 配置仅在开发环境引入，生产环境可通过注释或环境变量控制，避免影响真实接口。

运行效果

启动项目后，即可在页面上：

  • 分页查看模拟的用户列表；
  • 点击 “新增用户” 提交表单，新增数据会实时显示在列表；
  • 点击 “删除” 按钮移除用户，列表自动刷新；
  • 所有操作均无需后端接口，完全由 Mock.js 模拟响应。

总结

通过 Mock.js，前端可以在后端接口就绪前独立完成页面开发、交互逻辑和边界场景测试，大幅提升前后端并行开发效率。实际项目中，可根据接口文档扩展更多 Mock 规则（如异常状态码、复杂嵌套数据等），进一步贴近真实业务场景。

Vue2+ECharts+Mock.js实现前端后台通用管理系统页面
weixin_74457498的博客
10-14 1901
在现代Web开发中，前端框架与数据可视化工具的结合能够显著提升用户体验。本文将介绍如何使用Vue2和ECharts构建一个通用的后台管理系统页面。利用Vue2的组件化特性，可以高效管理应用状态与UI交互，而ECharts则提供多样的图表类型，便于展示数据分析结果。通过整合这两者，开发者能够快速构建出既美观又功能强大的后台管理系统，实现数据的动态展示与实时更新，从而帮助用户做出更明智的决策。
Mock.mock(url, rtype, template) 劫持 AJAX 的原理
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-31 1158
是一种常见的方法，用于拦截和模拟 AJAX 请求。它的主要用途是在前端开发过程中模拟服务器端的数据响应，以便开发者可以在没有真实服务器的情况下进行前端测试。url: 请求的 URL，可以是具体的 URL 字符串或正则表达式。rtype: 指定请求类型，如'get''post'等。template: 一个函数或 JSON 对象，用来构造响应的数据。通过本文的介绍，你应该对如何使用方法有了深入的理解，并且学会了如何在不同的场景下模拟 AJAX 请求。
全面掌握前端开发：Vue+mock.js+axios实战指南
weixin_36078669的博客
07-30 382
Vue.js是一个高效的、渐进式的JavaScript框架，它使得开发者能够轻松地创建交互式的网页应用。Vue的核心特性包括简洁的模板语法、组件化开发和虚拟DOM，让数据的双向绑定及视图更新变得异常简单。Mock.js 的强大之处在于它提供了一套完整的数据模板定义规则，能够让我们非常灵活地定义数据结构。例如，以下是一个简单的 Mock.js 模拟数据定义的例子：}]});
vue项目 - Mockjs 模拟后台接口数据
m0_50125215的博客
08-07 721
Mock 可以进行生成随机数据，模拟后端接口数据，从而实现开发时，前后端分离，提高效率。 1、安装 npm i mockjs -S or yarn add mockjs 2、引入 在src文件目录下，新建mock.js文件并引入： const Mock = require('mockjs') 之后，在main.js文件中加载mock.js `` require(./mock.js) 3、简单使用 格式： Mock.mock (“请求的URL地址”, {“数据对象”}) Mock.mock(url,
使用dva和Mock.js进行前端模拟请求实现指南
weixin_30415591的博客
09-15 1756
本文还有配套的精品资源，点击获取 简介：在前端开发中，使用 dva 和 Mock.js 可以有效实现模拟请求，提升开发效率。本篇指南将详细讲解如何在基于 React 和 Redux 的 dva 项目中集成 Mock.js ，包括安装、配置、引入和使用模拟API接口的步骤。此外，本指南还将介绍...
【前端】Vue+Element UI案例：通用后台管理系统-Echarts图表准备：axios封装、mock数据模拟实战
karshey的博客
11-07 4246
Vue+Element UI案例：通用后台管理系统-Echarts图表准备：axios封装、mock数据模拟实战
【Vue实战三件套】如何封装网络请求、如何解决跨域问题，如何使用mock模拟后端数据，快来一起来看看吧~
可可的博客
11-19 1623
在一个产品的前端开发过程中，一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境，然后才能正式的发布。对应每一个环境可能都会有所差异，比如说用户访问资源权限、服务器地址、接口地址等。在各个环境切换的时候，就需要不同的配置参数，所以就可以用环境变量和模式，来方便我们管理。NODE_ENV是一个由 Node.js 暴露给执行脚本的系统环境变量。通常用于确定在开发环境还是生产环境(dev-vs-prod)下，服务器工具、构建脚本和客户端 library 的行为。
前后端分离项目实战-通用管理系统搭建（前端Vue3+ElementPlus，后端Springboot+Mysql+Redis）第一篇：项目创建和工具安装集成
博客主要分享技术教程、工具教程、bug解决、前沿技术动态、编程经验、心得感悟等。 内容同步、干货获取、推广宣发请看侧栏推广信息
08-14 1112
每个人都有惰性，但不断学习是好好生活的根本，共勉！明月出天山，苍茫云海间。——《关山月》
基于vue3的权限管理系统脚手架搭建项目实战（一）：项目准备
晓风残月淡的博客
06-03 2426
本项目使用springboot+vue3+typescript的技术栈开发。
接口数据自动生成实战指南：从 Mock 到测试数据自动构造
啊不行了，要长脑子了
05-29 885
摘要：接口数据自动生成实战指南 本文系统介绍了接口数据自动生成的核心应用场景与技术方案。主要内容包括： 五大典型应用场景：联调Mock、测试数据构造、API文档生成、Prompt构造、业务测试数据 主流技术选型：涵盖JavaScript、Python、Java三大生态的Mock工具链 实用示例代码：展示Mock.js和Python Faker的典型用法 结构化数据生成方案：基于JSON Schema的自动化数据构造 工具推荐清单：对比各场景下的最佳实践工具 常见问题解决建议：针对数据结构变更、环境适配等痛点
前端Mock技术实战：动态数据构造与接口模拟
前端Mock技术是现代前端开发中不可或缺的重要环节，尤其在前后端分离架构日益普及的背景下，前端开发者需要在后端接口尚未完成或不稳定的情况下独立进行页面开发与测试。此时，通过使用Mock技术模拟真实的API接口...
mockJvs：实现MockJS在Angular中的兼容性支持
mockJvs 是一个专为 Angular 框架设计的兼容性工具，旨在将流行的 JavaScript 数据模拟库 MockJS 无缝集成到 Angular 项目中。在现代前端开发中，尤其是在使用 Angular 这类大型框架进行复杂应用构建时，前后端并行...
npm 包数据模拟：开发环境API Mock解决方案
小白菜的博客
07-06 691
本文旨在为前端开发者提供一套完整的API Mock解决方案，特别是在前后端并行开发的场景下，如何通过npm包实现高效的数据模拟。我们将覆盖从基础概念到高级应用的完整知识体系。核心概念与联系：介绍API Mock的基本概念和重要性核心解决方案：详细讲解主流npm Mock工具的原理和使用项目实战：通过实际案例展示如何搭建和使用Mock环境高级应用与最佳实践：分享Mock数据的高级技巧和行业经验API Mock：模拟真实API接口的行为和返回数据前后端分离。
javascript 性能优化实战：异步和延迟加载
小伙伴们全都Lucky！
12-11 935
本文探讨JavaScript性能优化中的异步加载与延迟加载技术。异步加载通过async/defer属性或动态创建script元素避免阻塞渲染；延迟加载则利用IntersectionObserver API按需加载非关键资源。二者结合可显著提升性能：异步加载核心脚本确保交互流畅，延迟加载减少初始请求量。实践表明，该方案能降低DOMContentLoaded时间30%以上，减少初始加载量90%，但需注意async脚本的执行顺序问题和延迟加载的回退处理。文中提供了完整的代码实现示例。
商城后台管理系统 02 添加规格参数-动态表单
weixin_52943021的博客
12-15 171
Boolean。
JavaScript 根据数组对象的某个 指定属性 分组合并，并累加金额
最新发布
zhangyao940330的博客
12-15 156
item } 浅拷贝原对象的所有属性（如 id、name），合并时仅更新金额，其他属性保留第一个分组对象的值（若需保留所有属性，可修改为数组存储，如 name: [‘苹果’, ‘香蕉’]）。分组逻辑：用 Map 存储分组，键为 groupKey 的值（如 ‘水果’），值为合并后的对象。Map 比普通对象更安全（避免键名冲突，支持数字 / 对象等类型的键）。缺失金额或非数字（如 undefined、‘abc’）视为 0。字符串金额（如 ‘8’）自动转为数字；扩展需求：保留分组内所有非金额属性。
第十篇：Day28-30 工程化优化与部署——从“能跑”到“好用”（对标职场“项目上线”需求）
2402_87628679的博客
12-11 958
gzip on;性能优化：掌握Vite的资源压缩、Tree Shaking、代码分割配置，能实现路由/组件懒加载、虚拟滚动等渲染优化，理解gzip/br压缩的原理和后端配置；兼容性处理：能通过`@vitejs/plugin-legacy`和autoprefixer适配低版本浏览器，理解`browserslist`的作用，知道Vue 3的兼容性限制；多环境配置：能创建多环境变量文件，在项目中使用`import.meta.env`访问环境变量，区分开发/测试/生产环境的配置；项目部署。
ESM (ES Modules) 和 CJS (CommonJS)
Irene1991的博客
12-11 648
ESM和CJS是JavaScript的两种模块系统。ESM是ES6引入的现代标准，采用静态编译时加载，支持TreeShaking；CJS是Node.js传统方式，采用动态运行时加载。ESM语法为import/export，CJS为require()/module.exports。新项目推荐ESM，维护旧项目可使用CJS。两者可互相调用：ESM通过createRequire调用CJS，CJS通过动态import()调用ESM。配置时需注意文件扩展名和package.json的type字段声明。ESM代表Jav
第十一篇：Day31-33 前端安全与性能监控——从“能用”到“安全可靠”（对标职场“系统稳定性”需求）
2402_87628679的博客
12-11 1235
对于小型项目或特定业务场景，可通过自定义埋点实现核心指标监控，无需接入复杂工具。// src/utils/monitor.js（自定义监控工具） import axios from 'axios';// 监控数据上报接口（后端提供） const MONITOR_UPLOAD_URL = '/api/monitor/upload';
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

canjun_wen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值