# students_login

**Repository Path**: chen_chong/students_login

## Basic Information

- **Project Name**: students_login
- **Description**: 学生登录系统:  后端 Node + Express + MySQL + JWT，前端 React + Vite + React Router + Axios
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-31
- **Last Updated**: 2026-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, Nodejs, Express, 学生登录系统, 全栈学习

## README

# 学生登录系统

一个基于 Node.js + Express + MySQL 后端和 React + Vite 前端的学生登录系统，兼容 PC 端和移动端。

## 功能特性

- 学生账号登录认证
- 个性化内容展示（每个学生看到不同内容）
- 响应式设计，兼容 PC 端和移动端
- 简洁大方的用户界面
- JWT 身份验证

## 技术栈

### 后端
- Node + Express + MySQL + JWT

### 前端
- React + Vite + React Router + Axios

## 项目结构

```
students-list/
├── backend/                 # 后端项目目录
│   ├── config/             # 配置文件
│   │   └── database.js     # 数据库连接配置
│   ├── controllers/        # 控制器
│   │   ├── authController.js
│   │   └── studentController.js
│   ├── middleware/         # 中间件
│   │   └── auth.js         # JWT 验证中间件
│   ├── routes/             # 路由
│   │   ├── auth.js
│   │   └── students.js
│   ├── models/             # 数据模型
│   │   └── Student.js
│   ├── utils/              # 工具函数
│   ├── .env                # 环境变量
│   ├── .env.example        # 环境变量示例
│   ├── package.json
│   └── server.js           # 入口文件
│
├── frontend/               # 前端项目目录
│   ├── public/             # 静态资源
│   ├── src/
│   │   ├── components/     # 组件
│   │   │   ├── LoginForm/
│   │   │   ├── Dashboard/
│   │   │   └── common/     # 通用组件
│   │   ├── pages/          # 页面
│   │   │   ├── LoginPage/
│   │   │   └── HomePage/
│   │   ├── hooks/          # 自定义 Hooks
│   │   ├── context/        # React Context
│   │   ├── services/       # API 服务
│   │   │   └── api.js
│   │   ├── utils/          # 工具函数
│   │   ├── App.jsx
│   │   └── main.jsx
│   ├── index.html
│   ├── package.json
│   └── vite.config.js
│
└── README.md
```

## API 接口文档

### 认证接口

| 方法 | 路径 | 描述 |
|------|------|------|
| POST | /api/auth/login | 学生登录 |

**登录请求体：**
```json
{
  "studentId": "2024001",
  "password": "123456"
}
```

**登录响应：**
```json
{
  "token": "eyJhbGciOiJIUzI1NiIs...",
  "student": {
    "id": 1,
    "studentId": "2024001",
    "name": "张三",
    "email": "zhangsan@example.com",
    "className": "计算机1班",
    "major": "计算机科学"
  }
}
```

### 学生接口

| 方法 | 路径 | 描述 | 认证 |
|------|------|------|------|
| GET | /api/students/profile | 获取个人信息 | 需要 |
| GET | /api/students/content | 获取个性化内容 | 需要 |

## 响应式设计

系统采用移动优先的响应式设计策略：

- **PC 端** (>= 1024px)：完整布局，侧边栏导航
- **平板端** (768px - 1023px)：自适应布局
- **移动端** (< 768px)：单列布局，底部导航

## 安全特性

- JWT Token 身份验证
- bcrypt 密码加密
- SQL 注入防护（使用参数化查询）
- CORS 跨域配置
- 环境变量敏感信息保护

## 数据库
### 初始化数据库
- 创建数据库
-- CREATE DATABASE students_login DEFAULT CHARACTER SET utf8mb4;

- 导入 SQL
-- mysql -u root -p students_login < sql/init.sql

## 项目演示地址
http://login.hnsyjaeger.me

## 界面

![本地图片](界面.png)