150 lines
2.7 KiB
Markdown
150 lines
2.7 KiB
Markdown
# 情绪博物馆管理后台
|
||
|
||
基于 Vue 3 + TypeScript + Element Plus 的管理后台系统
|
||
|
||
## 功能特性
|
||
|
||
- ✅ 管理员登录认证
|
||
- ✅ 后台布局（侧边栏+顶栏）
|
||
- ✅ 管理员管理（CRUD）
|
||
- ✅ 用户管理
|
||
- ✅ 仪表盘数据展示
|
||
- ✅ 权限控制
|
||
- ✅ API集成
|
||
|
||
## 技术栈
|
||
|
||
- Vue 3
|
||
- TypeScript
|
||
- Element Plus
|
||
- Vue Router
|
||
- Pinia
|
||
- Axios
|
||
- ECharts
|
||
- Vite
|
||
|
||
## 快速开始
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 开发环境运行
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
访问: http://localhost:5174
|
||
|
||
### 生产环境构建
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 类型检查
|
||
|
||
```bash
|
||
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配置示例
|
||
|
||
```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;
|
||
}
|
||
}
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. 确保后端服务已启动
|
||
2. 确保Redis服务正常运行
|
||
3. 生产环境请修改默认管理员密码
|
||
4. 建议使用HTTPS部署
|
||
|
||
## License
|
||
|
||
MIT
|