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

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

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

✨ 功能特性

💡 灵感管理

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

🏆 激励体系

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

👥 社交功能

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

🔐 安全特性

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

🛠 技术栈

后端技术

技术	版本	说明
Java	17	编程语言
Spring Boot	3.2.0	应用框架
Spring Security	6.x	安全框架
MyBatis Plus	3.5.5	ORM框架
MySQL	8.0	关系数据库
Redis	7.x	缓存数据库
MinIO	Latest	对象存储
JWT	0.12.3	Token认证
Hutool	5.8.24	Java工具库

前端技术

技术	版本	说明
Vue.js	3.4.21	前端框架
Vite	5.2.0	构建工具
Element Plus	2.7.0	UI组件库
Pinia	2.1.7	状态管理
Vue Router	4.3.0	路由管理
Axios	1.6.8	HTTP客户端
Day.js	Latest	日期处理

📦 快速开始

环境要求

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	主应用
后端API	http://localhost:8088/api	API接口
MinIO控制台	http://localhost:9001	对象存储管理
MySQL	localhost:3306	数据库
Redis	localhost:6379	缓存

Docker Compose 服务说明

服务	容器名	端口映射	依赖
MySQL	ideaspark-mysql	3306:3306	-
Redis	ideaspark-redis	6379:6379	-
MinIO	ideaspark-minio	9000:9000, 9001:9001	-
Backend	ideaspark-backend	8088:8088	mysql, redis, minio
Frontend	ideaspark-frontend	80:80	backend

单独构建镜像


# 构建后端镜像
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/register`	POST	用户注册	否
`/api/auth/login`	POST	用户登录	否
`/api/auth/logout`	POST	用户登出	是
`/api/auth/me`	GET	获取当前用户信息	是
`/api/auth/validate`	GET	验证Token	是
`/api/auth/profile`	PUT	更新用户信息	是

想法管理接口

接口	方法	说明	认证
`/api/ideas`	GET	获取想法列表	是
`/api/ideas/{id}`	GET	获取想法详情	是
`/api/ideas`	POST	创建想法	是
`/api/ideas/{id}`	PUT	更新想法	是
`/api/ideas/{id}`	DELETE	删除想法	是
`/api/ideas/{id}/complete`	PUT	标记完成状态	是
`/api/ideas/todos`	GET	获取待办事项	是
`/api/ideas/drafts`	GET	获取草稿列表	是
`/api/ideas/{id}/history`	GET	获取想法生命周期记录	是

积分勋章接口

接口	方法	说明	认证
`/api/gamification/points`	GET	获取用户积分统计	是
`/api/gamification/points/logs`	GET	获取积分记录	是
`/api/gamification/badges`	GET	获取所有勋章列表	否
`/api/gamification/badges/my`	GET	获取我的勋章	是
`/api/gamification/badges/earned`	GET	获取已获得的勋章	是
`/api/gamification/statistics`	GET	获取用户统计数据	是

证书接口

接口	方法	说明	认证
`/api/certificate/generate`	GET	生成证书（Base64）	是
`/api/certificate/download`	GET	下载证书（PNG文件）	是*

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

分类管理接口

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

社区接口

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

社交接口

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

文件上传接口

接口	方法	说明	认证
`/api/file/avatar`	POST	上传头像	是
`/api/file/idea-image`	POST	上传想法图片	是
`/api/file/proxy`	GET	文件代理访问（安全下载）	否*
`/api/file`	DELETE	删除文件	是

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

⚙️ 配置说明

后端配置项


# 服务器配置
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智能分类建议
添加数据统计图表
实现数据导出功能
优化匹配算法
添加推送通知
开发移动端应用

🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：

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

Git提交规范


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

📄 License

MIT License

📮 联系方式

项目地址：https://cnb.cool/code-channel/idea-spark
问题反馈：https://cnb.cool/code-channel/idea-spark/issues

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

Made with ❤️ by IdeaSpark Team

IdeaSpark - 让创意永不丢失，让灵感自由流动！