php的e框架EAdmin 开箱即用的后台UI框架

简介

EAdmin，是 suruibuas 在 Github 上开源的后台UI框架，项目位于 https://github.com/suruibuas/eadmin，并在码云上有镜像 https://gitee.com/suruibuas/eadmin。
EAdmin 是一个开箱即用的后台UI框架，无需学习前端框架，无需打包环境，一行代码即可开始利用，文件利用异步加载，加载高效快速，且学习门槛低，半小时即可上手。

EAdmin文档

php的e框架EAdmin 开箱即用的后台UI框架 Webpack

安装

EAdmin 开箱即用，无需安装，在 HTML 文件中引用发布的 CSS 样式文件，以及Javascript 文件即可，然后进行框架配置后，就可以利用对应的组件进行开拓。

<link href="./css/eadmin.min.css" rel="stylesheet"><script src="./js/core/al.load.min.js" init="./js/core/al.init.min.js"></script>

本地开拓也可以利用 gulp 进走运行：

git clone https://github.com/suruibuas/eadmin.gitnpm installgulp run

Github项目

示例

EAdmin 利用配置化的办法，在入口文件进行框架的配置，办法可以参考项目中 dist/index.html，主配置包括：

conf：全局配置，包括主页、弹窗默认高度、默认时长等参数framework：加载的依赖库，包括 jquery、axios 等，可根据自身需求选择data：全局数据，可以在框架全局利用的数据lib：加载的组件库，包括 form、button、chart 等，可以按需加载

EAdmin 的主色调以暗色为主，同时前景色调较为鲜艳，符合盛行的大数据平台的配色需求：

EAdmin颜色

最基本的UI组件之一便是按钮，EAdmin供应了都雅的按钮，包括不同的尺寸、图标和状态等：

<button>默认按钮</button><button class="middle">中等按钮</button><button class="highlight">高亮按钮</button><button disabled>禁用按钮</button><button data-icon="fa-cog">配置</button><button data-loading="上报中..." data-do="updateData"> 上报数据</button>

EAdmin按钮

可以很方便地配置回调函数：

<script> // 详细的实行方法，按钮会吸收到一个btn参数，便是被点击按钮的工具 Method.updateData = (btn) => { // 业务处理 setTimeout(() => { // 重置按钮 Eadmin.button.reset(btn); // 提醒，根据详细业务来 Eadmin.message.success({ content : '数据上报成功' }); }, 1000); }</script>

EAdmin 也供应了丰富的表单组件，包括文本框、文本域、单选框、文件上传、穿梭框、评分等。
以文本框为例，包括了状态、图标、数字、前后缀等：

EAdmin文本框

EAdmin 还供应了基于 quill 编辑器封装的富文本编辑器：

EAdmin文本编辑器

表格当然也是不可短缺的：

EAdmin表格

表格通过 EAdmin.table 进行初始化，在配置中进行数据源、按钮、分页等配置：

<div id="p1"></div><script>(function(){ Eadmin.table('#p1', { // 表格配置 config : { // 按钮工具 button : [ ... ], // 分页配置，设置为 false 则表示不须要分页 page : { ... }, // 表格字段（列）配置 column : [ ... ], // 数据源接口地址 data : 'table.php' } });})();</script>

除了基本的UI组件以外，EAdmin还供应了一些繁芜的组合组件，可以利用不同场景利用：

EAdmin自定义分页

总结

EAdmin 作为一个后台UI框架，开箱即用，无需配置环境，且最大程度的供应了组件逻辑的实现，利用配置化的方法，就能实现插件的引入、组件的创建、以及数据的通报等，利用起来对付后端开拓职员比较友好。
作为一个精心打磨的UI框架，EAdmin 目前仍处于生动开拓阶段，项目作者掩护积极性高，且代码有较大的参考代价，值得前端开拓职员进行学习参考。