使用 Vue 2.x + Element UI 搭建后台管理系统详解

引言

Vue.js 是一个非常流行的前端框架,而 Element UI 是基于 Vue 2.x 的一套完整的 UI 组件库,非常适合用来构建企业级的后台管理系统。本文将详细介绍如何使用 Vue 2.x 和 Element UI 来搭建一个后台管理系统,包括项目初始化、路由配置、状态管理、权限验证等关键步骤。

vue2后台管理项目源码合集下载地址见最下方

1. 环境准备

确保你的开发环境中已安装 Node.js 和 npm。接下来,我们将使用 Vue CLI 3.x 来创建一个新的 Vue 项目。

Bash

1npm install -g @vue/cli
2. 创建项目

使用 Vue CLI 创建一个新的 Vue 项目,并选择手动安装特性。

Bash

1vue create backend-admin
2cd backend-admin

在项目初始化过程中,选择以下特性:

  • Babel
  • Router
  • Vuex
  • Linter (可选)
  • Unit Testing (可选)
3. 安装 Element UI

Element UI 是一套基于 Vue 2.x 的桌面端组件库,非常适合用来构建后台管理系统。

Bash

1npm install element-ui --save

接着,在 main.js 文件中引入 Element UI 并使用它。

Javascript

1import Vue from 'vue'
2import App from './App.vue'
3import router from './router'
4import store from './store'
5import ElementUI from 'element-ui';
6import 'element-ui/lib/theme-chalk/index.css';
7
8Vue.use(ElementUI);
9
10Vue.config.productionTip = false
11
12new Vue({
13  router,
14  store,
15  render: h => h(App)
16}).$mount('#app')
4. 路由配置

创建路由配置文件 src/router/index.js

Javascript

1import Vue from 'vue'
2import Router from 'vue-router'
3import Home from '../views/Home.vue'
4import Login from '../views/Login.vue'
5
6Vue.use(Router)
7
8export default new Router({
9  mode: 'history',
10  base: process.env.BASE_URL,
11  routes: [
12    {
13      path: '/',
14      name: 'home',
15      component: Home
16    },
17    {
18      path: '/login',
19      name: 'login',
20      component: Login
21    }
22  ]
23})
5. 状态管理(Vuex)

创建 Vuex store 文件 src/store/index.js

Javascript

1import Vue from 'vue'
2import Vuex from 'vuex'
3
4Vue.use(Vuex)
5
6export default new Vuex.Store({
7  state: {
8    token: '',
9    user: null,
10    permissions: []
11  },
12  mutations: {
13    SET_TOKEN: (state, token) => {
14      state.token = token
15    },
16    SET_USER: (state, user) => {
17      state.user = user
18    },
19    SET_PERMISSIONS: (state, permissions) => {
20      state.permissions = permissions
21    }
22  },
23  actions: {
24    login({ commit }, userInfo) {
25      return new Promise((resolve, reject) => {
26        // 这里应该是发送请求到后端登录接口
27        // 假设登录成功,返回一个 token
28        const token = 'fake-token'
29        commit('SET_TOKEN', token)
30        resolve()
31      })
32    }
33  },
34  getters: {
35    isLogged: state => !!state.token,
36    currentUser: state => state.user,
37    currentPermissions: state => state.permissions
38  }
39})
6. 登录页面

创建登录页面 src/views/Login.vue

Javascript

