今天苏米就手把手教大家如何使用Cursor的MCP功能搭建一个Mock数据服务，里面也有涉及到工作流的创建，可以带大家快速的了解和认识MCP这个平台的场景应用能力。
用AI编程工具Cursor写好了前端项目界面，需要对接数据了，这下后端数据问题怎么办，今天苏米要分享的这个接口调试工具非常值得了解一下。
1. MCP与Mock结合的威力
MCP 是什么？
MCP，全称模型上下文协议（Model Context Protocol），是由 Anthropic 推出的一项开放标准，目标是为大型语言模型和 AI 助手提供一个统一、标准化的接口，使 AI 能够轻松操作外部工具并完成更复杂的任务。
简单来说，MCP就像是给AI工具装上了各种"插件"，让它们能够访问外部数据源、调用各种服务，极大地扩展了AI的能力边界。
Mock 介绍
Mock 英文解释：模拟的，也就是模拟的数据。
产品开发流程通常会遇到这 2 种情况：
-
工作中等着和后端人员调试接口，但是后端接口写的太 TMD 慢了，实在等不及了。
-
只会写前端，不会写后端。需要后端接口提供测试数据。
那有了 Mock 之后，前端人员就有了测试数据，然后就可以愉快地进行开发和测试了。
所以，说白了 Mock 就是一个像后端一样可以提供模拟数据的工具。
在没有 Mock 之前，大多数人一般都是这样获取模拟数据的：
提供一个 json 文件，里面都是死数据
然后请求本地 json 文件：
<template>
<div class="main-container">
<h1>用户列表</h1>
<el-table :data="userList" border style="width: 400px">
<el-table-column prop="id" label="id" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="age" label="年龄" />
</el-table>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
onMounted(() => {
getUserList();
});
const userList = ref([]);
const getUserList = async () => {
// 直接请求本地JSON文件
const response = await fetch("/src/mock/json/user.json");
userList.value = await response.json();
};
</script>
这种情况虽然也能模拟后端接口数据，但数据不是动态的。比如无法模拟分页数据等动态接口行为。
所以我们需要在项目中安装 Mock 工具，帮助我们模拟动态接口行为。
2. Vue 项目中使用 Mock
2.1 安装使用 Mock
安装依赖：
npm install mockjs --save-dev
在项目中新建 mock 文件夹，然后新建 /api/index.js 文件，创建 Mock 服务：
import Mock from 'mockjs';
// 模拟获取用户列表的接口
Mock.mock('/api/users', 'get', {
'list|10': [
{
'id|+1': 1,
'name': '@cname',
'age|18-60': 1
}
]
});
在 main.js 中导入 mock：
import './mock/api/index.js'
在组件中使用 Mock 数据：
<template>
<div class="main-container">
<h1>用户列表</h1>
<el-table :data="userList" border style="width: 400px">
<el-table-column prop="id" label="id" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="age" label="年龄" />
</el-table>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
onMounted(() => {
getUserList();
});
const userList = ref([]);
const getUserList = async () => {
const res = await axios.get("/api/users");
userList.value = res.data.list;
};
</script>
2.2 Mock 基础语法
Mock.js 使用特定的语法规则来定义模拟数据的结构，语法格式为：
'name|rule': value
-
name：属性名
-
rule：生成规则（可选）
-
value：属性值
1. 字符串
// 生成 1-5 个随机中文字符
'name|1-5': '@cword'
// 生成 5 个随机英文字符
'code|5': '@word'
2. 数字
// 生成 30-100 之间的整数
'age|30-100': 1
// 生成带小数的浮点数（整数部分30-100，小数部分1-2位）
'score|30-100.1-2': 1
// id 自增（每次+1）
'id|+1': 100
3. 布尔值
// 50% 概率为 true
'isActive|1': true
// 1/3 概率为 true，2/3 概率为 false
'isAdmin|1-2': true
4. 对象
// 从对象中随机选取 2 个属性
'info|2': {
name: '@cname',
age: '@integer(30,100)',
gender: '@pick(["男","女"])'
}
// 从对象中随机选取 1-3 个属性
'contact|1-3': {
email: '@email',
phone: /1[3-9]\d{9}/,
wechat: '@word(4,16)'
}
5. 数组
// 从数组中随机选取 1 个元素
'fruit|1': ['apple', 'banana', 'grape', 'Orange']
// 重复数组元素 3-5 次生成新数组
'tags|3-5': ['前端', 'JavaScript', 'Vue', 'React']
// 生成包含 10 个对象的数组
'users|10': [
{
'id|+1': 100,
'name': '@cname',
'age': '@integer(18,60)'
}
]
2.3 Mock 常用占位符
Mock.js 提供了丰富的占位符来生成特定格式的数据：
| 占位符 | 说明 | 示例 |
|---|---|---|
| @boolean | 随机布尔值 | true/false |
| @integer(min, max) | 随机整数 | 18, 42 |
| @float(min, max, dmin, dmax) | 随机浮点数 | 1998.12 |
| @string(length) | 随机字符串 | "fgG" |
| @cword(length) | 随机中文字符 | "脚手架" |
| @ctitle(min, max) | 随机中文标题 | "React" |
| @cname | 随机中文姓名 | "苏米客" |
| 随机邮箱 | "zhifou@qq.com" | |
| @region | 随机地区 | "西北" |
| @province | 随机省份 | "浙江省" |
| @city | 随机城市 | "杭州市" |
| @county | 随机区县 | "滨江区" |
| @url | 随机URL | "https://qq.com" |
| @date(format) | 随机日期 | "2025-06-24" |
| @time(format) | 随机时间 | "22:31:23" |
| @datetime | 随机日期时间 | "2025-06-24 22:31:23" |
| @image(size, bg, fg, text) | 随机图片URL | "https://image.com/300x100" |
| @color | 随机颜色 | "#ffffff" |
3. Mock 实战案例
3.1 用户登录
// 模拟登录接口
Mock.mock("/api/login", "post", (options) => {
const { username, password } = JSON.parse(options.body);
if (username === "zhifou" && password === "123456") {
return {
status: 200,
message: "登录成功",
token: "@wwwwww.123",
};
} else {
return { status: 401, message: "用户名或密码错误" };
}
});
3.2 新增用户
// 拦截 POST 请求
Mock.mock('/api/user/create', 'post', (options) => {
const body = JSON.parse(options.body)
return {
'code': 200,
'message': 'success',
'data': {
'id': '@id',
'name': body.name,
'createTime': '@now'
}
}
})
3.3 分页数据
Mock.mock('/api/items', 'get', (options) => {
const pageSize = Number(options.query.pageSize) || 10; // 每页大小，默认为10
const page = Number(options.query.page) || 1;
return Mock.mock({
'code': 200,
'message': 'success',
'data': {
'total': 100,
[`list|${pageSize}`]: [{
'id|+1': (page - 1) * pageSize + 1,
'name': '@cname',
'age|18-60': 1,
'gender|1': ['男', '女'],
'email': '@email',
'address': '@county(true)',
'status|1': ['正常', '禁用'],
'createTime': '@datetime'
}]
}
})
});
4. Cursor MCP 集成方案
4.1 什么是 Cursor MCP
MCP (Model Context Protocol) 是一种允许 AI 模型与外部工具和服务交互的协议。在 Cursor 中，MCP 使 AI 能够访问外部资源、执行特定操作，从而增强编程体验。
4.2 配置 MCP 服务
在 Cursor 中，你可以通过以下步骤配置 MCP：
-
打开 Cursor 设置
-
找到 Features 选项
-
向下滑动找到 MCP Servers
-
点击 Add new MCP Server
4.3 Auto API - YApi MCP 实战
下面苏米就以 YApi 接口平台的 MCP 来实践一下：
因每次前端开发时每次复制粘贴 YApi 的后端接口和手动创建 TS 类型和 Mock 数据比较麻烦，因此开发自动化 MCP，使用 TypeScript SDK 开发，以 YApi 举例给大家提供思路而已，其他同理。
Auto API - YApi MCP 服务
一个基于 Model Context Protocol (MCP) 的 YApi 接口信息获取工具
安装方式
{
"mcpServers": {
"auto-api-mcp": {
"command": "npx",
"args": ["auto-api-mcp"],
"env": {
"YAPI_COOKIE": "_yapi_token=your_token; _yapi_uid=your_uid",
"BASE_URL": "https://your-yapi-domain.com"
}
}
}
}
使用方式
一句话即可：
@https://xxxxx.com/project/810/interface/api/cat_2813 帮我生成这个接口的 TypeScript 类型定义和 Mock 数据
你将会得到：
-
接口的 TypeScript Model
export interface UserInfo {
id: number;
name: string;
email: string;
age: number;
status: 'active' | 'inactive';
createTime: string;
}
export interface ApiResponse<T> {
code: number;
message: string;
data: T;
}
-
接口的 Interface 定义
export interface UserApi {
getUserList(params: {
page: number;
pageSize: number;
keyword?: string;
}): Promise<ApiResponse<{
list: UserInfo[];
total: number;
}>>;
getUserById(id: number): Promise<ApiResponse<UserInfo>>;
createUser(data: Omit<UserInfo, 'id' | 'createTime'>): Promise<ApiResponse<UserInfo>>;
}
-
Mock 数据
import Mock from 'mockjs';
// 用户列表
Mock.mock('/api/users', 'get', (options) => {
const query = new URLSearchParams(options.url.split('?')[1]);
const page = Number(query.get('page')) || 1;
const pageSize = Number(query.get('pageSize')) || 10;
return Mock.mock({
code: 200,
message: 'success',
data: {
total: 156,
[`list|${pageSize}`]: [{
'id|+1': (page - 1) * pageSize + 1,
'name': '@cname',
'email': '@email',
'age|18-65': 1,
'status|1': ['active', 'inactive'],
'createTime': '@datetime'
}]
}
});
});
// 获取单个用户
Mock.mock(/\/api\/users\/\d+/, 'get', (options) => {
const id = options.url.match(/\/api\/users\/(\d+)/)[1];
return Mock.mock({
code: 200,
message: 'success',
data: {
id: Number(id),
name: '@cname',
email: '@email',
age: '@integer(18,65)',
status: '@pick(["active", "inactive"])',
createTime: '@datetime'
}
});
});
-
友好的结果展示
通过 MCP 的集成，你可以在 Cursor 中直接获得：
-
完整的 API 文档解析
-
自动生成的 TypeScript 类型定义
-
即用的 Mock 数据配置
-
符合项目结构的代码组织
5. 注意事项与最佳实践
5.1 按功能模块维护 Mock 数据
为了方便管理和维护，我们可以将不同功能模块的 Mock 数据分别放在不同的文件中：
mock/
├── api/
│ ├── user.js // 用户相关
│ ├── order.js // 订单相关
│ ├── product.js // 商品相关
│ └── index.js // 入口文件
5.2 区分开发环境和生产环境
我们只在开发环境中使用 Mock 数据，所以可以通过环境变量来控制是否引入 Mock 文件：
if (process.env.NODE_ENV === 'development') {
require('./mock');
}
5.3 MCP 最佳实践
-
合理配置环境变量：敏感信息如 token、cookie 等应该通过环境变量配置
-
接口地址标准化：确保 YApi 或其他平台的接口地址格式统一
-
类型定义完整性：生成的 TypeScript 类型应该包含所有必要的字段定义
-
Mock 数据真实性：生成的 Mock 数据应该尽可能贴近真实业务场景
6. 总结
通过 MCP 和 Mock 的结合，我们实现了：
-
开发效率提升：不再需要等待后端接口开发完成
-
类型安全保障：自动生成的 TypeScript 类型定义保证了代码质量
-
数据一致性：基于真实接口文档生成的 Mock 数据更加准确
-
工作流优化：一键生成接口定义、类型声明和 Mock 数据
这套方案特别适合：
-
前后端分离的项目开发
-
需要快速原型验证的场景
-
团队协作中接口对接的痛点解决
-
AI 辅助编程的效率提升
MCP 的出现让 AI 编程工具的能力边界得到了极大扩展，结合 Mock 数据生成，真正实现了前端开发的自主性和高效性。希望这篇文章能够帮助到正在为接口调试头疼的同学们！
如果你觉得这篇文章有用，记得点赞收藏哦，有问题也可以在评论区留言交流~