spring boot html+vue.js 形式前后分离代码示例
1.html
<table class= "table table-hover">
< thead>
< tr>
< th style= "width: 50px;" id= "cts">
< div class= "checkbox d-inline">
< input type= "checkbox" name= "fhcheckbox" id= "zcheckbox">
< label style= "max-height: 12px;" for= "zcheckbox" class= "cr"> </ label>
</ div>
</ th>
< th style= "width: 50px;">NO </ th>
< th>名称 </ th>
< th>权限标识 </ th>
< th>备注 </ th>
< th>操作 </ th>
</ tr>
</ thead>
< tbody>
<!-- 开始循环 -->
< template v-for= "(data,index) in varList">
< tr>
< td> < div class= "checkbox d-inline"> < input type= "checkbox" v-bind:id= "'zcheckbox'+index" name= 'ids' v-bind:value= "data.FHBUTTON_ID"< label style= "max-height: 12px;" v-bind:for= "'zcheckbox'+index" class= "cr"> </ label> </ div>
</ td>
< td scope= "row">{{page.showCount*(page.currentPage-1)+index+1}} </ td>
< td>{{data.NAME}} </ td>
< td>{{data.SHIRO_KEY}} </ td>
< td>{{data.BZ}} </ td>
< td>
< a v-show= "edit" title= "修改" v-on:click= "goEdit(data.FHBUTTON_ID);" style= "cursor:pointer;"> < i class= "feather icon-edit-2"> </ i> </ a>
< a v-show= "del" title= "删除" v-on:click= "goDel(data.FHBUTTON_ID);" style= "cursor:pointer;"> < i class= "feather icon-x"> </ i> </ a>
</ td>
</ tr>
</ template>
< tr v-show= "varList.length==0">
< td colspan= "10">没有相关数据 </ td>
</ tr>
</ tbody>
</ table> 2.js 代码
var vm = new Vue({
el: '#app',
data:{
varList: [], //list
page: [], //分页类
pd: [] //map
},
methods: {
//初始执行
init() {
//复选框控制全选,全不选
$( '#zcheckbox').click( function( ){
if($( this).is( ':checked')){
$( "input[name='ids']").click();
} else{
$( "input[name='ids']").attr( "checked", false);
}
});
this.getList();
},
//获取列表
getList: function( ){
this.loading = true;
$.ajax({
xhrFields: {
withCredentials: true
},
type: "POST",
url: httpurl+ 'fhbutton/list?showCount='+ this.showCount+ '¤tPage='+ this.currentPage,
data: { KEYWORDS: this.pd.KEYWORDS, tm: new Date().getTime()},
dataType: "json",
success: function( data){
if( "success" == data.result){
vm.varList = data.varList;
vm.page = data.page;
vm.pd = data.pd;
vm.hasButton();
vm.loading = false;
$( "input[name='ids']").attr( "checked", false);
} else if ( "exception" == data.result){
showException( "按钮模块",data.exception); //显示异常
}
}
}).done().fail( function( ){
swal( "登录失效!", "请求服务器无响应，稍后再试", "warning");
setTimeout( function ( ) {
window.location.href = "../../login.html";
}, 2000);
});
}
},
mounted(){
this.init();
}
}) 3. 后台代码
package org.fh.controller.system;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.fh.controller.base.BaseController;
import org.fh.entity.Page;
import org.fh.entity.PageData;
import org.fh.service.system.FHlogService;
import org.fh.service.system.FhButtonService;
import org.fh.util.Jurisdiction;
import org.fh.util.Tools;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
/**
* 说明：按钮管理处理类
* 作者：FH Admin
* from：fhadmin.cn
*/
@ Controller
@ RequestMapping( "/fhbutton")
public class FhbuttonController extends BaseController {
@ Autowired
private FhButtonService fhButtonService;
@ Autowired
private FHlogService FHLOG;
/**列表
* @param page
* @throws Exception
*/
@ RequestMapping(value= "/list", produces= "application/json;charset=UTF-8")
@ RequiresPermissions( "fhbutton:list")
@ ResponseBody
public Object list( Page page) throws Exception{
Map< String, Object> map = new HashMap< String, Object>();
String errInfo = "success";
PageData pd = new PageData();
pd = this.getPageData();
String KEYWORDS = pd.getString( "KEYWORDS"); //关键词检索条件
if( Tools.notEmpty( KEYWORDS)){
pd.put( "KEYWORDS", KEYWORDS.trim());
}
page.setPd(pd);
List< PageData> varList = fhButtonService.list(page); //列出Fhbutton列表
map.put( "varList", varList);
map.put( "page", page);
map.put( "pd", pd);
map.put( "result", errInfo);
return map;
}
}
-----------------------------------------------------------------自定义表单
28. 定义模版：拖拽左侧表单元素到右侧区域，编辑表单元素，保存表单模版
29. 表单模版：编辑维护表单模版，复制表单模版，修改模版类型，预览表单模版
30. 我的表单：选择表单模版，编辑表单规则，是否上传图片、附件、开启富文本、挂靠流程开关等
31. 表单数据：从我的表单进去可增删改查表单数据，修改表单规则
32. 挂靠记录：记录表单数据和流程实例ID关联记录，可删除