JavaScriptNode.jsAI大前端
在 Cursor 中使用 MCP 服务详解
在 Cursor 编辑器中配置和使用 MCP（Multi-Cloud Platform）服务的完整流程。内容包括环境准备（Python uv、Node.js）、全局或项目级 MCP Server 配置方法，以及集成 MySQL、高德地图和文件系统的具体步骤。通过自然语言提示词，实现数据采集、数据库操作、文件生成及前端页面展示的全自动化，提升开发效率。
在 Cursor 编辑器中配置和使用 MCP（Multi-Cloud Platform）服务的完整流程。内容包括环境准备（Python uv、Node.js）、全局或项目级 MCP Server 配置方法，以及集成 MySQL、高德地图和文件系统的具体步骤。通过自然语言提示词，实现数据采集、数据库操作、文件生成及前端页面展示的全自动化，提升开发效率。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
随着 AI 编程助手的普及，越来越多开发者选择在 Cursor 等智能 IDE 中进行高效开发。Cursor 不仅支持代码补全、智能搜索，还能通过 MCP（Multi-Cloud Platform）服务，轻松调用如高德地图 API、数据库等多种外部服务，实现数据采集、处理和自动化办公。
本文以'北京一日游自动化攻略'为例，详细讲解如何在 Cursor 中使用 MCP 服务，完成数据采集、数据库操作、文件生成和前端页面展示的全流程。
MCP（Multi-Cloud Platform）是 Cursor 内置的多云服务接口，支持调用地图、数据库、文件系统等多种 API。通过 MCP，开发者无需手动写 HTTP 请求或繁琐配置，只需在对话中描述需求，AI 助手即可自动调用相关服务，极大提升开发效率。
确保已安装 Cursor 编辑器。
若已经配置 Python 环境，可使用以下命令安装：
pip install uv
若没有配置 Python 环境，在 Windows 下可以通过 PowerShell 运行命令来安装：
powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
使用 uv --version 和 uvx --help 检查是否安装成功。
在官网下载 Node.js，并配置环境变量。
在 Cursor 中添加 MCP Server 有两种配置方式。
通过 Cursor Settings -> MCP -> Add new global MCP server 添加全局可用的 MCP 服务。
在项目目录的 .cursor 目录中新建 mcp.json 文件进行配置，仅对特定项目生效。
选择平台获取配置信息将 JSON 复制到 mcp.json 文件中。
可能粘贴过来不好使，需要找到 GitHub 链接，从 GitHub 上粘贴。
注意：这个 MySQL MCP 服务，需要提前建好数据库，否则无法成功。
注意：验证是否生效 将 MCP 服务信息填在
mcp.json文件中后，需要打开 Settings -> MCP 检查你配置的 MCP Server 是否在列表中显示，并确认有绿点且状态为 Enabled。
高德地图的 MCP Server 需要从 MCP.so 平台获取。
申请高德地图的 API：https://console.amap.com/
配置文件系统服务以允许 AI 操作本地文件。
{"mcpServers":{"mysql":{"command":"npx","args":["-y","@f4ww4z/mcp-mysql-server"],"env":{"MYSQL_HOST":"localhost","MYSQL_USER":"root","MYSQL_PASSWORD":"数据库密码","MYSQL_DATABASE":"beijing_trip（数据库名字 - 请提前创建数据库）"}},"amap-maps":{"command":"npx","args":["-y","@amap/amap-maps-mcp-server"],"env":{"AMAP_MAPS_API_KEY":"高德 key"}},"filesystem":{"command":"npx","args":["-y","@modelcontextprotocol/server-filesystem","D:/DESKTOP/MCP（保存地址自行修改）"]}}}
现在交给你一个任务，编写一个北京一日游的出行攻略 1、从高德地图的 MCP 服务中获取北京站到天安门、天安门到颐和园、颐和园到南锣鼓巷 的地铁线路，并保存在数据库 beijing_trip 的表 subway_trips 中 2、从高德地图的 MCP 中获取颐和园、南锣鼓巷附件的美食信息，每处获取三家美食店铺 信息，并将相应的信息存入表 location_foods 中 3、在工作目录 D:\DESKTOP\MCP 下创建一个新的文件夹，命名为'北京旅行'在其中创 建两个 txt，分别从数据库中将两个表的内容提取出存放进去。4、最后根据 txt 中的内容，生成一个精美的 html 前端展示页面，并存放在该目录下
自己创建的数据表和插入的数据如下：
-- auto-generated definition create table location_foods (id int auto_increment primary key, location varchar(64) not null, name varchar(128) not null, address varchar(256) null, tel varchar(64) null, type varchar(64) null, distance varchar(32) null );
-- auto-generated definition create table subway_trips (id int auto_increment primary key, start_location varchar(64) not null, end_location varchar(64) not null, subway_lines text not null, duration varchar(32) null, distance varchar(32) null );
效果图展示生成的 HTML 页面。
在 Cursor 中结合 MCP 服务和 AI 助手，可以极大提升开发和数据处理效率。无论是地图数据采集、数据库管理，还是自动化生成前端页面，都能一站式完成。