基于Flask+Vue3的家庭衣物智能管理系统开发实战

想象一个真实画面：你正在书房和重要合作方视频通话，气氛刚好进入正题，身后突然传来一声大喊：“我的真丝睡衣去哪了？”紧接着是家人裹着浴巾翻箱倒柜的背影，以及一连串找不到衣服的抱怨。这个画面虽然有点“社死”，但“找不到衣服”这件事，几乎是每个家庭都会遇到的日常痛点。

与其靠人脑记忆，不如给每件衣服一个数字身份。本文从一个生活场景出发，完整实现一套家庭衣物智能管理系统：后端使用 Python Flask + SQLite，前端使用 Vue3 + Element Plus，支持衣物登记、位置管理、关键词搜索、位置变更日志，以及二维码扫码查询。整套系统轻量、可私有部署，代码可以直接复制运行。

无论是学习前后端分离开发，还是想做一个真正能用的家庭小工具，这篇教程都能帮你落地。文章会先拆解需求，然后逐步完成数据库设计、后端接口、前端页面，最后给出运行验证、常见排错和工程建议。

1. 项目背景与需求分析

1.1 从“真丝睡衣去哪了”说起

家庭衣物管理的混乱，通常有几种典型场景：

• 换季时把冬装塞进收纳箱，过几个月彻底忘记放在哪里；
• 一家人衣服混洗混放，A 的衬衫跑到 B 的衣柜；
• 收纳位置不固定，今天放主卧衣柜，明天又移到次卧；
• 衣服数量多了之后，明明有某件衣服，却因为找不到而重复购买。

这些问题的本质是：衣物位置信息只存在于人的短期记忆里，没有落到可查询、可追溯的介质上。

本文要做的系统，就是给每件衣物建立一条数字档案：

• 记录名称、类别、颜色、材质、归属人；
• 记录当前存放位置；
• 每次位置变化都留下历史日志；
• 生成二维码贴在收纳袋或衣柜上，手机扫一下就知道里面那件“真丝睡衣”在哪。

1.2 系统功能拆解

1.3 技术选型说明

这套系统面向家庭级使用，不需要复杂的微服务架构，核心诉求是轻量、易部署、可离线运行。技术选型如下：

需要说明的是：示例代码基于 Flask 2.x 和 Vue3，实际使用请根据当前环境调整版本。如果后续要支持多用户并发，可以将 SQLite 换成 MySQL，并增加登录鉴权。

2. 环境准备与项目初始化

2.1 开发环境说明

本文示例需要的环境如下：

• Python 3.8 及以上版本；
• pip 包管理工具；
• 现代浏览器（Chrome、Edge 均可）；
• 推荐 VS Code 作为编辑器。

前后端通信采用 HTTP + JSON，前端通过 CDN 引入 Vue3 和 Element Plus，因此本地开发不强制安装 Node.js。

2.2 创建项目目录

在命令行中执行以下命令创建项目结构：

mkdir wardrobe-system cd wardrobe-system python -m venv venv

创建虚拟环境可以避免依赖冲突，是 Python 项目的基本规范。

激活虚拟环境：

# Windows venv\Scripts\activate # macOS / Linux source venv/bin/activate

2.3 安装后端依赖

本项目后端只需要两个依赖：

pip install flask flask-cors

• flask提供 Web 服务和路由；
• flask-cors允许前端页面跨域访问后端接口。

如果你的网络环境下载较慢，可以换成国内镜像源，这里不展开。

3. 数据库设计与实现

3.1 数据表结构设计

系统包含两张表。

第一张表是clothing，存储衣物基本信息：

第二张表是location_log，记录衣物位置变化历史：

3.2 创建数据库与初始化代码

数据库初始化直接在 Flask 启动时完成。下面把项目核心文件设计为：

wardrobe-system/ ├── app.py ├── index.html ├── requirements.txt └── wardrobe.db

其中app.py是后端入口，index.html是前端页面，wardrobe.db是运行时自动生成的 SQLite 数据库文件。

创建requirements.txt：

flask flask-cors

然后在app.py中完成数据库初始化和连接逻辑：