1<template>
2  <div>
3    <el-form :model="form" status-icon :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm">
4      <el-form-item label="用户名" prop="username">
5        <el-input type="text" v-model="form.username" autocomplete="off"></el-input>
6      </el-form-item>
7      <el-form-item label="密码" prop="password">
8        <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
9      </el-form-item>
10      <el-form-item>
11        <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
12        <el-button @click="resetForm('loginForm')">重置</el-button>
13      </el-form-item>
14    </el-form>
15  </div>
16</template>
17
18<script>
19export default {
20  data() {
21    return {
22      form: {
23        username: '',
24        password: ''
25      },
26      rules: {
27        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
28        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
29      }
30    };
31  },
32  methods: {
33    submitForm(formName) {
34      this.$refs[formName].validate(valid => {
35        if (valid) {
36          this.$store.dispatch('login', this.form).then(() => {
37            this.$router.push('/');
38          });
39        } else {
40          console.log('error submit!!');
41          return false;
42        }
43      });
44    },
45    resetForm(formName) {
46      this.$refs[formName].resetFields();
47    }
48  }
49};
50</script>
7. 主布局

创建一个主布局组件 src/components/Layout.vue,用于包含导航栏、侧边栏和主要内容区域。

Javascript

1<template>
2  <div id="app">
3    <el-container>
4      <el-header>
5        <el-menu
6          mode="horizontal"
7          background-color="#545c64"
8          text-color="#fff"
9          active-text-color="#ffd04b"
10        >
11          <el-menu-item index="/">首页</el-menu-item>
12          <el-menu-item index="/users">用户管理</el-menu-item>
13          <!-- 更多菜单项 -->
14        </el-menu>
15      </el-header>
16      <el-main>
17        <router-view></router-view>
18      </el-main>
19    </el-container>
20  </div>
21</template>
22
23<script>
24export default {
25  name: 'Layout'
26}
27</script>
8. 用户管理页面

创建一个用户管理页面 src/views/Users.vue

Javascript

1<template>
2  <div>
3    <el-table :data="tableData">
4      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
5      <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
6      <el-table-column prop="role" label="角色"></el-table-column>
7    </el-table>
8  </div>
9</template>
10
11<script>
12export default {
13  data() {
14    return {
15      tableData: [
16        { name: 'Tom', email: 'tom@example.com', role: 'Admin' },
17        { name: 'Jerry', email: 'jerry@example.com', role: 'User' }
18      ]
19    };
20  }
21}
22</script>
9. 权限验证

为了实现权限验证,我们需要在路由守卫中添加逻辑。

Javascript

1// src/router/index.js
2import Vue from 'vue'
3import Router from 'vue-router'
4import Home from '../views/Home.vue'
5import Login from '../views/Login.vue'
6import store from '../store'
7
8Vue.use(Router)
9
10const originalPush = Router.prototype.push
11Router.prototype.push = function push(location) {
12  return originalPush.call(this, location).catch(err => err)
13}
14
15export default new Router({
16  mode: 'history',
17  base: process.env.BASE_URL,
18  routes: [
19    {
20      path: '/',
21      name: 'home',
22      component: Home,
23      meta: { requiresAuth: true }
24    },
25    {
26      path: '/login',
27      name: 'login',
28      component: Login
29    }
30  ]
31})
32
33router.beforeEach((to, from, next) => {
34  if (to.matched.some(record => record.meta.requiresAuth)) {
35    if (!store.getters.isLogged) {
36      next({
37        path: '/login',
38        query: { redirect: to.fullPath }
39      })
40    } else {
41      next()
42    }
43  } else {
44    next()
45  }
46})
10. 部署

部署 Vue 项目到服务器。确保服务器能够正确处理静态文件,并配置正确的 publicPath

Javascript

1// vue.config.js
2module.exports = {
3  publicPath: process.env.NODE_ENV === 'production' ? '/backend-admin/' : '/'
4}
结语

至此,你已经成功搭建了一个基于 Vue 2.x 和 Element UI 的后台管理系统。通过本文的指导,你应该能够理解如何创建一个基本的后台管理系统,并具备一定的扩展能力,例如添加更多的功能页面、完善权限管理等。如果你在开发过程中遇到问题,欢迎随时查阅官方文档或社区资源。

vue2后台管理源码合集下载地址:https://download.csdn.net/download/qq_42072014/89488410

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/51436.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高级java每日一道面试题-2024年7月29日-并发篇-什么时候用乐观锁,什么时候用悲观锁?

