Skip to content
🌸 Kendo UI Admin & Site base on Kendo UI for jQuery and Bootstrap 4. 🌌
JavaScript HTML CSS
Branch: master
Clone or download

README.md

LOGO

🌸 Kendo UI Admin & Site 🌌

Kendo UI Admin & Site base on Kendo UI for jQuery and Bootstrap 4.

GitHub Demo: https://ikki2000.github.io/KendoUI-Admin-Site/

码云演示:https://ikki2000.gitee.io/kendoui-admin-site/index_gitee.html

IKKI Studio GitHub license GitHub release
GitHub Repo GitHub stars GitHub forks GitHub watchers 码云仓库 Gitee star Gitee fork
jQuery Kendo UI Bootstrap Font Awesome
Internet Explorer Microsoft Edge Mozilla Firefox Google Chrome Safari Opera
GitHub top language GitHub language count GitHub HTML count GitHub CSS count GitHub JavaScript count GitHub code size in bytes GitHub repo size in bytes
GitHub contributors GitHub last commit GitHub commit activity
Default Brown Pink Red Orange Yellow White Grass Green Cyan Blue Purple Black Gray

Home

Forms

Grid

Themes

🌟 特点 Features

🌐 浏览器支持 Browser Support

  • 现代浏览器和 IE10 及以上
IE
IE
Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
10, 11 last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions

📖 使用指南 Initialization

  1. 下载并解压至项目目录~
  2. 将下列 5 个 HTML 文件的 <base> 修改为前端本地的开发路径~
    index.html
    --- <base href="https://ikki2000.github.io/KendoUI-Admin-Site/">
    +++ <base href="http://localhost:8888/YourProject/">
    
    admin/login.html & admin/index.html
    --- <base href="https://ikki2000.github.io/KendoUI-Admin-Site/" type="admin">
    +++ <base href="http://localhost:8888/YourProject/" type="admin">
    
    site/login.html & site/index.html
    --- <base href="https://ikki2000.github.io/KendoUI-Admin-Site/" type="site">
    +++ <base href="http://localhost:8888/YourProject/" type="site">

    注意:最后的 / 不要漏掉~

  3. 将下列 JS 文件的 apiPath 修改为后端服务器的 API 接口路径~ 并恢复 3 个默认参数~
    js/ikki.js
    
    // 配置接口路径
    --- var apiPath = 'https://ikki2000.github.io/KendoUI-Admin-Site/';
    +++ var apiPath = 'https://dev.YourDomain.com/api/';
    
    // Ajax 提交
    --- ajaxType: 'get', // GitHub Pages 演示只支持 get 请求,正常使用请改回 post 请求
    +++ ajaxType: 'post',
    --- urlType: 'static', // GitHub Pages 演示接口为静态 json 文件,正常使用请改回 api 类型
    +++ urlType: 'api',
    
    // 带二进制流的 Ajax 提交
    --- ajaxType: 'get', // GitHub Pages 演示只支持 get 请求,正常使用请改回 post 请求
    +++ ajaxType: 'post',
  4. 用 IDE 编辑器(如:WebStorm)打开 index.html 并选择浏览器启动本地服务即可~
    http://localhost:8888/YourProject/index.html
    