# 文件路径：app.py import os import sqlite3 from datetime import datetime from flask import Flask, request, jsonify from flask_cors import CORS app = Flask(__name__) CORS(app) DB_PATH = os.path.join(os.path.dirname(__file__), 'wardrobe.db') def get_db(): """获取数据库连接""" conn = sqlite3.connect(DB_PATH) conn.row_factory = sqlite3.Row return conn def init_db(): """初始化数据表""" with get_db() as conn: conn.execute(''' CREATE TABLE IF NOT EXISTS clothing ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, category TEXT DEFAULT '其他', color TEXT DEFAULT '', material TEXT DEFAULT '', owner TEXT DEFAULT '', location TEXT DEFAULT '', status TEXT DEFAULT '在库', remark TEXT DEFAULT '', create_time TEXT ) ''') conn.execute(''' CREATE TABLE IF NOT EXISTS location_log ( id INTEGER PRIMARY KEY AUTOINCREMENT, clothing_id INTEGER NOT NULL, old_location TEXT, new_location TEXT, change_time TEXT ) ''') init_db()

这里有几个关键点：

• get_db()每次请求都创建新的数据库连接，避免多线程共用连接导致异常；
• sqlite3.Row让查出来的记录可以像字典一样通过列名访问；
• with get_db() as conn会在代码块正常结束时自动提交事务，异常时自动回滚；
• CREATE TABLE IF NOT EXISTS保证重复启动不会报错。

4. 后端核心接口实现

后端共提供 7 个接口，覆盖衣物管理的完整增删改查流程。

4.1 新增衣物接口

@app.route('/api/clothes', methods=['POST']) def add_clothing(): data = request.get_json(silent=True) or {} name = data.get('name', '').strip() if not name: return jsonify({'code': 400, 'message': '衣物名称不能为空'}), 400 with get_db() as conn: cur = conn.execute(''' INSERT INTO clothing ( name, category, color, material, owner, location, status, remark, create_time ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?) ''', ( name, data.get('category', '其他'), data.get('color', ''), data.get('material', ''), data.get('owner', ''), data.get('location', ''), data.get('status', '在库'), data.get('remark', ''), datetime.now().strftime('%Y-%m-%d %H:%M:%S') )) clothing_id = cur.lastrowid return jsonify({'code': 0, 'message': '新增成功', 'data': {'id': clothing_id}})

新增接口注意三点：

• 名称是必填字段，缺失时返回 400；
• SQL 全部使用?占位符参数化，避免 SQL 注入风险；
• 通过cur.lastrowid拿回自增主键，方便前端继续生成二维码。

4.2 衣物列表与搜索接口

@app.route('/api/clothes', methods=['GET']) def list_clothes(): keyword = request.args.get('keyword', '') category = request.args.get('category', '') owner = request.args.get('owner', '') sql = 'SELECT * FROM clothing WHERE 1=1' params = [] if keyword: sql += ' AND (name LIKE ? OR location LIKE ? OR remark LIKE ?)' params.extend([f'%{keyword}%', f'%{keyword}%', f'%{keyword}%']) if category: sql += ' AND category = ?' params.append(category) if owner: sql += ' AND owner = ?' params.append(owner) sql += ' ORDER BY id DESC' with get_db() as conn: rows = conn.execute(sql, params).fetchall() return jsonify({'code': 0, 'data': [dict(row) for row in rows]})

使用WHERE 1=1是为了方便动态拼接过滤条件，不会影响查询性能。LIKE搜索在家庭级数据量下完全够用。

4.3 衣物详情与位置日志接口

@app.route('/api/clothes/<int:clothing_id>', methods=['GET']) def get_clothing(clothing_id): with get_db() as conn: row = conn.execute('SELECT * FROM clothing WHERE id = ?', (clothing_id,)).fetchone() if not row: return jsonify({'code': 404, 'message': '衣物不存在'}), 404 logs = conn.execute(''' SELECT * FROM location_log WHERE clothing_id = ? ORDER BY change_time DESC ''', (clothing_id,)).fetchall() result = dict(row) result['logs'] = [dict(log) for log in logs] return jsonify({'code': 0, 'data': result})

这个接口返回衣物的完整档案，以及它的位置变化历史。后期如果要实现“这件睡衣上次放在哪”，就是直接查这张日志表。

4.4 更新衣物与位置变更记录

这是整套系统的核心逻辑：修改位置时，自动记录一次变更日志。

