一句话生成的云相册应用

云相册应用

项目简介

云相册应用是一个基于 Node.js + Express 构建的轻量级在线照片管理系统。用户可以注册账号、登录系统，上传自己的照片（支持 jpg、png、gif、webp 格式），在响应式相册网格中浏览所有照片，点击查看全屏预览，以及删除不需要的照片。

系统架构

应用采用经典的三层架构设计：

• 前端展示层：使用原生 HTML/CSS/JavaScript，无需任何前端框架。登录注册页面采用卡片式布局，相册页面使用响应式网格展示照片缩略图。

• 后端服务层：基于 Express 框架，提供用户认证（bcrypt 密码哈希 + express-session 会话管理）、照片上传（multer 处理 multipart 文件）、相册管理（CRUD API）等核心功能。

• 数据存储层：使用 SQLite 嵌入式数据库存储用户信息和照片元数据，文件系统（uploads/ 目录）存储实际照片文件。

核心功能

1. 用户注册与登录

用户通过用户名、邮箱和密码进行注册。密码使用 bcrypt 进行哈希存储，确保安全性。登录后通过 express-session 维持会话状态，未登录用户自动跳转到登录页面。

2. 照片上传

支持 jpg、png、gif、webp 四种图片格式，单文件最大 10MB。提供拖拽上传和点击选择两种方式，使用 multer 中间件处理文件上传。

3. 相册展示

以响应式网格布局展示用户上传的所有照片，每张照片显示文件名、上传时间和文件大小信息。界面采用蓝白配色，简洁现代。

4. 照片管理与预览

用户可以删除自己的照片（权限隔离，仅能操作自己的照片）。点击任意照片可弹出全屏模态预览，支持 ESC 键关闭。

技术栈

项目亮点

• 零框架依赖前端：使用原生 JavaScript 实现，无需 React/Vue 等框架，加载快、依赖少

• 安全可靠：bcrypt 密码哈希、session 鉴权、用户数据隔离

• 响应式设计：适配不同屏幕尺寸，移动端友好

• 拖拽上传：支持拖拽文件到上传区域，提升用户体验

• 全屏预览：模态框全屏查看照片，ESC 快捷关闭