FastAPI + Vue 登录系统

一个简单的用户登录系统，后端使用 FastAPI，前端使用 Vite + 原生 JavaScript，数据库使用 MySQL。

技术栈

后端

• FastAPI - 现代 Python 异步 Web 框架

• Uvicorn - ASGI 服务器

• SQLAlchemy - Python ORM 框架

• PyMySQL - MySQL 数据库驱动

• Pydantic - 数据验证

前端

• Vite - 前端构建工具

• Vue 3 - JavaScript 框架（备用）

• 原生 JavaScript - 实现登录和路由功能

数据库

• MySQL - 关系型数据库

---

项目结构

FastAPIProject/
├── main.py                    # FastAPI 后端主程序
├── database.py                # 数据库配置和 ORM 模型
├── requirements.txt           # Python 依赖列表
├── test3__9.sql              # 数据库初始化 SQL 脚本
└── frontend/
    ├── index.html            # 入口页面（自动跳转）
    ├── login.html            # 登录页面
    ├── profile.html          # 个人信息页面
    ├── App.vue               # Vue 组件（备用）
    ├── main.js               # Vue 入口（备用）
    ├── package.json          # 前端项目配置
    └── vite.config.js        # Vite 构建配置

---

快速开始

前置条件

在开始之前，请确保你的电脑上已安装以下软件：

软件	要求	检查方法
Python	3.8+	在终端运行 python --version
Node.js	16+	在终端运行 node --version
MySQL	5.7+	确保 MySQL 服务已启动
npm	随 Node.js 一起安装	在终端运行 npm --version

注意：确保 Python 和 Node.js 都已添加到系统环境变量中，可以在命令行中直接访问。

1. 安装依赖

# 安装 Python 依赖
pip install -r requirements.txt
​
# 安装前端依赖
cd frontend
npm install

2. 初始化数据库

执行 test3__9.sql 脚本创建数据库和表：

mysql -u root -p < test3__9.sql

3. 启动项目

方式一：VS Code 终端启动

1. 打开项目文件夹 d:\CodeAll\FastAPIProject

2. 按快捷键 Ctrl + `` 打开终端

3. 启动后端：

# 在终端中运行（按 Ctrl+C 停止）
uvicorn main:app --reload

1. 新开一个终端启动前端：

cd frontend
node node_modules/vite/bin/vite.js

方式二：直接运行 Python 文件

# 后端 - 使用 Python 直接运行
python -m uvicorn main:app --reload

方式三：使用 npm 脚本（如果 npm 可用）

# 终端1：启动后端
uvicorn main:app --reload
​
# 终端2：启动前端
cd frontend
npm run dev

注意：如果遇到 PowerShell 执行策略错误，可以使用以下命令绕过：

node node_modules/vite/bin/vite.js

Windows 系统特殊说明

由于 Windows PowerShell 默认禁止运行脚本，可能需要：

1. 使用 node node_modules/vite/bin/vite.js 代替 npm run dev

2. 或者使用 cmd /c "命令" 运行

4. 访问项目

• 后端地址：http://localhost:8000

• 前端地址：http://localhost:3000

---

API 接口

POST /login - 用户登录

请求

{
    "name": "张三",
    "password": "123456"
}

成功响应 (200)

{
    "success": true,
    "message": "登录成功",
    "user_id": 1
}

错误响应 (401)

{
    "detail": "用户名或密码错误"
}

---

GET /user/{user_id} - 获取用户信息

请求

GET /user/1

成功响应 (200)

{
    "id": 1,
    "name": "张三"
}

错误响应 (404)

{
    "detail": "用户不存在"
}

---

测试账号

用户名	密码
张三	123456
李四	password123
王五	admin888
赵六	test2026
孙七	user@2026

---

数据库表结构

CREATE TABLE user (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(20) NOT NULL,
    password VARCHAR(20) NOT NULL
);

---

开发说明

后端配置

数据库连接在 database.py 中配置：

DATABASE_URL = "mysql+pymysql://root:root@localhost:3306/test3_9"

如需修改，请更新以下信息：

• 用户名：root

• 密码：root

• 主机：localhost

• 端口：3306

• 数据库名：test3_9

前端配置

前端 API 请求地址在 login.html 和 profile.html 中硬编码：

fetch('http://localhost:8000/login')
fetch('http://localhost:8000/user/${userId}')

如需修改后端地址，请同时更新这两个文件。

---

许可证

MIT License