用AI从零开发全栈网站：Cursor+DeepSeek实战教程

当你脑海中闪过一个产品创意，却苦于不会编程时，AI编程工具已经可以帮你把想法变成现实。本文以一个「序列号查询系统」为例，完整记录了如何借助 DeepSeek 和 Cursor，从 MySQL 数据库设计到 Node.js 后端开发，再到 Vue 前端界面搭建，最终通过宝塔面板部署上线的全过程。

先搞懂网站的基本架构

在动手之前，需要先理解一个网站应用的三大核心组成部分：

• 数据库：负责存储和管理所有数据，比如序列号信息、管理员账号等。
• 后端程序：充当「中转站」角色，连接数据库与前端，处理业务逻辑，提供 API 接口。
• 前端界面：用户直接看到和交互的部分，包括输入框、按钮、数据展示等。

三者的协作流程很清晰：用户在前端发起请求 → 前端通过 API 接口将请求发送给后端 → 后端查询数据库并返回结果 → 前端将结果展示给用户。理解了这个链路，后续的开发步骤就有了清晰的脉络。

架构背景补充：这种「前后端分离」架构是当今 Web 开发的主流模式，兴起于 2010 年代中期。在此之前，传统的「前后端一体」模式（如 PHP 直接渲染 HTML 页面）将业务逻辑与界面展示混在一起，维护成本高、协作困难。前后端分离后，两端通过 REST API（一种基于 HTTP 协议的接口规范）进行通信，数据以 JSON 格式传输。这种架构的好处在于：前端可以独立迭代界面，后端可以同时服务多个客户端（网页、App、小程序），职责边界清晰。API 接口本质上就是一组约定好的「数据交换合同」，规定了请求的地址、方式（GET/POST/PUT/DELETE）以及返回的数据结构。

用 DeepSeek 设计 MySQL 数据库

数据库是整个项目的地基。首先需要安装 MySQL 社区版（免费），安装过程中需要注意几个关键配置：端口号（默认3306，如被占用可改为3308）、root 密码（可设为123456）、以及是否随系统启动。

安装完成后，配置好环境变量，就可以在终端中通过命令操作数据库了。

MySQL 背景补充：MySQL 是全球最流行的开源关系型数据库管理系统（RDBMS），由瑞典公司 MySQL AB 开发，2008 年被 Sun 收购，后随 Sun 并入 Oracle 旗下。关系型数据库的核心思想是将数据组织成「表格」形式，表与表之间通过「外键」建立关联关系，就像 Excel 表格之间的引用。操作数据库使用的语言叫做 SQL（结构化查询语言），它包含四类核心操作：DDL（定义表结构）、DML（增删改数据）、DQL（查询数据）、DCL（权限控制）。MySQL 默认监听 3306 端口，这是它在网络上的「门牌号」，其他程序通过这个端口与数据库建立连接。对于个人项目和中小型应用，MySQL 的性能和稳定性完全足够，这也是它成为 LAMP（Linux+Apache+MySQL+PHP）经典技术栈核心组件的原因。

接下来，把开发需求告诉 DeepSeek：「我要做一个序列号查询系统，需要序列号表和管理员表」。DeepSeek 很快就给出了数据库设计方案：

• 序列号表：包含 ID、序列号、有效状态、激活时间、持有者姓名等字段
• 管理员表：包含 ID、用户名、密码等字段

如果觉得某些字段多余（比如创建时间暂时用不上），直接告诉 DeepSeek 删掉即可。它会输出简化版的 SQL 建表语句，复制到终端执行，数据库就搭建完成了。

这个过程的核心价值在于：你不需要学习 SQL 语法，只需要用自然语言描述需求，AI 就能生成可直接执行的数据库命令。

用 Cursor 开发 Node.js 后端

后端开发需要安装两个工具：Node.js（JavaScript 运行环境）和 Cursor（AI 编程助手）。Cursor 的免费额度是每个账号150次请求、每天限50次，用完可以换邮箱重新注册。

Node.js 背景补充：Node.js 诞生于 2009 年，由 Ryan Dahl 创建，它的革命性在于将 JavaScript 从「只能在浏览器里运行」带到了服务器端。Node.js 基于 Google Chrome 的 V8 引擎，采用事件驱动、非阻塞 I/O 模型——简单说就是它不会因为等待数据库查询或文件读写而「卡住」，而是继续处理其他请求，等结果回来再处理，因此非常适合高并发的网络应用。在 Node.js 生态中，最常用的后端框架是 Express.js，它提供了路由管理、中间件机制等核心功能，让开发者能快速搭建 REST API 服务。Node.js 还内置了 npm（Node Package Manager），这是全球最大的开源软件包仓库，拥有超过 200 万个可复用的代码包，开发者可以直接调用现成的功能模块，极大提升开发效率。

