# AI-demo

**Repository Path**: feiseli/ai-demo

## Basic Information

- **Project Name**: AI-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-16
- **Last Updated**: 2025-07-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 现代化登录系统

一个美观且功能完整的登录系统，包含用户注册、登录、认证和仪表板功能，使用MySQL数据库存储用户数据。

## 功能特性

- 🔐 **用户认证**: 支持用户注册和登录
- 🎨 **现代化UI**: 美观的渐变背景和卡片式设计
- 📱 **响应式设计**: 适配各种设备尺寸
- 🔒 **安全认证**: JWT令牌和密码加密
- ⚡ **实时验证**: 表单验证和错误提示
- 🎯 **用户体验**: 流畅的动画和交互效果
- 🗄️ **MySQL数据库**: 真实的数据持久化存储

## 技术栈

### 后端
- **Node.js** - 服务器运行环境
- **Express** - Web框架
- **MySQL** - 数据库
- **mysql2** - MySQL驱动
- **bcryptjs** - 密码加密
- **jsonwebtoken** - JWT令牌管理
- **express-validator** - 数据验证

### 前端
- **React** - 用户界面库
- **React Router** - 路由管理
- **CSS3** - 样式和动画
- **Fetch API** - HTTP请求

## 快速开始

### 1. 数据库设置

#### 方法一：使用SQL脚本（推荐）
```bash
# 登录MySQL
mysql -u root -p

# 执行初始化脚本
source scripts/init-database.sql
```

#### 方法二：手动创建
```sql
-- 创建数据库
CREATE DATABASE login_system CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

-- 使用数据库
USE login_system;

-- 创建用户表
CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(50) UNIQUE NOT NULL,
  email VARCHAR(100) UNIQUE NOT NULL,
  password VARCHAR(255) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
```

### 2. 环境配置

复制环境变量文件并修改配置：
```bash
cp env.example .env
```

编辑 `.env` 文件：
```env
# 服务器配置
PORT=6000
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production

# 数据库配置
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=your-mysql-password
DB_NAME=login_system
DB_PORT=3306
```

### 3. 安装依赖

```bash
# 安装后端依赖
npm install

# 安装前端依赖
cd client
npm install
```

### 4. 启动服务器

```bash
# 启动后端服务器（端口6000）
npm run dev

# 在另一个终端启动前端（端口3000）
cd client
npm start
```

### 5. 访问应用

打开浏览器访问 `http://localhost:3000`

## 演示账户

系统预置了一个演示账户：

- **用户名**: admin
- **密码**: password

## 数据库结构

### users 表
| 字段 | 类型 | 说明 |
|------|------|------|
| id | INT | 主键，自增 |
| username | VARCHAR(50) | 用户名，唯一 |
| email | VARCHAR(100) | 邮箱地址，唯一 |
| password | VARCHAR(255) | 加密后的密码 |
| created_at | TIMESTAMP | 创建时间 |
| updated_at | TIMESTAMP | 更新时间 |

## API接口

### 用户注册
```
POST /api/register
Content-Type: application/json

{
  "username": "用户名",
  "email": "邮箱地址",
  "password": "密码"
}
```

### 用户登录
```
POST /api/login
Content-Type: application/json

{
  "username": "用户名或邮箱",
  "password": "密码"
}
```

### 获取用户信息
```
GET /api/user
Authorization: Bearer <token>
```

### 用户登出
```
POST /api/logout
Authorization: Bearer <token>
```

## 项目结构

```
├── server.js              # 后端服务器
├── package.json           # 后端依赖
├── config/
│   └── database.js        # 数据库配置
├── scripts/
│   └── init-database.sql  # 数据库初始化脚本
├── client/                # 前端React应用
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── components/
│   │   │   ├── Login.js
│   │   │   ├── Login.css
│   │   │   ├── Register.js
│   │   │   ├── Dashboard.js
│   │   │   └── Dashboard.css
│   │   ├── App.js
│   │   ├── App.css
│   │   ├── index.js
│   │   └── index.css
│   └── package.json
├── env.example            # 环境变量示例
└── README.md
```

## 安全特性

- 🔐 **密码加密**: 使用bcrypt进行密码哈希
- 🎫 **JWT令牌**: 安全的身份验证令牌
- ✅ **输入验证**: 服务器端数据验证
- 🛡️ **CORS配置**: 跨域请求安全
- 🔒 **令牌过期**: 24小时令牌有效期
- 🗄️ **SQL注入防护**: 使用参数化查询

## 数据库管理

### 查看所有用户
```sql
SELECT id, username, email, created_at FROM users;
```

### 删除用户
```sql
DELETE FROM users WHERE username = '用户名';
```

### 重置数据库
```sql
DROP DATABASE login_system;
CREATE DATABASE login_system;
-- 然后重新运行初始化脚本
```

## 自定义配置

### 环境变量

创建 `.env` 文件并配置：

```env
PORT=6000
JWT_SECRET=your-secret-key-here
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=your-mysql-password
DB_NAME=login_system
DB_PORT=3306
```

### 修改样式

所有样式文件都在 `client/src/components/` 目录下，可以根据需要自定义颜色、字体等。

## 部署说明

### 开发环境
```bash
npm run dev          # 启动后端
cd client && npm start  # 启动前端
```

### 生产环境
```bash
npm install          # 安装后端依赖
cd client && npm install  # 安装前端依赖
cd client && npm run build  # 构建前端
npm start            # 启动服务器
```

## 故障排除

### 数据库连接问题
1. 确保MySQL服务正在运行
2. 检查数据库连接配置（用户名、密码、端口）
3. 确保数据库和表已创建

### 端口冲突
- 后端默认端口：6000
- 前端默认端口：3000
- 可在 `.env` 文件中修改

## 许可证

MIT License

## 贡献

欢迎提交Issue和Pull Request！

---

**注意**: 生产环境中请使用更强的JWT密钥和更严格的安全措施。