el-admin框架简单解析-快速入门（前端部分）

目录

• • el-admin 简单了解
  • 使用框架的四大步
  • el-admin前端部分解析
  • • 前端Vue目录结构
    • • Layout 布局
      • mixins 混入模式
      • router 路由
      • store 状态管理
      • utils 工具包

el-admin 简单了解

一个简单且易上手的 Spring boot 后台管理框架。我们可以通过这个框架快速的构建出一个前端搭载element-ui组件库，带有权限控制的后台管理系统。
前台页面千变万化，需求不同展现出的效果也不同，我们很难去找出一套模板供大家去参考使用，但后台管理系统则与之不同，他们的需求有很多都是存在共性的。
就像最常见的几种管理模式

• 多级角色进行层级管理
• 基于权限的新增、删除、修改等操作
• 基于角色的动态路由展示
• 岗位管理
• 部门管理
• …
  后台管控系统中常见的需求el-admin都可满足详情可以查看官方文档，也可以查看在线预览el-admin的效果预览地址(https://el-admin.xin/),账号密码：admin / 123456

官网：https://el-admin.vip/
前段代码（gitHub）：https://github/elunez/eladmin-web
后端代码（gitHub）：https://github/elunez/eladmin

使用框架的四大步

使用一个框架，

• 第一步：明白为何选择这个框架来完成此次项目（框架帮我们做了什么）
• 第二步：框架的技术栈（要提前确认自己是否缺少那一部分，是否会影响到此次项目，影响的话要提前查补缺漏）
• 第三步：根据官方文档、视频、博客敲一点小例子（快速入门），这里更建议去官方文档进行学习
• 第四步：重点再研究一下自己这次项目要接触到的技术点，然后扒一扒源码就可以开始码了。

el-admin前端部分解析

这里我默认的认为大家都至少已经进行到 使用框架的四大步中的第三步，意思就是简单讲官方文档粗略的过了一遍。若没有，现在立刻马上去看官方文档，官方文档中还是有很多的东西，若是能在那里吃透的话，尽量还是看官网的来。

下边我要介绍的是一些我做项目中自己的理解，可以帮助大家更快的去上手这个框架，以及这个框架中我们遇到的一些问题，希望能给大家一些帮助。

前端Vue目录结构

可以看出，其实el-admin的前段Vue目录结构与寻常的Vue项目目录结构并没有太大的差别。其中较为特别的地方我来简单介绍下

Layout 布局

el-admin前段部分有写好的界面，页面部分的布局风格就是通过layout模块进行控制的，这部分控制的就是界面上的侧边栏以及主体部分的布局，一般是不会对其进行更改。

mixins 混入模式

这里要先提及一下Vue中的mixin（混入），简单介绍来说，相当于Java中的extends ，继承。

简单的小例子：

一个Vue组件（组件1）去混入另外一个Vue组件（组件2），相当于这个组件（组件1）继承了被混入组件（组件2）的属性。其中的data域中的不同名属性直接都保留，同名属性取这个组件（组件1）的值，methods域规则同data域，钩子函数则二者的都会被执行，但被混入组件（组件2）的钩子函数会先执行，具体的可以查看Vue.js中mixin的官方介绍.

el-admin中的mixins
框架中mixins主要是用于一个重要的组件–CRUD组件的支持，CRUD具体内容我会在components部分介绍

router 路由

idnex.js

我们都知道，el-admin有一个特性就是通过动态路由实现不同页面的访问权限控制。

其中大致功能我都标注在图中了，函数的具体内容逻辑也比较简单，这里就不在给大家赘述了，打击自己拉过代码自己看一下就能明白。
其中有一点要提一下，框架这些界面是都要登录后得到token后才能访问的，但一些页面 如“登录页”的访问是不需要token的 ，这类界面添加到 whiteList 数组中即可（当然要提前在router.js中配置好）

rouer.js

其中配置了一些静态路由， 类似个人信息，首页，登录页等等（不需要进行访问权限控制的）的页面路由。这里也不在赘述。

store 状态管理

只是vuex 很基本一些用法，这里要介绍的框架中的一些配置。

我们这次项目只用到了其中的 user.js 和 permission.js 其中存储这用户用户登录后API端返回给前端的用户基本数据，以及当前登录人的身份（permission），其中包含这用户的登录逻辑，具体的感兴趣的可以自行查看

具体使用，一定会用用到的部分，通过 getter.js可以看出

其中的用户信息，用户身份，是我们开发中经常要用到的属性，例如一些页面内的按钮级的权限管理，就需要我们前端开发者比对这些信息进行特定的处理（v-if）。

utils 工具包

里面有一些框架自带的工具方法，但不一定符合我们的业务需求，大家可以根据需要进行更改，为了考虑到小白下面将utils中的一些常见工具简单讲解一下

auth.js

这里的授权管理，指的是登录时后端生成的token的管理函数，getToken、setToken和removeToken。

clipboard.js

剪切板函数 ，底层实现也是实现了web-api的一个，能力有限，博主没有去深究，大家有兴趣可以自己扒一扒源码。

datetime.js

对于日期操作的一些常用函数，也没啥好说的用兴趣的可以去其他地方了解一下.具体用法去代码里一看就明白了，这里也不赘述

get-page-title

这个是获取页面标题的方法，没找到框架中哪里调用了，因为觉得也没什么用，就没去过多研究，若是有大大找打哪里使用了，告诉一下本菜鸡，让俺也去瞅瞅。

index.js
这里面的方法相对来说就比较常用了，我将花费一定的篇幅去给大家讲解下这里面都帮我们写好了那些常用的函数工具。

• parseTime(time, cFormat)：将时间解析为字符串，传闯入data和格式，返回相应格式的数据
• formatTime(time, option) ：格式化时间，和parseTime是不同的，这个方法可以将时间具体格式成 ‘刚刚’、‘一天前’、‘一小时前’…等等等
• getQueryObject(url)：可以获取url路径上的参数列表，封装成一个JS对象返回给你。例如https://mp.csdn/console/article?spm=111&id=222 ，返回的object{spm：111 ，id：222}
• byteLength(str)：返回字符串的字节长度
• cleanArray(actual)：这个还是比较常用的，可以帮助我们将数值中的空值给清除掉
• param(json)：这个就更常用了显现是调用了上边的cleanArray，清除jason中的空值，
• param2Obj(url)：与getQueryObject的区别在于，这个是返回的一个字符串对象（JSON对象）
• html2Text(val)：就像函数名所写的那样，将一个节点转化为 html代码。
• objectMerge(target, source)：合并两个对象，相同字段保留source中的值。
• toggleClass(element, className)：切换一个类名，类存在则删去，不存在则添上。
• debounce(func, wait, immediate)：防抖函数，防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
• deepClone(source)：deep深度拷贝，这只是deep copy的一个简单版本，有很多边盒缺陷如果你想使用一个完美的深拷贝，可以使用lodash的.cloneDeep
• uniqueArr：根据传入的数组，生成一个无重复值的数组（内部通过Set集合实现）
• createUniqueString()：生成一个唯一码，类似uuid
• hasClass(ele, cls)：检查节点是否具有该类。
• addClass(ele, cls)：给节点添加该类
• removeClass(ele, cls)：删除该类
• regEmail(email)：对邮箱进行加密，例：123456789@163 =>123****@qq
• regMobile(mobile):对手机号进行加密，例：15500001234 => 155****1234
• downloadFile(obj, name, suffix)：下载文件，原理帮助我们生成一个不显示的a连接，然后触发点击事件，然后删除a连接。

open-window.js

帮助我们生成一个新的窗口。

permission.js

涉及到了el-admin的权限管理 ，其中只有一个方法**checkPermission(value)**返回值为Boolean