在 Cursor 中创建项目后，把完整的开发需求发给它：使用 Node.js 开发后端，告知数据库名、用户名、密码、端口号，以及建表语句，让它开发出必要的 API 接口。

Cursor 相比 DeepSeek 的最大优势在于：它能直接在项目文件夹中生成和修改文件，而不是让你手动复制粘贴代码。 仅一次请求，Cursor 就完成了整个后端程序的开发，生成了以下 API 接口：

接口功能	请求方法	是否需要权限
管理员登录	POST	否
添加序列号	POST	需要 Token
查询序列号	GET	否
更新序列号状态	PUT	需要 Token
获取所有序列号	GET	需要 Token
删除序列号	DELETE	需要 Token

用 Postman 测试后端 API 接口

后端开发完成后，需要验证每个接口是否正常工作。这里用到了 Postman 这款专业的 API 测试工具。

测试流程的核心逻辑是：先通过登录接口获取 Token（身份验证令牌），然后在后续需要权限的请求中携带这个 Token。比如添加序列号时，如果不携带 Token，服务器会返回「未提供认证令牌」的错误——这正是权限验证机制在正常工作。

JWT Token 背景补充：这里的 Token 通常是 JWT（JSON Web Token），一种开放标准（RFC 7519）。传统的身份验证依赖服务器端的 Session 机制：用户登录后，服务器在内存中保存一份会话记录，并给客户端一个 Session ID。这种方式在多台服务器的分布式环境下会遇到「Session 共享」难题。JWT 则将用户信息直接编码进令牌本身，令牌由三部分组成：Header（算法声明）、Payload（用户数据）、Signature（签名），三部分用点号连接，形如 xxxxx.yyyyy.zzzzz。服务器用私钥对令牌签名，任何篡改都会导致签名验证失败，因此无需在服务器端存储状态。客户端每次请求时将 JWT 放在 HTTP 请求头的 Authorization: Bearer <token> 字段中，服务器验证签名后即可确认身份。JWT 的缺点是令牌一旦签发就无法主动撤销（除非设置较短的过期时间），这在「强制下线」等场景下需要额外处理。

逐一测试完所有接口（添加、查询、修改状态、获取列表、删除），并通过数据库验证数据变化，确认后端程序运行无误。

用 Cursor 搭建 Vue 前端界面

后端就绪后，继续让 Cursor 开发前端。告诉它使用 Vue 框架，创建新的前端文件夹。Cursor 会引导你选择框架和语言，然后自动生成前端代码。

Vue.js 背景补充：Vue.js 由前 Google 工程师尤雨溪于 2014 年创建，是目前全球三大主流前端框架之一（另外两个是 React 和 Angular）。Vue 的核心思想是响应式数据绑定：当数据发生变化时，界面会自动更新，开发者无需手动操作 DOM（网页元素）。Vue 采用组件化开发模式，将页面拆分为一个个独立的 .vue 文件，每个文件包含模板（HTML）、逻辑（JavaScript）和样式（CSS），便于复用和维护。在工程化方面，现代 Vue 项目通常使用 Vite 作为构建工具，开发时提供极速的热更新体验，生产环境则通过 npm run build 将源代码打包压缩成静态文件（HTML/CSS/JS），这个过程称为「构建」或「打包」，生成的 dist 文件夹就是最终部署到服务器的内容。Vue 的学习曲线相对平缓，中文文档完善，在国内开发者社区中尤为流行。

第一版前端非常简洁——只有一个输入框和一个按钮。但功能是完整的：输入序列号点击查询，能正确返回结果；管理后台可以登录、查看列表、增删改数据。

经过几轮迭代优化，最终版本增加了不少实用功能：

• 数据筛选：支持搜索、按状态筛选、按时间排序
• 网站设置：可修改标题、主题颜色、大小写区分、版权信息和 Logo
• 颜色选择器：提供预设颜色和自定义参数调整

这个迭代过程体现了 AI 编程的另一个优势：你可以像产品经理一样不断提需求，Cursor 会在现有代码基础上持续优化，而不需要你理解底层代码逻辑。

通过宝塔面板部署上线

本地开发完成后，需要将项目部署到云服务器上才能被公开访问。部署过程使用宝塔面板，主要分三个环节：

云服务器与宝塔面板背景补充：云服务器（也称 VPS，Virtual Private Server）是从大型物理服务器上虚拟化出来的独立计算资源，用户可以按月租用，获得一个固定的公网 IP 地址，让全球用户都能访问部署在上面的服务。国内主流云服务商包括阿里云、腾讯云、华为云等，个人项目入门配置（1核2G）每月费用约为几十元。宝塔面板是国内最流行的服务器运