yangy
abd44fe467
- Updated docker-compose.yml to rename backend and frontend container names for clarity. - Added volume mappings for frontend and backend services to persist data. - Removed obsolete files related to frequency response extraction, including Python scripts and output data files. - Adjusted backend port configuration in main.py to align with new service architecture. - Enhanced logging for file upload paths in models.py for better traceability.
耳机管理平台 - 前端项目
技术栈
- 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. 安装依赖
方式一：使用脚本（推荐）
双击 install.bat
方式二：手动安装
cd frontend
pnpm install
2. 启动开发服务器
方式一：使用脚本（推荐）
双击 start.bat
方式二：手动启动
cd frontend
pnpm dev
启动后访问：http://localhost:3000
3. 构建生产版本
pnpm build
功能特性
品牌管理
- ✅ 品牌列表展示
- ✅ 品牌名称模糊搜索
- ✅ 新增品牌
- ✅ 编辑品牌
- ✅ 删除品牌
- ✅ 分页功能
菜单结构
耳机管理（一级菜单）
└── 品牌管理（二级菜单）
API 配置
开发服务器已配置代理，将 /api 请求转发到后端服务：
- 前端请求：
/api/brands/ - 后端地址：
http://localhost:8083/api/brands/
配置位于 vite.config.js
注意事项
-
确保后端服务已启动
- 后端运行在 http://localhost:8083
- 使用
backend/restart.bat重启后端服务
-
端口占用
- 前端使用 3000 端口
- 后端使用 8083 端口
- 如果端口被占用，请修改相应配置文件
-
跨域问题
- 开发环境使用 Vite 代理解决跨域
- 生产环境需要配置 CORS 或使用 Nginx 反向代理
常见问题
Q: 依赖安装失败
A: 检查网络连接，或使用淘宝镜像：
pnpm config set registry https://registry.npmmirror.com
pnpm install
如果还没有安装 pnpm，请先安装：
npm install -g pnpm
Q: 页面空白
A: 打开浏览器控制台查看错误信息，确保后端服务正常运行
Q: API 请求失败
A: 检查后端服务是否启动，端口是否正确
开发规范
- 使用 Vue 3 Composition API (script setup)
- 使用 Element Plus 组件库
- 统一使用中文注释和提示
- API 响应格式：
{ code: 1, msg: "success", data: {...} }
后续扩展
可以添加的功能：
- 型号管理页面
- 用户登录/权限管理
- 数据导出功能
- 批量操作
- 操作日志