springboot vue.js html 前后分離 json 交互 事例代碼

1.? 頁面引入 vue.js?

<!--?vue?-->
<script?src="../../../assets/js-vue/vue.js"></script>

2. js 代碼

var?vm?=?new?Vue({
	el:?'#app',
	
	data:{
		varList:?[],	//list
		page:?[],		//分頁類
		pd:?[],			//map
		showCount:?-1,	//每頁顯示條數(這個是系統設置里面配置的，初始為-1即可，固定此寫法)
		currentPage:?1,	//當前頁碼
		add:false,
		del:false,
		edit:false,
		loading:false	//加載狀態
????},
????
	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. html 代碼片段

	<!--?開始循環?-->	
	<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???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);"?><i?class="feather?icon-edit-2"></i></a>
					<a?v-show="del"?title="刪除"?v-on:click="goDel(data.FHBUTTON_ID);"?><i?class="feather?icon-x"></i></a>
					?</td>
			</tr>
	</template>

4.后臺代碼

	
	/**列表?from?www.1b23.com
	?*?@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;
	}