Akanksha162165/cyber-dashboard

# 🛡️ 网络威胁情报仪表板 一个全栈式Web应用程序，使用交互式图表、可搜索的事件表和基于角色的用户身份验证来可视化现实世界的网络安全攻击数据。 ## 📌 项目概述 | 字段 | 详情 | |-------------|---------| | **标题** | 网络威胁情报仪表板 | | **领域** | 数据分析 + 网络安全 | | **技术栈** | Python, Flask, Pandas, HTML, CSS, JavaScript, Chart.js | | **部署** | Render.com (免费) | ## 🎯 功能 - 🔐 **登录系统**，具有3个用户角色（管理员、分析师、访客） - 📊 **6个交互式图表** — 饼图、折线图、柱状图 - 🔍 **实时过滤器** — 按攻击类型、行业、严重性、国家 - 📋 **分页事件表**，支持实时搜索 - 🌐 **REST API** (`/api/data`, `/api/incidents`, `/api/filter-options`) - 📱 **响应式设计** — 适用于移动和桌面 - 🎨 **深色网络安全主题** ## 🗂️ 项目结构 ``` cyber-threat-dashboard/ ├── data/ │ ├── cyberattacks.csv ← Raw dataset (2000 records) │ └── summary.json ← Pre-processed summary (auto-generated) ├── scripts/ │ ├── generate_sample_data.py ← Generates the CSV dataset │ └── clean_data.py ← Cleans CSV → produces summary.json ├── static/ │ ├── css/style.css ← Dark theme stylesheet │ └── js/charts.js ← Chart.js logic + API calls ├── templates/ │ ├── login.html ← Login page │ └── index.html ← Main dashboard ├── app.py ← Flask backend + API routes ├── requirements.txt ├── Procfile ← For Render/Heroku deployment └── README.md ``` ## 🚀 设置与运行（本地） ### 步骤 1 — 克隆/下载项目 ``` git clone https://github.com/YOUR_USERNAME/cyber-dashboard.git cd cyber-dashboard ``` ### 步骤 2 — 安装依赖项 ``` pip install -r requirements.txt ``` ### 步骤 3 — 生成数据集 ``` python scripts/generate_sample_data.py ``` ### 步骤 4 — 清洗数据 ``` python scripts/clean_data.py ``` ### 步骤 5 — 运行应用程序 ``` python app.py ``` 打开您的浏览器，访问：**http://127.0.0.1:5000** ## 🔑 登录凭证（演示） | 用户名 | 密码 | 角色 | |----------|------------|----------| | admin | admin123 | 管理员 | | analyst | analyst123 | 分析师 | | guest | guest123 | 访客 | ## 📡 API 端点 | 端点 | 方法 | 描述 | |----------|--------|-------------| | `/api/data` | GET | 主要图表数据。支持过滤器：`attack_type`、`sector`、`severity`、`source_country` | | `/api/incidents` | GET | 分页事件行。支持 `page`、`per_page`、`search` | | `/api/filter-options` | GET | 返回每个过滤器下拉菜单的唯一值 | | `/api/stats/summary` | GET | 快速统计卡片数字 | **过滤器示例：** ``` GET /api/data?attack_type=Ransomware§or=Healthcare ``` ## 🗃️ 使用您自己的 Kaggle 数据集 1. 从 [kaggle.com](https://kaggle.com) 下载网络安全数据集（搜索：“网络安全攻击”） 2. 将CSV保存为 `data/cyberattacks.csv` 3. 打开 `scripts/clean_data.py` 并更新 **列映射** 部分以匹配您的列名 4. 重新运行 `python scripts/clean_data.py` ## ☁️ 在 Render.com 上部署（免费） 1. 将项目推送到 GitHub： git init && git add . && git commit -m "first commit" git remote add origin https://github.com/YOUR_USERNAME/cyber-dashboard.git git push -u origin main 2. 前往 [render.com](https://render.com) → 使用 GitHub 登录 3. 点击 **新建 → Web 服务** → 选择您的仓库 4. 设置： - **构建命令**：`pip install -r requirements.txt && python scripts/generate_sample_data.py && python scripts/clean_data.py` - **启动命令**：`gunicorn app:app` - **环境**：Python 3 5. 点击 **部署** — 您将在大约2分钟内获得一个免费的公共URL！ ## 🔧 使用的技术 | 技术 | 目的 | |-----------|---------| | Python 3 | 后端逻辑，数据处理 | | Flask | Web框架，REST API | | Pandas | CSV加载，数据清洗，聚合 | | Chart.js | 浏览器中的交互式图表 | | HTML/CSS | 前端UI + 深色主题 | | JavaScript (Vanilla) | API调用，过滤器逻辑，DOM更新 | | Gunicorn | 生产级Web服务器 | | Render.com | 免费云托管 | ## 📈 包含的图表 1. **攻击类型分布** — 饼图 2. **月度威胁趋势** — 折线图 3. **顶级来源国家** — 水平柱状图 4. **最被针对的行业** — 垂直柱状图 5. **严重性分解** — 饼图 6. **攻击状态** — 饼图 ## 👤 作者 **[您的姓名]** 毕业设计 — [您的学院名称] [年份]

标签：Chart.js, CMS安全, CSS, Flask, Git, HTML, JavaScript, Python, Render.com, REST API, 后端开发, 响应式设计, 图表分析, 多模态安全, 威胁情报, 开发者工具, 数据可视化, 数据清洗, 数据预处理, 无后门, 暗黑主题, 桌面端, 用户认证, 移动端, 网络安全, 网络测绘, 逆向工具, 隐私保护, 项目部署