当前位置：首页 > VUE

vue后端管理页面实现

2026-02-21 08:49:24VUE

Vue 后端管理页面实现

后端管理页面通常需要包含用户管理、权限控制、数据展示和操作等功能。以下是实现 Vue 后端管理页面的关键步骤和方法。

项目初始化与配置

使用 Vue CLI 或 Vite 初始化项目。Vue CLI 适合传统项目，Vite 提供更快的开发体验。

npm init vue@latest admin-dashboard

安装必要的依赖，如 Vue Router、Pinia（状态管理）、Axios（HTTP 请求）和 UI 框架（如 Element Plus 或 Ant Design Vue）。

npm install vue-router pinia axios element-plus

路由与权限控制

配置 Vue Router 实现页面导航和动态路由。权限控制可以通过路由守卫实现。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/login', component: () => import('../views/Login.vue') },
  { path: '/dashboard', component: () => import('../views/Dashboard.vue'), meta: { requiresAuth: true } },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !localStorage.getItem('token')) {
    next('/login');
  } else {
    next();
  }
});

export default router;

状态管理

使用 Pinia 管理全局状态，如用户信息和权限数据。

// stores/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null,
    token: localStorage.getItem('token') || '',
  }),
  actions: {
    setUser(user) {
      this.user = user;
    },
    setToken(token) {
      this.token = token;
      localStorage.setItem('token', token);
    },
    logout() {
      this.user = null;
      this.token = '';
      localStorage.removeItem('token');
    },
  },
});

数据请求与 API 封装

封装 Axios 实例，统一处理请求和响应。

// api/request.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
});

instance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    if (error.response.status === 401) {
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

export default instance;

UI 组件与布局

使用 UI 框架快速搭建页面布局。以 Element Plus 为例，实现侧边栏和顶部导航。

<!-- App.vue -->
<template>
  <el-container>
    <el-aside width="200px">
      <el-menu router>
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/dashboard">仪表盘</el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <span>后台管理系统</span>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

数据表格与表单

实现数据展示和操作功能，如表格和表单。

<!-- views/Dashboard.vue -->
<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="name" label="名称" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" title="编辑">
      <el-form :model="form">
        <el-form-item label="名称">
          <el-input v-model="form.name" />
        </el-form-item>
      </el-form>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button @click="handleSubmit">提交</el-button>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import api from '../api/request';

const tableData = ref([]);
const dialogVisible = ref(false);
const form = ref({ id: '', name: '' });

const fetchData = async () => {
  const res = await api.get('/data');
  tableData.value = res.data;
};

const handleEdit = (row) => {
  form.value = { ...row };
  dialogVisible.value = true;
};

const handleSubmit = async () => {
  await api.put(`/data/${form.value.id}`, form.value);
  dialogVisible.value = false;
  fetchData();
};

fetchData();
</script>

权限管理与动态菜单

根据用户角色动态生成菜单，实现权限控制。

// utils/auth.js
export const checkPermission = (roles, requiredRoles) => {
  return roles.some(role => requiredRoles.includes(role));
};

在路由配置中定义角色权限。

// router/index.js
{
  path: '/admin',
  component: () => import('../views/Admin.vue'),
  meta: { requiresAuth: true, roles: ['admin'] },
}

在导航守卫中检查权限。

router.beforeEach((to, from, next) => {
  const userStore = useUserStore();
  if (to.meta.requiresAuth && !userStore.token) {
    next('/login');
  } else if (to.meta.roles && !checkPermission(userStore.roles, to.meta.roles)) {
    next('/403');
  } else {
    next();
  }
});