【全栈入门】一文看懂前端、后端与数据库是怎么“串门”的？（附 Flask 轻量实战源码）
摘要：对于刚接触 Web 开发的新手来说，“全栈”听起来像是一个高深莫测的词汇。页面上的按钮点击后，数据是怎么飞到服务器，又怎么存进数据库的？今天，我们将告别枯燥的理论，用一个最接地气的“餐厅营业”模型，把前端、后端和数据库的交互逻辑扒得干干净净，并附上一套极简的实战代码，带你从零跑通你的第一个全栈项目！
一、 角色大揭秘：谁在干什么？
想象我们正在经营一家非常现代化的数字餐厅，一个完整的 Web 应用同样由三个核心部门组成：
1. 前端（Frontend）：餐厅的门面与大堂
前端是用户直接用眼睛看到、用鼠标点到的地方（比如网页的 HTML5 结构、精美的 CSS 样式以及负责交互的 JavaScript）。
职责：负责给客人（用户）展示精美的菜单，收集客人的点单需求，并把做好的菜品端给客人。
特性：重视觉、重交互。如果前端做得好，客人点菜时的体验就像在玩丝滑的互动小游戏一样。
2. 后端（Backend）：餐厅的后厨
后端是隐藏在幕后的核心处理中心（常见的有 Python、Java、Node.js 等）。
职责：接收前端传来的“点菜单”，开始疯狂运转。它要核对账单、验证权限（客人有没有付钱），然后按照菜谱的逻辑进行烹饪。
特性：重逻辑、重安全。它是整个系统的业务大脑。
3. 数据库（Database）：餐厅的地下冷库
数据库是专门用来安全、持久地存放数据的地方（如 SQLite、MySQL 等）。
职责：冷库里不仅存着各种食材（用户数据、文章内容），还存着账本（密码、消费记录）。后厨需要什么，就去冷库拿；做好的成品如果需要保存，也放回冷库。
二、 核心桥梁：它们之间怎么“串门”？
这三个部门不是各干各的，它们需要一个极其高效的沟通机制。
1. 沟通方式：API 接口（服务员）前端和后端之间通过API（应用程序编程接口）进行对话。最常见的协议是 HTTP。当前端想要数据时，就会发起一个GETPOST请求（服务员，给我拿一份菜单）；想要提交数据时，就会发起一个 请求（服务员，这是我的点单，请交给后厨）。
2. 沟通语言：JSON（国际通用语）前端是用 JS 写的，后端可能是用 Python 写的，语言不通怎么办？大家约定好用JSON格式来交流。它看起来就像一个非常清爽的键值对字典：
JSON
{"user_name": "景天","action": "login","status": "success"}
一键获取完整项目代码
3. 后端与数据库：SQL（冷库管理员指令）后端想要去冷库拿东西，不能随便乱翻，必须对数据库说专门的指令语言，也就是SQL。比如SELECT * FROM users，意思就是“把所有用户的数据都拿出来给我”。
三、 实战演练：写一个极简的“用户信息系统”
百闻不如一见，下面我们用最简单、轻量级的技术组合（HTML5 + Python Flask + SQLite）来模拟一次完整的“串门”过程。
第一步：配置数据库（建冷库）
我们需要在本地初始化一个数据库，用来存放信息。
# init_db.pyimport sqlite3# 连接到 SQLite 数据库（如果文件不存在会自动创建）conn = sqlite3.connect('app_data.db')cursor = conn.cursor()# 创建一个非常简单的用户表cursor.execute('''CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT,name TEXT NOT NULL,role TEXT NOT NULL)''')# 塞入两条测试数据cursor.execute("INSERT INTO users (name, role) VALUES ('张三', '管理员')")cursor.execute("INSERT INTO users (name, role) VALUES ('李四', '普通用户')")conn.commit()conn.close()print("数据库初始化完成！")
一键获取完整项目代码
运行这段代码后，你的项目目录下就会多出一个app_data.db文件。
第二步：编写后端 API（开后厨）
我们用 Flask 这个轻量级 Python 框架来搭建后端，它非常适合用来快速开发原型或处理轻量级任务。
# app.pyfrom flask import Flask, jsonify, render_templateimport sqlite3app = Flask(__name__)def get_db_connection():conn = sqlite3.connect('app_data.db')# 让查询结果像字典一样可以通过列名访问conn.row_factory = sqlite3.Rowreturn conn# 这是一个 API 接口，前端访问这个地址，就能拿到 JSON 数据@app.route('/api/users', methods=['GET'])def get_users():conn = get_db_connection()# 后端用 SQL 语句向数据库要数据users = conn.execute('SELECT * FROM users').fetchall()conn.close()# 把从数据库拿到的原始数据，组装成干净的 JSON 列表发给前端user_list = [{"id": row["id"], "name": row["name"], "role": row["role"]} for row in users]return jsonify(user_list)if __name__ == '__main__':app.run(debug=True, port=5000)
一键获取完整项目代码
第三步：编写前端页面（布置大堂）
我们用 HTML5 原生的fetch方法去调用后端的 API，拿到数据后动态渲染到网页上。
HTML
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><title>全栈数据展示</title></head><body><h1>人员名单面板</h1><ul id="user-list"><li>正在努力加载后厨数据...</li></ul><script>// 前端通过 fetch 主动呼叫后端的 APIfetch('http://127.0.0.1:5000/api/users').then(response => response.json()) // 收到后端传来的 JSON 数据.then(data => {const listElement = document.getElementById('user-list');listElement.innerHTML = ''; // 清空加载提示// 遍历数据，渲染到页面上data.forEach(user => {const li = document.createElement('li');li.textContent = `编号: ${user.id} | 姓名: ${user.name} | 身份: ${user.role}`;listElement.appendChild(li);});}).catch(error => console.error('出错了：', error));</script></body></html>
一键获取完整项目代码
当你启动 Flask 后端，并打开这个 HTML 文件时，原本写死在代码里的文字瞬间被替换成了数据库里的真实数据。恭喜你，你已经跑通了 Web 开发中最核心的链路！
四、 新手避坑指南（干货警告）
在第一次联调前后端时，你大概率会遇到以下几个让人抓狂的坑：
CORS 跨域报错：前端的端口（比如 8080）和后端的端口（比如 5000）不一样，浏览器出于安全保护会拦截请求。在开发阶段，可以在 Flask 中引入
flask_cors库来一键解决。SQL 注入攻击：千万不要直接把前端传过来的字符串用加号拼接到 SQL 语句里！永远使用参数化查询（比如
execute("SELECT * FROM users WHERE name=?", (username,))），否则别人输入一段恶意代码，你的数据库就直接被删库跑路了。数据类型不匹配：前端 框收集到的数字，传到后端通常变成了字符串类型。在存入数据库前，记得在后端做一次强类型转换（如
inputint()）。
结语
前后端的交互本质上就是一次次“请求”与“响应”的往复。一旦你理解了这段数据流动的轨迹，无论是做大型企业系统、个人工具，还是给复杂的游戏开发后端记分板，核心思路都是一模一样的。