前言：

做后端开发的同学都知道，越是正规的公司，分工越是专业。一般后端开发不太会被安排一些前端开发任务。尽管如此，不代表说后端同学一点前端也做。

对于一些内部时候、对样式不太在意的“管理系统”（各种 admin/government/background）。套路化、模板化的前端，有很大概率是后端来做的。因此后端同学也有必要掌握一些前端技术，不求多专业，够用就好。

后台管理系统几个时代

就笔者而言，后台管理系统的前端开发，基本上经历了4个阶段。

这4个阶段基本跟前端框架的进展也是吻合的。4个阶段如下：

l 石器时代

后端使用JSP、Freemarker、Velocity等模板引擎，基于内置or自定义标签。后端直接渲染出前端页面。

缺点有很多：后端一个变量写不对，整个页面无法出现。语法十分不方便阅读，各种转义符经常看的眼花缭乱，从而也很难维护。这个阶段很快就过去。

l 青铜时代

出现了一些基本是后端才会用的js ui框架。如 jquery-ui 、easyui / miniui 、extjs等。

自带了很多组件。前端使用的 table、form、pager等组件都是现成的。直接引用和组装即可。

这时候基本不需要后端的标签了，jsp仍然在使用，但也仅仅是作为一个构架，将js、css等资源引入。其他所有操作都是 js + ajax + json 与后端交互。无论是开发、维护效率都大大提升

l 蒸汽时代

这个时代基本跟上一个时代差别不大，最大的区别是出现了 bootstrap 这个基于栅格的css框架。有大量的jquery插件与之配合，同时出现了大量的模板，几乎一统天下。

l 现在

前后端分离的趋势不可阻挡，后端的管理系统也有部分已经是基于vue或者react开发。

管理系统模板

前后端分离框架3足鼎立。Vue、AngularJS、React各有拥趸，国内vue用的比较多，相对来说vue也最容易上手，所以很适合后端开发快速学习。

Vue 本身的ui框架，国内饿了么开源的 element-ui 用户众多，因此开发vue选择element-ui是很好的选择。

今日推荐的框架，就是基于element-ui进行的二次封装。直接提供了一套解决方案。

我们来看一下。

项目地址：

https://panjiachen.github.io/vue-element-admin-site/zh/

项目预览：

项目特点：

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

l 主流技术栈

所谓主流，就是说即便是我们自己搭建，也大概率引入相同的大部分依赖。

l 封装简练

没有重度耦合太多自定义的、没有源码的未知组件，用法也是主流用法，看了之后会容易二次修改

l 组件丰富

权限、主题、国际化、编辑器、表格、Error页面、图表等尽可能集成了。减少你的开发量。

功能截图：

图表：

图标：

整合了编辑器：

动态表格：

EXCEL导出：

换肤：