NodeJS极简后端服务
NodeJS极简后端服务
极简版本：纯前端页面 + Node.js 后端 API，没有任何鉴权、数据库或复杂逻辑，只有最基础的交互。
一、后端（Node.js + Express）
1. 初始化项目
mkdirsimple-app&&cdsimple-appnpminit-ynpminstallexpress cors2. 后端代码（server.js）
constexpress=require('express');constcors=require('cors');constpath=require('path');constapp=express();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)=>{consttodo=todos.find(t=>t.id===parseInt(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)=>{todos=todos.filter(t=>t.id!==parseInt(req.params.id));res.json({success:true});});// 启动服务app.listen(3000,()=>{console.log('后端运行在 http://localhost:3000');});启动后端：
nodeserver.js二、前端页面（纯 HTML + JavaScript）
创建index.html（直接双击打开，无需服务器）：
<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>待办事项</title><style>*{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></head><body><divclass="container"><h1>📝 待办事项</h1><divclass="input-box"><inputtype="text"id="todoInput"placeholder="输入待办事项..."/><buttononclick="addTodo()">添加</button></div><ulclass="todo-list"id="todoList"><divclass="loading">加载中...</div></ul></div><script>constAPI_URL='http://localhost:3000/api/todos';// 获取待办列表asyncfunctionloadTodos(){constres=awaitfetch(API_URL);consttodos=awaitres.json();renderTodos(todos);}// 渲染列表functionrenderTodos(todos){constlist=document.getElementById('todoList');if(todos.length===0){list.innerHTML='<div class="loading">暂无待办事项</div>';return;}list.innerHTML=todos.map(todo=>`<li class="todo-item"> <input type="checkbox" class="checkbox"${todo.done?'checked':''}onchange="toggleTodo(${todo.id})"> <span class="todo-text${todo.done?'done':''}">${todo.text}</span> <button class="delete-btn" onclick="deleteTodo(${todo.id})">删除</button> </li>`).join('');}// 添加待办asyncfunctionaddTodo(){constinput=document.getElementById('todoInput');consttext=input.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.key==='Enter')addTodo();});// 页面加载时获取数据loadTodos();</script></body></html>三、运行步骤
# 1. 启动后端（终端1）nodeserver.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 实现，适合快速原型开发！