logo
0
0
WeChat Login
Forkfromcode-channel/idea-spark, behind:master12 commits

IdeaSpark - 创作者灵感管理与社交平台

IdeaSpark Java Spring Boot Vue.js

一款面向创作者的灵感管理与社交平台,帮助你捕捉、记录、分享和实现创意灵感。

功能特性快速开始Docker部署详细文档开发指南


✨ 功能特性

💡 灵感管理

  • 快速记录 - 随时随地捕捉创意灵感
  • 图片上传 - 支持上传多张图片,记录灵感瞬间(最多9张)
  • 图片预览 - 点击放大查看,支持幻灯片浏览
  • 分类管理 - 支持自定义分类,让灵感井井有条
  • 标签系统 - 多标签支持,便于灵感检索
  • 待办事项 - 将灵感转化为可执行的任务
  • 草稿箱 - 保存未完成的创意
  • 生命周期追踪 - 时间轴展示想法从创建到完成的全过程,包含图片修改历史

🏆 激励体系

  • 积分系统 - 登录、创建想法、完成任务获得积分
  • 勋章系统 - 12种成就勋章,记录创作历程
    • 创作系列:初出茅庐、创作新星、创作达人、创作大师
    • 社交系列:社交新星、社交达人
    • 社区系列:分享之星、评论家、人气王
    • 特殊成就:坚持不懈、忠诚用户、积分先锋
  • 成就系统 - 实时统计创作数据,自动解锁成就
  • 荣誉证书 - 生成个人专属证书,展示创作成就(支持PNG下载)

👥 社交功能

  • 好友系统 - 添加好友,建立创作圈
  • 智能推荐 - 基于兴趣推荐志同道合的朋友
  • 社区动态 - 分享灵感到社区,获得反馈
  • 点赞评论 - 与社区成员互动交流
  • 隐私控制 - 灵活设置内容可见性

🔐 安全特性

  • JWT认证 - 基于Token的安全认证机制
  • Redis缓存 - 提升性能,支持Token管理
  • 密码加密 - BCrypt加密存储用户密码
  • 安全文件访问 - MinIO文件通过后端代理访问,无需公开桶
  • 对象存储 - MinIO存储用户头像、想法图片等文件

🛠 技术栈

后端技术

技术版本说明
Java17编程语言
Spring Boot3.2.0应用框架
Spring Security6.x安全框架
MyBatis Plus3.5.5ORM框架
MySQL8.0关系数据库
Redis7.x缓存数据库
MinIOLatest对象存储
JWT0.12.3Token认证
Hutool5.8.24Java工具库

前端技术

技术版本说明
Vue.js3.4.21前端框架
Vite5.2.0构建工具
Element Plus2.7.0UI组件库
Pinia2.1.7状态管理
Vue Router4.3.0路由管理
Axios1.6.8HTTP客户端
Day.jsLatest日期处理

📦 快速开始

环境要求

  • JDK 17+
  • Node.js 18+
  • MySQL 8.0+
  • Redis 7.x+
  • MinIO (可选,用于文件存储)
  • Maven 3.6+

方式一:本地开发

1. 克隆项目

git clone https://cnb.cool/code-channel/idea-spark.git cd idea-spark

2. 配置数据库

创建MySQL数据库并导入表结构:

# 方式一:使用MySQL命令行 mysql -u root -p < database/schema.sql # 方式二:在MySQL命令行中执行 mysql -u root -p
-- 在MySQL中执行 source /path/to/database/schema.sql;

schema.sql 文件包含完整的数据库结构设计,包括所有15个表的创建语句和初始化数据。

3. 启动后端

cd backend # 修改配置文件 vi src/main/resources/application-dev.yml # 配置数据库连接信息 spring: datasource: url: jdbc:mysql://localhost:3306/idea_spark?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true username: root password: your_password # 配置Redis连接 spring: data: redis: host: localhost port: 6379 password: your_redis_password # 配置MinIO minio: endpoint: http://localhost:9000 access-key: minioadmin secret-key: minioadmin123 bucket-name: ideaspark

启动后端服务:

mvn clean install mvn spring-boot:run

后端服务将在 http://localhost:8088 启动。

4. 启动前端

cd frontend # 安装依赖 npm install # 启动开发服务器 npm run dev

前端服务将在 http://localhost:5173 启动。

5. 访问应用

打开浏览器访问 http://localhost:5173,注册新账号或使用测试账号登录。

