logo
0
0
WeChat Login
更新礼物贡献详情API,新增获取当日礼物贡献详情的功能,并在仪表盘中展示相关数据。优化了礼物管理界面的样式和交互,添加了礼物状态字段,改进了搜索和筛选功能。(黄澄)

管理员登录后台管理系统

这是一个简洁而现代的后台管理系统登录页面,使用Vue 3和Element Plus开发。

功能特点

  • 管理员登录界面
  • 输入验证和错误提示
  • 登录成功后跳转到后台界面
  • 响应式设计,适配不同屏幕尺寸
  • 安全的密码处理(使用MD5加密)

预览

系统包括以下页面:

  1. 管理员登录界面

    • 支持账号输入和验证
    • 支持密码输入(带可见性切换)
    • 表单验证
  2. 后台管理仪表盘

    • 用户统计展示
    • 直播统计展示
    • 管理员信息展示
    • 退出登录功能

项目结构

├── public/            # 静态资源
├── src/
│   ├── assets/        # 图片、样式等资源
│   ├── components/    # 组件
│   │   ├── Login.vue  # 登录页面组件
│   │   └── Dashboard.vue  # 仪表盘组件
│   ├── App.vue        # 主应用组件
│   └── main.js        # 入口文件
├── index.html         # HTML模板
└── package.json       # 项目配置

快速开始

安装依赖:

npm install

启动开发服务器:

npm run dev

构建生产版本:

npm run build

登录信息

在演示环境中,可以使用以下凭据登录:

  • 账号:admin
  • 密码:admin123

技术栈

  • Vue 3
  • Element Plus
  • JS-MD5
  • Vite

代码规范

  • 使用JSDoc进行代码注释
  • 使用组合式API (Composition API)
  • 遵循Vue 3的最佳实践

About

前端:后台管理系统

Language
Vue85.7%
JavaScript11.3%
CSS1.2%
Markdown1%
Others0.8%