peanut/happy-life-star

Fork 0

Files

T

peanut 0016453f20 增加后台管理模块

2025-10-27 23:57:31 +08:00

6.5 KiB

Raw Blame History

管理后台前端开发指南

项目概述

情绪博物馆管理后台是一个基于 Vue 3 + TypeScript + Element Plus 的现代化管理系统，用于管理系统的管理员、用户和数据。

快速开始

1. 安装依赖

cd web-admin
npm install

2. 启动开发服务器

npm run dev

访问 http://localhost:5174

3. 登录系统

使用默认账号登录：

账号: admin
密码: admin123

项目结构

web-admin/
├── src/
│   ├── api/                    # API接口定义
│   │   ├── admin.ts           # 管理员API
│   │   ├── auth.ts            # 认证API
│   │   └── user.ts            # 用户API
│   ├── layouts/               # 布局组件
│   │   └── Layout.vue         # 主布局
│   ├── router/                # 路由配置
│   │   └── index.ts           # 路由定义
│   ├── stores/                # 状态管理
│   │   ├── index.ts           # Pinia实例
│   │   └── admin.ts           # 管理员状态
│   ├── types/                 # TypeScript类型
│   │   ├── admin.ts           # 管理员类型
│   │   ├── common.ts          # 通用类型
│   │   ├── env.d.ts           # 环境变量类型
│   │   └── user.ts            # 用户类型
│   ├── utils/                 # 工具函数
│   │   ├── request.ts         # Axios封装
│   │   ├── storage.ts         # 本地存储
│   │   └── validate.ts        # 表单验证
│   ├── views/                 # 页面组件
│   │   ├── admin/             # 管理员管理
│   │   │   └── AdminList.vue
│   │   ├── user/              # 用户管理
│   │   │   └── UserList.vue
│   │   ├── Dashboard.vue      # 仪表盘
│   │   ├── Login.vue          # 登录页
│   │   └── NotFound.vue       # 404页面
│   ├── App.vue                # 根组件
│   └── main.ts                # 入口文件
├── .env.development           # 开发环境配置
├── .env.production            # 生产环境配置
├── index.html                 # HTML模板
├── package.json               # 项目配置
├── tsconfig.json              # TypeScript配置
└── vite.config.ts             # Vite配置

核心功能

1. 登录认证

登录流程：

用户输入账号密码
调用登录API
保存Token到localStorage
保存管理员信息到Pinia
跳转到仪表盘

代码示例：

// stores/admin.ts
const login = async (loginForm: AdminLoginRequest) => {
  const res = await loginApi(loginForm)
  token.value = res.data.accessToken
  adminInfo.value = res.data.adminInfo
  localStorage.setItem('adminToken', res.data.accessToken)
  router.push('/')
}

2. 路由守卫

所有路由都需要登录才能访问（除了登录页）：

// router/index.ts
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('adminToken')
  
  if (to.path === '/login') {
    if (token) {
      next('/')
    } else {
      next()
    }
  } else {
    if (token) {
      next()
    } else {
      next('/login')
    }
  }
})

3. API请求拦截

自动添加Token到请求头：

// utils/request.ts
service.interceptors.request.use((config) => {
  const token = localStorage.getItem('adminToken')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

4. 响应拦截

统一处理错误：

service.interceptors.response.use(
  (response) => {
    const res = response.data
    if (res.code !== 200) {
      ElMessage.error(res.message)
      if (res.code === 401) {
        router.push('/login')
      }
      return Promise.reject(new Error(res.message))
    }
    return res
  },
  (error) => {
    // 错误处理
  }
)

开发规范

1. 命名规范

组件名：PascalCase (如 AdminList.vue)
文件名：kebab-case (如 admin-list.ts)
变量名：camelCase (如 adminInfo)
常量名：UPPER_CASE (如 API_BASE_URL)

2. 类型定义

所有API接口都应该有类型定义：

// types/admin.ts
export interface Admin {
  id: string
  account: string
  username: string
  // ...
}

export interface AdminPageRequest {
  current: number
  size: number
  // ...
}

3. API调用

使用封装的request工具：

// api/admin.ts
export function getAdminPage(params: AdminPageRequest) {
  return request<ApiResponse<PageResult<Admin>>>({
    url: '/admin/page',
    method: 'get',
    params
  })
}

4. 状态管理

使用Pinia进行状态管理：

// stores/admin.ts
export const useAdminStore = defineStore('admin', () => {
  const token = ref<string>('')
  const adminInfo = ref<Admin | null>(null)
  
  const login = async (loginForm: AdminLoginRequest) => {
    // ...
  }
  
  return { token, adminInfo, login }
})

常见问题

1. Token过期处理

Token过期时会自动跳转到登录页，用户需要重新登录。

2. 跨域问题

开发环境通过Vite代理解决：

// vite.config.ts
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true
    }
  }
}

3. 构建优化

生产环境构建时会自动进行代码分割和压缩：

npm run build

部署

1. 构建

npm run build

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

3. 环境变量

生产环境需要配置正确的API地址：

VITE_APP_BASE_API=https://api.emotion-museum.com

扩展功能

添加新页面

在 views 目录创建新组件
在 router/index.ts 添加路由
在布局组件的菜单中添加入口

添加新API

在 types 目录定义类型
在 api 目录创建API函数
在组件中调用API

添加新状态

在 stores 目录创建新的store
在组件中使用store

技术支持

如有问题，请查看：

6.5 KiB Raw Blame History