@app.route('/api/clothes/<int:clothing_id>', methods=['PUT']) def update_clothing(clothing_id): data = request.get_json(silent=True) or {} with get_db() as conn: row = conn.execute('SELECT * FROM clothing WHERE id = ?', (clothing_id,)).fetchone() if not row: return jsonify({'code': 404, 'message': '衣物不存在'}), 404 old_location = row['location'] new_location = data.get('location', old_location) conn.execute(''' UPDATE clothing SET name = ?, category = ?, color = ?, material = ?, owner = ?, location = ?, status = ?, remark = ? WHERE id = ? ''', ( data.get('name', row['name']), data.get('category', row['category']), data.get('color', row['color']), data.get('material', row['material']), data.get('owner', row['owner']), new_location, data.get('status', row['status']), data.get('remark', row['remark']), clothing_id )) # 位置发生变化时记录一条日志 if old_location != new_location: conn.execute(''' INSERT INTO location_log (clothing_id, old_location, new_location, change_time) VALUES (?, ?, ?, ?) ''', ( clothing_id, old_location, new_location, datetime.now().strftime('%Y-%m-%d %H:%M:%S') )) return jsonify({'code': 0, 'message': '更新成功'})

这里有一个设计细节值得学习：业务更新和历史记录写在同一事务中。如果只更新主表、不写日志，或者日志单独用另一个事务，一旦中途失败，就容易出现“衣服位置改了，日志没记”的数据不一致问题。

4.5 删除衣物与统计接口

@app.route('/api/clothes/<int:clothing_id>', methods=['DELETE']) def delete_clothing(clothing_id): with get_db() as conn: # 先删除位置日志，再删除衣物主记录 conn.execute('DELETE FROM location_log WHERE clothing_id = ?', (clothing_id,)) conn.execute('DELETE FROM clothing WHERE id = ?', (clothing_id,)) return jsonify({'code': 0, 'message': '删除成功'}) @app.route('/api/statistics', methods=['GET']) def statistics(): with get_db() as conn: total = conn.execute('SELECT COUNT(*) AS cnt FROM clothing').fetchone()['cnt'] category_rows = conn.execute( 'SELECT category, COUNT(*) AS cnt FROM clothing GROUP BY category' ).fetchall() status_rows = conn.execute( 'SELECT status, COUNT(*) AS cnt FROM clothing GROUP BY status' ).fetchall() return jsonify({ 'code': 0, 'data': { 'total': total, 'categories': {row['category']: row['cnt'] for row in category_rows}, 'status': {row['status']: row['cnt'] for row in status_rows} } }) if __name__ == '__main__': app.run(host='0.0.0.0', port=5000, debug=True)

删除接口中，我刻意先删除日志再删除主记录，这是考虑到外键顺序，避免留下孤儿日志。不过当前 SQLite 没有开启外键约束，这个顺序更多是养成好习惯。

5. 前端页面实现

前端采用 Vue3 + Element Plus，并且直接使用 CDN 方式引入，不需要 Webpack 或 Vite 编译，让整个项目能在一个 HTML 文件里运行。

5.1 页面总体设计

页面结构分为四块：

• 顶部标题栏；
• 搜索与操作栏；
• 衣物列表表格；
• 两个弹窗：登记/编辑弹窗、二维码弹窗。

5.2 基础页面骨架