面试官: 什么时候用乐观锁,什么时候用悲观锁? 我回答: 乐观锁和悲观锁是两种常用的并发控制策略&#xff0c;它们在多线程环境下用于保护共享资源免受并发修改的问题。下面我们将详细讨论这两种锁的使用场景和优缺点&#xff0c;以便你在实际开发中能够根据具体情况做出合适…

快速写一个Makefile

本文主要展示Makefile的基本要素和示例&#xff0c;让读者可以快速写出一个实用的Makefile。 简要说明 Makefile&#xff0c;GNU make命令工具。 书写格式 <target> : <prerequisites> [tab] <commands> <target> 文件名或某操作的名字&#xff0…

uniapp开发精选短视频视频小程序实战笔记20240725,实现顶部轮播图和热门短剧

创建项目 创建项目,叫video_app。 在pages.json里面修改一下标题: 新建search搜索页面和me我的页面。 此时界面预览效果如下: 引入静态资源 主要是static里面的内容,全部复制过来。 配置底部导航栏 pages.json,放到顶层,和全部样式同级: "tabBar&quo…

详细分析 Sql Server查询卡顿的排查方向

目录 前言1. 问题所示2. 原理分析2.1 缺乏索引2.2 表碎片2.3 查询计划缓存2.4 锁和阻塞 3. 总结 前言 本篇为理论知识的分析以及对症下药&#xff0c;前阵子发生过Bug&#xff0c;后通过迁移服务器以及数据库最终才解决问题&#xff0c;但是细想当时可能是因为碎片或者缓存的概…

WEBKIT 通过JavaScript 调用本地,硬件未来之窗OS硬件APP

以酒店为例我们需要调用shen份证读取&#xff0c;采集人脸&#xff0c;门锁写房卡&#xff0c;如何通过浏览器调用 1.通过本地http服务 2.通过webkit模式 这里说政务单位模式的集成 由于篇幅问题&#xff0c;怎么集成webkit就不说了 一、webkkit加载交互本地代码 browser.…

百日筑基第三十四天-JAVA中的强/软/弱/虚引用

百日筑基第三十四天-JAVA中的强/软/弱/虚引用 Java对象的引用被划分为4种级别&#xff0c;分别为强引用、软引用、弱引用以及虚引用。帮助程序更加灵活地控制对象的生命周期和JVM进行垃圾回收。 强引用 强引用是最普遍的引用&#xff0c;一般把一个对象赋给一个引用变量&…

23、Python之面向对象:实例属性、类属性,傻傻分不清楚

引言 在上一篇文章中&#xff0c;我们初步介绍了Python面向对象中类定义的语法&#xff0c;顺带介绍了关于面向对象的系统工程中&#xff0c;所涉及的OOA与OOD。 其实&#xff0c;简单来说&#xff0c;类的定义其实就是面向对象的“封装”特性的体现。我们将分析、设计得到的…

BLE自适应跳频算法详解

前言 &#xff08;1&#xff09;自适应跳频算法是相当的简单&#xff0c;小学生都能够看懂&#xff0c;而且网上已经有相当多的关于自适应跳频算法的介绍。既然如此&#xff0c;为什么我还要写这样一篇博客呢&#xff1f; &#xff08;2&#xff09;原因很简单&#xff0c;我发…

内网横向——利用WMI进行内网横向

文章目录 一、WMI介绍二、常规利用方法三、常见利用工具3.1 wmiexec3.2 Invoke-WmiCommand 四、WMI事件订阅的利用4.1 手动实现4.2 Sharp-WMIEvent 网络拓扑&#xff1a; 攻击机kali IP&#xff1a;192.168.111.0 跳板机win7 IP&#xff1a;192.168.111.128&#xff0c;192.168…

业务记录:处理动态表头的CSV/EXCEL文件

