yangy
90aec37461
- Created .env.example for environment variable configuration. - Added docker-compose.yml for service orchestration. - Implemented frequency response extraction in extract_frequency_response.py and convert_to_frequency_db.py. - Generated output files: frequency_response_detailed.json, frequency_response_points.json, frequency_response.csv, and frequency_response_curve.png. - Included sample measurement data for FiiO FA19 in CSV format.
149 lines
3.2 KiB
Markdown
149 lines
3.2 KiB
Markdown
# 耳机管理平台 - 前端项目
|
|
|
|
## 技术栈
|
|
|
|
- **Vue 3** - 渐进式 JavaScript 框架
|
|
- **Vue Router 4** - Vue.js 官方路由
|
|
- **Element Plus** - 基于 Vue 3 的组件库
|
|
- **Axios** - HTTP 客户端
|
|
- **Vite** - 下一代前端构建工具
|
|
|
|
## 项目结构
|
|
|
|
```
|
|
frontend/
|
|
├── src/
|
|
│ ├── api/ # API 接口
|
|
│ │ └── brand.js # 品牌管理接口
|
|
│ ├── layout/ # 布局组件
|
|
│ │ └── index.vue # 主布局
|
|
│ ├── router/ # 路由配置
|
|
│ │ └── index.js # 路由定义
|
|
│ ├── utils/ # 工具函数
|
|
│ │ └── request.js # Axios 封装
|
|
│ ├── views/ # 页面组件
|
|
│ │ └── brand/ # 品牌管理页面
|
|
│ │ └── index.vue
|
|
│ ├── App.vue # 根组件
|
|
│ └── main.js # 入口文件
|
|
├── index.html # HTML 模板
|
|
├── package.json # 依赖配置
|
|
├── vite.config.js # Vite 配置
|
|
├── install.bat # 安装依赖脚本
|
|
└── start.bat # 启动脚本
|
|
```
|
|
|
|
## 快速开始
|
|
|
|
### 1. 安装依赖
|
|
|
|
**方式一：使用脚本（推荐）**
|
|
```bash
|
|
双击 install.bat
|
|
```
|
|
|
|
**方式二：手动安装**
|
|
```bash
|
|
cd frontend
|
|
pnpm install
|
|
```
|
|
|
|
### 2. 启动开发服务器
|
|
|
|
**方式一：使用脚本（推荐）**
|
|
```bash
|
|
双击 start.bat
|
|
```
|
|
|
|
**方式二：手动启动**
|
|
```bash
|
|
cd frontend
|
|
pnpm dev
|
|
```
|
|
|
|
启动后访问：http://localhost:3000
|
|
|
|
### 3. 构建生产版本
|
|
|
|
```bash
|
|
pnpm build
|
|
```
|
|
|
|
## 功能特性
|
|
|
|
### 品牌管理
|
|
|
|
- ✅ 品牌列表展示
|
|
- ✅ 品牌名称模糊搜索
|
|
- ✅ 新增品牌
|
|
- ✅ 编辑品牌
|
|
- ✅ 删除品牌
|
|
- ✅ 分页功能
|
|
|
|
### 菜单结构
|
|
|
|
```
|
|
耳机管理（一级菜单）
|
|
└── 品牌管理（二级菜单）
|
|
```
|
|
|
|
## API 配置
|
|
|
|
开发服务器已配置代理，将 `/api` 请求转发到后端服务：
|
|
|
|
- 前端请求：`/api/brands/`
|
|
- 后端地址：`http://localhost:8083/api/brands/`
|
|
|
|
配置位于 `vite.config.js`
|
|
|
|
## 注意事项
|
|
|
|
1. **确保后端服务已启动**
|
|
- 后端运行在 http://localhost:8083
|
|
- 使用 `backend/restart.bat` 重启后端服务
|
|
|
|
2. **端口占用**
|
|
- 前端使用 3000 端口
|
|
- 后端使用 8083 端口
|
|
- 如果端口被占用，请修改相应配置文件
|
|
|
|
3. **跨域问题**
|
|
- 开发环境使用 Vite 代理解决跨域
|
|
- 生产环境需要配置 CORS 或使用 Nginx 反向代理
|
|
|
|
## 常见问题
|
|
|
|
### Q: 依赖安装失败
|
|
A: 检查网络连接，或使用淘宝镜像：
|
|
```bash
|
|
pnpm config set registry https://registry.npmmirror.com
|
|
pnpm install
|
|
```
|
|
|
|
如果还没有安装 pnpm，请先安装：
|
|
```bash
|
|
npm install -g pnpm
|
|
```
|
|
|
|
### Q: 页面空白
|
|
A: 打开浏览器控制台查看错误信息，确保后端服务正常运行
|
|
|
|
### Q: API 请求失败
|
|
A: 检查后端服务是否启动，端口是否正确
|
|
|
|
## 开发规范
|
|
|
|
- 使用 Vue 3 Composition API (script setup)
|
|
- 使用 Element Plus 组件库
|
|
- 统一使用中文注释和提示
|
|
- API 响应格式：`{ code: 1, msg: "success", data: {...} }`
|
|
|
|
## 后续扩展
|
|
|
|
可以添加的功能：
|
|
- [ ] 型号管理页面
|
|
- [ ] 用户登录/权限管理
|
|
- [ ] 数据导出功能
|
|
- [ ] 批量操作
|
|
- [ ] 操作日志
|