一个基于 Cloudflare Workers 和 D1 数据库的在线留言板应用。
- 用户可以提交留言（包括内容和邮箱）
- 实时显示历史留言列表
- 显示留言时间（智能格式化）
- 响应式设计，支持移动端
- 基于 Cloudflare D1 数据库存储
- 防 XSS 攻击
- 表单验证（邮箱格式、内容长度限制）
- 前端: HTML + CSS + JavaScript
- 后端: Cloudflare Workers
- 数据库: Cloudflare D1 (SQLite)
- 部署: Cloudflare Workers
web_message/
├── src/
│ └── index.js # Cloudflare Workers 主文件
├── index.html # 前端页面
├── schema.sql # 数据库表结构
├── wrangler.toml # Cloudflare Workers 配置
├── package.json # 项目依赖配置
└── README.md # 说明文档
首先确保你已经安装了 Node.js (推荐 18.x 或更高版本)。
npm installwrangler login这会打开浏览器让你登录到 Cloudflare 账户。
wrangler d1 create message-board-db执行后，命令会返回数据库的 ID，类似：
✅ Successfully created DB 'message-board-db'
[[d1_databases]]
binding = "DB"
database_name = "message-board-db"
database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
将上一步获得的 database_id 复制到 wrangler.toml 文件中，替换 YOUR_DATABASE_ID：
[[d1_databases]]
binding = "DB"
database_name = "message-board-db"
database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" # 替换为实际的 ID执行 SQL 脚本创建数据库表：
wrangler d1 execute message-board-db --remote --file=./schema.sql
// 或本地
wrangler d1 execute message-board-db --local --file=./schema.sql你应该看到类似输出：
🌀 Executing on message-board-db (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx):
🚣 Executed 2 commands in 0.123ms
启动本地开发服务器：
npm run dev或者：
npx wrangler dev访问 http://localhost:8787 查看应用。
npm run deploy或者：
wrangler deploy部署成功后，你会看到应用的 URL，类似：
Published web-message-board (0.12 sec)
https://web-message-board.your-account.workers.dev
# 本地开发
npm run dev
# 部署到生产环境
npm run deploy
# 查询数据库
npx wrangler d1 execute message-board-db --command "SELECT * FROM messages"
# 清空留言（谨慎使用）
npx wrangler d1 execute message-board-db --command "DELETE FROM messages"npx wrangler d1 execute message-board-db --command "SELECT * FROM messages ORDER BY created_at DESC"npx wrangler d1 execute message-board-db --command "DELETE FROM messages WHERE id = 1"npx wrangler d1 execute message-board-db --command "SELECT COUNT(*) as total FROM messages"在 wrangler.toml 中修改 name 字段：
name = "your-custom-name"在 src/index.js 中修改：
// 内容长度限制（默认 1000 字符）
if (content.length > 1000) {
// ...
}
// 留言列表数量限制（默认 100 条）
SELECT ... LIMIT 100- 所有用户输入都经过 HTML 转义，防止 XSS 攻击
- 邮箱格式验证
- 内容长度限制
- CORS 已配置，允许跨域访问
确保 wrangler.toml 中的 database_id 正确。
检查是否已登录：
npx wrangler whoami本地开发时，Wrangler 会自动创建本地数据库。如果遇到问题，确保已执行 schema.sql：
npx wrangler d1 execute message-board-db --local --file=./schema.sqlMIT