# InformationEngineering

**Repository Path**: zhao_da/information-engineering

## Basic Information

- **Project Name**: InformationEngineering
- **Description**: “信息工程学展示与互动平台”是一个基于 Vue 3 + Element Plus 技术栈开发的展示与交互型网页系统，旨在系统化地展示信息工程学的理论与应用，并提供互动讨论区用于用户交流、提问与答疑。该平台通过组件化、模块化、动态渲染和前端路由实现高效、交互友好的用户体验，适合作为教学演示、课程资料展示或知识普及的前端项目范例。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-11-29
- **Last Updated**: 2025-11-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 信息工程学展示与互动平台

> 一个基于 Vue 3 + Flask 构建的现代化展示与互动平台，系统化展示信息工程学的理论与应用，并提供互动讨论区用于用户交流、提问与答疑。

[![Vue 3](https://img.shields.io/badge/Vue-3.5+-4FC08D?logo=vue.js)](https://vuejs.org/)
[![Flask](https://img.shields.io/badge/Flask-3.0+-000000?logo=flask)](https://flask.palletsprojects.com/)
[![Element Plus](https://img.shields.io/badge/Element%20Plus-2.11+-409EFF?logo=element)](https://element-plus.org/)

## 目录

- [项目简介](#项目简介)
- [功能特性](#功能特性)
- [技术栈](#技术栈)
- [项目结构](#项目结构)
- [快速开始](#快速开始)
- [文档导航](#文档导航)
- [开发指南](#开发指南)
- [常见问题](#常见问题)
- [贡献指南](#贡献指南)

## 项目简介

信息工程学展示与互动平台是一个前后端分离的 Web 应用系统，旨在：

- **系统化展示**：通过模块化页面展示信息工程学的核心概念、历史演进、五大要素、应用案例和未来展望
- **互动交流**：提供讨论区功能，支持用户发帖、评论、回复，促进学术讨论和知识分享
- **智能审核**：集成 NLP 情感分析和敏感词检测，确保内容质量
- **用户中心**：提供用户注册、登录、个人信息管理等功能

## 功能特性

### 内容展示模块
- **首页**：主题横幅、精选内容轮播、最新讨论动态
- **学科简介**：信息工程学基本概念、历史演进、关键统计
- **奠基人**：Claude Shannon 生平、贡献、经典论文
- **五大要素**：生成、传递、收集、存储、处理的概念与案例
- **应用领域**：机器人、自动驾驶、无人机等实际应用案例
- **未来展望**：发展趋势、技术路线图、关键指标可视化

### 互动功能
- **讨论区**：帖子列表、详情查看、发帖、回复
- **搜索功能**：支持关键字搜索帖子和内容
- **用户系统**：注册、登录、个人信息管理
- **用户中心**：查看我的帖子、我的评论、统计数据

### 技术特性
- **响应式设计**：完美适配桌面端和移动端
- **性能优化**：路由懒加载、组件按需加载
- **内容审核**：NLP 情感分析 + 敏感词检测
- **安全认证**：Token 机制，支持用户认证

## 技术栈

### 前端技术
- **框架**：Vue 3 (Composition API)
- **构建工具**：Vite
- **路由**：Vue Router 4
- **UI 组件库**：Element Plus
- **数据可视化**：ECharts
- **状态管理**：Vue 3 Composition API + Composables
- **HTTP 客户端**：原生 Fetch API（统一封装）

### 后端技术
- **框架**：Flask
- **语言**：Python 3.11+
- **NLP 服务**：jieba + scikit-learn（情感分析）
- **数据存储**：JSON 文件（可扩展为数据库）
- **CORS**：flask-cors

## 项目结构

```
InformationEngineering/
├── IE/                          # 前端项目
│   ├── src/
│   │   ├── api/                # API 封装
│   │   ├── components/         # 全局组件
│   │   ├── composables/        # Composables
│   │   ├── router/             # 路由配置
│   │   ├── utils/              # 工具函数
│   │   ├── views/              # 页面组件
│   │   ├── App.vue             # 根组件
│   │   └── main.js             # 入口文件
│   ├── package.json
│   ├── vite.config.js
│   └── README.md               # 前端项目说明
│
├── IE-back/                     # 后端项目
│   ├── app/
│   │   ├── __init__.py         # Flask 应用工厂
│   │   ├── data_store.py       # 数据存储层
│   │   ├── nlp_service.py      # NLP 服务
│   │   └── routes.py           # 路由定义
│   ├── data/                    # 数据文件
│   ├── docs/
│   │   └── api.md              # API 接口文档
│   ├── config.py               # 配置文件
│   ├── requirements.txt        # Python 依赖
│   ├── app.py                  # 应用入口
│   └── README.md               # 后端项目说明
│
├── 开发文档.md                  # 详细开发文档
└── README.md                    # 本文件
```

## 快速开始

### 环境要求

- **Node.js**：16.0+ （前端）
- **Python**：3.11+ （后端）
- **npm** 或 **yarn**（前端包管理）
- **pip**（Python 包管理）

### 前端启动

```bash
# 进入前端目录
cd IE

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 访问 http://localhost:5173
```

### 后端启动

```bash
# 进入后端目录
cd IE-back

# 创建虚拟环境（推荐）
python -m venv .env

# 激活虚拟环境
# Windows PowerShell:
.\.env\Scripts\Activate.ps1
# Windows CMD:
.env\Scripts\activate
# Linux/Mac:
source .env/bin/activate

# 安装依赖
pip install -r requirements.txt

# 运行开发服务器
python app.py

# 访问 http://127.0.0.1:5000
```

### 配置说明

**前端配置**：
- 默认 API 地址：`http://127.0.0.1:5000`
- 可通过环境变量 `VITE_API_BASE_URL` 自定义 API 地址

**后端配置**：
- 默认端口：`5000`
- 可在 `app.py` 中修改端口配置
- 数据文件自动生成在 `data/` 目录

## 文档导航

### 核心文档

1. **[开发文档](./开发文档.md)**
   - 系统概述与需求分析
   - 功能设计与页面设计
   - 技术架构与实现细节
   - 实际实现总结

2. **[后端 API 文档](./IE-back/docs/api.md)**
   - 完整的 REST API 接口说明
   - 请求参数与响应格式
   - 认证机制说明
   - 错误码约定

### 子项目文档

3. **[前端项目 README](./IE/README.md)**
   - 前端项目结构说明
   - 功能模块介绍
   - 开发指南

4. **[后端项目 README](./IE-back/README.md)**
   - 后端项目结构说明
   - 环境配置指南
   - 接口列表

5. **[后端配置说明](./IE-back/config/README.md)**
   - 邮件服务配置（如适用）
   - 其他配置项说明

### 文档关系图

```
README.md (本文件)
├── 开发文档.md
│   ├── 系统概述
│   ├── 功能设计
│   ├── 页面设计
│   └── 实际实现总结
│
├── IE/README.md
│   └── 前端项目说明
│
└── IE-back/
    ├── README.md
    │   └── 后端项目说明
    ├── docs/api.md
    │   └── API 接口文档
    └── config/README.md
        └── 配置说明
```

## 开发指南

### 开发流程

1. **克隆项目**
   ```bash
   git clone <repository-url>
   cd InformationEngineering
   ```

2. **启动后端服务**
   ```bash
   cd IE-back
   python app.py
   ```

3. **启动前端服务**
   ```bash
   cd IE
   npm run dev
   ```

4. **访问应用**
   - 前端：http://localhost:5173
   - 后端 API：http://127.0.0.1:5000

### 代码规范

- **前端**：使用 ESLint 进行代码检查
- **后端**：遵循 PEP 8 Python 代码规范
- **提交信息**：使用清晰的提交信息，描述变更内容

### 开发工具推荐

- **IDE**：VS Code / PyCharm
- **API 测试**：Postman / Thunder Client
- **版本控制**：Git

## 常见问题

### Q: 前端无法连接到后端 API？

**A**: 检查以下几点：
1. 确认后端服务已启动（访问 http://127.0.0.1:5000/health）
2. 检查前端 `src/api/client.js` 中的 `API_BASE_URL` 配置
3. 确认后端 CORS 配置正确（已配置允许所有来源）

### Q: 用户登录后 token 丢失？

**A**: 
- Token 存储在 `localStorage` 中，键名为 `ie-platform-token`
- 检查浏览器控制台是否有错误
- 确认后端会话机制正常工作

### Q: 内容审核失败怎么办？

**A**: 
- 后端会返回 `sensitive_terms` 字段，显示命中的敏感词
- 修改内容后重新提交
- 可先调用 `/api/comments/analyze` 接口预检查内容

### Q: 如何添加新的 API 接口？

**A**: 
1. 在后端 `app/routes.py` 中添加路由处理函数
2. 在 `data_store.py` 中添加数据操作函数（如需要）
3. 在前端 `src/api/client.js` 中添加对应的 API 函数
4. 更新 `IE-back/docs/api.md` 文档

### Q: 如何部署到生产环境？

**A**: 
1. **前端**：运行 `npm run build` 构建生产版本，部署到静态服务器
2. **后端**：使用 Gunicorn 或 uWSGI 部署 Flask 应用
3. **数据库**：将 JSON 文件存储替换为数据库（MySQL/PostgreSQL）
4. **安全**：配置 HTTPS、使用 JWT 替代内存 token、配置防火墙

## 贡献指南

欢迎贡献代码、报告问题或提出建议！

### 贡献流程

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

### 报告问题

如发现问题，请在 Issues 中详细描述：
- 问题现象
- 复现步骤
- 预期行为
- 实际行为
- 环境信息（操作系统、浏览器、Node.js/Python 版本等）

## 许可证

本项目采用 MIT 许可证。详见 LICENSE 文件。

## 团队

- 项目负责人
- 后端工程师
- 前端工程师

## 联系方式

- 项目地址：[GitHub Repository]
- 问题反馈：[Issues]