业务描述&#xff1a;传入一个动态表头的CSV文件&#xff0c;解析CSV&#xff0c;并保存入库。 CSV文件的表头是不确定的&#xff0c;即顺序和字段个数不确定&#xff0c;以及表头是中文字段。 例如&#xff1a; 为了顺利解析CSV文件&#xff0c;前端需要传入对应的字段名和顺…

.NET Core 命令大全

目录 1. 基本命令 2. 项目管理命令 3. 测试和调试命令 4. 包管理命令 5. 工具和扩展命令 结语 .NET Core 是一个跨平台、开源的开发平台&#xff0c;用于构建各种应用程序。为了方便开发者进行操作&#xff0c;.NET Core 提供了一系列的命令行工具。这篇文章将详细介绍这…

如何将anaconda的根环境复制到新环境

anaconda将根环境复制到新环境 在Anaconda中&#xff0c;您可以使用conda create命令来复制根环境到一个新的环境。以下是一个命令示例&#xff1a; conda create --name new_env --clone root 这里new_env是新环境的名字&#xff0c;您可以根据需要将其更改为您想要的名字。…

前端数据处理

数据处理 多字段&#xff08;数字类型&#xff09;排序 let arr [{name: jim, math: 85, english: 66, chinese: 36},{name: tom, math: 78, english: 70, chinese: 87},{name: lilei, math: 78, english: 89, chinese: 36},{name: alice, math: 90, english: 20, chinese: …

docker安装mysql遇到的问题

1、3306端口被占用 Error starting userland proxy: listen tcp4 0.0.0.0:3306: bind: address already https://blog.csdn.net/qq_42680327/article/details/136851627 2、mysql已经被占用 docker: Error response from daemon: Conflict. The container name “/mysql“ is…

使用SpringBoot集成Shardingjdbc介绍、应用场景和示例代码

概述 Spring Boot集成Sharding JDBC可以帮助实现MySQL数据库的分库分表操作&#xff0c;使得应用能够轻松处理大规模数据和高并发场景。Sharding JDBC通过透明的分库分表策略&#xff0c;将数据分布到多个数据库实例和数据表中&#xff0c;从而提高数据库的扩展性和性能。 应…

axure制作切换栏--动态面板的应用

先看下效果&#xff1a;点击上面的切换栏 切换到西游记栏目&#xff1a; 切换到水浒传栏目&#xff1a; 上述两个图片比对可以发现&#xff0c;在点击切换栏的时候&#xff0c;里面的内容以及切换栏的下面蓝色横线也会发生对应的变化。这里涉及到两个地方的变化&#xff0c;就…

Golang 知识结构图

总结Go的入门知识结构&#xff0c;如下图所示&#xff1a;

关于map的内存和时间复杂度内存占用

关于map的内存和时间复杂度&#xff08;map尽量别碰暴力遍历&#xff09; 内存占用&#xff1a; map中每个元素包含一个键和一个值。键和值的类型可以是任意可比较的数据类型。 内存占用取决于键和值的大小以及map中元素的数量。 对于固定大小的键和值类型&#xff0c;map的内…

图形/视图结构的三个坐标系

图形/视图结构的三个坐标系分别为视图结构系物理结构系&#xff0c;场景坐标系&#xff0c;图形项坐标系。 本文记录实践三个坐标系及视图与场景坐标转换&#xff0c;通过事件槽来显示出来的过程。 自定义1个View视图组件&#xff0c;其中扩展了鼠标点击、鼠标移动的事件&…

详细介绍仿函数

仿函数&#xff08;Functor&#xff09;是C中的一种可调用对象&#xff08;Callable Object&#xff09;&#xff0c;也是一种重载了函数调用运算符&#xff08;operator()&#xff09;的类或结构体。 仿函数可以像函数一样被调用&#xff0c;可以带参数&#xff0c;可以返回值…