创建index.html，先引入 CDN 资源和页面布局。CDN 会加载对应大版本下的最新版本，实际使用时也可以手动锁定固定版本号。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>智能衣橱 - 衣物管家</title> <link rel="stylesheet" href="https://unpkg.com/element-plus@2/dist/index.css"> <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <script src="https://unpkg.com/element-plus@2/dist/index.full.min.js"></script> <script src="https://unpkg.com/qrcode@1/build/qrcode.min.js"></script> </head> <body> <div id="app"> <el-container> <el-header> <h2>智能衣橱 · 衣服再也不怕丢</h2> </el-header> <el-main> <el-card shadow="never" style="margin-bottom: 16px;"> <el-form inline> <el-form-item label="关键词"> <el-input v-model="query.keyword" placeholder="名称 / 位置 / 备注" clearable @clear="loadData" @keyup.enter="loadData" ></el-input> </el-form-item> <el-form-item label="归属人"> <el-input v-model="query.owner" placeholder="输入归属人" clearable @clear="loadData" @keyup.enter="loadData" ></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="loadData">查询</el-button> <el-button type="success" @click="showAddDialog">登记衣物</el-button> </el-form-item> </el-form> </el-card> <el-alert v-if="stats.total !== null" type="info" :closable="false" style="margin-bottom: 16px;" > 当前共 {{ stats.total }} 件衣物， 在库 {{ stats.status['在库'] || 0 }} 件， 借出 {{ stats.status['借出'] || 0 }} 件 </el-alert> <el-table :data="list" border stripe> <el-table-column prop="id" label="ID" width="60"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="category" label="类别" width="100"></el-table-column> <el-table-column prop="color" label="颜色" width="100"></el-table-column> <el-table-column prop="owner" label="归属人" width="100"></el-table-column> <el-table-column prop="location" label="存放位置" width="180"></el-table-column> <el-table-column prop="status" label="状态" width="80"></el-table-column> <el-table-column prop="create_time" label="登记时间" width="170"></el-table-column> <el-table-column label="操作" width="260"> <template #default="{ row }"> <el-button size="small" type="primary" @click="showQr(row)">二维码</el-button> <el-button size="small" type="warning" @click="showEditDialog(row)">编辑</el-button> <el-button size="small" type="danger" @click="deleteRow(row)">删除</el-button> </template> </el-table-column> </el-table> </el-main> </el-container> </div> </body> </html>

这一步先把页面框架搭出来了，接下来补全弹窗和 JavaScript 逻辑。

5.3 登记与编辑弹窗

在</body>之前添加弹窗结构，内容与后端字段一一对应。

<!-- 登记/编辑弹窗 --> <el-dialog v-model="formDialog.visible" :title="formDialog.isEdit ? '编辑衣物' : '登记衣物'" width="600px" > <el-form label-width="90px"> <el-form-item label="名称" required> <el-input v-model="formDialog.form.name" placeholder="例如：真丝睡衣"></el-input> </el-form-item> <el-form-item label="类别"> <el-select v-model="formDialog.form.category" placeholder="选择类别"> <el-option v-for="c in categories" :key="c" :label="c" :value="c" ></el-option> </el-select> </el-form-item> <el-form-item label="颜色"> <el-input v-model="formDialog.form.color"></el-input> </el-form-item> <el-form-item label="材质"> <el-input v-model="formDialog.form.material"></el-input> </el-form-item> <el-form-item label="归属人"> <el-input v-model="formDialog.form.owner"></el-input> </el-form-item> <el-form-item label="存放位置"> <el-input v-model="formDialog.form.location" placeholder="例如：主卧衣柜第二层"></el-input> </el-form-item> <el-form-item label="状态"> <el-select v-model="formDialog.form.status"> <el-option label="在库" value="在库"></el-option> <el-option label="借出" value="借出"></el-option> <el-option label="清洗" value="清洗"></el-option> <el-option label="待处理" value="待处理"></el-option> </el-select> </el-form-item> <el-form-item label="备注"> <el-input v-model="formDialog.form.remark" type="textarea"></el-input> </el-form-item> </el-form> <template #footer> <el-button @click="formDialog.visible = false">取消</el-button> <el-button type="primary" :loading="formDialog.loading" @click="saveForm" >保存</el-button> </template> </el-dialog> <!-- 二维码弹窗 --> <el-dialog v-model="qrDialog.visible" title="衣物二维码" width="420px" align-center > <div style="text-align: center;"> <canvas id="qrCanvas"></canvas> <p>{{ qrDialog.currentName }}</p> <p>当前位于：{{ qrDialog.currentLocation }}</p> <p style="color: #909399; font-size: 12px;"> 把二维码贴在收纳袋或衣柜上，扫一下就能知道这件衣物在哪。 </p> </div> </el-dialog>

注意，这两个el-dialog必须在<div id="app">的el-main结束之后、el-container结束之前，或者放在el-container内部最后面。总之要在 Vue 挂载的根节点内部。

5.4 核心 JavaScript 逻辑

在页面末尾添加<script>，注册 Vue 应用。这里使用 Vue3 的setup语法风格。