🔨 开发指南 Developer's Guide

  • 所有的子页面模块均存放在 views 目录或其自定义的子目录下

  • 每一个子页面模块均由同名的 xxx.htmlxxx.js 两个文件组成

  • 每一个子页面模块的 HTML 页面第一行的模版 ID 由文件名 xxxTemp 组成

    <script id="xxxTemp" type="text/x-kendo-template">
  • 只应用于当前子页面模块的样式写在模块的 HTML 文件中

    <style scoped>
        ···
    </style>
  • 子页面模块的 HTML 文件基本结构如下:

    <script id="xxxTemp" type="text/x-kendo-template">
        <div>
            ···
        </div>
        <script id="otherTemplate" type="text/x-kendo-template">
            ···
        </script>
        <style scoped>
            ···
        </style>
    </script>
  • 只应用于当前子页面模块的 JS 插件通过模块的 JS 文件引入

    $.getScript('js/plugin.min.js');
  • 顶部菜单本地 Mock 数据位于 json/menu.json 其数据结构同左侧导航

  • 左侧导航本地 Mock 数据位于 json/nav.json 其中 text 键值说明如下:

    • <i> 为图标
    • <sup> 为折叠后的角标
    • <abbr> 包裹折叠后一级导航不显示的文字部分
    • <small> 为可选次级文字
    • <sub> 为角标
  • 左侧导航 url 键值包含的 linkTo 方法为路由函数
    其中第一个参数为子页面模块相对于 views 目录所在的目录
    第二个参数为子页面模块的名称
    cssClass 键值为面包屑要用到的 DOM 定位,由 links-模块名称 组成

  • 顶部菜单、左侧导航及 Token 验证的 API 接口地址位于 ikki.layout.js 文件内

  • ikki.js 文件内封装了一些公用方法,具体参数及说明如下:

    方法 参数 类型 默认值 说明
    $.fn.ajaxPost --- --- --- 封装的带 token 的 ajax 提交
    ajaxAsync boolean true ajax 的 async 属性
    ajaxType string 'post' ajax 的 type 属性
    ajaxData string '' JSON.stringify() 封装的 ajax 的 data 属性
    urlType string 'api' 读取本地 json 的时候换成 'static'
    ajaxUrl string '' ajax 的 url 属性
    ajaxContentType string 'application/json; charset=UTF-8' ajax 的 contentType 属性
    finished function {} ajax 请求完成时的回调
    succeed function {} ajax 请求完成并且 result === 'y' 时的回调
    failed function {} ajax 请求完成并且 result === 'n' 时的回调
    isMsg boolean false result === 'y' 时是否需要消息提示
    $.fn.ajaxPostBlob --- --- --- 封装的带 token 的二进制流 ajax 提交
    ajaxAsync boolean true ajax 的 async 属性
    ajaxType string 'post' ajax 的 type 属性
    ajaxData string '' new FormData() 封装的 ajax 的 data 属性
    ajaxUrl string '' ajax 的 url 属性
    finished function {} ajax 请求完成时的回调
    succeed function {} ajax 请求完成并且 result === 'y' 时的回调
    failed function {} ajax 请求完成并且 result === 'n' 时的回调
    isMsg boolean true result === 'y' 时是否需要消息提示
    tipMsg --- --- --- 提示框
    dom object --- 触发提示框的 DOM 对象
    msg string --- 提示框显示的内容
    position string --- 提示框的位置:
    'top'
    'bottom'
    'left'
    'right'
    'center'
    noticeMsg --- --- --- 通知框
    msg string --- 通知框显示的内容
    type string --- 通知框的类型:
    'info'
    'success'
    'warning'
    'error'
    position string --- 通知框的位置:
    'center'
    'top'
    'left'
    'right'
    'bottom'
    'left top'
    'right top'
    'left bottom'
    'right bottom'
    time number --- 自动消失的时间
    单位:ms
    hided function --- 通知框消失后的回调
    alertMsg --- --- --- 警告框
    alertMsgBtn --- --- --- 警告框小按钮
    alertMsgNoBtn --- --- --- 警告框无按钮
    msg string --- 警告框显示的内容
    type string --- 警告框的类型:
    'success'
    'info'
    'question'
    'warning'
    'error'
    closed function --- 警告框关闭后的回调
    confirmMsg --- --- --- 确认框
    confirmMsgBtn --- --- --- 确认框小按钮
    title string --- 确认框显示的标题
    msg string --- 确认框显示的内容
    type string --- 确认框的类型:
    'success'
    'info'
    'question'
    'warning'
    'error'
    confirmed function --- 确认框确认后的回调
    divWindow --- --- --- 弹出层
    title string --- 弹出层显示的标题
    width string --- 弹出层宽度
    单位:px 或 %
    height string --- 弹出层高度
    单位:px 或 %
    content object --- 弹出层显示的 DOM 对象
    iframeWindow --- --- --- 弹出页
    title string --- 弹出页显示的标题
    width string --- 弹出页宽度
    单位:px 或 %
    height string --- 弹出页高度
    单位:px 或 %
    url string --- 弹出页显示的 iFrame 链接地址
    showBigPic --- --- --- 大图预览
    url string --- 大图的绝对路径
    numericRange --- --- --- 数字型范围
    rangeStart object --- 开始的 DOM 对象
    rangeEnd object --- 结束的 DOM 对象
    format string --- 格式
    decimals number --- 保留几位小数
    step number --- 步进
    min number --- 最小值
    max number --- 最大值
    dateRange --- --- --- 日期型范围
    dateInputRange --- --- --- 日期输入型范围
    rangeStart object --- 开始的 DOM 对象
    rangeEnd object --- 结束的 DOM 对象
    type string --- 日期的类型:
    'Year'
    'Month'
    'Time'
    'DateTime'
    'Date'
    serializeObject --- --- --- 表单序列化 json 对象
    steps --- --- --- 步骤条
    func function --- 步骤完成后的回调
    stepsForm --- --- --- 表单步骤条
    func function --- 步骤完成后的回调
    stepsNoBack --- --- --- 单向步骤条
    func function --- 步骤完成后的回调

