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+\'&currentPage=\'+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关联记录，可删除

来源：https://www.cnblogs.com/m13002622490/p/16355356.html
本站部分图文来源于网络，如有侵权请联系删除。