<script> const { createApp, ref, reactive, onMounted } = Vue; const app = createApp({ setup() { const baseURL = 'http://127.0.0.1:5000'; const list = ref([]); const query = reactive({ keyword: '', owner: '' }); const categories = ['睡衣', '上衣', '裤装', '裙装', '外套', '配饰', '其他']; const stats = reactive({ total: null, status: {} }); const formDialog = reactive({ visible: false, isEdit: false, loading: false, currentId: null, form: {} }); const qrDialog = reactive({ visible: false, currentName: '', currentLocation: '' }); async function request(url, options = {}) { const resp = await fetch(url, options); return resp.json(); } async function loadData() { const params = new URLSearchParams(); if (query.keyword) params.append('keyword', query.keyword); if (query.owner) params.append('owner', query.owner); const res = await request(`${baseURL}/api/clothes?${params.toString()}`); if (res.code === 0) { list.value = res.data; } } async function loadStats() { const res = await request(`${baseURL}/api/statistics`); if (res.code === 0) { stats.total = res.data.total; stats.status = res.data.status; } } function showAddDialog() { formDialog.isEdit = false; formDialog.currentId = null; formDialog.form = { name: '', category: '睡衣', color: '', material: '', owner: '', location: '', status: '在库', remark: '' }; formDialog.visible = true; } function showEditDialog(row) { formDialog.isEdit = true; formDialog.currentId = row.id; formDialog.form = { name: row.name, category: row.category, color: row.color, material: row.material, owner: row.owner, location: row.location, status: row.status, remark: row.remark }; formDialog.visible = true; } async function saveForm() { if (!formDialog.form.name) { ElementPlus.ElMessage.warning('请填写衣物名称'); return; } formDialog.loading = true; const url = formDialog.isEdit ? `${baseURL}/api/clothes/${formDialog.currentId}` : `${baseURL}/api/clothes`; const options = { method: formDialog.isEdit ? 'PUT' : 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formDialog.form) }; const res = await request(url, options); formDialog.loading = false; if (res.code === 0) { ElementPlus.ElMessage.success(res.message); formDialog.visible = false; loadData(); loadStats(); } else { ElementPlus.ElMessage.error(res.message); } } async function deleteRow(row) { ElementPlus.ElMessageBox.confirm( `确认删除「${row.name}」吗？删除后不可恢复。`, '删除确认', { type: 'warning' } ).then(async () => { const res = await request(`${baseURL}/api/clothes/${row.id}`, { method: 'DELETE' }); if (res.code === 0) { ElementPlus.ElMessage.success('删除成功'); loadData(); loadStats(); } }).catch(() => {}); } function showQr(row) { qrDialog.currentName = row.name; qrDialog.currentLocation = row.location; qrDialog.visible = true; setTimeout(() => { const text = `CLOTHING:${row.id},name=${row.name}`; const canvas = document.getElementById('qrCanvas'); QRCode.toCanvas(canvas, text, { width: 220, margin: 2 }, function (error) { if (error) { console.error(error); } }); }, 100); } onMounted(() => { loadData(); loadStats(); }); return { list, query, categories, stats, formDialog, qrDialog, loadData, showAddDialog, showEditDialog, saveForm, deleteRow, showQr }; } }); app.use(ElementPlus); app.mount('#app'); </script>

核心逻辑说明：

• request函数统一封装fetch，简化接口调用；
• loadData根据搜索条件拼接查询参数；
• saveForm区分新增和编辑，分别调用 POST 和 PUT 接口；
• showQr使用qrcode.js把衣物文本信息画到 canvas 上；
• stats用于展示总数量和状态分布。

到这里，一个可运行的前后端系统已经完成。

6. 运行与验证

6.1 启动后端服务

在已激活虚拟环境的项目目录下执行：

python app.py

预期看到类似输出：

* Running on all addresses (0.0.0.0) * Running on http://127.0.0.1:5000

后端服务默认监听 5000 端口。如果端口被占用，可以修改app.run中的port参数。

6.2 打开前端页面

index.html直接双击用浏览器打开即可。前端通过 HTTP 请求访问http://127.0.0.1:5000，配合 flask-cors 可以解决本地跨域问题。

需要注意的是，直接打开本地 HTML 文件可以正常工作，因为前端只依赖 CDN 和接口地址，不需要同源部署。

