超越Vibe编程

第 7 章 利用人工智能构建网络应用程序

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

本章将重点从提示快速原型转移到使用人工智能辅助开发完整的网络应用程序。Web 应用程序通常涉及前端（通常用 React、Angular 或 Vue 等框架编写）、后端（API、数据库、服务器）以及连接一切的胶水。 Vibe 编码可以加速这些层级中的每一层。

我将向您介绍与人工智能配对程序员一起构建 网络应用程序的端到端工作流程，其中包括：...........：

• 设置项目及其脚手架

• 编码前端用户界面

• 实现后台逻辑

• 与数据库集成

• 测试和验证整个堆栈

在此过程中，我将重点介绍前端（例如，让人工智能根据描述生成 React 或 Vue 组件）和后端（通过自然语言提示编写路由、业务逻辑和数据库查询）的人工智能开发模式。我还将介绍如何在全栈项目中优化人类与人工智能之间的协作，确保双方都能贡献出自己最出色的作品。在本章结束时，你应该会有一个清晰的路线图，不仅能将人工智能用于孤立的编码任务，还能高效地管理整个网络开发工作流程。

设置项目：使用人工智能搭建脚手架

每个网络应用程序都从一些脚手架开始--构建工具、文件结构、依赖关系等的初始设置。人工智能可以自动创建许多模板。现代网络框架通常带有命令行界面（CLI）工具，可以生成一个基础项目，但您可能仍然需要配置某些东西或集成其他库。人工智能助手可以通过引导您使用这些 CLI 工具或按需设置自定义项目结构来提供帮助。

例如，假设您想使用 React 作为前端、Express 作为后端启动一个新的应用项目。这项任务的前人工智能工作流程可能是这样的：

1. 运行 CLI 工具或 Vite 来设置 React 项目。

2. 初始化 Express 应用程序（也许可以使用npm init 并安装 Express）。

3. 为开发设置代理或配置跨源资源共享（CORS），这样 React 前端就可以与 Express 后端对话。

4. 也许可以集成一个像 MongoDB 这样的数据库，或者为简单的使用设置一个 SQLite 文件。

使用 Cursor 或 Cline 这样的人工智能编码环境，您可以一次性描述您想要的设置：

用 React 前端（使用 Vite）和 Express 后端建立一个新项目。后端应为待办事项列表提供 REST API，并首先使用内存数组。在开发过程中，配置前端将 API 请求代理到后端。

先进的人工智能集成开发环境可以接收这一指令并完成以下工作：

• 创建两个目录（前台和后台）。

• 运行npm create vite@latest （如果有 shell 访问权限）或模板出一个基本的 React 应用程序。

• 在后端初始化一个基本的 Express 服务器文件，端点如/api/to-dos（返回一些示例数据）。

• 在每个目录中包含一个 package.json，其中包含相关脚本（如start both ）。

• 通过在 React 开发服务器中配置代理或提供实施 CORS 标头的说明，在前端和后端之间建立通信。

几分钟内，您就能拥有一个全栈网络应用程序的骨架。即使人工智能不会自动完成所有工作，它也可能会向您提供代码和最终完成所需的说明（例如，"将此代理设置添加到您的 Reactpackage.json文件中"）。这样可以节省大量无谓的设置时间，让您可以立即专注于功能。

如果您没有使用人工智能集成开发环境，您仍然可以使用 ...