同步操作将从 IKKI/KendoUI-Admin-Site 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
Kendo UI Admin & Site base on Kendo UI for jQuery and Bootstrap 4.
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
所有的子页面模块均存放在 views
目录或其自定义的子目录下
每一个子页面模块均由同名的 xxx.html
和 xxx.js
两个文件组成
每一个子页面模块的 HTML 页面第一行的模版 ID 由文件名 xxx
和 Temp
组成
<script id="xxxTemp" type="text/x-kendo-template">
只应用于当前子页面模块的样式写在模块的 HTML 文件中
<style scoped>
···
</style>
只应用于当前子页面模块的 css 文件写在模块的 HTML 文件中并通过 @import 引入
<style scoped>
@import "css/plugin.min.css";
</style>
子页面模块的 HTML 文件基本结构如下:
<script id="xxxTemp" type="text/x-kendo-template"></script>
<style scoped>
···
</style>
</script>
只应用于当前子页面模块的 JS 插件通过模块的 JS 文件引入
$.getScript('js/plugin.min.js');
顶部菜单本地 Mock 数据位于 json/menu.json
其中 url
键值包含的 linkTo
方法为路由函数
其中第一个参数为子页面模块相对于 views
目录所在的目录
第二个参数为子页面模块的名称cssClass
键值为面包屑要用到的 DOM 定位,由 links-模块名称
组成
左侧导航本地 Mock 数据位于 json/nav.json
其键值说明如下:
id
为唯一标识符parentId
为父 ID ,一级为 0sort
为所在层级排序name
为名称subName
为副名称icon
为图标dot
为折叠后的圆点提醒badge
为徽标提醒directory
为子页面模块相对于 views
目录所在的目录location
为子页面模块的名称expanded
为是否默认展开顶部菜单、左侧导航及 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
均通过 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-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·······························(看板娘)
│ ├── md5.min.js·····································(MD5 加密)
│ ├── 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_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 加密)
│ ├── 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·········································(后台入口登录、注册、找回密码页)
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。