方式二:Docker 部署(推荐)

使用 Docker Compose 一键部署

# 克隆项目 git clone https://cnb.cool/code-channel/idea-spark.git cd idea-spark # 启动所有服务 docker-compose up -d # 查看日志 docker-compose logs -f # 查看特定服务日志 docker-compose logs -f backend docker-compose logs -f frontend # 停止服务 docker-compose down # 停止服务并删除数据卷 docker-compose down -v

服务访问地址

服务地址说明
前端应用http://localhost主应用
后端APIhttp://localhost:8088/apiAPI接口
MinIO控制台http://localhost:9001对象存储管理
MySQLlocalhost:3306数据库
Redislocalhost:6379缓存

Docker Compose 服务说明

服务容器名端口映射依赖
MySQLideaspark-mysql3306:3306-
Redisideaspark-redis6379:6379-
MinIOideaspark-minio9000:9000, 9001:9001-
Backendideaspark-backend8088:8088mysql, redis, minio
Frontendideaspark-frontend80:80backend

单独构建镜像

# 构建后端镜像 cd backend docker build -t ideaspark-backend:latest . # 构建前端镜像 cd frontend docker build -t ideaspark-frontend:latest . # 运行容器 docker run -d -p 8088:8088 --name backend ideaspark-backend:latest docker run -d -p 80:80 --name frontend ideaspark-frontend:latest

📁 项目结构

idea-spark/ ├── backend/ # 后端项目 │ ├── src/main/ │ │ ├── java/com/ideaspark/ │ │ │ ├── config/ # 配置类 │ │ │ │ ├── SecurityConfig.java # 安全配置 │ │ │ │ ├── JwtAuthenticationFilter.java # JWT过滤器 │ │ │ │ ├── RedisConfig.java # Redis配置 │ │ │ │ └── MinioConfig.java # MinIO配置 │ │ │ ├── controller/ # 控制器 │ │ │ │ ├── UserController.java # 用户认证 │ │ │ │ ├── IdeaController.java # 想法管理 │ │ │ │ ├── CategoryController.java # 分类管理 │ │ │ │ ├── CommunityController.java # 社区功能 │ │ │ │ ├── SocialController.java # 社交功能 │ │ │ │ ├── FileController.java # 文件上传 │ │ │ │ ├── GamificationController.java # 积分勋章 │ │ │ │ └── CertificateController.java # 证书生成 │ │ │ ├── dto/ # 数据传输对象 │ │ │ ├── entity/ # 实体类 │ │ │ ├── repository/ # 数据访问层 │ │ │ ├── service/ # 业务逻辑层 │ │ │ ├── exception/ # 异常处理 │ │ │ └── util/ # 工具类 │ │ └── resources/ │ │ ├── application.yml # 主配置文件 │ │ └── application-dev.yml # 开发环境配置 │ ├── Dockerfile │ └── pom.xml │ ├── frontend/ # 前端项目 │ ├── src/ │ │ ├── api/ # API接口 │ │ │ ├── user.js # 用户相关 │ │ │ ├── idea.js # 想法相关 │ │ │ ├── community.js # 社区相关 │ │ │ ├── social.js # 社交相关 │ │ │ ├── file.js # 文件上传 │ │ │ └── certificate.js # 证书相关 │ │ ├── components/ # 公共组件 │ │ │ └── CreateIdeaDialog.vue # 创建想法对话框 │ │ ├── router/ # 路由配置 │ │ │ └── index.js # 路由定义 │ │ ├── stores/ # 状态管理 │ │ │ └── user.js # 用户状态 │ │ ├── utils/ # 工具函数 │ │ │ └── request.js # HTTP请求配置 │ │ ├── views/ # 页面组件 │ │ │ ├── Login.vue # 登录页 │ │ │ ├── Register.vue # 注册页 │ │ │ ├── Layout.vue # 布局组件 │ │ │ ├── Home.vue # 首页 │ │ │ ├── Ideas.vue # 想法列表 │ │ │ ├── IdeaDetail.vue # 想法详情 │ │ │ ├── Community.vue # 社区动态 │ │ │ ├── Social.vue # 社交发现 │ │ │ ├── Profile.vue # 个人中心 │ │ │ ├── Achievements.vue # 成就系统 │ │ │ └── Certificate.vue # 证书页面 │ │ ├── App.vue │ │ └── main.js │ ├── Dockerfile │ ├── nginx.conf # Nginx配置 │ ├── index.html │ ├── vite.config.js │ └── package.json │ ├── docker-compose.yml # Docker编排文件 ├── README.md # 项目文档 └── docs/ # 📚 详细文档目录

