Admui 源码、Admui通用框架、Admui 开发文档、admui框架使用经验-优快云博客

Admui是一个基于Web技术的通用管理系统框架，支持快速开发MIS系统。它依赖于Bootstrap和jQuery，提供自动构建和基础源码两种版本。框架包含丰富的组件、示例和功能，支持多种浏览器。Admui强调源码安全，提供在线开发文档和客服支持，适用于企业级应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

QQ194633530 索取源码

基本概述

Admui 的追求的目标是做到开箱即用，无需了解框架内部机制，但是我们也深知一套框架不可能满足所有客户的所有需求，所以我们仍然为您准备了前端的开发文档，以满足部分客户的定制需求，我们会不断的完善这部分的文档，请及时关注。

依赖关系

Admui 依赖于两个主要框架(库)。源码包中已经包含这两个框架(库)，无需再手动下载：

包含内容

Admui 提供了自动构建和基础源码两种不同的版本。

自动构建

如果您购买源码时选择的前端源码是自动构建，下载源码解压后，大体源码结构如下：

Admui/
    ├── build/ (Gulp任务流)
    │   ├── configuration/
    │   └── tasks/
    ├── public/
    │   ├── data/ (模拟数据)
    │   ├── fonts/ (字体图标)
    │   ├── images/ (图片文件)
    │   └── vendor/ (插件)
    ├── src/
    │   ├── assets/ (静态资源)
    │   │      ├── js/
    │   │      └── scss/
    │   ├── fonts/ (字体图标)
    │   ├── templates/ (页面)
    │   ├── themes/ (主题)
    │   │      ├── base/ (布局)
    │   │      ├── topbar/ (布局)
    │   │      └── global/
    │   └── .csscomb.json
    ├── package.json
    ├── gulpfile.js
    ├── .eslintrc(eslint配置)
    ├── README.md
    ├── .gitignore
    └── LICENSE

对于包含自动构建部分的前端源码，可以通过命令行来开发和调试，请参考构建工具。

基础源码

如果您购买源码时选择的前端源码是基础源码，下载源码解压后，大体源码结构如下：

Admui/
    ├── html/ (页面)
    ├── public/
    │   ├── css/ (样式文件)
    │   ├── data/ (模拟数据)
    │   ├── fonts/ (字体图标)
    │   ├── images/ (图片文件)
    │   ├── js/ (js文件)
    │   ├── themes/ (主题)
    │   │     ├── base/ (布局)
    │   │     ├── topbar/ (布局)
    │   │     └── global/
    │   └── vendor/ (插件)
    ├── README.md
    └── LICENSE

运行项目

自动构建

您必须下载和安装 node.js(包含 npm)，npm 是 node 的包管理工具。您可以使用node --version和npm --version来检查是否已经安装 node 和 npm。如果您已经安装了 node.js，请忽略此步骤。

您可以从这里下载 Node.js.

# 安装依赖包:
npm install

# 启动项目
npm run [dev | build][:topbar]
# dev: 运行开发环境，提供浏览器自动刷新、增量编译、未压缩静态文件等;
# build: 部署生产环境，合并压缩、替换路径、添加版本号等;
# topbar: 指定编译的主题布局，默认执行base布局编译。（例：npm run dev:topbar）

假如您只购买了 topbar 布局，您也需要使用布局参数来指定编译的主题布局。

更多 Gulp 编译命令请阅读gulpfile.js，您可以在build/configuration/config.js或build/configuration/config.json中更改配置信息，通过 gulp 构建项目到指定的目录中。

基础源码

直接打开 html 文件即可预览，某些页面中包含 ajax 内容，所以最好在服务器环境（如 localhost）下打开。

如果您希望定制主题或通过 Gulp 自动构建项目，您可以通过在线升级的方式购买自动构建部分。升级

浏览器支持

Admui 可以很好的支持最新版的 PC 浏览器和智能设备浏览器，支持的浏览器如下：