前后端交互规范:

  • 前后端交互全部采用 Ajax 方式提交
  • 前后端 token 均通过 headerAuthorization 属性交互
  • 前端提交给后端的数据格式分为标准的 json 格式和带二进制流的 form data 格式两种
  • 后端返回给前端的 json 格式标准如下:
    {
        "result": "y",
        "msg": "操作成功!",
        "data": []
    }
  • Token 验证不通过时返回:
    {
        "result": "denied"
    }
  • 所有日期 date 类型的数据全部转换成字符串 string 类型进行交互,即前端给到后端和后端给到前端的数据均为字符串
    {
        "year": "2019",
        "month": "2019-02",
        "date": "2019-02-03",
        "time": "12:00", 
        "datetime": "2019-02-03 12:00" 
    }
  • 所有组件交互的数据格式请参考前端 Mock 数据目录 json/

📜 目录结构 Directory Structure

完整版:

后台默认使用的是路由版~ 如需使用框架版、标签版和布局版,请直接将对应的 index_xxx.html 启动或直接改名为 index.html 即可~

ROOT/··················································(项目根目录)
├── admin/·············································(后台管理目录)
│   ├── pages/·········································(iFrame 框架版目录)
│   │   ├── 404.html···································(404 页面)
│   │   ├── home.html··································(主页)
│   ├── views/·········································(SPA 路由版和标签版目录)
│   │   ├── xxx/·······································(后台管理子目录)
│   │   │   ├── xxx.html·······························(后台管理子页面及样式)
│   │   │   └── xxx.js·································(后台管理子页面脚本)
│   │   ├── 403.html···································(403 页面及样式)
│   │   ├── 403.js·····································(403 页面脚本)
│   │   ├── 404.html···································(404 页面及样式)
│   │   ├── 404.js·····································(404 页面脚本)
│   │   ├── 500.html···································(500 页面及样式)
│   │   ├── 500.js·····································(500 页面脚本)
│   │   ├── home.html··································(主页页面及样式)
│   │   ├── home.js····································(主页页面脚本)
│   │   ├── search.html································(搜索结果页面及样式)
│   │   └── search.js··································(搜索结果页面脚本)
│   ├── index.html·····································(后台登录后首页)
│   ├── index_iframe.html······························(首页框架版)
│   ├── index_router.html······························(首页路由版)
│   ├── index_splitter_iframe.html·····················(首页布局框架版)
│   ├── index_splitter_router.html·····················(首页布局路由版)
│   ├── index_splitter_tabstrip.html···················(首页布局标签版)
│   ├── index_tabstrip.html····························(首页标签版)
│   └── login.html·····································(后台登录、注册、找回密码页)
├── css/···············································(样式表目录)
│   ├── themes/········································(配色皮肤目录)
│   ├── amikoko.admin.css······························(后台管理样式)
│   ├── amikoko.site.css·······························(前台网站样式)
│   ├── bootstrap.min.css······························(Bootstrap 4)
│   ├── flag-icon.min.css······························(矢量国旗图标)
│   ├── fontawesome-all.min.css························(字体图标)
│   ├── kendo.ui.widgets.icon.css······················(Kendo UI 组件图标)
│   └── weather-icons.min.css··························(字体天气图标)
├── flags/·············································(矢量国旗图标目录)
├── fonts/·············································(字体图标目录)
├── img/···············································(图片目录)
│   ├── avatar.png·····································(默认头像)
│   ├── error.png······································(服务器出错图片)
│   ├── favicon.png····································(浏览器标签及收藏夹图标)
│   ├── IKKI.png·······································(用户头像)
│   ├── lock_bg.jpg····································(锁屏背景)
│   ├── logo.png·······································(标准 LOGO)
│   └── logo_s.png·····································(左侧导航折叠后 LOGO)
├── js/················································(公用脚本目录)
│   ├── global/········································(多语言目录)
│   ├── countUp.min.js·································(数字跳动)
│   ├── ikki.iframe.js·································(框架版脚本)
│   ├── ikki.js········································(公用脚本)
│   ├── ikki.layout.js·································(后台公用脚本)
│   ├── ikki.router.js·································(路由脚本)
│   ├── ikki.splitter.js·······························(布局版脚本)
│   ├── ikki.tabstrip.js·······························(标签版脚本)
│   ├── ikki.website.js································(前台公用脚本)
│   ├── jquery.min.js··································(jQuery 库)
│   ├── jquery.particleground.js·······················(登录页背景动画)
│   ├── jquery.verify.js·······························(登录页滑动验证)
│   ├── jszip.min.js···································(Excel 导出)
│   ├── kendo.all.min.js·······························(Kendo UI 库)
│   ├── L2Dwidget.0.min.js·····························(看板娘)
│   ├── L2Dwidget.min.js·······························(看板娘)
│   ├── pdf.js·········································(PDF 查看)
│   └── pdf.worker.js··································(PDF 查看)
├── json/··············································(本地 Mock 数据目录)
│   └── geo/···········································(地图 GEO 数据目录)
├── resource/··········································(其他静态资源目录)
├── site/··············································(前台网站目录)
│   ├── pages/·········································(iFrame 框架版目录)
│   │   ├── 404.html···································(404 页面)
│   │   ├── home.html··································(主页)
│   ├── views/·········································(SPA 路由版和标签版目录)
│   │   ├── xxx/·······································(前台网站子目录)
│   │   │   ├── xxx.html·······························(前台网站子页面及样式)
│   │   │   └── xxx.js·································(前台网站子页面脚本)
│   │   ├── 404.html···································(404 页面及样式)
│   │   ├── 404.js·····································(404 页面脚本)
│   │   ├── home.html··································(主页页面及样式)
│   │   └── home.js····································(主页页面脚本)
│   └── index.html·····································(前台首页)
├── index.html·········································(项目首页)
├── LICENSE············································(MIT)
└── README.md··········································(本说明文档)

