Python+Vue +K6接口性能压测平台搭建

一、技术栈

前端: Vue 3 + Vite + NaiveUI + TypeScript

后端: Python + FastAPI + SQLAlchemy

数据库: MySQL 8.0

压测引擎: K6（需要先安装好K6）

二、前置条件

环境准备

K6: 确保已安装 K6

bash 复制代码

# Windows
winget install k6 --source winget
# 或
choco install k6

# 验证安装
k6 version

Python 3.10+: 确保已安装 Python

Node.js 18+: 确保已安装 Node.js

MySQL 8.0: 确保已安装并运行 MySQL

三、数据库初始化

bash 复制代码

CREATE DATABASE k6_perftest CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

四、配置好数据库

五、后端启动

bash 复制代码

cd backend

# 创建虚拟环境
python -m venv venv

# 激活虚拟环境
# Windows:
.\venv\Scripts\activate
# Linux/Mac:
source venv/bin/activate

# 安装依赖
pip install -r requirements.txt

# 启动服务
uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

六、前端启动

bash 复制代码

cd frontend

# 安装依赖
npm install

# 启动开发服务器
npm run dev

前端启动需要注意，nmp install 安装会比较慢，建议用如下方法

配置 yarn 使用国内镜像源（推荐）
设置 yarn 的 registry 为淘宝新镜像，该镜像的证书通常是正常的：

bash 复制代码

yarn config set registry https://registry.npmmirror.com

然后再执行安装：

bash 复制代码

yarn install

临时关闭 yarn 的严格 SSL 校验（快速但不安全）

bash 复制代码

yarn config set strict-ssl false
yarn install

安装完成后建议恢复：

bash 复制代码

yarn config set strict-ssl true

使用 cnpm 或 npm 代替 yarn（因为 cnpm 已安装成功）
已经成功安装了 cnpm，可以用 cnpm 直接安装项目依赖：

bash 复制代码

cnpm install

或者使用 npm（如果之前配置了正确的 registry）：

bash 复制代码

npm install

检查当前 yarn 的配置
你可以查看当前的 registry 和 strict-ssl 设置：

bash 复制代码

yarn config get registry
yarn config get strict-ssl

七、项目结构

bash 复制代码

K6_PerfTest/
├── backend/                    # 后端项目
│   ├── app/
│   │   ├── main.py            # FastAPI 入口
│   │   ├── config.py          # 配置
│   │   ├── database.py        # 数据库连接
│   │   ├── models/            # 数据模型
│   │   ├── schemas/           # Pydantic 模式
│   │   ├── api/               # API 路由
│   │   ├── services/          # 业务逻辑
│   │   └── websocket/         # WebSocket
│   ├── scripts/               # 生成的 K6 脚本
│   ├── results/               # 执行结果
│   ├── requirements.txt
│   └── .env
├── frontend/                  # 前端项目
│   ├── src/
│   │   ├── App.vue           # 主组件
│   │   ├── components/       # 子组件
│   │   ├── api/              # API 客户端
│   │   ├── types/            # 类型定义
│   │   └── styles/           # 样式
│   ├── package.json
│   └── vite.config.ts
└── README.md

八、启动访问

前后端启动后访问前端域名：

http://localhost:5173/
配置请求接口参数及用户数以及压测时长
运行后等待结果
执行后查看压测结果