本项目旨在将一个纯静态的个人摄影作品集网站,升级改造为一个功能完备、内容可动态管理的现代化全栈Web应用。项目目标是实现前后端分离,构建一个独立的后台管理系统,使网站所有者(摄影师)本人可以在不修改任何代码的情况下,方便快捷地更新网站上的个人介绍、作品集照片等内容,最终将应用部署到云服务器,实现稳定可靠的公网访问。
核心功能模块包括:
1. 前台展示模块:
- 首页:展示摄影师的个人品牌、头像和社交媒体链接。
- 关于我:展示摄影师的详细个人介绍和照片。
- 作品集:以画廊形式分页展示摄影作品,支持动态加载。
- 全站支持明亮/暗黑两种主题模式切换。
2. 后台管理模块(CMS):
- 安全认证:提供独立的管理员登录、登出功能,通过Session进行状态管理。
- 内容管理:提供图形化表单,用于修改“关于我”页面的所有文本内容和图片URL。
- 作品管理:支持新增摄影作品的图片上传(含大小和类型校验)、文字描述填写;支持对已上传作品的查看和删除。
业务流程描述:
- 访客流程:用户通过公网域名访问网站首页,可自由浏览“关于我”、“作品集”等页面。作品集页面支持分页加载,提升了大量图片下的浏览性能。
- 管理员流程:管理员访问特定的后台登录入口(/admin),输入正确的账号密码后进入管理仪表盘。管理员在此可对网站内容进行增、删、改操作。所有更改提交后,前台页面会立刻实时反映出最新的内容。
本项目采用前后端分离的架构思想进行设计和实现,最终通过一套现代化的生产环境方案完成部署。
1. 整体架构与技术栈:
- 前端:采用原生HTML5、CSS3和JavaScript (ES6+) 构建,未使用任何重型框架,保证了页面的轻量和高性能。通过Fetch API与后端进行异步数据交互,实现了页面的动态内容渲染。
- 后端:基于Python的轻量级框架Flask进行开发。使用Flask-SQLAlchemy作为ORM层,简化了与数据库的交互。后端主要负责提供RESTful API接口供前端调用,以及处理后台管理系统的所有业务逻辑。
- 数据库:选用SQLite作为项目的数据存储方案,它轻量、易于部署,非常适合中小型项目。
- 部署架构:采用了一套经典的生产环境部署方案。使用Nginx作为反向代理和静态文件服务器,负责处理所有外部HTTP请求;使用Gunicorn作为WSGI服务器,运行Flask应用实例并管理多个工作进程;使用systemd作为进程守护服务,确保Gunicorn在后台稳定运行并能开机自启。
2. 我负责的模块和成果:
本人作为项目的唯一开发者,独立负责了从需求分析、技术选型、开发实现到最终部署的全过程。主要职责包括:
- 对原有静态前端页面进行重构,实现动态化改造。
- 设计并实现后端所有API接口及业务逻辑,包括数据库模型设计。
- 从零开始构建后台管理系统,包括用户认证、内容管理和文件上传等核心功能。
- 在CentOS 7云服务器上搭建完整的生产环境,完成Nginx、Gunicorn和systemd的配置与协同工作。
- 项目最终成功上线,实现了初始目标,将原本需要修改代码才能更新的静态网站,变成了一个可以通过后台界面在几分钟内轻松完成内容更新的动态应用。
3. 遇到的难点、坑和解决方案:
在部署阶段遇到了多个典型的Linux运维问题,通过逐一排查成功解决:
- 难点一:Nginx与Gunicorn通信失败(502 Bad Gateway错误)。
- 解决方案:通过分析日志,定位到问题是由于Linux用户主目录的默认权限限制,导致Nginx进程无法访问Gunicorn的socket文件。通过`chmod 711`命令为用户主目录添加执行权限,成功解决。
- 难点二:后台无法写入数据库(readonly database错误)。
- 解决方案:经排查,此问题由CentOS默认开启的SELinux安全策略导致。通过`chcon`命令为数据库文件及其父目录设置正确的SELinux安全上下文(`httpd_sys_rw_content_t`),授予了Web服务写入权限。
- 难点三:静态文件(图片)加载失败(403/404错误)。