浏览器	Windows	MacOS(10.9+)	IOS(7.1.2+)	Android(4.1+)
IE 6-11	C	N/A	N/A	N/A
Edge	A	N/A	N/A	N/A
Chrome（谷歌）	A	A	A	A
Firefox（火狐）	A	A	N/A	-
Safari	-	A	A	N/A
360 极速浏览器	A	N/A	-	-
搜狗浏览器	A	N/A	-	-
QQ 浏览器	A	N/A	-	-
百度浏览器	A	N/A	-	-
猎豹浏览器	A	N/A	-	-
微信浏览器	N/A	N/A	A	A
钉钉浏览器	N/A	N/A	A	A

优秀，发自至心

覆盖全端场景，紧贴业务需求，助力企业发展

源码可控

Admui 始终把安全放在第一位
无加密、混淆的代码，无后门
安全全程可控，可放心使用

多端支持

支持IE10+，支持现代浏览器
支持智能手机、微信、钉钉浏览器
HTML5+CSS3响应式设计

功能完善

包含管理系统常用的基础功能
涵盖1000+基础组件，50+综合演示
120+常用插件和示例，并可扩展

在线演示

上手容易

在线开发文档，技术工程师远程支持
大量的示例演示，组件式开发
完善的售后保障，5x8小时服务

基本介绍

为了更好的了解Admui以提高工作效率，建议您在使用之前，仔细阅读文档。

简介

Admui是一个基于最新Web技术的企业级通用管理系统快速开发框架，可以帮助企业极大的提高工作效率，节省开发成本，提升品牌形象。您可以Admui为基础，快速开发各种MIS系统，如CMS、OA、CRM、ERP、POS等。Admui紧贴业务特性，涵盖了大量的常用组件和基础功能，最大程度上帮助企业节省时间成本和费用开支。

完整的Admui-pjax（Pjax版）前端技术清单如下：

HTML + CSS

Sass

jQuery + Bootstrap

Nodejs + Gulp

Admui提供了大量的主题和布局方式及示例，可以满足大部分甚至全部的需求，Admui更侧重于忽略前端开发本身，通常情况下，我们只需要有一点html和js开发的基础即可。如果您需要对Admui的前端部分进行深度定制，我们提供的Gulp配置文件重新构建项目。

目前，Admui的后端示例仅提供了Java+MySQL版本。

定制开发

如果您觉得Admui无法满足您当前的实际需求，需要定制开发，可以致电 400 150 2080 联系我们说明您的需求，或将您的需求通过邮件反馈给我们，邮箱：customer@admui.com，我们会指派专人负责跟进。

客户服务

如果您在阅读文档的过程中遇到问题，可以发送邮件至 supports@admui.com；
如果您已经购买了Admui并在服务期内，我们可通过工单为您提供技术支持等无偿服务；
如果已经超出服务期限，您可以通过升级的方式来延长服务期限，或者我们也可以为您提供有偿服务。

其他事项

联系方式、授权协议等事宜请访问：http://admui.com/about/；
如需其他帮助请访问：http://www.admui.com/help/；
Admui的版本号遵循：《语义化版本 2.0.0》。

Admui-iframe v2.0.0 更新日志

2018/10/28

Admui-iframe v2.0.0 是 Admui 产品的一次重大升级，UI 界面采用更为现代的设计，Admui 所采用的 Bootstrap 版本由 v3 升级到 v4，CSS 预处理器也由 LESS 改为更为友好强大的 SASS。v2 的所有页面均在 v1.x 版本的基础上进行了重构，同时 v2 版本的 Java 版采用更为主流的 SpringBoot + MyBatis + Thymeleaf 进行重写，在功能上增加了“组织机构”，“权限管理”，“角色管理”等模块，数据库依然采用 MySQL。在 v2 版本中，我们还新增了一套 Topbar 布局，您可以通过线上的演示查看该布局。

注意： 由于 Bootstrap v4 版本并不向下兼容等因素，Admui-iframe v2.0.0 和 v1.x 版本不兼容，如果您正在使用 Admui v1.x，在升级到 v2.0.0 之前请务必知晓这些差异。同时在 2019年7月31日之前，我们仍然会对 v1.x 版本的产品继续提供支持，包括版本升级，Bug 修复和售后支持等。

如果您之前已经购买过 Admui 产品，可以在用户中心升级到 v2.0.0，如果您想购买 Admui 产品，请点击购买。

