我的物品柜：个人物品记录 Web 应用开发全流程与踩坑实录
一、项目定位
一个个人自用的物品记录 Web 应用：记录每件物品的名称、价格、启用时间，可多端访问（PC / 手机）。核心诉求是「够用、好看、好维护」，不追求复杂架构。
技术栈：Python + Flask（后端）、SQLite（本地文件数据库，数据持久化）、原生 HTML/CSS/JS（响应式前端）。所有数据存本地 SQLite 文件，服务重启不丢失。
二、整体开发流程
- 数据库设计：
users（用户表）+items（物品表） - 后端路由与业务逻辑：登录态（Flask Session）、物品增删改查、导出 Excel
- 前端三页：登录页 / 主页 / 设置页
- 部署与开机自启（systemd）
- HTTPS 上线（从 IP 直连提升到域名加密）
三、核心功能要点
| 模块 | 说明 |
|---|---|
| 登录 | 默认账号 admin / 123456（明文简化存储，个人工具），无注册，只能进设置页修改 |
| 主页统计 | 顶部实时显示总数量、总价格、日均价格 |
| 物品列表 | 卡片式；排序支持「按启用时间（默认，最新在前）」和「按价格从高到低」 |
| 添加 | 右下角悬浮「＋」按钮，弹出表单（名称、价格、启用日期） |
| 编辑 / 删除 | 每张卡片右侧「编辑」按钮进入编辑；编辑弹窗内可删除（带二次确认） |
| 设置 | 修改用户名、修改密码、导出 Excel |
| 日均价 | 单件日均价 = 价格 ÷ 已启用天数（不足 1 天按 1 天），用客户端时间计算，跨时区正确 |
| 导出 Excel | 单工作表、首行表头，只导出名称/价格/启用时间原始数据 |
四、开发中遇到的问题与解决方式（重点）
| # | 问题现象 | 原因 | 解决方式 |
|---|---|---|---|
| 1 | 创建 Python 虚拟环境失败 | 系统缺少 python3-venv 包 | 安装 python3-venv 后重建 venv |
| 2 | 改了 HTML，刷新后仍是旧页面 | Flask debug=False 时 Jinja 会缓存编译后的模板 | 改完模板要重启服务；CSS/JS 是静态文件直接读盘，改它们不用重启 |
| 3 | 手机长按物品卡，弹出系统「复制」菜单 | 长按交互触发手机自带长按菜单 | 去掉长按交互，改为每张卡片右侧放一个「编辑」按钮，点击直接编辑 |
| 4 | 图标用 emoji 偏「3D」、不统一 | emoji 图标立体感强、风格不受控 | 全部换成扁平线条 SVG 图标（齿轮 / 铅笔 / 储物柜） |
| 5 | 页面显得「重」、不够简约高级 | 原样式用阴影、渐变堆质感 | 借鉴扁平设计语言：无阴影、无渐变，纸灰 + 炭黑两级色，单一强调色；配合动画提升质感 |
| 6 | 动画对部分用户不友好 | 动画可能造成抖动 / 不适 | 用 prefers-reduced-motion 检测，用户偏好减少动效时把动画时长直接设为 0 |
| 7 | 测试把默认数据改乱了 | 调试时改动了凭证和示例物品 | 删掉数据库文件重新初始化，自动恢复默认账号和 3 条示例数据（初始化是幂等的） |
| 8 | 关机重启后服务消失 | 没有常驻机制 | 注册为 systemd 服务并设为开机自启，崩溃后自动重启 |
五、HTTPS 上线（从 IP 直连提升到域名加密）
背景：早期一直是 http://服务器IP:5000 直连访问，流量不加密。要上 HTTPS，必须先有一个域名——免费证书（如 Let's Encrypt）只能给域名签发，不能给 IP 签发。
- 准备域名：给物品柜取一个子域名（如
app.你的域名.com），在域名的 DNS 里加一条 A 记录指向服务器公网 IP。等解析生效后，用getent hosts 子域名验证能否解析到你的公网 IP。 - 接入本机已有的 Caddy（反向代理 + 自动签证书）：新增一个站点块，把该子域名的流量反代到本机
127.0.0.1:5000（物品柜监听端口），并header_up Host保持主机名。 - 加载配置：
systemctl restart caddy。 - 证书签发：Caddy 启动后自动通过 HTTP-01 向 Let's Encrypt 申请并下载证书，日志出现
certificate obtained successfully即成功；到期自动续期，无需人工干预。 - 验证：
curl https://你的域名/返回 200、TLS 校验通过；未登录访问 API 返回 401。
HTTPS 过程中遇到的问题与解决方式
| 问题现象 | 原因 | 解决方式 |
|---|---|---|
systemctl reload caddy 报「connection refused」 | 本机 Caddy 配置里 admin off，reload 命令要连管理员 API，连不上 | 改用 systemctl restart caddy 完全重启加载新配置 |
| HTTPS 想直接给 IP 用，签不到证书 | Let's Encrypt 只给域名签 | 先准备子域名 + DNS A 记录指向公网 IP |
| 换了新域名后要重新登录 | Flask Session 登录 cookie 按域名区分 | 新域名第一次用默认账号重新登录即可，数据不变、无迁移 |
| 上了 HTTPS 后旧端口还在公网 | :5000 作为 HTTP 直连端口依然监听 | 不需要的话可在云平台安全组只放行 80/443，关掉直连端口 |
HTTPS 要点小结
- Caddy 属于本机原生服务（非容器），站点配置按「新增站点块」追加，不碰原有配置。
- 80/443 端口放行来自云平台安全组（安全组从外部控制端口，云服务器自身防火墙往往不参与）。
- HTTPS 与旧 HTTP 直连地址各自独立登录、共享同一数据库，无冲突。
六、常用命令速查
# 安装依赖
python3 -m venv venv && ./venv/bin/pip install -r requirements.txt
# 初始化数据库（首次运行，建表 + 默认账号 + 示例数据）
./venv/bin/python database.py
# 手动启动（监听所有网卡，端口 5000）
./venv/bin/python app.py --host=0.0.0.0 --port=5000
# systemd 常驻服务管理
systemctl status <服务名> # 查看状态
systemctl restart <服务名> # 重启
journalctl -u <服务名> -f # 实时看日志
# HTTPS：重载本机 Caddy（admin 关闭时用 restart，不用 reload）
systemctl restart caddy
curl -s -o /dev/null -w "%{http_code}" https://你的域名/七、体验细节
- 响应式：PC（>768px）列表宽 70% 居中；手机（≤768px）宽约 95% 全屏适配。
- 统计数字动画：顶部统计用 GSAP 从 0「滚动」到目标值，配合等宽数字（tabular-nums）避免数字跳动。
- 入场动画：物品卡片用 GSAP 逐条自下而上淡入（stagger），提升质感但不干扰阅读。
删除安全：删除有二次确认；成功/失败用顶部 Toast 提示（绿/红，3 秒自动消失）。
八、安全提醒（个人工具也要注意）
- 默认账号
admin / 123456是明文存储（个人自用简化取舍）——若放到公网，务必第一时间在设置页改掉默认密码。 - 公网访问要在云平台安全组放行对应端口：安全组从外部控制端口，云服务器自身防火墙往往不参与。
- 登录态用 Flask Session（服务端存储）；未登录访问主页会自动跳回登录页。
- 公网部署优先走 HTTPS（域名加密），并考虑在安全组关掉不必要的直连端口。
结语
这个项目没有大数据、没有复杂架构，价值在于「流程完整 + 观感在线」：数据库 → 后端 → 三页前端 → 部署自启 → HTTPS 加密一气呵成，配合扁平化设计与轻量动画，非常适合作为个人物品 / 账本 / 清单类的自用工具模板。