RSP-007/DBZ-Web
GitHub: RSP-007/DBZ-Web
一个融合Dragon Ball Z主题的全栈Web应用，在提供角色与星球探索功能的同时展示Helmet.js安全加固与速率限制等生产级安全实践。
Stars: 0 | Forks: 0
# 🐉 Dragon Ball Z 浏览器
一个基于 **Node.js**、**Express** 和 **EJS** 构建的全栈、**“超级赛亚人”级别** Web 应用程序。
该项目允许用户通过从 [Dragon Ball API](https://web.dragonball-api.com/documentation) 获取实时数据，探索广袤的 **Dragon Ball Z** 宇宙 —— 从标志性的角色到遥远的星球。
## 🌟 功能特性
### 🔎 角色数据库
浏览包含详细统计数据、描述和背景信息的完整战士列表。
### 🌍 星球探索
发现 DBZ 宇宙中的传奇世界 —— 从那美克星到贝吉塔行星。
### 📖 深度详情
查看：
- 变身
- 战斗力 (Ki) 等级
- 起源故事
- 角色属性
### ⚡ 动态搜索
使用实时搜索功能即时找到您喜爱的战士。
### 🎵 沉浸式体验
- 背景音乐集成
- 使用 Intersection Observer API 实现平滑的滚动触发动画
## 🛡️ 安全性与性能
该项目超越了视觉呈现，实施了生产级的安全实践：
### 🧠 “自在极意功”安全头标 (Helmet.js)
- 保护 HTTP 头部
- 防止点击劫持
- 防止 MIME 类型嗅探
- 缓解 XSS 攻击
### 🛡️ “气盾”速率限制
- 防止垃圾信息和机器人攻击
- 当超出限制时显示自定义的 **“极限突破”** 错误页面
### 🔒 数据清洗
- 使用 `encodeURIComponent()` 进行安全的 URL 处理
- 利用 EJS 的内置转义功能防止 XSS
### 🧩 防御性编程
- 验证 API 响应
- 防止因格式错误或意外数据导致的服务器崩溃
## 🛠️ 技术栈
* **后端**: Node.js, Express.js
* **前端**: EJS (Embedded JavaScript), CSS3, Vanilla JavaScript
* **API 交互**: Axios
* **安全性**: Helmet, Express-Rate-Limit
## 🚀 安装与设置
### 1️⃣ 克隆仓库
```
git clone https://github.com/RSP-007/DBZ-Web.git
cd DBZ-Web
```
### 2️⃣ 安装依赖
```
npm install
```
### 3️⃣ 运行服务器
```
node app.js
```
或者，如果您使用 Nodemon：
```
npm run dev
```
### 4️⃣ 在浏览器中打开
访问：
```
http://localhost:3000
```
## 📁 项目结构
```
DBZ-MAIN
│
├── node_modules/
│
├── public/
│ ├── styles/
│ │ ├── 404.css
│ │ ├── characters.css
│ │ ├── error.css
│ │ ├── main.css
│ │ ├── planets.css
│ │ └── transformation.css
│ │
│ ├── audio-handler.js
│ ├── card-observer.js
│ ├── dbz-dragon-ball-z-goku-dragon-ball-super.jpg
│ ├── dragon-ball-goku-sparks-gif-preview.gif
│ ├── Dragon-Ball-Z-Logo-PNG-File.png
│ └── thisisbeatkitchen-beatkitchen-i-will-fight.mp3
│
├── views/
│ ├── 404.ejs
│ ├── character-details.ejs
│ ├── characters.ejs
│ ├── error-limiter.ejs
│ ├── index.ejs
│ └── planets.ejs
│
├── .gitignore
├── app.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
```
## 📜 许可证
该项目基于 **MIT 许可证**授权。
有关更多详细信息，请参阅 `LICENSE` 文件。
## 🤝 致谢
- 数据由 **Dragon Ball API** 提供
- 由 **RSP-007** 创建，作为 Web 开发作品集项目的一部分
标签：API密钥检测, API集成, CISA项目, CSS3, Dragon Ball Z, EJS, Express, GNU通用公共许可证, Helmet.js, HTTP头部安全, Intersection Observer API, MITM代理, Node.js, Syscall, Web开发, XSS防护, 七龙珠, 交互设计, 动漫, 可观测性, 后端开发, 娱乐应用, 实时数据, 搜索引擎, 数据可视化, 数据清洗, 点击劫持防护, 粉丝项目, 网络安全, 角色数据库, 输入验证, 防御性编程, 防爬虫, 隐私保护