aditya531-a/sahayog

## 目录 - 项目概述 - 架构与文件结构 - 核心技术与工具 - 本地设置（开发环境） - 运行与调试 # 综合灾害管理与响应系统 (IDMRS) 用于灾害警报、事故报告、交互式地图、SOS（紧急求救）、医院定位和 NGO（非政府组织）协作的全栈 Web 应用。 ## 结构 - `client/`：React (Vite) + TypeScript + Tailwind + shadcn-ui + i18next + Leaflet - `server/`：Express + Mongoose + REST API ## 设置 ### 前置条件 - Node.js - MongoDB（本地或 Atlas） # 综合灾害管理与响应系统 (IDMRS) 本仓库包含一个全栈演示应用程序，涵盖灾害警报、事故报告、灾区地图绘制、医院/NGO 目录以及 SOS 流程。它被构建为一个对开发者友好的 monorepo（单体仓库），包含两个主要包： - `client/` — React + TypeScript 前端 (Vite)，使用 Tailwind CSS 和 Leaflet 地图 - `server/` — Node.js + Express 后端，包含用于 MongoDB 的 Mongoose 模型 本 README 说明了项目的组织方式、工作原理、如何在本地运行以及常见故障排查步骤。 - API 参考 - 地图与数据流工作原理 - 常见问题与故障排查（CORS、重复 React、地图空白） - 开发工作流与测试 - 贡献指南 ## 项目概述 IDMRS 是一个小型综合系统，允许用户查看灾害警报、报告事故、在地图上查看易灾区域和资源、请求紧急 SOS 以及浏览或注册 NGO 和医院。它旨在作为一个可运行的原型和开发者练习，用于集成地图、类实时数据流和 CRUD API。 核心面向用户的功能 - 浏览带有灾区、事故标记和医院位置的交互式 Leaflet 地图 - 报告事故，该事故将显示在地图上 - 发送 SOS 请求（使用浏览器地理定位）并提交到后端 - 简单的 NGO 和医院目录页面 ## 架构与重要文件 顶层布局 - `client/` — 前端应用 - `src/main.tsx` — 引导 React 应用启动 - `src/App.tsx` — 路由和 providers（React Query、Context、Router） - `src/context/DisasterContext.tsx` — 中央客户端数据源并获取 API 数据 - `src/pages/DisasterMap.tsx` — 使用 `react-leaflet` 的地图页面 - `src/components/` — UI 组件（shadcn 风格原语） - `public/` — 静态资源 - `server/` — 后端 API - `server.js` — Express 应用和路由绑定 - `routes/*.js` — express 路由（alerts、incidents、hospitals、ngos、sos） - `controllers/*.js` — 请求处理程序（业务逻辑） - `models/*.js` — Mongoose schemas - `seed/seed.js` — 用于创建演示数据的脚本 ## 使用的核心技术与工具 - 前端 - React 18 + TypeScript - Vite（开发服务器和构建） - Tailwind CSS（实用优先的样式） - shadcn/ui 风格的组件（Radix + Tailwind 原语） - react-leaflet + leaflet 用于交互式地图 - react-i18next 用于国际化 - TanStack React Query（可选） - 后端 - Node.js + Express - Mongoose（MongoDB ODM） - cors 中间件用于跨域请求 - 工具 - npm 用于包管理 - nodemon 用于后端开发 - curl / Invoke-RestMethod 用于 API 检查 ## 本地设置（开发） 前置条件 - Node.js（推荐 >= 18） - MongoDB（本地或 Atlas）或将 `MONGO_URI` 设置为您的集群 安装依赖 1. 从仓库根目录： ``` cd C:\Users\Akash\sahayog\sahayog npm install ``` 2. （可选）如有需要，可单独安装子包： ``` npm --prefix server install npm --prefix client install ``` 环境配置 - Server：将 `server/env.example` 复制到 `server/.env` 并设置 `MONGO_URI`（如果您使用 Atlas） npm --prefix client run dev ```如果您的无法访问后端，请确保后端进程正在运行并检查 CORS 设置（服务器使用了允许 `localhost:8080` 的 CORS 中间件）。 ## API 参考（摘要） 所有端点都挂载在 `/api` 下 - GET /api/alerts — 列出可用警报 - GET /api/incidents — 列出事故 - POST /api/incidents — 创建事故 { type, description, location: { lat, lng } } - GET /api/hospitals — 列出医院 - GET /api/ngos — 列出 NGO - POST /api/ngos — 创建 NGO - POST /api/sos — 发送 SOS 请求（期望 userLocation） 以及可选的 `PORT`。 - Client：将 `client/env.example` 复制到 `client/.env` 并设置 `VITE_API_BASE_URL`（如果您的后端使用非默认 URL）。 初始化演示数据（可选） ``` npm --prefix server run seed ``` 在开发环境中运行应用 ``` # 从 repository 根目录 npm run dev # 或单独运行 packages npm --prefix server run dev Use `curl` or `Invoke-RestMethod` for quick checks: ```powershell curl http://localhost:5001/api/hospitals ``` 默认开发 URL - Frontend (Vite)：http://localhost:8080（或 Vite 打印的端口） - Backend (Express)：http://localhost:5001（server.js 中的默认值） ## 注意：我 ## 地图与数据流工作原理（前端） 1. `client/src/context/DisasterContext.tsx` 在应用挂载时从 API 获取初始数据（alerts、incidents、hospitals、ngos）。它通过 React Context（`useDisaster`）将这些数据暴露给页面和组件使用。 2. `DisasterMap.tsx` 使用 `react-leaflet` 组件（MapContainer、TileLayer、Marker、Circle）进行渲染： - 来自 OpenStreetMap 的 Tile layer - 灾区圆形区域（静态示例数据） - 来自 `DisasterContext` 的事故和医院标记 3. 当用户报告事故（报告页面）时，客户端会向 `/api/incidents` 发送 POST 请求，返回的事故将被添加到上下文中，以便立即显示在地图上。 4. SOS 使用 `navigator.geolocation.getCurrentPosition()` 并将坐标 POST 到 `/api/sos`。 样式与 CSS 说明 - Leaflet 要求在地图挂载之前加载其 CSS（在 `main.tsx` 中导入）。项目包含 `.leaflet-container { height: 100%; }` 并确保设置了 `html, body, #root { height: 100%; }` 以避免地图容器高度为零。 ## 后端工作原理 1. `server/server.js` 创建了一个 Express 应用，使用 `Mongoose` 连接到 MongoDB，并在 `/api` 下配置路由。 2. 路由委托给使用 Mongoose 模型（例如，`models/Hospital.js`）查询并发送 JSON 响应的 controllers。 3. `seed/seed.js` 辅助脚本可以填充示例医院/事故以测试 UI。 ## 常见问题与故障排查 - 地图空白但页面已加载 - 检查浏览器控制台是否有 React 错误。常见的服务器端原因是在 monorepo 中**重复安装了 React**（context provider/consumer 运行时不匹配）。在仓库根目录运行 `npm ls react` 并确保只安装了一个版本。如果存在重复，请移除本地的 `file:` 依赖或进行去重（dedupe）。 - 确保 Leaflet CSS 已加载且 `.leaflet-container` 具有高度。检查 DOM → `.leaflet-container` 的计算高度。 - API 请求失败，状态为 0 或被阻止 (CORS) - 确认后端正在运行，并且可以通过 `VITE_API_BASE_URL` 配置的 URL 或默认的 `http://localhost:5001` 访问。 - 检查服务器日志并确认 CORS 中间件处于激活状态（服务器包含明确的 CORS 配置，以在开发期间允许 `localhost:8080`）。 - Tile 图像未加载 - 检查 Network 标签页中对 `tile.openstreetmap.org` 的请求。如果被阻止或返回 403，请尝试不同的 Tile 提供商或检查网络限制。 ## 开发工作流与测试 - 使用 monorepo 脚本安装并运行这两个包： ``` npm install npm run dev ``` - 推荐的迭代工作流 1. 使用 `npm --prefix server run dev` 运行后端并确认 `Server running on port 5001`。 2. 使用 `npm --prefix client run dev` 运行前端并打开地图页面。 3. 使用浏览器 DevTools 的 Network 和 Console 标签页进行实时调试。 自动化测试 - 此模板中未包含自动化的单元测试。对于生产级项目，请添加 Jest/React Testing Library 和后端测试。 ## 贡献指南 - Fork 并创建功能分支。提交包含清晰描述和行为更改测试的 Pull Request。 - 遵循现有的代码风格：客户端使用 TypeScript，服务器 controllers 使用 JSDoc 或注释，样式使用 Tailwind 实用类。 ## 下一步开发指引 - 前端地图代码：`client/src/pages/DisasterMap.tsx` - 数据提供者：`client/src/context/DisasterContext.tsx` - 后端路由：`server/routes/*.js` - Controllers：`server/controllers/*.js` - 种子数据：`server/seed/seed.js`

标签：CRUD, Express, GNU通用公共许可证, i18next, Leaflet, MITM代理, MongoDB, Mongoose, NGO协作, Node.js, React, REST API, shadcn-ui, SOS紧急求助, Syscalls, Tailwind CSS, TypeScript, Vite, 交互式地图, 信息透明, 前后端分离, 医院定位, 原型系统, 地图可视化, 地理定位, 多语言支持, 安全插件, 安全测试框架, 实时预警, 市民事件上报, 库, 应急响应, 灾害协调, 灾害管理与响应系统, 社区参与, 自动化攻击