Admui 通用管理系统快速开发框架是一个基于最新 Web 技术的企业级通用管理系统快速开发框架，可以帮助企业极大的提高工作效率，节省开发成本，提升品牌形象。您可以 Admui 为基础，快速开发各种MIS系统，如CMS、OA、CRM、ERP、POS等。Admui 紧贴业务特性，涵盖了大量的常用组件和基础功能，最大程度上帮助企业节省时间成本和费用开支。

Admui-iframe v2.0.0 版包含了包含了 v1.x 的所有 UI 示例和基础的管理系统功能，同时在 Java 版本中提供了更为完善的用户管理功能，同时修复了大量的 Bug，增加了部分示例。

UI 示例

UI 组件(布局、基本、进阶、组件、小工具)
页面示例(首页示例、常用页面、团队协作)
表格(基本表格、树形表格、DataTables、Bootstrap-Table)
表单(基本、质感、高级、布局、向导、验证、预设、编辑、编辑器、图片裁剪、文件上传)
图表(简单图表、ECharts)
系统(菜单管理、组织机构、角色管理、权限管理、日志信息、黑名单、系统设置、账户信息)

共六大模块，涵盖1000+ 基础组件，200+ UI示例页面，50+ 完整示例页面。

基础功能

登录
菜单管理
组织机构
角色管理
权限管理
日志信息
黑名单
系统设置(显示设置、日志设置)
账户信息(消息、日志、密码、显示)
消息中心
错误页面(维护中、无权限、404等)
网站地图

详细功能介绍见 Java 文档。

Admui v2.0 部分界面截图

Admui 登录
Admui 表格
Admui 图表
Admui 邮箱

Admui 页签
Admui 主题

主题说明

如果您购买的前端源码是自动构建，则主题位于/src/themes/下，如果是基础源码，则主题位于/public/themes/下。

全局文件夹

全局文件夹包含了预编译的文件资源，SCSS、JavaScript等，可以通过我们提供的 Gulp 自动化构建工具自动构建scss、JavaScript等源文件，这些资源文件提供给当前主题的所有布局使用。

如果您不熟悉 Gulp，您可以通过直接修改最终生成的静态资源css，js文件。当然，绝大部分情况下，我们并不需要修改全局的布局和样式，也就不用修改这些文件。

如果您购买源码时选择的前端源码是自动构建，全局文件夹大体结构如下：

/src/themes/global/
    ├── js/
    │   ├── components/ (注册组件)
    │   ├── configs/ (配置信息)
    │   └── plugins/ (自定义方法)
    └── scss/
        ├── bootstrap/ (bootstrap源文件)
        ├── bootstrap-extend/ (bootstrap覆盖文件)
        ├── vendor/ (插件)
        ├── bootstrap.scss
        ├── bootstrap-extend.scss
        ├── _vars*.scss
        └── ...

如果您购买源码时选择的前端源码是基础源码，全局文件夹大体结构如下：

/public/themes/global/
    └── js/
        ├── components/ (注册组件)
        ├── configs/ (配置信息)
        ├── plugins/ (自定义方法)
        └── components.js (合并后的注册组件)
    └── css/
        └── bootstrap.css

布局文件夹

如果您购买源码时选择的前端源码是自动构建，布局文件夹包含完整的基础模块以及布局和皮肤的样式文件。布局文件夹大体结构如下:

/src/themes/base/
    ├── js/
    │   ├── app.js (公共方法)
    │   └── site.js（核心方法）
    └── scss/
        ├── layouts/ (布局)
        ├── sections/ (组件)
        ├── skins/ (皮肤)
        ├── _vars* (scss变量)
        ├── skins/ (皮肤)
        └── site.scss

如果您购买源码时选择的前端源码是基础源码，布局文件夹大体结构如下：

/public/themes/base/
    ├── js/
    │   ├── app.js (公共方法)
    │   └── site.js（核心方法）
    └── css/ (布局样式)
        ├── skins/(皮肤样式文件)
        ├── index.css
        └── site.css

如果您希望定制主题或通过 Gulp 自动构建项目，您可以通过在线升级的方式购买自动构建部分。升级

构建工具

您可以通过以下命令来构建 Admui 项目，如果您购买的是基础源码，请略过此步骤。

