NodeJS极简后端服务

NodeJS极简后端服务极简版本纯前端页面 Node.js 后端 API没有任何鉴权、数据库或复杂逻辑只有最基础的交互。一、后端Node.js Express1. 初始化项目mkdirsimple-appcdsimple-appnpminit-ynpminstallexpress cors2. 后端代码server.jsconstexpressrequire(express);constcorsrequire(cors);constpathrequire(path);constappexpress();app.use(cors());app.use(express.json());// 模拟数据存储内存中lettodos[{id:1,text:学习 Node.js,done:false},{id:2,text:写前端页面,done:true}];// API 路由 // 获取所有待办app.get(/api/todos,(req,res){res.json(todos);});// 添加待办app.post(/api/todos,(req,res){consttodo{id:Date.now(),text:req.body.text,done:false};todos.push(todo);res.json(todo);});// 切换完成状态app.put(/api/todos/:id,(req,res){consttodotodos.find(tt.idparseInt(req.params.id));if(todo){todo.done!todo.done;res.json(todo);}else{res.status(404).json({error:Not found});}});// 删除待办app.delete(/api/todos/:id,(req,res){todostodos.filter(tt.id!parseInt(req.params.id));res.json({success:true});});// 启动服务app.listen(3000,(){console.log(后端运行在 http://localhost:3000);});启动后端nodeserver.js二、前端页面纯 HTML JavaScript创建index.html直接双击打开无需服务器!DOCTYPEhtmlhtmllangzhheadmetacharsetUTF-8title待办事项/titlestyle*{margin:0;padding:0;box-sizing:border-box;}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f5f5f5;padding:40px 20px;}.container{max-width:500px;margin:0 auto;background:white;border-radius:12px;box-shadow:0 2px 10pxrgba(0,0,0,0.1);padding:30px;}h1{text-align:center;color:#333;margin-bottom:20px;}.input-box{display:flex;gap:10px;margin-bottom:20px;}input{flex:1;padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;font-size:16px;}input:focus{outline:none;border-color:#4CAF50;}button{padding:12px 24px;background:#4CAF50;color:white;border:none;border-radius:8px;cursor:pointer;font-size:16px;}button:hover{background:#45a049;}.todo-list{list-style:none;}.todo-item{display:flex;align-items:center;padding:15px;border-bottom:1px solid #f0f0f0;gap:12px;}.todo-item:last-child{border-bottom:none;}.checkbox{width:22px;height:22px;cursor:pointer;}.todo-text{flex:1;font-size:16px;}.todo-text.done{text-decoration:line-through;color:#999;}.delete-btn{background:#ff4444;padding:6px 12px;font-size:14px;}.delete-btn:hover{background:#cc0000;}.loading{text-align:center;color:#999;padding:20px;}/style/headbodydivclasscontainerh1 待办事项/h1divclassinput-boxinputtypetextidtodoInputplaceholder输入待办事项.../buttononclickaddTodo()添加/button/divulclasstodo-listidtodoListdivclassloading加载中.../div/ul/divscriptconstAPI_URLhttp://localhost:3000/api/todos;// 获取待办列表asyncfunctionloadTodos(){constresawaitfetch(API_URL);consttodosawaitres.json();renderTodos(todos);}// 渲染列表functionrenderTodos(todos){constlistdocument.getElementById(todoList);if(todos.length0){list.innerHTMLdiv classloading暂无待办事项/div;return;}list.innerHTMLtodos.map(todoli classtodo-item input typecheckbox classcheckbox${todo.done?checked:}onchangetoggleTodo(${todo.id}) span classtodo-text${todo.done?done:}${todo.text}/span button classdelete-btn onclickdeleteTodo(${todo.id})删除/button /li).join();}// 添加待办asyncfunctionaddTodo(){constinputdocument.getElementById(todoInput);consttextinput.value.trim();if(!text)return;awaitfetch(API_URL,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({text})});input.value;loadTodos();}// 切换状态asyncfunctiontoggleTodo(id){awaitfetch(${API_URL}/${id},{method:PUT});loadTodos();}// 删除待办asyncfunctiondeleteTodo(id){awaitfetch(${API_URL}/${id},{method:DELETE});loadTodos();}// 回车键添加document.getElementById(todoInput).addEventListener(keypress,(e){if(e.keyEnter)addTodo();});// 页面加载时获取数据loadTodos();/script/body/html三、运行步骤# 1. 启动后端终端1nodeserver.js# 显示后端运行在 http://localhost:3000# 2. 打开前端# 直接用浏览器打开 index.html 文件双击即可# 或者用简易服务器npx serve.# 需要安装npm install -g serve四、效果✅ 添加待办 → POST/api/todos✅ 勾选完成 → PUT/api/todos/:id✅ 删除待办 → DELETE/api/todos/:id✅ 页面自动刷新列表极简架构前端 (HTML fetch API) ←→ 后端 (Express 内存数据) ↑___________________________________________↓没有任何数据库、鉴权、TypeScript纯 JavaScript 实现适合快速原型开发