做一个网页应用

做一个网页应用——前后端全栈开发一条龙

📖知识引入

🎨前端是门面

前端就是用户看到的部分：HTML搭结构、CSS做样式、JavaScript写交互。一个留言板的前端：表单输入留言、列表展示所有留言、点删除按钮移除——纯前端就能做。

⚙️后端是大脑

后端是服务器上的程序，负责存数据、处理业务。用Node.js+Express搭一个简单后端：接收前端请求、把留言存进数据库、返回所有留言列表。前端和后端用API对话。

🗄️数据库存数据

localStorage只在单个浏览器里存，换设备就没了。真正网页应用要数据库：用SQLite（轻量文件型）存留言，所有用户共享同一份数据——你发的留言别人也能看到。

🔗前后端如何对话

前端用fetch发请求到后端API：GET /api/messages 拿所有留言，POST /api/messages 发新留言，DELETE /api/messages/3 删第3条。后端处理完返回JSON数据，前端渲染。

🚀部署上线

做完要发布！前端传Vercel或GitHub Pages，后端传Render或Railway，数据库用云服务。一键部署后全世界都能访问你的网址——这就是从「我的电脑能用」到「全世界能用」。

💡

全栈=前端门面+后端大脑+数据库记忆——配合部署就能让全世界用！

🔍留言板全栈应用的诞生

// 后端 server.js （Node.js + Express）
const express = require("express");
const cors = require("cors");
const { getMessages, addMessage, deleteMessage } = require("./db");

const app = express();
app.use(cors());
app.use(express.json());

// 拿所有留言
app.get("/api/messages", (req, res) => {
  res.json(getMessages());
});

// 发新留言
app.post("/api/messages", (req, res) => {
  addMessage(req.body.text);
  res.json({ ok: true });
});

// 删除留言
app.delete("/api/messages/:id", (req, res) => {
  deleteMessage(req.params.id);
  res.json({ ok: true });
});

app.listen(3000, () => console.log("后端跑起来了"));

// 前端 script.js 调用后端
async function load() {
  const res = await fetch("http://localhost:3000/api/messages");
  const msgs = await res.json();
  render(msgs);
}

跟着做，让你的软件联网+共享数据：

第1步 提需求给Qoder
「做一个留言板网页应用：
  - 前端：HTML+CSS+JS，表单输入留言
  - 后端：Node.js+Express，处理请求
  - 数据库：SQLite，存所有留言
  - API：GET/POST/DELETE留言
  - 简洁清爽，配色紫色」

第2步 AI生成项目结构
message-board/
  ├─ frontend/
  │   ├─ index.html
  │   ├─ style.css
  │   └─ script.js
  └─ backend/
      ├─ server.js     （Express服务器）
      └─ db.js          （SQLite操作）

第3步 启动后端
终端：cd backend && npm install
       node server.js
后端跑在 http://localhost:3000

第4步启动前端

用Live Server打开index.html

在表单输入留言→点发布

留言出现在列表 ✅

刷新页面→还在 ✅

第5步全栈联调

「GET /api/messages 拿不到数据」

调试器在后端打断点查

发现CORS没配→告诉AI→修复

第6步部署上线

前端→上传Vercel→拿到网址

后端→上传Render→拿到API地址

改前端的API地址指向Render

发链接给朋友→全世界都能留言！

数据流：

用户输入→前端fetch POST

→后端接收→存SQLite

→返回JSON→前端渲染

你的全栈应用，就此诞生！

🎯小测验

第1题：前端和后端用什么东西对话？

第2题：全栈应用和纯前端App最大的区别是？

第3题：做完网页应用想让全世界都能访问，应该？

📝本课知识点

✓全栈=前端门面+后端大脑+数据库记忆
✓前端HTML/CSS/JS，后端Node.js+Express
✓SQLite轻量数据库，数据共享
✓前后端用fetch+API对话
✓部署到Vercel/Render让全世界用

第9课完成！继续探索下一课吧 🚀

🛠️

上一课

第8课

下一课

第10课

🛠️