幻想漂流瓶

赛题选择：4. 人文复兴

信息时代，效率和最优解的追求成为社会的唯一信条。科学主义的浪潮下，情感，思想，艺术等无法被量化的人的特质似乎正在逐渐黯淡。人工智能常常被视为这场”人文失落“的推手。但如果你也相信”技术本身并无好坏“，如果你也认为应当让人文精神再度回归，那就请结合人工智能来给这个略显冷漠的时代注入人文的温度。本赛题，你需要完成一个为人文服务的内容，表现形式可能是文化，艺术等等能体现人类的光辉的元素，越凸显人的重量的应用越会得到认可。

项目实际部署

点此体验

项目简介

"幻想漂流瓶"是一个创意社交平台，用户可以将想要分享的文字、图片等内容放入"漂流瓶"中，让它们在虚拟世界中漂流。其他用户可以随机捞取这些漂流瓶，阅读内容并与发布者互动。项目采用匿名机制，保护用户隐私，让用户能够更自由地表达自己。

项目设定

用幻想为这个略显冷漠的时代注入人文的温度！

天马行空的人可以盯着桌上的物品幻想一个下午。

在这个网站上，幻想爱好者将发布自己的幻想：可以是“空想”，无须以现实为根基，仅用文字编织幻想的乐章；也可以是“联想”，赋予枯燥无味的现实图景名为“幻想”的生命力。

将幻想装入漂流瓶扔出后，经漂流瓶管理局审批通过后，漂流瓶将进入匿名海洋。

其他从匿名海洋中拾起漂流瓶的人可以共同编辑这个幻想。

功能特性

• 📝 发布漂流瓶：用户可以创建包含文字和图片的漂流瓶
• 🌊 浏览漂流瓶：随机捞取漂流瓶，阅读他人分享的内容
• 🎨 多种类型：支持不同载体（牛皮纸、永恒纸）和幻想类型的内容
• 🔐 管理系统：管理员可以审核内容，管理系统运行状态
• 📱 响应式设计：适配不同屏幕尺寸，提供良好的用户体验
• 🎥 动态背景：使用视频背景提升视觉效果和沉浸感
• 📚 内容分类：根据载体和幻想类型对内容进行分类管理

灵码对话

本项目使用灵码辅助开发，前端的对话内容详见，后端的对话内容详见这里。

技术栈

前端

• Vue 3 (Composition API)
• Vue Router 4
• Element Plus UI 组件库
• Vite 构建工具

后端

• Node.js
• Express.js
• SQLite3 数据库
• Multer (文件上传)
• JWT (身份验证)
• Swagger (API文档)

目录结构

plp/
├── plp-backend/          # 后端服务
│   ├── uploads/          # 上传文件存储目录
│   ├── db.js             # 数据库操作模块
│   └── server.js         # 主服务文件
├── plp-frontend/         # 前端应用
│   ├── public/           # 静态资源
│   ├── src/              # 源代码
│   │   ├── components/   # 公共组件
│   │   ├── views/        # 页面组件
│   │   ├── router/       # 路由配置
│   │   └── store.js      # 状态管理
│   └── vite.config.js    # 构建配置
└── package.json          # 项目配置文件

路由功能说明

项目包含以下主要路由页面：

首页 (/)

• 项目入口页面
• 展示动态背景视频
• 提供进入编辑和浏览功能的入口

浏览选择页 (/select)

• 用户选择想要浏览的漂流瓶类型
• 可选择不同载体（牛皮纸、永恒纸）和幻想类型
• 根据选择条件随机获取漂流瓶内容

内容详情页 (/view)

• 展示漂流瓶的详细内容
• 显示标题、正文、图片等信息
• 展示内容的标签分类（载体、幻想类型等）

内容编辑页 (/edit)

• 创建和编辑漂流瓶内容
• 支持输入标题、正文内容
• 支持上传图片
• 可选择载体和幻想类型标签

管理页面 (/manager)

• 系统管理功能入口
• 管理员登录和身份验证
• 内容审核和管理
• 系统配置管理

介绍页面 (/introduction)

• 项目使用说明和介绍
• 网站使用指南
• 相关说明文档展示

安装与运行

环境要求

• Node.js >= 14.x
• npm >= 6.x

安装步骤

1. 克隆项目代码：

git clone <项目地址>
cd plp

2. 安装所有依赖：

npm run install:all

开发环境运行

启动开发服务器（同时启动前后端）：

npm run dev

分别启动前后端：

# 启动后端服务
npm run dev:backend

# 启动前端服务
npm run dev:frontend

生产环境构建

构建前端应用：

npm run build

使用说明

1. 首页：访问 http://localhost:3000 进入网站首页
2. 发布内容：点击首页相关按钮进入编辑页面，填写内容并发布
3. 浏览内容：通过选择页面选择想要浏览的内容类型
4. 网页说明：点击页面的右上角的图标进入
5. 管理系统：访问管理页面进行内容审核和系统管理，无直接入口，请访问 http://localhost:3000/manager
6. 管理员登录相关：初次登录请先设置密码

API 文档

后端提供完整的 RESTful API，访问 http://localhost:3001/api-docs 查看 API 文档。

项目配置

环境变量

后端支持以下环境变量：

• PORT：服务端口，默认 3001
• JWT_SECRET：JWT 密钥，默认为 'plp_backend_default_secret_key'

数据库

项目使用 SQLite 数据库，数据文件默认存储在 plp-backend/database.db。

贡献指南

欢迎提交 Issue 和 Pull Request 来改进项目。

许可证

本项目采用 MIT 许可证，详情请见 LICENSE 文件。