peanut
9930d77f48
- 创建独立的菜单配置文件 menu.ts - 修改Layout.vue使用静态菜单配置而不是动态路由生成 - 移除子路由中重复的图标配置 - 优化菜单渲染逻辑，避免重复显示 修复内容： 1. 菜单配置独立化：避免从路由动态生成导致的重复 2. 简化菜单结构：只显示必要的顶级菜单项 3. 图标去重：移除子路由中重复的图标定义
情绪博物馆管理后台
基于 Vue 3 + TypeScript + Element Plus 的管理后台系统
功能特性
- ✅ 管理员登录认证
- ✅ 后台布局（侧边栏+顶栏）
- ✅ 管理员管理（CRUD）
- ✅ 用户管理
- ✅ 仪表盘数据展示
- ✅ 权限控制
- ✅ API集成
技术栈
- Vue 3
- TypeScript
- Element Plus
- Vue Router
- Pinia
- Axios
- ECharts
- Vite
快速开始
安装依赖
npm install
开发环境运行
npm run dev
生产环境构建
npm run build
类型检查
npm run type-check
默认账号
- 账号: admin
- 密码: admin123
项目结构
web-admin/
├── src/
│ ├── api/ # API接口
│ ├── assets/ # 静态资源
│ ├── layouts/ # 布局组件
│ ├── router/ # 路由配置
│ ├── stores/ # 状态管理
│ ├── types/ # TypeScript类型
│ ├── utils/ # 工具函数
│ ├── views/ # 页面组件
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件
├── index.html # HTML模板
├── package.json # 项目配置
├── tsconfig.json # TypeScript配置
└── vite.config.ts # Vite配置
环境变量
开发环境 (.env.development)
VITE_APP_TITLE=情绪博物馆管理后台
VITE_APP_BASE_API=/api
VITE_APP_PORT=5174
生产环境 (.env.production)
VITE_APP_TITLE=情绪博物馆管理后台
VITE_APP_BASE_API=/api
API接口
后端API地址: http://localhost:8080/api
管理员认证
- POST /admin/auth/login - 登录
- GET /admin/auth/info - 获取当前管理员信息
- POST /admin/auth/logout - 登出
管理员管理
- GET /admin/page - 分页查询
- GET /admin/detail - 查询详情
- POST /admin/create - 创建管理员
- PUT /admin/update - 更新管理员
- DELETE /admin/delete - 删除管理员
用户管理
- GET /user/page - 分页查询
- GET /user/detail - 查询详情
- PUT /user/updateStatus - 更新状态
部署
Nginx配置示例
server {
listen 80;
server_name admin.emotion-museum.com;
root /var/www/web-admin/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
注意事项
- 确保后端服务已启动
- 确保Redis服务正常运行
- 生产环境请修改默认管理员密码
- 建议使用HTTPS部署
License
MIT