【全栈入门】一文看懂前端、后端与数据库是怎么“串门”的附 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(debugTrue, port5000)一键获取完整项目代码第三步编写前端页面布置大堂我们用 HTML5 原生的fetch方法去调用后端的 API拿到数据后动态渲染到网页上。HTML!DOCTYPE htmlhtml langzhheadmeta charsetUTF-8title全栈数据展示/title/headbodyh1人员名单面板/h1ul iduser-listli正在努力加载后厨数据.../li/ulscript// 前端通过 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()。结语前后端的交互本质上就是一次次“请求”与“响应”的往复。一旦你理解了这段数据流动的轨迹无论是做大型企业系统、个人工具还是给复杂的游戏开发后端记分板核心思路都是一模一样的。
)
