Files

T

yangy 90aec37461 Add initial files for Audio Dashboard Management System

- 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.

2026-03-17 14:20:08 +08:00

3.2 KiB

Raw Blame History

耳机管理平台 - 前端项目

技术栈

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: {...} }

后续扩展

可以添加的功能：

型号管理页面
用户登录/权限管理
数据导出功能
批量操作
操作日志

3.2 KiB Raw Blame History