返回

用 Vue 和 ElementUI 构建一个后台管理系统：一步一步指南

前端

导言

ElementUI 是一个基于 Vue.js 的强大 UI 框架，广泛用于构建现代化、响应式且美观的 Web 应用程序。它的广泛认可使其成为构建后台管理系统的理想选择。

在本指南中，我们将逐步指导您使用 Vue 和 ElementUI 从头开始创建一个功能齐全的后台管理系统。我们将涵盖以下主题：

  • 安装和设置 Vue 和 ElementUI
  • 创建和管理数据模型
  • 使用 CRUD 操作处理数据
  • 构建可重用的组件
  • 实施路由和导航
  • 确保代码的健壮性和可维护性

开始之前

在开始之前，请确保您已在本地系统上安装以下内容：

  • Node.js 和 npm
  • Vue CLI
  • ElementUI

如果您还没有安装这些内容，请按照以下链接中的说明进行操作：

设置项目

首先，使用 Vue CLI 创建一个新的 Vue.js 项目：

vue create my-admin

导航到新创建的项目目录并安装 ElementUI：

cd my-admin
npm install element-ui

在 main.js 文件中，导入 ElementUI 并将其作为 Vue.js 的全局组件注册：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

构建数据模型

接下来，我们将创建表示管理系统中数据的模型。对于本教程，我们将创建一个简单的待办事项应用程序，其中包含 id、title 和 completed 字段。

在 src 目录中创建一个 models 目录，并在其中创建 Todo.js 文件：

export class Todo {
  constructor(id, title, completed) {
    this.id = id
    this.title = title
    this.completed = completed
  }
}

使用 CRUD 操作处理数据

现在，我们将使用 ElementUI 的表格组件和表单组件来构建一个用户界面，允许用户创建、读取、更新和删除待办事项。

创建

在 src/views 目录中创建一个 Todos.vue 文件：

<template>
  <el-table :data="todos" stripe>
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="title" label="Title"></el-table-column>
    <el-table-column prop="completed" label="Completed">
      <template slot-scope="scope">
        <el-switch :active-value="true" :inactive-value="false" v-model="scope.row.completed"></el-switch>
      </template>
    </el-table-column>
    <el-table-column>
      <template slot-scope="scope">
        <el-button type="primary" @click="handleEdit(scope.row)">Edit</el-button>
        <el-button type="danger" @click="handleDelete(scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-form :model="newTodo" label-width="120px">
    <el-form-item label="Title">
      <el-input v-model="newTodo.title"></el-input>
    </el-form-item>
    <el-form-item label="Completed">
      <el-switch v-model="newTodo.completed"></el-switch>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleCreate">Create</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { Todo } from '@/models/Todo'

export default {
  data() {
    return {
      todos: [],
      newTodo: new Todo(null, '', false)
    }
  },
  methods: {
    handleCreate() {
      // ...
    },
    handleEdit() {
      // ...
    },
    handleDelete() {
      // ...
    }
  }
}
</script>

读取

在 src/router/index.js 中，配置 Vue Router 以渲染 Todos.vue 组件：

const routes = [
  {
    path: '/todos',
    name: 'Todos',
    component: Todos
  }
]

然后，在 App.vue 文件中添加一个导航链接：

<template>
  <div id="app">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Vue Admin</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <router-link class="nav-link" to="/todos">Todos</router-link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <router-view></router-view>
  </div>
</template>

更新

在 Todos.vue 中，为 handleEdit 方法添加代码以更新待办事项：

handleEdit(todo) {
  // ...
}

删除

在 Todos.vue 中，为 handleDelete 方法添加代码以删除待办事项：

handleDelete(todo) {
  // ...
}

构建可重用的组件

为了提高代码的可重用性和可维护性，我们将创建几个可重用的组件。

表格组件

在 src/components 目录中创建一个 Table.vue 文件：

<template>
  <el-table :data="data" stripe>
    <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column>
    <slot></slot>
  </el-table>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    }
  }
}
</script>

表单组件

在 src/components 目录中创建一个 Form.vue 文件：

<template>
  <el-form :model="model" :label-width="labelWidth">
    <slot></slot>
  </el-form>
</template>

<script>
export default {
  props: {
    model: {
      type: Object,
      required: true
    },
    labelWidth: {
      type: String,
      default: '120px'
    }
  }
}
</script>

使用可重用的组件

在 Todos.vue 中，使用 Table 和 Form 组件：

<template>
  <Table :data="todos" :columns="tableColumns">
    <template slot-scope="scope">
      <el-button type="primary" @click="handleEdit(scope.row)">Edit</el-button>
      <el-button type="danger" @click="handleDelete(scope.row)">Delete</el-button>
    </template>
  </Table>

  <Form :model="newTodo" label-width="120px">
    <el-form-item label="Title">
      <el-input v-model="newTodo.title"></el-input>
    </el-form-item>
    <el-form-item label="