# 网络编程课设

**Repository Path**: mengmeng886/web-coding-lab

## Basic Information

- **Project Name**: 网络编程课设
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-03
- **Last Updated**: 2026-07-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 在线聊天室项目说明

## 环境要求

- JDK 8+
- MySQL 5.7+ / MySQL 8.x
- Node.js 18+
- 数据库驱动：`lib/mysql-connector-j-8.0.33.jar`

## 数据库配置

项目使用 **MySQL**，默认配置在根目录 `config.properties`：

```properties
server.port=8888
websocket.port=8889
db.url=jdbc:mysql://localhost:3306/chat_system?useSSL=false&serverTimezone=UTC&characterEncoding=utf8
db.username=root
db.password=123456
db.driver=com.mysql.cj.jdbc.Driver
```

启动后端时会自动创建数据库 `chat_system`、自动建表、自动补字段，并只插入一次演示数据。

如果需要重新插入演示数据，可在 MySQL 中执行：

```sql
DELETE FROM app_metadata WHERE meta_key = 'demo_seed_v1';
```

然后重启后端服务。

## 启动命令

### 1. 编译后端

```bash
javac -encoding UTF-8 -d chat_server/bin -cp "lib/mysql-connector-j-8.0.33.jar:chat_server/bin" $(find common chat_server -name '*.java' | sort)
```

### 2. 启动后端

```bash
java -cp "chat_server/bin:lib/mysql-connector-j-8.0.33.jar" chat_server.socket.ChatServer
```

后端端口：

| 端口 | 作用 |
| --- | --- |
| `8888` | Java Socket 客户端连接 |
| `8889` | WebSocket 网页端连接 |

### 3. 启动前端

```bash
cd web-vue
npm install
npm run dev -- --host 127.0.0.1 --port 5174
```

浏览器访问：

```text
http://127.0.0.1:5174
```

前端打包：

```bash
cd web-vue
npm run build
```

## 测试账号

默认密码都是 `123456`。

| 用户名 | 密码 | 说明 |
| --- | --- | --- |
| `demo` | `123456` | 默认测试账号 |
| `zzs` | `123456` | 默认测试账号 |
| `Alice` | `123456` | 好友/聊天测试 |
| `Bob` | `123456` | 好友/聊天测试 |
| `陈同学` | `123456` | 中文用户名测试 |
| `课代表` | `123456` | 好友申请测试 |

## 数据库表设计

| 表名 | 作用 | 主要字段 |
| --- | --- | --- |
| `user` | 用户表 | `id`, `username`, `password`, `avatar`, `created_at`, `last_login` |
| `chat_record` | 聊天记录表 | `id`, `sender`, `receiver`, `content`, `message_type`, `payload_type`, `payload_data`, `file_name`, `send_time`, `is_read` |
| `friends` | 好友关系表 | `id`, `user1`, `user2`, `created_at` |
| `friend_requests` | 好友申请表 | `id`, `requester`, `receiver`, `status`, `created_at` |
| `groups` | 群聊表 | `id`, `name`, `creator`, `created_at` |
| `group_members` | 群成员表 | `id`, `group_id`, `username`, `joined_at` |
| `app_metadata` | 系统标记表 | `meta_key`, `meta_value`, `created_at`, `updated_at` |

说明：

- `chat_record.message_type` 区分私聊、群聊等消息类型。
- `payload_type`、`payload_data`、`file_name` 用于保存图片/文件消息。
- `app_metadata` 中的 `demo_seed_v1` 用来判断演示数据是否已经插入过。

## 主要功能

- 登录、注册
- 刷新页面后保持登录状态
- 好友列表、好友申请
- 私聊、群聊
- 聊天记录保存与读取
- 图片/文件消息发送
- 后端自动建库、建表、补字段、插入一次性测试数据

## 页面路由

| 路由 | 页面 |
| --- | --- |
| `/login` | 登录页 |
| `/register` | 注册页 |
| `/chat` | 聊天主页 |

页面设计图文档位置：`docs/design/page-designs.md`