📚 详细文档导航

为了更好地组织项目文档,我们将详细文档单独存放,点击下方链接即可查看:

文档说明链接
📖 API接口文档完整的REST API接口说明、请求示例和响应格式docs/API.md
🚀 部署指南开发环境、生产环境、Docker部署详细步骤docs/DEPLOYMENT.md
🏗️ 项目结构详细的目录结构、技术架构、数据流和核心功能实现docs/PROJECT_STRUCTURE.md

📝 API 接口概览

💡 提示:完整的API文档(包含请求/响应示例、错误码说明等)请查看 docs/API.md

认证接口

接口方法说明认证
/api/auth/registerPOST用户注册
/api/auth/loginPOST用户登录
/api/auth/logoutPOST用户登出
/api/auth/meGET获取当前用户信息
/api/auth/validateGET验证Token
/api/auth/profilePUT更新用户信息

想法管理接口

接口方法说明认证
/api/ideasGET获取想法列表
/api/ideas/{id}GET获取想法详情
/api/ideasPOST创建想法
/api/ideas/{id}PUT更新想法
/api/ideas/{id}DELETE删除想法
/api/ideas/{id}/completePUT标记完成状态
/api/ideas/todosGET获取待办事项
/api/ideas/draftsGET获取草稿列表
/api/ideas/{id}/historyGET获取想法生命周期记录

积分勋章接口

接口方法说明认证
/api/gamification/pointsGET获取用户积分统计
/api/gamification/points/logsGET获取积分记录
/api/gamification/badgesGET获取所有勋章列表
/api/gamification/badges/myGET获取我的勋章
/api/gamification/badges/earnedGET获取已获得的勋章
/api/gamification/statisticsGET获取用户统计数据

证书接口

接口方法说明认证
/api/certificate/generateGET生成证书(Base64)
/api/certificate/downloadGET下载证书(PNG文件)是*

*支持通过Authorization header或token参数传递认证信息

分类管理接口

接口方法说明认证
/api/categoriesGET获取分类列表
/api/categoriesPOST创建分类
/api/categories/{id}PUT更新分类
/api/categories/{id}DELETE删除分类

社区接口

接口方法说明认证
/api/community/feedGET获取社区动态
/api/community/share/{ideaId}POST分享到社区
/api/community/posts/{postId}/likePOST点赞/取消点赞
/api/community/posts/{postId}/commentsGET获取评论列表
/api/community/posts/{postId}/commentsPOST添加评论
/api/community/comments/{commentId}DELETE删除评论

社交接口

接口方法说明认证
/api/social/recommendGET推荐好友
/api/social/friends/request/{userId}POST发送好友请求
/api/social/friends/accept/{userId}POST接受好友请求
/api/social/friendsGET获取好友列表
/api/social/friends/requestsGET获取待处理请求

文件上传接口

接口方法说明认证
/api/file/avatarPOST上传头像
/api/file/idea-imagePOST上传想法图片
/api/file/proxyGET文件代理访问(安全下载)否*
/api/fileDELETE删除文件

*文件代理接口允许匿名访问,用于图片等文件的安全展示

⚙️ 配置说明

后端配置项

# 服务器配置 server: port: 8088 # 服务端口 # 数据源配置 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/idea_spark username: root password: your_password # Redis配置 data: redis: host: localhost # Redis主机 port: 6379 # Redis端口 password: password # Redis密码 database: 0 # 数据库索引 timeout: 3000ms # 连接超时 # JWT配置 jwt: secret: your-secret-key # JWT密钥(生产环境请修改) expiration: 604800000 # Token过期时间(毫秒) # MinIO配置 minio: endpoint: http://localhost:9000 # MinIO服务地址 access-key: minioadmin # 访问密钥 secret-key: minioadmin123 # 密钥 bucket-name: ideaspark # 存储桶名称 avatar-path: avatar/ # 头像存储路径

前端配置项

// src/utils/request.js const request = axios.create({ baseURL: '/api', // API基础路径 timeout: 10000 // 请求超时时间 }) // 生产环境建议使用绝对路径 baseURL: 'http://your-domain.com/api'

🚀 开发指南

添加新的API接口

1. 后端添加Controller方法

