基于Vue的通用后台管理系统设计与实现
来源:用户上传
作者:姜全坤
摘 要：后台管理系统作为Web应用不可或缺的一部分，使Web应用可以方便、快捷地管理内容。从零开始开发一个后台管理系统往往需要投入大量的人力和物力。为此，文章使用Vue框架实现了一个通用的后台管理系统，该系统具有后台管理的一般功能，开发人员可以在该系统的基础上进行二次开发，显著提高了开发效率。
关键词：后台管理系统;Vue框架;Mock请求拦截
中图分类号：TP311 文献标识码：A文章编号：2096-4706（2022）08-0033-04
Design and Implementation of a Universal Background Management System Based on Vue
JIANG Quankun
（Guangdong Technology College， Zhaoqing 526100， China）
Abstract： As an indispensable part of Web application， background management system enables Web application to manage content conveniently and quickly. Developing a background management system from scratch often requires a lot of human and material resources. Therefore， this paper uses Vue framework to implement a general background management system. This system has the general functions of background management. Developers can carry out secondary development on the basis of this system， which significantly improves the development efficiency.
Keywords： background management system; Vue framework; Mock request interception
0 引 言
在互联网如此发达的今天，Web应用得到了很好的发展。人们在日常使用电脑的过程中访问各种各页的网页，在网上浏览前沿知识都离不开互联网和Web应用的发展。每一个Web应用通常都有前台和后台两套系统，前台系统用于向用户展示信息（也就是用粼阡览器上看到的网页内容），后台系统可供网站管理人员管理网站内容（例如，博客后台系统[1]可以方便作者编辑和删除博客）。然而，后台管理系统的开发往往是耗时费力的，开发人员需要进行需求分析、系统设计、系统实现，系统测试等。不同后台管理系统之间有很多共同点，但是一个后台管理系统的开发又不能直接照搬其他后台管理系统的模式。因此，开发一个规范、扩展性好的通用后台管理系统是十分有必要的。
1 相关技术介绍
1.1 Vue.js
Vue.js[2]是基于MVVM模式开发的，主要用于构建用户界面，可以显著提高开发人员的开发效率。它具有模板语法、双向数据绑定、计算属性、监听器、条件渲染、列表渲染、事件处理、表单绑定、组件化应用等诸多特性，使开发人员可以将工作重点集中在系统设计上面，从而实现快速开发。
1.2 Element UI
Element UI[3]是一款前端组件库，它为开发人员提供了一种高效便捷的构建前端界面的方式。Element基于Vue开发，支持Vue的许多新特性，是前端开发人员必须掌握的一个组件库。Element具有丰富的组件库和图标库，每个组件都有自己对应的属性和事件，开发人员只需根据组件的要求提供相应的属性和函数即可使用组件。
1.3 Mock.js
Mock.js[4]是一个生成随机数据和链接Ajax请求的库，它在提倡前后端分离的今天非常实用。Mock.js可以模拟后台数据并拦截前端发起的请求，还可以根据设定返回给前端相应的数据，这为前端工程师提供了极大的便利。
2 系统需求分析
通用后台管理系统要想做到通用，就必须实现绝大多数后台管理系统所具备的功能。本文系统提供了后台管理基本布局，该布局主要由左右两部分组成，左侧是导航菜单，它提供了首页、通用一级菜单和通用二级菜单，开发人员可根据需求添加所需菜单;右侧又分为上下两部分：右侧上面部分为头部信息，该区域左侧有一个菜单显示与隐藏按钮，它可以控制左侧菜单的隐藏与显示，中间是导航面包屑，它可以告知用户当前所在的位置，右侧是用户头像显示区域，用户点击用户头像可展示下拉菜单。右侧下面部分为页面标签和页面内容区域，页面标签位置会显示用户已打开的页面标签，用户可以关闭某些已打开的标签。页面主要内容区域会根据路由显示不同的页面。系统框架图如图1所示。
3 系统总体设计
3.1 系统主要配置
系统主要配置主要集中在main.js文件中，在这里需要引入element-ui和与其对应的样式文件，需要引入mock.js来拦截Ajax请求，需要引入vue-router路由控制页面的跳转，还需要引入vuex管理相应数据以供不同组件之间通信。其核心代码为：
nlc202208231551
转载注明来源:https://www.xzbu.com/1/view-15438103.htm
