项目开源本项目的完整源代码已在 GitHub 上开源欢迎感兴趣的同学和开发者查看、学习与交流。GitHub 仓库地址https://github.com/assially/migration-island-survey项目背景与需求理解本项目源于一项国家社科基金重大招标课题——“中国南方明清以来汉族‘移民岛’的人类学调查”。在数字人文浪潮下传统人类学研究面临田野调查数据零散、时空分析薄弱、文化要素对比低效、成果展示枯燥等痛点。我的任务就是为这个宏大的学术课题设计并实现一个专业、高效、直观的数据分析模块。核心需求可以概括为数据整合与标准化将多源异构的田野调查数据文本、图片、地理信息、文献等进行规范化入库、清洗和结构化处理。多维深度分析支持从时间、空间、文化建筑、饮食、语言、仪礼、信仰、艺术等多个维度对移民岛个案进行交叉对比与分析。动态可视化呈现将分析结果通过地图、时间轴、雷达图、热力图等可视化手段直观呈现支持联动与交互。面向角色的权限管理为人类学研究人员、数据管理员、超级管理员提供不同层级的操作权限和数据视图。成果输出与分享支持将分析图表、数据表格定制化导出为报告便于学术交流与成果沉淀。技术架构与实现路径基于上述需求我采用了前后端分离的现代化技术栈确保系统的性能、可维护性和可扩展性。1. 技术选型前端React TypeScript Vite Ant Design。React组件化完美契合多面板、多交互的数据分析界面TypeScript保障了复杂业务数据类型的安全Vite提升了开发体验和构建速度Ant Design提供了成熟的企业级UI组件。后端Spring Boot MyBatis。Spring Boot快速搭建稳健的RESTful API服务MyBatis灵活操作关系型数据库。数据库MySQL。用于存储结构化的个案信息、文化要素数据、用户信息等。缓存Redis。用于热点数据如个案列表、文化要素标签缓存显著提升查询性能。可视化库ECharts统计图表、react-leaflet地图。2. 核心模块设计与实现系统围绕数据分析流程构建了七大核心功能模块1个案库数据管理功能移民岛个案信息的增删改查、多条件筛选移民类型、省份、文化标签、关键词模糊搜索。实现前端采用Ant Design Table组件后端通过MyBatis动态SQL构建灵活查询并利用Redis缓存高频查询结果列表页加载速度提升约70%。2资源导入与预处理功能支持链接、Word、PDF等多模态研究资源的上传并与特定个案关联。系统自动对PDF/Word文件进行文本内容抽取。实现基于Apache POI和PDFBox库实现文件解析抽取的文本存入数据库作为后续文本分析的原始材料。3空间与地理分析功能基于Leaflet地图展示所有移民岛的地理分布支持按省份筛选、点击查看个案详情、一键导航跳转至高德地图并可将当前地图视图导出为PDF。实现使用react-leaflet集成地图个案经纬度信息来自数据库。导出功能通过html2canvas将地图DOM节点转换为图片再通过jsPDF生成PDF文件。4历史脉络可视化功能以时间轴形式动态展示单个或一批移民岛的迁徙历史支持按省份筛选和播放“迁移动画”直观呈现人口流动的时空路径。实现基于Ant Design Timeline组件进行二次开发结合ECharts图表展示迁徙规模变化。动画通过控制时间轴和地图标记的联动状态实现。5文化要素对比分析核心亮点功能这是系统的分析核心下设6个子模块综合概览、建筑文化、饮食文化、语言文化、人生仪礼、宗教信仰、艺术文化。实现建筑文化表格展示不同个案建筑类型、风格支持展开行查看详情。饮食文化使用ECharts雷达图直观对比不同个案在各类饮食如主食、菜肴、小吃上的特征强度。语言文化构建“方言特征矩阵”通过热力图展示不同个案之间语言特征的相似度。人生仪礼/宗教信仰/艺术文化均提供多维筛选、交叉热力图如“艺术形态-来源地”、数据导出CSV/Excel等功能。6报表导出功能提供两种灵活导出模式①按个案勾选导出所选个案在指定分析模块的数据②按模块勾选导出指定模块在所有选定个案上的数据。实现后端根据前端传递的个案ID和模块标识动态组装数据使用Apache POI生成包含多个Sheet的Excel工作簿前端触发下载。7用户与权限管理功能基于RBAC模型实现三类角色研究员、数据管理员、超级管理员的权限隔离。超级管理员负责用户注册审核、密码重置等。实现使用JWT进行无状态认证后端接口通过注解如PreAuthorize进行角色校验前端根据用户角色动态渲染菜单和操作按钮。5.1 权限控制RBAC JWT中间件前端ProtectedRoute组件检查本地token若无效则跳转登录。MainLayout根据角色动态渲染菜单。后端authMiddleware解析JWT并注入req.userrequireRoles函数校验角色数组拒绝非法访问。// server/auth.mjs 示例 export const authMiddleware (req, res, next) { const token req.headers.authorization?.split( )[1]; if (!token) return res.status(401).json({ error: No token }); try { const decoded jwt.verify(token, JWT_SECRET); req.user decoded; // { id, username, role } next(); } catch { res.status(401).json({ error: Invalid token }); } }; export const requireRoles (...allowedRoles) { return (req, res, next) { if (!req.user || !allowedRoles.includes(req.user.role)) { return res.status(403).json({ error: Forbidden }); } next(); }; };经验前端菜单隐藏只是UI层面后端必须强制校验防止直接访问API接口。5.2 空间与地理分析Leaflet 高德导航需求在地图上显示个案位置点击标注弹出详情并提供“导航”功能。实现后端/api/locations返回个案经纬度及行政区GeoJSON。前端IslandLocationMap.tsx使用react-leaflet渲染瓦片地图用不同颜色区分移民类型。点击标注时右侧面板显示详情并生成高德地图URIWGS84→GCJ-02转换。// 坐标转换简化 const wgs84ToGcj02 (lng, lat) { ... }; const amapUrl https://uri.amap.com/marker?position${gcjLng},${gcjLat}name${name};踩坑Leaflet默认使用WGS84而国内地图高德使用GCJ-02必须转换坐标否则导航偏差几公里。我封装了转换函数并测试多个地点确保准确。5.3 文化要素对比多视图联动与雷达图痛点研究人员需要同时对比多个移民岛的文化特征传统表格无法直观体现差异。解决方案每个文化子模块如饮食独立路由但共享筛选状态。饮食模块构建“个案×饮食类型”矩阵用ECharts雷达图展示多维度得分基于关键词命中次数计算。语言模块基于Jaccard相似度计算个案间方言标签相似性生成热力图。宗教信仰模块抽取共现关系使用ECharts关系图展示信仰元素网络。技术细节// 饮食雷达图数据构建 const radarData selectedCases.map(caseName ({ value: foodCategories.map(cat getKeywordHitCount(caseName, cat)), name: caseName })); // 传给 ReactECharts 渲染经验后端返回结构化数据如JSON数组前端负责聚合和可视化避免后端过度计算保持接口轻量。5.4 报表导出按需生成Excel工作簿需求研究人员希望一次性导出多个个案、多个模块的汇总数据用于线下分析或存档。实现前端ReportExportPage提供个案多选和模块多选时间、空间、各文化子类。点击导出后前端收集选中项发送POST请求到/api/export。后端使用exceljs库创建工作簿每个模块生成一个sheet包含对应的字段和数据。返回二进制流前端触发下载。难点模块数据来源不同个案主表、location、time、各专题表后端需要做大量聚合。我设计了一个统一的数据获取层每个模块对应一个获取函数最终组装成工作表行。5.5 资源导入文本抽取与分类需求支持上传Word/PDF文件自动抽取文本并关联到指定个案。实现前端使用mammoth.js解析docxpdf-parse解析PDF提取纯文本。后端multer接收文件存储到uploads/目录元数据写入resources表。文本内容可进一步用于全文检索或自动标签提取但本项目暂未实现NLP分析。注意文件大小限制为10MB防止恶意上传。前端校验文件类型后端再次校验确保安全。项目成果与价值通过从0到1的完整开发周期我成功交付了一个稳定、可用、专业的数据分析系统。项目成果体现在技术层面掌握了全栈开发ReactSpring Boot的核心技能深入实践了组件化开发、状态管理、RESTful API设计、数据库优化、第三方库集成等关键技术。业务层面深刻理解了数字人文领域的特定需求并将抽象的研究需求转化为具体的软件功能如文化要素的量化与可视化对比。学术价值该系统已能有效服务于课题组的实际研究将零散的田野数据系统化将隐性的文化对比显性化提升了研究效率与深度为“移民岛”研究提供了坚实的数字化基础设施。总结而言这不仅是一个毕业设计项目更是一个解决真实学术痛点的工程实践。它证明了现代Web技术如何赋能传统人文社科研究是技术价值与人文关怀的一次成功结合。后续计划项目后续计划包括性能优化引入微服务架构与读写分离应对高并发场景下的数据库压力。智能分析探索使用机器学习算法进行文化要素的智能比对与关联挖掘。移动端适配开发移动端应用支持田野调查时的离线数据采集与实时同步。社区共建希望吸引更多对数字人文和人类学研究感兴趣的开发者参与共同完善这个工具。如果您对这个项目有任何建议或希望参与贡献欢迎通过 GitHub 提交 Issue 或 Pull Request。
项目开源本项目的完整源代码已在 GitHub 上开源欢迎感兴趣的同学和开发者查看、学习与交流。GitHub 仓库地址https://github.com/assially/migration-island-survey项目背景与需求理解本项目源于一项国家社科基金重大招标课题——“中国南方明清以来汉族‘移民岛’的人类学调查”。在数字人文浪潮下传统人类学研究面临田野调查数据零散、时空分析薄弱、文化要素对比低效、成果展示枯燥等痛点。我的任务就是为这个宏大的学术课题设计并实现一个专业、高效、直观的数据分析模块。核心需求可以概括为数据整合与标准化将多源异构的田野调查数据文本、图片、地理信息、文献等进行规范化入库、清洗和结构化处理。多维深度分析支持从时间、空间、文化建筑、饮食、语言、仪礼、信仰、艺术等多个维度对移民岛个案进行交叉对比与分析。动态可视化呈现将分析结果通过地图、时间轴、雷达图、热力图等可视化手段直观呈现支持联动与交互。面向角色的权限管理为人类学研究人员、数据管理员、超级管理员提供不同层级的操作权限和数据视图。成果输出与分享支持将分析图表、数据表格定制化导出为报告便于学术交流与成果沉淀。技术架构与实现路径基于上述需求我采用了前后端分离的现代化技术栈确保系统的性能、可维护性和可扩展性。1. 技术选型前端React TypeScript Vite Ant Design。React组件化完美契合多面板、多交互的数据分析界面TypeScript保障了复杂业务数据类型的安全Vite提升了开发体验和构建速度Ant Design提供了成熟的企业级UI组件。后端Spring Boot MyBatis。Spring Boot快速搭建稳健的RESTful API服务MyBatis灵活操作关系型数据库。数据库MySQL。用于存储结构化的个案信息、文化要素数据、用户信息等。缓存Redis。用于热点数据如个案列表、文化要素标签缓存显著提升查询性能。可视化库ECharts统计图表、react-leaflet地图。2. 核心模块设计与实现系统围绕数据分析流程构建了七大核心功能模块1个案库数据管理功能移民岛个案信息的增删改查、多条件筛选移民类型、省份、文化标签、关键词模糊搜索。实现前端采用Ant Design Table组件后端通过MyBatis动态SQL构建灵活查询并利用Redis缓存高频查询结果列表页加载速度提升约70%。2资源导入与预处理功能支持链接、Word、PDF等多模态研究资源的上传并与特定个案关联。系统自动对PDF/Word文件进行文本内容抽取。实现基于Apache POI和PDFBox库实现文件解析抽取的文本存入数据库作为后续文本分析的原始材料。3空间与地理分析功能基于Leaflet地图展示所有移民岛的地理分布支持按省份筛选、点击查看个案详情、一键导航跳转至高德地图并可将当前地图视图导出为PDF。实现使用react-leaflet集成地图个案经纬度信息来自数据库。导出功能通过html2canvas将地图DOM节点转换为图片再通过jsPDF生成PDF文件。4历史脉络可视化功能以时间轴形式动态展示单个或一批移民岛的迁徙历史支持按省份筛选和播放“迁移动画”直观呈现人口流动的时空路径。实现基于Ant Design Timeline组件进行二次开发结合ECharts图表展示迁徙规模变化。动画通过控制时间轴和地图标记的联动状态实现。5文化要素对比分析核心亮点功能这是系统的分析核心下设6个子模块综合概览、建筑文化、饮食文化、语言文化、人生仪礼、宗教信仰、艺术文化。实现建筑文化表格展示不同个案建筑类型、风格支持展开行查看详情。饮食文化使用ECharts雷达图直观对比不同个案在各类饮食如主食、菜肴、小吃上的特征强度。语言文化构建“方言特征矩阵”通过热力图展示不同个案之间语言特征的相似度。人生仪礼/宗教信仰/艺术文化均提供多维筛选、交叉热力图如“艺术形态-来源地”、数据导出CSV/Excel等功能。6报表导出功能提供两种灵活导出模式①按个案勾选导出所选个案在指定分析模块的数据②按模块勾选导出指定模块在所有选定个案上的数据。实现后端根据前端传递的个案ID和模块标识动态组装数据使用Apache POI生成包含多个Sheet的Excel工作簿前端触发下载。7用户与权限管理功能基于RBAC模型实现三类角色研究员、数据管理员、超级管理员的权限隔离。超级管理员负责用户注册审核、密码重置等。实现使用JWT进行无状态认证后端接口通过注解如PreAuthorize进行角色校验前端根据用户角色动态渲染菜单和操作按钮。5.1 权限控制RBAC JWT中间件前端ProtectedRoute组件检查本地token若无效则跳转登录。MainLayout根据角色动态渲染菜单。后端authMiddleware解析JWT并注入req.userrequireRoles函数校验角色数组拒绝非法访问。// server/auth.mjs 示例 export const authMiddleware (req, res, next) { const token req.headers.authorization?.split( )[1]; if (!token) return res.status(401).json({ error: No token }); try { const decoded jwt.verify(token, JWT_SECRET); req.user decoded; // { id, username, role } next(); } catch { res.status(401).json({ error: Invalid token }); } }; export const requireRoles (...allowedRoles) { return (req, res, next) { if (!req.user || !allowedRoles.includes(req.user.role)) { return res.status(403).json({ error: Forbidden }); } next(); }; };经验前端菜单隐藏只是UI层面后端必须强制校验防止直接访问API接口。5.2 空间与地理分析Leaflet 高德导航需求在地图上显示个案位置点击标注弹出详情并提供“导航”功能。实现后端/api/locations返回个案经纬度及行政区GeoJSON。前端IslandLocationMap.tsx使用react-leaflet渲染瓦片地图用不同颜色区分移民类型。点击标注时右侧面板显示详情并生成高德地图URIWGS84→GCJ-02转换。// 坐标转换简化 const wgs84ToGcj02 (lng, lat) { ... }; const amapUrl https://uri.amap.com/marker?position${gcjLng},${gcjLat}name${name};踩坑Leaflet默认使用WGS84而国内地图高德使用GCJ-02必须转换坐标否则导航偏差几公里。我封装了转换函数并测试多个地点确保准确。5.3 文化要素对比多视图联动与雷达图痛点研究人员需要同时对比多个移民岛的文化特征传统表格无法直观体现差异。解决方案每个文化子模块如饮食独立路由但共享筛选状态。饮食模块构建“个案×饮食类型”矩阵用ECharts雷达图展示多维度得分基于关键词命中次数计算。语言模块基于Jaccard相似度计算个案间方言标签相似性生成热力图。宗教信仰模块抽取共现关系使用ECharts关系图展示信仰元素网络。技术细节// 饮食雷达图数据构建 const radarData selectedCases.map(caseName ({ value: foodCategories.map(cat getKeywordHitCount(caseName, cat)), name: caseName })); // 传给 ReactECharts 渲染经验后端返回结构化数据如JSON数组前端负责聚合和可视化避免后端过度计算保持接口轻量。5.4 报表导出按需生成Excel工作簿需求研究人员希望一次性导出多个个案、多个模块的汇总数据用于线下分析或存档。实现前端ReportExportPage提供个案多选和模块多选时间、空间、各文化子类。点击导出后前端收集选中项发送POST请求到/api/export。后端使用exceljs库创建工作簿每个模块生成一个sheet包含对应的字段和数据。返回二进制流前端触发下载。难点模块数据来源不同个案主表、location、time、各专题表后端需要做大量聚合。我设计了一个统一的数据获取层每个模块对应一个获取函数最终组装成工作表行。5.5 资源导入文本抽取与分类需求支持上传Word/PDF文件自动抽取文本并关联到指定个案。实现前端使用mammoth.js解析docxpdf-parse解析PDF提取纯文本。后端multer接收文件存储到uploads/目录元数据写入resources表。文本内容可进一步用于全文检索或自动标签提取但本项目暂未实现NLP分析。注意文件大小限制为10MB防止恶意上传。前端校验文件类型后端再次校验确保安全。项目成果与价值通过从0到1的完整开发周期我成功交付了一个稳定、可用、专业的数据分析系统。项目成果体现在技术层面掌握了全栈开发ReactSpring Boot的核心技能深入实践了组件化开发、状态管理、RESTful API设计、数据库优化、第三方库集成等关键技术。业务层面深刻理解了数字人文领域的特定需求并将抽象的研究需求转化为具体的软件功能如文化要素的量化与可视化对比。学术价值该系统已能有效服务于课题组的实际研究将零散的田野数据系统化将隐性的文化对比显性化提升了研究效率与深度为“移民岛”研究提供了坚实的数字化基础设施。总结而言这不仅是一个毕业设计项目更是一个解决真实学术痛点的工程实践。它证明了现代Web技术如何赋能传统人文社科研究是技术价值与人文关怀的一次成功结合。后续计划项目后续计划包括性能优化引入微服务架构与读写分离应对高并发场景下的数据库压力。智能分析探索使用机器学习算法进行文化要素的智能比对与关联挖掘。移动端适配开发移动端应用支持田野调查时的离线数据采集与实时同步。社区共建希望吸引更多对数字人文和人类学研究感兴趣的开发者参与共同完善这个工具。如果您对这个项目有任何建议或希望参与贡献欢迎通过 GitHub 提交 Issue 或 Pull Request。