纯后台管理路由精简版:

如果只需要后台管理界面的路由版~ 可将原 admin 目录下的文件移动至根目录并按照如下目录结构删除多余的文件~ 且将 login.htmlindex.html 头部 <base> 标签内的 type 置空即可~

    <base href="http://localhost:8888/YourProject/" type="">
ROOT/··················································(项目根目录)
├── css/···············································(样式表目录)
│   ├── themes/········································(配色皮肤目录)
│   │   └── theme_default.min.css······················(只保留默认样式)
│   ├── amikoko.admin.css······························(后台管理样式)
│   ├── bootstrap.min.css······························(Bootstrap 4)
│   └── fontawesome-all.min.css························(字体图标)
├── fonts/·············································(字体图标目录)
├── img/···············································(图片目录)
│   ├── avatar.png·····································(默认头像)
│   ├── error.png······································(服务器出错图片)
│   ├── favicon.png····································(浏览器标签及收藏夹图标)
│   ├── logo.png·······································(标准 LOGO)
│   └── logo_s.png·····································(左侧导航折叠后 LOGO)
├── js/················································(公用脚本目录)
│   ├── global/········································(多语言目录)
│   │   └── kendo.zh-CHS.js····························(只保留简体中文)
│   ├── countUp.min.js·································(数字跳动)
│   ├── ikki.js········································(后台管理脚本)
│   ├── ikki.layout.js·································(框架脚本)
│   ├── ikki.router.js·································(路由脚本)
│   ├── jquery.min.js··································(jQuery 库)
│   ├── jquery.verify.js·······························(登录页滑动验证)
│   ├── jszip.min.js···································(Excel 导出)
│   ├── kendo.all.min.js·······························(Kendo UI 库)
│   ├── pdf.js·········································(PDF 查看)
│   └── pdf.worker.js··································(PDF 查看)
├── json/··············································(本地 Mock 数据目录)
├── views/·············································(SPA 页面目录)
│   ├── xxx/···········································(子目录)
│   │   ├── xxx.html···································(子页面及样式)
│   │   └── xxx.js·····································(子页面脚本)
│   ├── 403.html·······································(403 页面及样式)
│   ├── 403.js·········································(403 页面脚本)
│   ├── 404.html·······································(404 页面及样式)
│   ├── 404.js·········································(404 页面脚本)
│   ├── 500.html·······································(500 页面及样式)
│   ├── 500.js·········································(500 页面脚本)
│   ├── home.html······································(主页页面及样式)
│   ├── home.js········································(主页页面脚本)
│   ├── search.html····································(搜索结果页面及样式)
│   └── search.js······································(搜索结果页面脚本)
├── index.html·········································(登录后首页)
└── login.html·········································(后台入口登录、注册、找回密码页)

📁 功能列表 Function List

基础功能 [ Basic ] 💯

顶部菜单 [ Menu ]

  • 导航折叠 [ Navigation Drawer ] ✔️
  • 面包屑 [ Breadcrumb ] ✔️
  • 全局搜索 [ Global Search ] ✔️
  • 刷新 [ Refresh ] ✔️
  • 全屏 [ Full Screen ] ✔️
  • 锁屏 [ Lock Screen ] ✔️
  • 配色 [ Theme ] ✔️
  • 语言 [ Localization ] ✔️
  • 消息 [ Message ]
  • 提醒 [ Notice ] ✔️
  • 用户名头像显示 [ User Name & Avatar ] ✔️
  • 前台切换 [ Goto Website ] ✔️
  • 用户中心 [ User Center ]
  • 修改密码 [ Change Password ] ✔️
  • 系统设置 [ Setting ]
  • 退出登录 [ Sign Out ] ✔️

左侧导航 [ Navigation ]

🔗 相关链接 Thanks for

📷 界面预览 Screenshot

-= PC =-

PC

-= PAD =-

PAD

-= PHONE =-

PHONE

You can’t perform that action at this time.