6.3 完整操作流程

下面用“真丝睡衣”作为示例，走一遍完整流程：

1. 点击“登记衣物”；
2. 名称填写“真丝睡衣”，类别选择“睡衣”，归属人填写“奶奶”，存放位置填写“主卧衣柜第二层”；
3. 点击保存，列表出现一条新记录；
4. 在搜索框输入“主卧”，点击查询，能过滤出相关衣物；
5. 点击“编辑”，把存放位置改为“次卧行李箱A”，保存；
6. 调用详情接口能查到一条位置变更日志：主卧衣柜第二层 → 次卧行李箱A；
7. 点击“二维码”，页面生成二维码；
8. 用手机扫一扫，能看到一段文本：CLOTHING:1,name=真丝睡衣。

如果希望扫码后直接展示一个网页，可以把二维码内容替换成你的前端地址，例如：

http://192.168.1.10:5500/index.html?id=1&name=真丝睡衣

然后在前端页面根据 URL 参数自动查询并展示衣物详情。

6.4 简单接口自测

后端启动后，也可以直接用浏览器或 curl 测试接口：

curl http://127.0.0.1:5000/api/clothes

返回结果是一个 JSON 数组，说明接口正常。

7. 常见问题与排查思路

8. 工程优化与最佳实践

8.1 数据安全与备份

SQLite 是单文件数据库，备份方式非常简单。日常使用建议定期复制wardrobe.db文件到其他磁盘或网盘，这就是完整的冷备份。

如果后续要升级到 MySQL，建议保留参数化查询习惯，同时为location_log.clothing_id建立索引，因为位置日志会随着使用时间逐渐增多。

8.2 接口安全与校验

当前系统只面向家庭局域网，所以没有做登录认证。如果系统要暴露到公网，或者有多个家庭成员远程访问，需要注意以下几点：

• 增加登录认证和 Token 机制；
• 接口层做参数白名单校验；
• 不要在公网直接暴露 SQLite 文件；
• 操作前进行权限判断，避免误删他人衣物档案。

关于网络访问，家庭内部通过局域网 IP 访问即可，不建议做复杂的公网映射。

8.3 事务与数据一致性

位置更新和日志写入必须放在同一个事务中。本文示例使用了with get_db() as conn的方式，正常退出自动提交，异常退出自动回滚。

在真实项目中，建议写单元测试来覆盖这个场景：故意让日志插入失败，确认衣物位置不会被更新。

8.4 二维码使用建议

二维码适合打印后贴在收纳袋、收纳箱或衣柜层板上。内容可以设计得更丰富一些：

CLOTHING:1 name=真丝睡衣 owner=奶奶 location=主卧衣柜第二层 update=2025-06-01 10:30

也可以把二维码内容指向一个 Web 地址，让手机扫码后自动打开衣物详情页。这样家人不需要安装任何 App，扫码就能看到位置信息。

8.5 项目后续扩展方向

当前系统已经完成了核心闭环，但仍有很多可扩展点：

• 衣物图片上传与展示；
• 洗涤周期提醒，例如“真丝睡衣建议手洗”；
• 换季批量归档功能；
• 基于 RFD 或蓝牙标签的无感盘点；
• 小程序端，方便家庭成员手机直接操作；
• Docker 封装，一键部署到 NAS 或云服务器。

建议不要一上来就加太多功能，先把数据录入习惯养成，系统真正用起来之后再逐步迭代。

9. 总结与扩展方向

本文从“真丝睡衣去哪了”的生活场景出发，完整实现了一个家庭衣物智能管理系统。通过这套系统，你可以掌握：

• 使用 Flask 编写 REST API；
• 使用 SQLite 设计业务表和日志表；
• 使用 Vue3 + Element Plus 搭建管理界面；
• 通过二维码给实物赋予数字身份；
• 通过事务保证位置更新与日志记录的数据一致性。

如果你正打算做一个前后端分离的小项目练手，可以直接把本文代码跑起来，然后尝试加入图片上传、登录模块或小程序端。每加一个功能，都会让你对 Web 开发的全链路有更深的理解。

行动比收藏更重要。打开 IDE，先把第一件“真丝睡衣”登记进去，这套系统的价值开始体现。