# min-mvp-web

**Repository Path**: luckliucd/min-mvp-web

## Basic Information

- **Project Name**: min-mvp-web
- **Description**: 最小可行性项目，独立的前端、后端、数据库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-09
- **Last Updated**: 2025-11-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Min MVP Web 单仓库说明

本仓库包含三个子项目：

- `user-management-frontend`：Vue 3 + Ant Design Vue 前端（主力前端）
- `user-management-backend`：Node.js + Express + MySQL 后端 API
- `user-management-vue2`：Vue 2 + Ant Design Vue 示例前端（用于对比/演示）

## 环境准备

- 安装 `Node.js`（推荐 LTS，至少 `v18` 以上，Vue3 项目需要）
- 安装 `MySQL`（后端使用 MySQL，需可正常连接）
- Windows 环境建议使用 PowerShell 或 VS Code 终端操作

## 仓库结构

```
./
├── user-management-frontend/   # Vue3 前端
├── user-management-backend/    # 后端 API（MySQL）
└── user-management-vue2/       # Vue2 前端示例
```

## 一次性安装依赖

在各子项目目录分别执行：

```powershell
cd user-management-frontend; npm install
cd ../user-management-backend; npm install
cd ../user-management-vue2; npm install
```

## 启动后端（MySQL 版）

1. 复制环境变量模板并填写：

```powershell
cd user-management-backend
copy .env.example .env
```

2. 编辑 `.env`（示例）：

```dotenv
# 数据库连接
DB_NAME=user_management
DB_USER=root
DB_PASSWORD=你的密码
DB_HOST=localhost
DB_PORT=3306

# 后端服务端口
PORT=3000

# 允许的前端来源（逗号分隔，多端口开发时可都写上）
CORS_ORIGIN=http://localhost:5173,http://localhost:5174,http://localhost:5175
```

3. 启动后端服务：

```powershell
npm start
# 或开发热重载：npm run dev
```

- 默认访问地址：`http://localhost:3000`
- 用户 API：`GET http://localhost:3000/api/users`

小白提示：后端会自动尝试创建数据库（`user_management`），并首次启动时自动建表与插入示例数据。

## 启动后端（无需数据库的简化版）

如果暂时没有 MySQL，也可以用内存版后端快速演示：

```powershell
cd user-management-backend
npm run start:mem
```

端口同样为 `3000`，API 路径一致（数据保存在内存，重启会丢失）。

## 启动前端（Vue3）

```powershell
cd user-management-frontend
npm run dev
```

- Vite 默认端口是 `5173`，如果被占用会自动加 1（如 `5174/5175`）。
- 终端会打印实际的访问地址，复制打开即可。

## 启动前端（Vue2 示例）

```powershell
cd user-management-vue2
npm run dev
```

- 同样是 Vite 开发服务器，默认 `5173`，若冲突会使用其它端口。
- 你也可以用预览命令并指定端口：`npm run preview -- --port 5174`

## 前后端联调

- 确保后端已启动并监听 `3000`，前端调用接口 `http://localhost:3000/api/users`
- 如果浏览器报 CORS（跨域）错误，检查后端 `.env` 的 `CORS_ORIGIN` 是否包含你当前前端的地址（含端口）

## 常见问题

- MySQL 连接失败：
  - 确认 MySQL 已启动并能用客户端连接
  - 检查 `.env` 的账号密码和端口，确保有权限创建数据库
- 端口冲突（前端）：
  - Vite 会自动选择可用端口；也可以在启动时指定端口 `vite --port 5175`
- 数据库初始化失败：
  - 第一次启动会自动创建并建表，若失败请手动创建 `user_management` 数据库后重试

## 目录内常用命令

- `user-management-backend`
  - `npm start`：启动后端（MySQL 版）
  - `npm run dev`：开发模式（自动重启）
  - `npm run start:mem`：简化版（内存数据）
- `user-management-frontend`
  - `npm run dev`：开发服务
  - `npm run build`：打包构建
  - `npm run preview`：本地预览构建产物
- `user-management-vue2`
  - `npm run dev`：开发服务
  - `npm run build`：打包构建
  - `npm run preview`：本地预览（可 `--port` 指定端口）

---

如需把三个子项目统一为 `pnpm workspace` 或者在根加并行启动脚本（一次启动前端+后端），可以告诉我，我来继续配置。