# MessageWall

**Repository Path**: web_design_of_web_frontend/message-wall

## Basic Information

- **Project Name**: MessageWall
- **Description**: 一个基于 PHP + React 的吐槽墙系统，支持用户注册、登录、发布吐槽、给别人的留言打分、留言展示和个人留言管理等功能。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-10
- **Last Updated**: 2026-02-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 吐槽墙系统

一个基于 PHP + React 的吐槽墙系统，支持用户注册、登录、发布吐槽、点赞/踩、留言展示和个人留言管理等功能。

## 项目结构

```
php/
├── server/              # 后端PHP代码
│   ├── api/             # API接口
│   │   ├── login.php    # 登录/注册接口
│   │   └── messages.php # 留言管理接口
│   ├── utils/           # 工具类
│   │   └── jwt.php      # JWT工具类
│   ├── config.php       # 数据库配置
│   └── init_db.php      # 数据库初始化脚本
├── frontend/            # 前端React代码
│   ├── src/             # 源代码
│   │   ├── api/         # API请求配置
│   │   ├── components/  # 公共组件
│   │   │   ├── Navbar.jsx    # 导航栏组件
│   │   │   ├── Navbar.css    # 导航栏样式
│   │   │   └── common.css    # 公共样式
│   │   ├── pages/        # 页面组件
│   │   │   ├── Login.jsx     # 登录页面
│   │   │   ├── Register.jsx  # 注册页面
│   │   │   ├── MessageWall.jsx  # 吐槽墙页面
│   │   │   └── Profile.jsx   # 个人中心页面
│   │   ├── App.jsx       # 根组件
│   │   ├── main.jsx      # 主入口
│   │   └── index.css     # 基础样式
│   ├── package.json      # 项目依赖
│   └── vite.config.js   # Vite配置
└── README.md            # 部署说明
```

## 环境要求

### 后端环境
- PHP 7.0+
- MySQL 5.7+
- Web服务器（Apache/Nginx）

### 前端环境
- Node.js 16.0+
- npm 7.0+

## 部署步骤

### 1. 后端部署

#### 1.1 配置数据库
1. 创建MySQL数据库：`CREATE DATABASE video_app CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;`
2. 修改 `server/config.php` 文件中的数据库配置：
   ```php
   $host = 'localhost';     // 数据库主机
   $dbname = 'video_app';   // 数据库名称
   $username = 'root';      // 数据库用户名
   $password = '';          // 数据库密码
   ```

#### 1.2 初始化数据库
- 访问 `http://your-domain/server/init_db.php` 自动创建表结构和默认用户
- 默认用户：`admin` / `admin123`

#### 1.3 配置Web服务器
- 将 `php` 目录部署到Web服务器的根目录或子目录
- 确保PHP文件可以正常执行

### 2. 前端部署

#### 2.1 安装依赖
```bash
cd php/frontend
npm install
```

#### 2.2 构建项目
```bash
npm run build
```

#### 2.3 部署前端文件
- 将 `frontend/dist` 目录中的文件复制到Web服务器的根目录或子目录
- 确保前端文件可以通过HTTP访问

## 功能说明

### 后端API

#### 登录/注册接口
- **地址**: `/server/api/login.php`
- **方法**: `POST`
- **参数**:
  - 登录: `username`, `password`
  - 注册: `action: 'register'`, `username`, `password`
- **返回**: JWT令牌和用户信息

#### 留言管理接口
- **地址**: `/server/api/messages.php`
- **方法**: `GET`/`POST`/`PUT`/`DELETE`
- **认证**: 通过URL参数传递token：`?token=<jwt_token>`
- **功能**:
  - `GET`: 获取留言列表（支持分页和排序）
    - `page`: 页码，默认1
    - `page_size`: 每页数量，默认10
    - `sort`: 排序方式（`time`最新、`likes`点赞最多、`dislikes`踩最多）
  - `GET /?user_id=1`: 获取指定用户的留言列表
  - `POST`: 添加留言
    - 参数: `content`, `color`（可选，默认blue）
  - `POST`: 点赞/踩留言
    - 参数: `message_id`, `type`（`like`或`dislike`）
    - 同一人对同一留言只能操作一次
    - 再次点击取消，再次点击切换
  - `PUT /?id=1`: 更新留言（仅限本人）
    - 参数: `content`, `color`
  - `DELETE /?id=1`: 删除留言（仅限本人）

