Bolt.new实战指南⑤｜进阶：多页应用、数据库集成、API对接

Bolt.new实战指南第五篇，进入进阶功能领域。前面四篇我们搞定了基础操作、提示词技巧、实战项目和部署流程。现在要解锁更强大的能力：多页应用生成、数据库集成和第三方API对接。

一、多页应用生成：从单页面到完整网站

Bolt.new默认生成的是单页应用（SPA），但你完全可以让它生成多页面的完整网站。关键在于在提示词中明确页面结构和路由关系。

提示词模板

创建一个多页面的AI工具导航网站，包含以下页面：
- 首页：展示精选工具卡片，顶部搜索栏，分类筛选标签
- 工具详情页：点击卡片后跳转，展示工具介绍、截图、使用教程、替代工具推荐
- 提交工具页：用户可以提交新工具的表单页面
- 关于页：网站介绍

页面之间用React Router实现跳转，顶部导航栏在所有页面共享。
使用Tailwind CSS，风格参考Product Hunt。

关键要点

• 先列页面清单：不要含糊地说"做一个网站"，要明确有几个页面、每个页面有什么内容
• 指定路由方式：告诉Bolt.new用React Router，不然它可能用Tab切换来模拟多页
• 共享组件要说明：比如"顶部导航栏在所有页面共享"，否则每个页面会生成独立的导航

二、数据库集成：让应用记住数据

Bolt.new生成的项目默认没有后端——纯前端应用，刷新就丢数据。要让应用能存取数据，有三种方案：

方案1：localStorage（最简单）

适合个人工具、小型应用。数据存在浏览器本地，不同设备不共享。

在天气应用中添加收藏城市功能：
- 用localStorage存储用户收藏的城市列表
- 页面加载时从localStorage读取
- 添加/删除收藏时同步更新localStorage
- 最多收藏10个城市

方案2：Supabase（推荐，免费额度够用）

Supabase是开源的Firebase替代品，提供PostgreSQL数据库+实时订阅+认证，免费版有500MB存储和5万行数据。

为AI工具导航网站添加Supabase后端：
1. 创建supabase.ts配置文件，连接到我的Supabase项目
2. 创建tools表（id, name, description, url, category, submitted_by, created_at）
3. 首页从Supabase读取工具列表
4. 提交工具页将新工具写入Supabase
5. 添加简单分页，每页显示12个工具

设置Supabase的步骤：

1. 访问 supabase.com 注册并创建项目
2. 在SQL Editor中创建表
3. 在项目设置中获取URL和Anon Key
4. 在Bolt.new中提供这些信息

方案3：Bolt.new内置的Netlify Functions

Bolt.new支持生成Netlify Functions作为无服务器后端。适合需要API端点但不想管理服务器的场景。

添加Netlify Function处理工具提交：
- /api/submit-tool：接收表单数据，验证后写入数据库
- /api/tools：返回工具列表，支持分页和筛选
使用环境变量存储数据库连接字符串

三、第三方API对接：连接真实世界

让你的应用不再是个"孤岛"。以下是几个常用API的对接示例：

天气API（Open-Meteo，免费无需Key）

在天气预报应用中集成Open-Meteo API：
- 使用fetch调用 https://api.open-meteo.com/v1/forecast
- 传入经纬度获取7天天气预报
- 展示温度、湿度、风速、降水概率
- 添加加载状态和错误处理
- 用图标表示天气状况（晴、多云、雨等）

新闻API（NewsAPI，免费开发版）

创建一个AI新闻聚合页面：
- 使用NewsAPI的everything端点
- 搜索关键词"artificial intelligence"
- 展示标题、来源、发布时间、摘要
- 支持按日期排序
API Key放在环境变量VITE_NEWS_API_KEY中

OpenAI API（付费，但效果最好）

为AI工具导航添加智能搜索功能：
- 用户输入自然语言描述需求，如"我想做PPT"
- 调用OpenAI API分析需求，匹配最合适的工具
- 返回推荐工具和推荐理由
使用gpt-4o-mini模型控制成本
API Key放在环境变量VITE_OPENAI_API_KEY中

四、API对接的注意事项

1. 永远不要把API Key硬编码

这是最常见的错误。Bolt.new有时会默认把Key写进代码，你需要检查并移到.env文件：

# .env
VITE_OPENAI_API_KEY=sk-xxx
VITE_SUPABASE_URL=https://xxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJxxx

2. 加载状态和错误处理

API调用可能失败。在提示词中明确要求：

所有API调用必须有：
- 加载中的骨架屏或loading动画
- 网络错误的友好提示（不是alert，用页面内的错误卡片）
- 数据为空时的提示（"暂无数据"）

3. 请求频率限制

免费API通常有调用频率限制。在代码中添加节流（throttle）和防抖（debounce），特别是搜索类功能。

下一篇，我们将进入Bolt.new的高级技巧——如何调试生成的代码、如何用Bolt.new做团队协作、以及一些让人眼前一亮的创意用法。