springboot访问vue的html,springboot vue.js html 前后分离 json 交互事例代码

1.  页面引入 vue.js

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 代码片段

{{page.showCount*(page.currentPage-1)+index+1}}{{data.NAME}}{{data.SHIRO_KEY}}{{data.BZ}}

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 map = new HashMap();

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);

ListvarList = fhButtonService.list(page);//列出Fhbutton列表

map.put("varList", varList);

map.put("page", page);

map.put("pd", pd);

map.put("result", errInfo);

return map;

}