从静态歌单，到完整上线的小型 Web 应用

很多个人项目的开始都非常简单。

最初可能只是一个想法：

做一个简单的歌单页面，方便查看，也方便自己修改。

不需要数据库，不需要复杂后台，不需要用户体系。

但随着需求逐渐增加，一个简单页面演变成了一个完整的小型 Web 服务。

这就是一个个人点歌平台的成长过程。

一、最初的需求：一个可以分享的歌单页面

需求非常明确：

任何人都可以查看歌单
只有管理员可以修改
不希望每次修改都登录服务器编辑文件
希望拥有一个简单的管理入口

因此设计成：

游客
 |
访问网页
 |
查看歌曲列表
管理员
 |
登录
 |
修改歌曲
 |
保存

没有复杂权限系统，只有一个密码。

对于个人项目来说，这种设计足够简单，也足够实用。

二、技术选型：为什么选择 Flask？

整个项目没有选择：

Vue
React
Django
MySQL
Redis

而是采用：

Python
+
Flask
+
JSON 文件
+
Nginx
+
systemd

因为这只是一个个人歌单项目。

数据规模：

几十首歌曲
修改频率低
查询逻辑简单

因此没有必要引入数据库。

最终：

songs.json

承担了数据存储的角色。

三、项目最终目录设计

项目目录：

/opt/songlist
.
├── app
.py
├── songs
.json
├── songs
.json.bak
├──
source
│   └── original-
icon
.png
├── static
│   ├── app
.js
│   ├── favicon
│   │   ├── apple-touch-
icon
.png
│   │   ├── favicon-
16
.png
│   │   ├── favicon-
32
.png
│   │   └── favicon
.ico
│   └── style
.css
└── templates
    └── index
.html

这个结构已经接近标准 Flask 项目。

四、核心文件：app.py

app.py 是整个项目的大脑。

负责：

创建 Flask 应用
页面渲染
登录验证
Session 管理
保存歌曲数据

整体流程：

浏览器
↓
Flask
↓
songs.json

五、为什么不用数据库？

很多 Web 项目第一反应： MySQL？

但工程设计不是技术堆叠。

这个项目的数据特点：

数据量小
结构固定
没有复杂查询

JSON 完全满足需求。

这也是一个重要原则：

根据实际需求选择技术，而不是为了显得高级而增加复杂度。

六、简单登录系统

管理员登录流程：

修改按钮
↓
输入密码
↓
POST /login
↓
Session 保存状态

游客：

歌曲列表

管理员：

编辑界面

七、为什么把密码从代码中拆出来？

最初：

PASSWORD="123456"

直接写在 app.py 中。

虽然能运行，但是存在问题：

如果：

上传代码仓库
分享项目
迁移服务器

密码可能一起泄露。

后来改成：

/etc/songlist/songlist.env

保存：

SECRET_KEY=随机字符串
PASSWORD=管理员密码

systemd：

EnvironmentFile=/etc/songlist/songlist.env

启动程序时注入。

最终代码负责逻辑，配置文件负责密码和密钥。

实现配置和代码分离。

这是生产环境常见方式。

八、数据保护：songs.json.bak

最开始保存 songs.json 直接覆盖。

如果操作错误、写入异常、文件损坏，数据可能丢失。

因此增加：

songs.json.bak

保存流程：

点击保存
↓
旧 songs.json
↓
songs.json.bak
↓
生成新的 songs.json

简单，但是有效。

九、前端部分

项目没有使用大型前端框架。

只有：

static
├── app.js
└── style.css

app.js 负责：

登录弹窗
保存按钮
添加歌曲
删除歌曲

流程：

收集页面数据
↓
转换 JSON
↓
发送 API
↓
刷新页面

style.css 负责：

页面布局
编辑卡片
弹窗样式
按钮效果

保持轻量。

十、上线部署

最终运行结构：

用户浏览器
↓
Nginx
↓
127.0.0.1:8788
↓
Flask
↓
songs.json

Nginx 负责：

HTTPS
域名访问
反向代理

Flask 负责：

业务逻辑

systemd 负责：

服务启动
自动重启
开机运行

最终形态

用户
↓
Nginx
↓
Flask
↓
项目目录
↓
songs.json

它不是一个大型商业系统。

但它是一个完整闭环。

从一个简单想法，到一个真正运行在互联网的小型应用。

对于个人开发者来说，这类项目非常适合作为练习：

规模小，但覆盖真实工程中的关键环节。