### 前端功能

#### 登录页面
- 支持用户登录
- 登录成功后存储token到本地存储
- 未登录用户自动跳转到登录页

#### 注册页面
- 支持用户注册
- 注册成功后自动登录并跳转

#### 吐槽墙页面
- 展示所有留言列表
- 支持发布新留言（需要登录）
- 支持选择便签颜色
- 支持点赞/踩功能（需要登录）
- 支持按时间/点赞量/踩量排序
- 分页功能
- 响应式设计，适配不同屏幕尺寸

#### 个人中心页面
- 展示用户信息
- 展示用户的留言列表
- 支持删除自己的留言
- 显示点赞数和踩数

## 技术栈

### 后端
- PHP 7.0+
- MySQL（utf8mb4字符集，支持中文）
- JWT认证
- PDO数据库操作
- CORS跨域支持

### 前端
- React 18+
- Vite
- React Router DOM
- Axios
- 组件化开发
- 响应式CSS3

## 公共组件

### Navbar 导航栏
- 自动根据登录状态显示不同内容
- 支持退出登录
- 移动端响应式适配

### 公共样式 (common.css)
- 页面容器 `.page-container`
- 卡片样式 `.info-card`
- 按钮样式 `.primary-btn` / `.secondary-btn` / `.danger-btn`
- 加载动画 `.loading`
- 分页 `.pagination`
- 响应式断点

## 注意事项

1. **安全性**：
   - 生产环境中请修改 `server/config.php` 中的 `$jwt_secret`
   - 生产环境中请修改默认用户密码
   - 建议启用HTTPS

2. **Token传递**：
   - 由于某些共享主机不支持Authorization头
   - 系统通过URL参数传递token：`?token=<jwt_token>`
   - 前端自动处理，无需手动添加

3. **性能优化**：
   - 已实现分页功能
   - 前端代码已组件化，便于维护

4. **跨域问题**：
   - 后端已配置CORS头，支持跨域请求

## 常见问题

### 1. 数据库连接失败
- 检查 `config.php` 中的数据库配置是否正确
- 确保MySQL服务正在运行
- 确保数据库用户有正确的权限

### 2. 登录/注册失败
- 检查用户名和密码是否正确（默认：admin/admin123）
- 检查数据库连接是否正常
- 检查JWT密钥是否配置正确

### 3. 前端无法访问后端API
- 检查后端API地址是否正确
- 检查Web服务器是否正常运行
- 检查跨域配置是否正确

### 4. 留言无法发布/点赞
- 确保用户已登录
- 检查网络连接是否正常
- 检查后端API是否正常响应

### 5. 中文显示乱码
- 确保数据库使用 `utf8mb4` 字符集
- 重新运行 `init_db.php` 初始化数据库

## 开发环境启动

### 后端
- 启动本地PHP服务器：`php -S localhost:8000 -t server`

### 前端
- 启动开发服务器：`npm run dev`
- 访问：`http://localhost:5173`

## 生产环境部署

### 后端
- 使用Apache或Nginx部署
- 配置虚拟主机指向 `server` 目录

### 前端
- 构建生产版本：`npm run build`
- 将 `dist` 目录部署到Web服务器
- 配置Nginx或Apache处理前端路由（使用HashRouter，无需特殊配置）

## 更新日志

### v2.0.0
- 重构前端代码，提取公共组件
- 将评分功能改为点赞/踩功能
- 添加留言排序功能（按时间/点赞/踩）
- 优化移动端响应式设计
- 修复中文支持问题
- 更改主题色为淡绿色

## 许可证

MIT License