该后台界面生成器主要用于快速生成基本的表单和表格界面,非常用的控件可以使用HTML自己实现或者扩展控件库,界面的框架采用的是Layui的控件.
- 生成器控件
- 文本框
- 下拉框
- 自动完成
- 复选框
- 日期选择器
- 单选框
- 图片上传
- 文件上传
- 表格
- 分页
- 按钮功能
- Ajax执行请求
- 对话框
- Ajax表单提交
- 带确认的Ajax执行请求
- 页面功能
- 主页
- 登录页
如果项目是Spring Boot 可以直接引用,项目采用Spring boot start
<repositories>
<repository>
<id>jitpack.io</id>
<url>https://jitpack.io</url>
</repository>
</repositories>
<dependency>
<groupId>com.github.xuejike</groupId>
<artifactId>spring_xuejike_tpl</artifactId>
<version>0.1.1</version>
</dependency>
apply plugin: 'kotlin'
buildscript {
ext.kotlin_version = '1.2.10'
repositories {
mavenCentral()
}
dependencies {
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
repositories {
maven { url "https://jcenter.bintray.com" }
}
dependencies {
compile "org.jetbrains.kotlin:kotlin-stdlib-jdk8:$kotlin_version"
compile "org.jetbrains.kotlinx:kotlinx-html-jvm:0.6.6"
}
@RequestMapping("/index")
@ResponseBody
public String index(){
AdminJkKtView testView = new AdminJkKtView();
testView.getInfo().setTitle("极速模板");
//首页地址
testView.getInfo().setIndexUrl("/index");
//定义左菜单加载的URL
testView.getInfo().setLeft("/left");
//定义头部菜单加载的URL
testView.getInfo().setTop("/top");
//定义 右菜单内容
testView.getInfo().getRightMenu()
.add(new JkMenu("修改密码","","http://www.baidu.com"));
//定义首页 初始化界面地址
testView.getInfo().setWelcomeUrl("/welcome");
//退出登录地址
testView.getInfo().setLogoutUrl("/public/logout");
//定义 当前登录的用户昵称
testView.getInfo().setUsername("超级管理员");
return testView.toHtml();
}
效果
@RequestMapping("/form")
@ResponseBody
public String form(){
TestFormView view = new TestFormView();
view.setVo(new TestModel());
return view.toHtml();
}
class TestFormView: PageJkKtView() {
var vo:TestModel?=null;
override fun content(): String {
return createHTML().div {
vo=TestModel("ss")
jkForm {
jkInput(bind = vo!!::username,title = "文本框", type = InputType.text,inputCall =
{
it.attributes["lay-verify"]="required|number"
})
jkFormTitle(){
jkButton("提交",type = JkButtonType.ajax_submit)
}
}
}
}
}
public String login(){
AdminLoginKtView adminLoginKtView = new AdminLoginKtView();
adminLoginKtView.getInfo().setActionUrl("/public/login");
adminLoginKtView.getInfo().setTitle("登录页");
adminLoginKtView.getInfo().setUserName("用户名");
adminLoginKtView.getInfo().setPwd("密码");
adminLoginKtView.getInfo().setMsg("登录失败的错误消息");
return adminLoginKtView.toHtml();
}
override fun content(): String {
headList.add("<meta name=\"viewport\" content=\"width=device-width\">")
footerList.add("<script></script>")
addCssFile("/test.css")
addHeadJsFile("/head.js")
addFooterJsFile("/foot.js")
return createHTML().div {
vo= TestModel("ss")
jkForm {
jkInput(bind = vo!!::username,title = "文本框", type = InputType.text,inputCall =
{
it.attributes["lay-verify"]="required|number"
})
jkFormTitle(){
jkButton("提交",type = JkButtonType.ajax_submit)
}
}
}
}
import vip.xuejike.ktpl.libs.commonFooter
import vip.xuejike.ktpl.libs.commonHeader
fun loadTpl(){
commonHeader.add("ss")
commonFooter.add("ff")
}
var t=loadTpl()
Spring Boot 的MessageConverters的配置
@Configuration
public class MyWebMvcConfigurerAdapter extends WebMvcConfigurerAdapter {
/**
* 配置静态访问资源
* @param registry
*/
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
}
List<JkHandlerInterceptor> jkHandlerInterceptorList;
/**
* 拦截器
* @param registry
*/
@Override
public void addInterceptors(InterceptorRegistry registry) {
}
@Override
public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
converters.add(0,new JkKtViewMessageConverters());
super.configureMessageConverters(converters);
}
}
直接使用
@RequestMapping("/form")
@ResponseBody
public String form(){
TestFormView view = new TestFormView();
view.setVo(new TestModel());
return view;
}
使用Kotlin扩展的特性对Kotlin的html生成器进行扩展。下面这个例子就是扩展出一个带Layui样式的Form表单控件.
fun FlowContent.jkForm(action:String="",
method:FormMethod=FormMethod.post,
block:FlowContent.(FORM)->Unit={}){
form(action = action,method = method){
this.classes+="layui-form"
block(this)
}
}
表单控件主要有三部分组成:表单标题、表单块、表单控件。
下面以输入框为例:
<div class="layui-form-item">
<!--标题区-->
<label class="layui-form-label">输入框</label>
<!--表单块-->
<div class="layui-input-block">
<!--表单控件-->
<input type="text" name="title" class="layui-input">
</div>
</div>
框架中定义了表单通用的扩展框架: jkFormTitle 定义一个完整的表单控件区域,包含标题、表单块、基本表单控件。
fun FlowContent.jkFormTitle(title: String="",
inline:Boolean=false,
formItem:Boolean=true,
block:(DIV) -> Unit={}){
var p={
label {
this.classes+="layui-form-label"
this.text(title)
}
div {
//用于定义当前表单是内联表单或者块表单
if (inline){
this.classes+="layui-input-inline"
}else{
this.classes+="layui-input-block"
}
block(this)
text("")
}
}
// 用于判断是否添加 layui-form-item 样式
if (formItem){
jkFormItem(){
p()
}
}else{
p();
}
}
扩展一个文本框控件
/**
* input输入框
*/
fun FlowContent.jkInput(title:String="",formItem:Boolean=true,placeholder:String="",name:String="", value:Any?=null,
bind: KMutableProperty0<out Any?>?=null, type:InputType=InputType.text,
inline:Boolean=false, inputCall:(INPUT)->Unit={},block: FlowContent.() -> Unit={}
){
jkFormTitle(title, inline, formItem) {
input {
//定义input基本的属性
this.type=type;
this.autoComplete=false
this.placeholder=placeholder
this.classes+="layui-input"
//通过getBindInfo方法获取需要绑定对象的属性的基本信息
var info=getBindInfo(
bind,
name,
value
)
this.name=info.name;
this.value=info.valueString;
//input 回调可以在回调中定义input的其他属性
inputCall(this)
//注意 text 方法需要在最后调用,调用后会关闭生成器的流
text("")
}
block(this)
}
}