您当前的位置:首页 > 电脑百科 > 程序开发 > 框架

EAdmin - 开箱即用的后台UI框架

时间:2020-09-02 11:50:19  来源:  作者:

现在要写一个后台UI界面,要学的东西越来越多了。各种新的前端框架,让人应接不暇,而一些已有的css框架,需要额外写的组件逻辑又太多。有没有一个能够开箱即用,通过配置化的方式,就能实现美观的后台界面的UI框架呢?EAdmin,这个精心打磨的后台UI框架,或许能为你的开发带来更多便利。

EAdmin - 开箱即用的后台UI框架

EAdmin框架

简介

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

EAdmin - 开箱即用的后台UI框架

EAdmin文档

安装

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.git
npm installgulp run
EAdmin - 开箱即用的后台UI框架

Github项目

示例

EAdmin 使用配置化的方式,在入口文件进行框架的配置,方式可以参考项目中 dist/index.html,主配置包括:

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

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

EAdmin - 开箱即用的后台UI框架

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 - 开箱即用的后台UI框架

EAdmin按钮

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

<script>
    // 具体的执行方法,按钮会接收到一个btn参数,就是被点击按钮的对象
    Method.updateData = (btn) => {
        // 业务处理
        setTimeout(() => {
            // 重置按钮
            Eadmin.button.reset(btn);            // 消息提醒,根据具体业务来
            Eadmin.message.success({                content : '数据上报成功'
            });        }, 1000);
    }</script>

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

<input type="text" placeholder="请输入你需要的内容">
<input type="text" placeholder="请输入你需要的内容" disabled>
<input type="text" placeholder="可以指定文本框的图标" data-icon="fa-user">
<input class="num-input" type="text" value="0" data-min="0" data-max="10" data-step="1">
<!-- 正确 -->
<input data-model="success" type="text" placeholder="输入正确" value="输入正确">
<!-- 错误 -->
<input data-model="error" type="text" placeholder="输入错误" value="输入错误">
<!-- 提示 -->
<input data-model="notice" type="text" placeholder="输入提醒" value="输入提醒">
EAdmin - 开箱即用的后台UI框架

EAdmin文本框

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

EAdmin - 开箱即用的后台UI框架

EAdmin文本编辑器

 

表格当然也是不可缺少的:

EAdmin - 开箱即用的后台UI框架

EAdmin表格

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

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

除了基本的UI组件以外,EAdmin还提供了一些复杂的组合组件,可以使用不同场景使用:

EAdmin - 开箱即用的后台UI框架

EAdmin自定义分页

 

总结

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



Tags:EAdmin   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
相信大家用过不少的后台UI框架,这其中包含了使用了最新前端技术栈的vue-element-admin、基于Bootstrap 4.4框架以及JS / jQuery插件并完全响应的管理模板AdminLTE、具有漂亮...【详细内容】
2020-09-23  Tags: EAdmin  点击:(378)  评论:(0)  加入收藏
现在要写一个后台UI界面,要学的东西越来越多了。各种新的前端框架,让人应接不暇,而一些已有的CSS框架,需要额外写的组件逻辑又太多。有没有一个能够开箱即用,通过配置化的方式,就...【详细内容】
2020-09-02  Tags: EAdmin  点击:(114)  评论:(0)  加入收藏
想要做一个网站,可以选择的建站程序有很多种,如PageAdmin、Discuz、zblog等等。每个建站程序都有它独特的优势,如discuz适合一般的论坛社区,zblog则适用于博客类网站,而PageAdmin...【详细内容】
2019-07-03  Tags: EAdmin  点击:(405)  评论:(0)  加入收藏
▌简易百科推荐
近日只是为了想尽办法为 Flask 实现 Swagger UI 文档功能,基本上要让 Flask 配合 Flasgger, 所以写了篇 Flask 应用集成 Swagger UI 。然而不断的 Google 过程中偶然间发现了...【详细内容】
2021-12-23  Python阿杰    Tags:FastAPI   点击:(6)  评论:(0)  加入收藏
文章目录1、Quartz1.1 引入依赖<dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>quartz</artifactId> <version>2.3.2</version></dependency>...【详细内容】
2021-12-22  java老人头    Tags:框架   点击:(11)  评论:(0)  加入收藏
今天来梳理下 Spring 的整体脉络啦,为后面的文章做个铺垫~后面几篇文章应该会讲讲这些内容啦 Spring AOP 插件 (了好久都忘了 ) 分享下 4ye 在项目中利用 AOP + MybatisPlus 对...【详细内容】
2021-12-07  Java4ye    Tags:Spring   点击:(14)  评论:(0)  加入收藏
&emsp;前面通过入门案例介绍,我们发现在SpringSecurity中如果我们没有使用自定义的登录界面,那么SpringSecurity会给我们提供一个系统登录界面。但真实项目中我们一般都会使用...【详细内容】
2021-12-06  波哥带你学Java    Tags:SpringSecurity   点击:(18)  评论:(0)  加入收藏
React 简介 React 基本使用<div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js...【详细内容】
2021-11-30  清闲的帆船先生    Tags:框架   点击:(19)  评论:(0)  加入收藏
流水线(Pipeline)是把一个重复的过程分解为若干个子过程,使每个子过程与其他子过程并行进行的技术。本文主要介绍了诞生于云原生时代的流水线框架 Argo。 什么是流水线?在计算机...【详细内容】
2021-11-30  叼着猫的鱼    Tags:框架   点击:(21)  评论:(0)  加入收藏
TKinterThinter 是标准的python包,你可以在linx,macos,windows上使用它,你不需要安装它,因为它是python自带的扩展包。 它采用TCL的控制接口,你可以非常方便地写出图形界面,如...【详细内容】
2021-11-30    梦回故里归来  Tags:框架   点击:(26)  评论:(0)  加入收藏
前言项目中的配置文件会有密码的存在,例如数据库的密码、邮箱的密码、FTP的密码等。配置的密码以明文的方式暴露,并不是一种安全的方式,特别是大型项目的生产环境中,因为配置文...【详细内容】
2021-11-17  充满元气的java爱好者  博客园  Tags:SpringBoot   点击:(25)  评论:(0)  加入收藏
一、搭建环境1、创建数据库表和表结构create table account(id INT identity(1,1) primary key,name varchar(20),[money] DECIMAL2、创建maven的工程SSM,在pom.xml文件引入...【详细内容】
2021-11-11  AT小白在线中  搜狐号  Tags:开发框架   点击:(29)  评论:(0)  加入收藏
SpringBoot开发的物联网通信平台系统项目功能模块 功能 说明 MQTT 1.SSL支持 2.集群化部署时暂不支持retain&will类型消 UDP ...【详细内容】
2021-11-05  小程序建站    Tags:SpringBoot   点击:(55)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条