主要颜色
Success
#67C23A
Warning
#E6A23C
Danger
#F56C6C
Info
#909399
中性色
主要文字
#303133
常规文字
#606266
次要文字
#909399
占位文字
#C0C4CC
一级边框
#DCDFE6
二级边框
#E4E7ED
三级边框
#EBEEF5
四级边框
#F2F6FC

主要框架

  1. SpringBoot v2.1.2.RELEASE
  2. Freemarker v2.1.2.RELEASE Html模板引擎
  3. pagehelper v1.2.5 分页插件、提供便捷的分页功能
  4. dozer v5.5.1 对象复制拷贝
  5. logback v1.2.3 日志框架
  6. jQuery v3.2.1 前端JavaScript框架(保留),打包进base.min.js,但请尽量勿使用jQuery直接操作Dom
  7. Vue v2.5.17 DOM渲染引擎
  8. ElementUI v2.8.2 前端UI框架,提供统一风格控件
  9. Maven 后端构建管理工具
  10. JDK 8+ SpringBoot2.x开始不再支持JDK 7及以下,所以请将JDk升级到8+

调用AJAX

ajax.example({}).then(function (response) {

if (response.errors.length > 0) {

nav.e(response.errors[0].message);

} else {

nav.i("Ajax调用成功!");

}

})

点击上传
只能上传jpg/png文件,且不超过500kb

ajax.fileUpload(req.file).then(function (response) {

if (response.errors.length > 0) {

req.onError();

nav.e(response.errors[0].message);

} else {

req.onSuccess();

nav.i("文件上传成功!");

}

})

开始推送 停止推送

var evtSource = new EventSource('http://localhost:8080/sse/1');

evtSource.addEventListener('message', function (e) {

console.log(e.data);

});

普通消息 错误消息 成功消息 警告消息 加载提示框 关闭提示框 加载提示条 成功 失败
占位输出

正常输出 ${r'${hello}'}

HTML输出 ${r"${'<a>a标签</a>'?html}"}

$表达式 ${r"${r'${hello}'}"}

条件输出

${'<#if status == 0>'}

status is 0

${'<#elseif status ==1>'}

status = 1

${'<#else>'}

status != 0 && status !=1

${'</#if>'}

遍历集合

${'<#list citys as city>'}

${r' ${city_index} --> ${city}'}

${'</#list>'}

1、表单控件集合及验证

- 立即创建 重置

2、表格数据

3、分页

4、按钮

默认按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 朴素按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 圆角按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 加载中 默认按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 朴素按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 文字按钮 文字按钮 搜索 上传 上一页 下一页 默认按钮 中等按钮 小型按钮 超小按钮 默认按钮 中等按钮 小型按钮 超小按钮

5、Link 文字链接

默认链接 主要链接 成功链接 警告链接 危险链接 信息链接 默认链接 主要链接 成功链接 警告链接 危险链接 信息链接 无下划线 有下划线 编辑 查看

6、Tabs 标签页

用户管理 配置管理 角色管理 定时任务补偿

Tabs位置共有4个位置分别为: top right bottom left

7、弹框、对话框、通知

消息 通知 消息Box 消息确认Box hover 激活 对话框Dialog 这是一段信息 取 消 确 定

6、其他小控件

标签一 标签二 标签三 标签四 标签五 标签一 标签二 标签三 标签四 标签五 默认标签 中等标签 小型标签 超小标签 评论 回复 评论 回复 数据查询 评论(最大值) 回复(最大值) 评论 回复 首页 活动管理 活动列表 活动详情 下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 默认尺寸 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 中等尺寸 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 小型尺寸 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 超小尺寸 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 头上一片晴天,心中一个想念 少年包青天 饿了别叫妈, 叫饿了么 为了无法计算的价值 阿里云 雨纷纷 旧故里 草木深

1、页面初始化前闪现源代码

${''?html}

${'

'?html}

${'...'?html}

${'

'?html}

2、为什么Long类型返回json字符串变为String

因为Long可支持的长度比JavaScript中Number支持的位数更多,所以当Long数值很大时转为Json再转为Number就会丢失精度,造成难以发现的Bug,所以本系统默认处理了该问题。

3、Date类型格式化问题

默认启用全局Date格式化 yyyy-MM-dd HH:mm:ss ,需要关闭请在 application-* 中关闭。

对于个别返回结果的Date格式化可以通过注解方式 @JsonFormat(pattern = "yyyy-MM-dd")

4、权限问题

1、本系统启用自定义Token来控制权限,任何访问都会有一个全局Token,任何一处都可以通过 LocalData.getToken() 来获取 当前访问对象的Token。其中Token充当着访问对象的通行证,其中包含访问对象的 用户ID用户名可访问资源 等信息。

2、对于未登录对象会提供临时(访客) LocalData.getTempToken() (有限的权限)来提供访问系统。

3、如果系统存在Task等定时任务时,是不存在访问对象,通过 LocalData.getSystemToken() 来获取系统层的Token来操作系统。

5、Token配置

Springboot环境配置文件application-*中配置了系统中需要验证权限和不需要验证的url。而需要验证权限的URl会在 SecurityConfig.getAuthorization() 方法中通过Parameter或Cookies中获取当前访问对象的登录信息,从而为当前访问对象组装Token对象。