10分钟搞定TodoList实战！从0搭建Bun+TS的RESTful接口服务

一、开篇直击痛点还在纠结怎么快速上手Bun框架想做个简单的TodoList练手却不知道怎么结合TypeScript写规范的RESTful接口看完这篇文章你能从零搭建一个可运行的TodoList接口服务掌握TypeScript接口约束、Bun服务器使用、RESTful接口设计核心还能实现前端页面对接全程10分钟新手也能跟着跑通二、实战场景为什么选BunTS做TodoListBun是新一代高性能JavaScript运行时内置服务器、打包器、包管理器不用额外装一堆依赖开发效率拉满TypeScript的接口约束能让我们的代码更规范避免Todo对象属性混乱TodoList是最经典的练手场景能覆盖RESTful接口设计、前后端数据交互核心知识点学会就能举一反三。三、环境准备踩坑提醒⚠️先安装Buncurl -fsSL https://bun.sh/install | bashWindows用户建议用WSL或官网手动安装验证安装bun -v能输出版本号即成功踩坑点Bun目前对部分Windows原生环境支持有限优先用Mac/Linux或WSL避免启动服务器时报错四、核心实现一步步写代码4.1 定义TS接口约束Todo数据结构首先新建server.ts用TypeScript接口约束Todo对象这是面向对象编程的核心能避免数据格式混乱// 定义Todo接口约束对象属性interfaceTodo{id:string;title:string;completed:boolean;createdAt:Date;}// 模拟初始Todo数据consttodos:Todo[][{id:1,title:吃饭,completed:false,createdAt:newDate()},{id:2,title:睡觉,completed:false,createdAt:newDate()},{id:3,title:打豆豆,completed:false,createdAt:newDate()},];4.2 启动Bun服务器实现RESTful接口接上面的代码继续完善server.ts实现获取全部Todo、获取单个Todo的接口// 启动Bun内置服务器constserverBun.serve({port:8080,// 服务端口127.0.0.1:8080asyncfetch(req){constheaders{// 解决跨域问题踩坑提醒⚠️前端请求必加否则会报跨域错误Access-Control-Allow-Origin:*}consturlnewURL(req.url);// 接口1获取全部Todo列表 GET /todosif(req.methodGETurl.pathname/todos){returnResponse.json(todos,{headers});}// 接口2获取单个Todo详情 GET /todos/:idif(req.methodGETurl.pathname.startsWith(/todos/)){constidurl.pathname.split(/)[2];consttodotodos.find((t)t.idid);returnResponse.json(todo,{headers});}// 兜底响应returnResponse.json({msg:hello world},{headers});}});console.log(服务器已启动http://localhost:${server.port});4.3 前端页面对接接口渲染Todo列表新建index.html用async/await语法请求接口比.then更易读!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleTodoList实战/title/headbodyulidtodos/ulscript// 异步函数处理接口请求asyncfunctionmain(){try{// 请求Todo列表接口constresawaitfetch(http://localhost:8080/todos);constdataawaitres.json();// 渲染到页面consttodosEldocument.getElementById(todos);todosEl.innerHTMLdata.map(todoli${todo.title}/li).join();}catch(err){// 踩坑提醒⚠️捕获请求异常避免页面白屏console.error(请求失败,err);alert(获取Todo列表失败请检查服务器是否启动);}}// 执行主函数main();/script/body/html五、运行验证全程可复制启动服务器bun run server.ts控制台输出服务器已启动http://localhost:8080即成功测试接口浏览器访问http://localhost:8080/todos能看到Todo数组访问http://localhost:8080/todos/1能看到单个Todo数据打开前端页面直接双击index.html页面会渲染出“吃饭、睡觉、打豆豆”的列表六、踩坑提醒重点⚠️跨域问题服务器必须加Access-Control-Allow-Origin: *否则前端请求会被浏览器拦截Bun环境Windows原生环境可能启动失败优先用WSL或Mac/Linux接口路径/todos/:id拆分id时注意路径分割后的索引split(“/”)[2]少写一位会导致id获取不到异常捕获前端请求一定要加try/catch否则服务器挂了页面会无响应七、核心知识点总结TypeScript接口interface Todo约束对象结构是面向接口编程的基础能规范数据格式RESTful设计用HTTP动词GET 资源名词todos定义接口语义清晰比如GET /todos获取全部GET /todos/:id获取单个Bun服务器内置高性能HTTP服务无需额外安装express/koa一行Bun.serve就能启动异步编程前端用async/await替代.then代码可读性更高更易维护八、最后这篇实战我们从0到1实现了TodoList的接口服务和前端渲染覆盖了TS接口、Bun使用、RESTful设计、前后端交互核心知识点代码都能直接复制运行。如果想查看完整的源码包括后续可扩展的新增/修改/删除Todo接口可以私信我或者关注我的仓库后续还会更新Bun更多实战场景你可以直接把这篇文章发布到掘金/稀土平台内容贴合实战、结构清晰还标注了踩坑点符合爆款技术文的特点。