代码拉取完成,页面将自动刷新
Kendo UI Admin & Site base on Kendo UI for jQuery and Bootstrap 4.
IE10 及以上、现代浏览器和 Electron 桌面应用
IE |
Edge |
Firefox |
Chrome |
Safari |
Opera |
Electron |
---|---|---|---|---|---|---|
10, 11 | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
<base>
修改为前端本地的开发根路径~
index.html
--- <base href="https://ikki2000.gitee.io/kendoui-admin-site/">
+++ <base href="http://localhost:8888/YourProject/">
admin/login.html & admin/index.html
--- <base href="https://ikki2000.gitee.io/kendoui-admin-site/" type="admin">
+++ <base href="http://localhost:8888/YourProject/" type="admin">
site/login.html & site/index.html
--- <base href="https://ikki2000.gitee.io/kendoui-admin-site/" type="site">
+++ <base href="http://localhost:8888/YourProject/" type="site">
注意:最后的
/
不要漏掉~
apiPath
修改为后端服务器的 API 接口根路径~ 并恢复 3 个默认参数~
js/ikki.js
// 配置接口路径
--- var apiPath = 'https://ikki2000.gitee.io/kendoui-admin-site/';
+++ var apiPath = 'https://dev.YourDomain.com/api/';
// Ajax 提交
--- ajaxType: 'get', // Gitee Pages 演示只支持 get 请求,正常使用请改回 post 请求
+++ ajaxType: 'post',
--- urlType: 'static', // Gitee Pages 演示接口为静态 json 文件,正常使用请改回 api 类型
+++ urlType: 'api',
// 带数据流的 Ajax 提交
--- ajaxType: 'get', // Gitee Pages 演示只支持 get 请求,正常使用请改回 post 请求
+++ ajaxType: 'post',
index.html
并选择浏览器启动本地服务即可~
http://localhost:8888/YourProject/index.html
index.html
即可~
http://192.x.x.x:8888/YourProject/index.html
views
目录或其自定义的子目录下xxx.html
和 xxx.js
两个文件组成xxx
和 Temp
组成
<script id="xxxTemp" type="text/x-kendo-template">
<style scoped>
···
</style>
<style scoped>
@import "css/plugin.min.css";
</style>
<script id="xxxTemp" type="text/x-kendo-template">
<div>
···
</div>
<script id="otherTemplate" type="text/x-kendo-template">
···
</script>
<style scoped>
···
</style>
</script>
$.getScript('js/plugin.min.js');
json/menu.json
url
键值包含的 linkTo
方法为路由函数views
目录所在的目录cssClass
键值为面包屑要用到的 DOM 定位,由 links-模块名称
组成json/nav.json
其键值说明如下:
id
为唯一标识符parentId
为父 ID ,一级为 0sort
为所在层级排序name
为名称subName
为副名称icon
为图标dot
为折叠后的圆点提醒badge
为徽标提醒directory
为子页面模块相对于 views
目录所在的目录location
为子页面模块的名称expanded
为是否默认展开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' 时是否需要信息提示 | |
base64FileUploads | --- | --- | --- | 将文件编码为 Base 64 的 Data URL 后 ajax 提交 |
dom | string | --- | 文件上传框的 DOM | |
ext | array | --- | 文件上传类型限制的后缀名列表数组 | |
size | number | --- | 文件上传单个文件大小限制的字节数 | |
url | string | --- | ajax 请求的 url | |
finished | function | --- | ajax 请求完成时的回调 | |
succeed | function | --- | ajax 请求完成并且 result === 'y' 时的回调 | |
failed | function | --- | ajax 请求完成并且 result === 'n' 时的回调 | |
tipMsg | --- | --- | --- | 提示框 |
dom | string | --- | 触发提示框的 DOM | |
msg | string | --- | 提示框显示的内容 | |
position | string | --- | 提示框的位置: 'top' 'bottom' 'left' 'right' 'center' |
|
popMsg | --- | --- | --- | 弹出框 |
dom | string | --- | 触发弹出框的 DOM | |
title | string | --- | 弹出框显示的标题 | |
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 对象 |
Ajax
方式提交token
均通过 header
的 Authorization
属性交互json
格式和带数据流的 form data
格式两种json
格式标准如下:
{
"result": "y",
"msg": "操作成功!",
"data": []
}
{
"result": "denied"
}
date
类型的数据全部转换成字符串 string
类型进行交互,即前端给到后端和后端给到前端的数据均为字符串
{
"year": "2019",
"month": "2019-02",
"date": "2019-02-03",
"time": "12:00",
"datetime": "2019-02-03 12:00"
}
json/
后台默认使用的是路由版~ 如需使用框架版、标签版和布局版,请直接将对应的
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-icons.min.css·······················(矢量国旗图标)
│ ├── fontawesome-all.min.css··················(字体图标)
│ ├── kendo.rtl.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·························(看板娘)
│ ├── md5.min.js·······························(MD5 加密)
│ ├── pako_deflate.min.js······················(PDF 导出)
│ ├── 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.html
和index.html
头部<base>
标签内的type
置空即可~
<base href="http://localhost:8888/YourProject/" type="">
ROOT/············································(项目根目录)
├── css/·········································(样式表目录)
│ ├── themes/··································(主题配色目录)
│ │ └── theme_iamkk_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 库)
│ ├── md5.min.js·······························(MD5 加密)
│ ├── pako_deflate.min.js······················(PDF 导出)
│ ├── 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···································(后台登录、注册、找回密码页)
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型