看小说记不住人物关系,网上找了几个发现要钱,实在懒得找了,想试着再造一个轮子,预估会搞个开头,然后书看完了,然后搁置……
1. 可行性分析
1.1 技术可行性
- 前端技术: React作为主流前端框架,有丰富的生态系统和社区支持,适合构建交互式应用
- 后端技术: Node.js + Express组合成熟稳定,适合快速开发RESTful API
- 图数据可视化: 有成熟的库如D3.js、vis.js、React Flow等可用于实现关系图展示
- 导出功能: 可利用已有库如jsPDF、marked、svg-to-pdf等实现不同格式导出
1.2 经济可行性
- 技术栈均为开源免费,降低开发成本
- 架构简单,维护成本低
- 可扩展性强,便于后续功能迭代
1.3 开发关键点及难点
- 数据模型设计: 需要设计高效的人物和关系数据结构
- 图可视化性能: 随着节点和关系增加,如何保持渲染性能
- 实时更新机制: 实现数据变更与UI的实时同步
- 导出功能实现: 尤其是复杂图谱的PDF和SVG导出
- 用户体验: 复杂关系的直观展示和交互
2. 技术栈优化
2.1 前端技术栈
- 核心框架: React 18+
- 状态管理: Redux Toolkit (取代传统Redux,简化代码)
- UI组件库: Ant Design (提供丰富的UI组件)
- 图可视化: React Flow (轻量、高性能的React流程图库)
- 网络请求: Axios
- 路由: React Router 6
- 导出功能:
- PDF: jsPDF + html2canvas
- MD: 自定义转换逻辑
- SVG: React Flow自带导出功能
2.2 后端技术栈
- 运行环境: Node.js 18+
- Web框架: Express.js
- 数据库:
- MongoDB (存储人物基本信息)
- Neo4j (图数据库,优化关系查询)
- ORM/ODM: Mongoose (MongoDB) + neo4j-driver (Neo4j)
- 认证: JWT (JSON Web Token)
- API文档: Swagger/OpenAPI
2.3 开发工具
- 构建工具: Vite (比Webpack更快的构建速度)
- 代码规范: ESLint + Prettier
- 测试: Jest + React Testing Library
- CI/CD: GitHub Actions
3. 项目方案
3.1 系统架构
- 前端: 单页应用(SPA),采用组件化设计
- 后端: RESTful API服务,分离业务逻辑与数据访问
- 数据库: 混合使用关系型与图数据库,优化存储和查询
- 部署: Docker容器化,便于环境一致性
3.2 数据模型
// 人物模型
{
id: String,
name: String,
alias: [String],
avatar: String,
description: String,
tags: [String],
createdAt: Date,
updatedAt: Date
}
// 关系模型
{
id: String,
sourceId: String, // 源人物ID
targetId: String, // 目标人物ID
type: String, // 关系类型
description: String,
strength: Number, // 关系强度
createdAt: Date,
updatedAt: Date
}
3.3 核心功能模块
- 用户认证模块
- 注册、登录、权限管理
- 人物管理模块
- 人物信息的增、删、改、查
- 人物标签管理
- 关系管理模块
- 关系的创建、删除、修改
- 关系强度设置
- 图谱可视化模块
- 图谱的渲染与布局
- 节点和关系的交互
- 缩放、平移等操作
- 搜索模块
- 人物和关系的搜索
- 高级筛选
- 导出模块
- MD、PDF、SVG格式导出
3.4 文件结构设计
PersonRelationGraph/
├── client/ # 前端代码
│ ├── public/ # 静态资源
│ ├── src/
│ │ ├── assets/ # 资源文件
│ │ ├── components/ # 通用组件
│ │ │ ├── common/ # 基础组件
│ │ │ ├── graph/ # 图谱相关组件
│ │ │ └── forms/ # 表单组件
│ │ ├── pages/ # 页面组件
│ │ ├── redux/ # 状态管理
│ │ ├── services/ # API服务
│ │ ├── utils/ # 工具函数
│ │ ├── App.jsx # 应用入口
│ │ └── main.jsx # 渲染入口
│ ├── package.json
│ └── vite.config.js # Vite配置
│
├── server/ # 后端代码
│ ├── config/ # 配置文件
│ ├── controllers/ # 控制器
│ ├── middleware/ # 中间件
│ ├── models/ # 数据模型
│ ├── routes/ # 路由
│ ├── services/ # 业务逻辑
│ ├── utils/ # 工具函数
│ ├── app.js # 应用配置
│ └── server.js # 服务器入口
│
├── docs/ # 文档
├── .gitignore
├── package.json
└── README.md
4. 开发计划
4.1 阶段划分
- 准备阶段 (1周)
- 需求分析与细化
- 技术选型确认
- 项目初始化
- 基础架构开发 (2周)
- 前端项目搭建
- 后端API框架搭建
- 数据库设计与实现
- 认证模块开发
- 核心功能开发 (4周)
- 人物管理功能
- 关系管理功能
- 图谱可视化功能
- 搜索功能
- 高级功能开发 (2周)
- 导出功能
- 高级筛选
- 性能优化
- 测试与优化 (2周)
- 单元测试
- 集成测试
- 用户体验优化
- 性能调优
- 部署与文档 (1周)
- 部署配置
- 编写文档
- 项目验收
4.2 开发里程碑
阶段 | 时间 | 主要交付物 |
---|---|---|
准备阶段 | 第1周 | 需求文档、技术方案、项目结构 |
基础架构开发 | 第2-3周 | 可运行的前后端框架、数据库 schema |
核心功能开发 | 第4-7周 | 人物和关系管理功能、基础图谱展示 |
高级功能开发 | 第8-9周 | 导出功能、高级搜索 |
测试与优化 | 第10-11周 | 测试报告、优化后的版本 |
部署与文档 | 第12周 | 部署文档、用户手册、完整可运行系统 |
4.3 资源分配
- 前端开发: 1-2人
- 后端开发: 1-2人
- 测试: 1人
- UI/UX设计: 1人
4.4 风险评估
- 技术风险: 图谱可视化性能问题
- 应对措施: 采用虚拟滚动、节点限制、渐进式加载
- 时间风险: 需求变更导致延期
- 应对措施: 采用敏捷开发,每周迭代,及时调整计划
- 质量风险: 导出功能兼容性问题
- 应对措施: 提前调研各格式导出方案,预留充分测试时间
5. 扩展接口设计
5.1 前端扩展点
- 自定义节点组件接口
- 自定义关系组件接口
- 图谱布局策略接口
- 导出格式扩展接口
5.2 后端扩展点
- 数据导入接口
- 第三方数据源集成接口
- 图谱分析算法扩展接口
本计划将作为项目开发的指导文档,在开发过程中可根据实际情况进行调整和优化。
是的。人物关系确实,之前看到不少做笔记的。
也有脑图直接做好的图谱,热门书籍有。