运行项目

安装 NPM 模块

在根目录下运行npm install安装依赖包。
运行npm run dev 或者 npm run build来启动项目。

dev 运行开发环境，提供浏览器自动刷新、增量编译、未压缩静态文件等；build 部署生产环境，合并压缩、替换路径、添加版本号等。

使用 Gulp

Admui 使用 Gulp 来构建项目。它是自动化项目的构建利器，使用它可以大大提高工作效率。

Admui 配置了大多数常用的任务以构建项目。如果不能满足您的需求，您可以在gulp文件夹下定义更多的任务。

了解如何定义 Gulp 任务，请访问 Gulp官网或 Gulp中文网。

入口文件

CSS

<!-- 样式 -->
<link rel="stylesheet" href="/public/themes/global/css/bootstrap.css">
<link rel="stylesheet" href="/public/themes/{layout}/css/index.css" id="admui-siteStyle">

<!-- 图标 CSS-->
<link rel="stylesheet" href="/public/fonts/font-awesome/font-awesome.css">
<link rel="stylesheet" href="/public/fonts/web-icons/web-icons.css">

<!-- 插件 CSS -->
<link rel="stylesheet" href="/public/vendor/animsition/animsition.css">
<link rel="stylesheet" href="/public/vendor/toastr/toastr.css">
<link rel="stylesheet" href="/public/vendor/nprogress/nprogress.css">
<link rel="stylesheet" href="/public/vendor/mCustomScrollbar/jquery.mCustomScrollbar.css">

{layout}指向主题布局，您可以选择拥有布局中任意一套。当前提供主题有base和topbar两种。

JavaScript

需在头部引入的js

Breakpoints用于响应式布局设置断点，当浏览器进入或退出断点时会触发自定义事件，在复杂布局时非常实用。

<!-- 插件 -->
<script src="/public/vendor/jquery/jquery.min.js"></script>
<script src="/public/vendor/bootstrap/bootstrap.bundle.min.js"></script>
<script src="/public/vendor/lodash/lodash.min.js"></script>
<script src="/public/vendor/breakpoints/breakpoints.min.js"></script>

<!-- 核心 -->
<script src="/public/themes/global/js/core.js"></script>
<script src="/public/themes/global/js/configs/site-configs.js"></script>
<script src="/public/themes/global/js/components.js"></script>

<script>
    "use strict";

    Breakpoints();
</script>

说明:
Breakpoints用于响应式布局设置断点，当浏览器进入或退出断点时会触发自定义事件，在复杂布局时非常实用。

需在底部引入的js

<!-- 插件 -->
<script src="/public/themes/global/js/plugins/responsive-tabs.js"></script>
<script src="/public/vendor/artTemplate/template-web.js"></script>
<script src="/public/vendor/toastr/toastr.min.js"></script>
<script src="/public/vendor/ashoverscroll/jquery-asHoverScroll.min.js"></script>
<script src="/public/vendor/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/public/vendor/screenfull/screenfull.min.js"></script>

<!-- 布局 -->
<script src="/public/themes/{layout}/js/site.js"></script>

<!-- 消息通知 -->
<script src="/public/js/notify-msg.js"></script>

模板结构

一般情况下，模板的结构如下(具体代码见/html/index.html或/src/templates/pages/index.html)。

代码片段

<nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
    <div class="navbar-header">
        ......
    </div>
    <div class="navbar-container container-fluid">
        ......
    </div>
</nav>

Admui 源码、Admui通用框架、Admui 开发文档、admui框架使用经验

QQ194633530 索取源码

基本概述

依赖关系

包含内容

自动构建

基础源码

运行项目

自动构建

基础源码

浏览器支持

优秀，发自至心

基本介绍

简介

相关链接

定制开发

客户服务

其他事项

Admui-iframe v2.0.0 更新日志

UI 示例

基础功能

Admui v2.0 部分界面截图

主题说明

全局文件夹

布局文件夹

构建工具

运行项目

安装 NPM 模块

使用 Gulp

入口文件

CSS

JavaScript

需在头部引入的js

需在底部引入的js

模板结构

代码片段

头部(.site-navbar)

内容(.site-page)