@RestController @RequestMapping("/example") @RequiredArgsConstructor public class ExampleController { private final ExampleService exampleService; @GetMapping public Result<List<ExampleDTO>> list() { List<ExampleDTO> list = exampleService.list(); return Result.success(list); } }

2. 前端添加API方法

// src/api/example.js import request from '@/utils/request' export function getExamples() { return request({ url: '/example', method: 'get' }) }

3. 前端调用API

import { getExamples } from '@/api/example' const examples = ref([]) const loadExamples = async () => { const res = await getExamples() examples.value = res.data }

添加新的页面

1. 创建页面组件

<!-- src/views/Example.vue --> <template> <div class="example-container"> <h1>示例页面</h1> </div> </template> <script setup> import { ref, onMounted } from 'vue' // 页面逻辑 </script> <style lang="scss" scoped> .example-container { // 样式 } </style>

2. 添加路由

// src/router/index.js { path: 'example', name: 'Example', component: () => import('@/views/Example.vue'), meta: { title: '示例 - IdeaSpark' } }

3. 添加菜单项

<!-- src/views/Layout.vue --> <el-menu-item index="/example"> <el-icon><Example /></el-icon> <span>示例</span> </el-menu-item>

代码规范

后端规范

  • 遵循阿里巴巴Java开发规范
  • 使用Lombok简化代码
  • 统一使用Result封装返回结果
  • 异常统一使用GlobalExceptionHandler处理
  • 日志使用SLF4J

前端规范

  • 遵循Vue官方风格指南
  • 使用Composition API
  • 组件命名使用PascalCase
  • 使用ESLint进行代码检查
  • 使用Vue3语法糖

🐛 常见问题

1. 后端启动失败 - MySQL连接失败

错误信息Could not create connection to database server

解决方案

  • 检查MySQL服务是否启动
  • 确认数据库连接信息是否正确
  • 检查数据库是否已创建

2. Redis连接失败

错误信息Unable to connect to Redis

解决方案

  • 确认Redis服务已启动
  • 检查Redis密码配置
  • 确认Redis端口未被占用

3. Token过期频繁

错误信息登录已过期,请重新登录

解决方案

  • 检查JWT过期时间配置
  • 确认Redis中Token存储正常
  • 检查系统时间是否正确

4. MinIO上传文件失败

错误信息上传失败

解决方案

  • 确认MinIO服务已启动
  • 检查bucket是否创建
  • 确认endpoint地址配置正确

5. 前端访问后端CORS错误

错误信息CORS policy: No 'Access-Control-Allow-Origin' header

解决方案

  • 检查后端SecurityConfig配置
  • 确认CORS配置允许前端访问

📊 性能优化

  • ✅ Redis缓存用户信息和Token
  • ✅ MinIO对象存储分离静态资源
  • ✅ 前端路由懒加载
  • ✅ Nginx Gzip压缩
  • ✅ 静态资源长期缓存

🔒 安全特性

  • ✅ JWT Token认证
  • ✅ BCrypt密码加密
  • ✅ Spring Security安全框架
  • ✅ Redis Token管理
  • ✅ CORS跨域配置
  • ✅ SQL注入防护(MyBatis Plus)
  • ✅ XSS攻击防护

📈 未来规划

  • 实现语音输入转文字
  • 实现私信聊天功能
  • 实现圈子/群组功能
  • 添加AI智能分类建议
  • 添加数据统计图表
  • 实现数据导出功能
  • 优化匹配算法
  • 添加推送通知
  • 开发移动端应用

🤝 贡献指南

欢迎贡献代码!请遵循以下步骤:

  1. Fork本仓库
  2. 创建特性分支 (git checkout -b feature/AmazingFeature)
  3. 提交更改 (git commit -m 'feat: 添加某个功能')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 提交Pull Request

Git提交规范

feat: 新功能 fix: 修复bug docs: 文档更新 style: 代码格式调整 refactor: 代码重构 test: 测试相关 chore: 构建过程或辅助工具的变动

📄 License

MIT License

Copyright (c) 2026 IdeaSpark

📮 联系方式


如果觉得这个项目对你有帮助,请给个 ⭐️ Star 支持一下!

Made with ❤️ by IdeaSpark Team

IdeaSpark - 让创意永不丢失,让灵感自由流动!

About

IdeaSpark - 创作者灵感管理与社交平台

Language
Java59.6%
Vue31.5%
JavaScript6%
Shell2%
Others0.9%