happy-life-star/web-admin

情绪博物馆管理后台

基于 Vue 3 + TypeScript + Element Plus 的管理后台系统

功能特性

• ✅ 管理员登录认证
• ✅ 后台布局（侧边栏+顶栏）
• ✅ 管理员管理（CRUD）
• ✅ 用户管理
• ✅ 仪表盘数据展示
• ✅ 权限控制
• ✅ API集成

技术栈

• Vue 3
• TypeScript
• Element Plus
• Vue Router
• Pinia
• Axios
• ECharts
• Vite

快速开始

安装依赖

npm install

开发环境运行

npm run dev

访问: http://localhost:5174

生产环境构建

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;
    }
}

注意事项

1. 确保后端服务已启动
2. 确保Redis服务正常运行
3. 生产环境请修改默认管理员密码
4. 建议使用HTTPS部署

License

MIT