🌟 RESTful Todo 任务清单 —— 从零学习前后端

📋 项目概述

这是一个极简的任务清单 项目。使用 Bun 作为后端服务器，纯 HTML + JavaScript 作为前端。通过这个项目，你可以一次性解决以下常见痛点

• ❓不知道如何用 TypeScript 定义数据结构？——本项目提供完整的接口示例。
• ❓后端路由总是写得乱七八糟？——采用标准 RESTful 风格，让路由一目了然。不过，
• ❓跨域请求被浏览器拦截？——演示 CORS 配置，帮你快速摆脱“Access‑Control‑Allow‑Origin”报错。
• ❓异步代码写起来像回调地狱？话说回来，——用 async/await 把异步变同步。
• ❓Bun、Node、Express 那么多选择，我该选哪个？——本项目只依赖 Bun，一个零配置运行时。不过，

• ✅ TypeScript 类型程序
• ✅ 面向对象编程思想
• ✅ RESTful API 设计风格
• ✅ 前后端交互
• ✅ Bun 运行时的基本使用

📁 一、项目结构

todo/
├── server.ts # 后端：提供 RESTful API
├── index.html # 前端：展示任务列表
└── readme.md # 项目说明

🧠 二、主要编程思想 & 痛点对照表

. 面向接口编程🎯

什么是接口？

属性和方法，而不关心实现细节。

interface Todo {
说到id，string;老实说，title: string;completed: boolean;createdAt: Date;
}

# 为什么要用接口？

# 类型体操小知识：

const todos: Todo =;todos.push，话说回来，// ❌ 报错！缺少 completed 和 createdAt 属性
// TypeScript 在编辑阶段就提示错误，避免运行时崩溃。

. RESTful 风格 🔄

# 主要理念：一切皆资源

• 🔗 URL 使用"名词": /todos
• 🎫 HTTP 动词决定操作类型：

# 类比理解：

• 🏨 **资源** = 仓库里的货物
• 📦 **URL** = 货架位置
• 🔧 **HTTP 方法** = 对货物进行的操作
• 👨‍🏫 **路由** = 仓库管理员，把请求分发到对应处理函数。

. 异步编程⏳

async function main {
const res = await fetch;const data = await res.json;// ，渲染页面
}
main;<\/code>

• async<\/code>：声明为异步函数。
• await<\/code>：等待 Promise 完成。
• “先去拿数据。你等着，我拿到再继续”，<\/ strong>

# 对比 Promise 链式写法，async/await 更直观、更易维护。

. CORS 跨域 —— 浏览器的一道“安检” 🛡️ typescript const headers = { 'Access-Control-Allow-Origin': '*',// ✅ 所有来源均可访问 };

为什么会出现跨域？

• 前端文件是 `file://` 协议打开的。怎么说呢，
• 后端跑在 `http://localhost:` 上。话说回来，
• 协议不同 → 浏览器拦截响应。

# 简单类比：