SuperX 广告发布系统

一个简洁而强大的广告发布和展示平台。支持自由拖拽、图片上传、链接跳转等功能。

作者: Peter

功能特点

首页功能

• 响应式布局，自适应不同屏幕尺寸
• 广告图片自动适配显示
• 支持广告图片点击跳转外部链接
• 右上角快速跳转按钮，方便定位未固定广告
• 顶部导航栏包含快捷功能按钮
• 一键发布广告入口
• 3000px 超宽画布，支持大量广告展示
• 平滑滚动和优化的滚动条体验

广告发布功能

• 支持图片上传和预览（支持 jpg、png、gif 等格式）
• 拖拽调整广告位置和大小
• 智能防止广告重叠，自动寻找最佳位置
• 支持为广告添加外部链接
• 固定位置功能，防止误操作
• 实时预览效果，所见即所得
• 一键清空画布
• 快速返回首页
• 支持压缩文本上传
• 支持广告代码输入

安装教程

npm i npm run dev npm run start

环境要求

• Node.js >= 14.0.0
• npm >= 6.0.0
• MongoDB >= 4.0.0

后端安装

使用说明

发布广告

1. 点击首页右上角的"发布广告"按钮
2. 上传广告图片（支持jpg、png、gif等格式）
3. 在预览区域拖拽调整广告位置和大小
4. 可选择为广告添加跳转链接（点击"附加链接"按钮）
5. 点击"固定位置"确定广告位置
6. 点击"确定发布"完成发布
7. 可以使用右上角的跳转按钮快速定位到未固定的广告

广告管理

• 已发布的广告会在首页实时展示
• 点击广告可跳转到设定的链接
• 使用右上角跳转按钮快速定位到未固定广告
• 可随时返回修改或发布新广告
• 支持一次上传多个广告

快捷键

• 拖拽：直接点击并拖动广告
• 调整大小：拖动广告四角或边缘
• 删除链接：点击"删除链接"按钮
• 清空画布：点击"清空画布"按钮
• 返回首页：点击右上角"返回首页"按钮

注意事项

1. 建议上传的图片分辨率适中，过大会影响加载速度
2. 添加链接时请确保链接格式正确（会自动添加 https:// 前缀）
3. 发布前请确保所有广告都已固定位置
4. 建议使用现代浏览器访问以获得最佳体验
5. 广告位置会自动避免重叠，如遇位置冲突会自动调整
6. 上传失败时请检查网络连接和服务器状态
7. 定期备份数据库以防数据丢失

技术栈

• 前端：Vue 3 + Vite
• 后端：Node.js + Express
• 数据库：MongoDB
• 文件存储：本地存储
• 交互库：InteractJS
• 路由：Vue Router
• 样式：原生 CSS

项目结构

project/ ├── client/ # 前端代码 │ ├── src/ │ │ ├── views/ # 页面组件 │ │ ├── components/ # 通用组件 │ │ └── assets/ # 静态资源 │ └── vite.config.js # Vite 配置 ├── server/ # 后端代码 │ ├── routes/ # 路由处理 │ ├── models/ # 数据模型 │ └── app.js # 主程序 └── README.md # 项目说明

开源协议

MIT License

联系方式

作者：Peter GMAIL：[FrankEmbola386@gmail.com]

更新日志

v1.0.0 (2024-11-11)

• 首次发布
• 实现基础广告发布功能
• 支持图片上传和链接添加
• 添加拖拽调整功能
• 实现智能防重叠
• 添加快速跳转功能
• 优化用户界面和交互体验

贡献指南

1. Fork 本仓库
2. 创建新的功能分支
3. 提交你的更改
4. 发起 Pull Request

常见问题

Q: 为什么无法上传图片？ A: 请检查图片格式和大小，确保服务器正常运行。

Q: 广告位置重叠怎么办？ A: 系统会自动调整位置，也可以手动拖动到合适位置。

Q: 如何修改已发布的广告？ A: 目前需要重新发布，后续版本会添加编辑功能。

致谢

感谢所有为本项目做出贡献的开发者。