springboot html vue.js 前后分离代码示例 _SpringBoot

曾无好事来相访，赖尔高文一起予。这篇文章主要讲述springboot 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">
< labelstyle="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="https://www.songbingjia.com/android/data.FHBUTTON_ID"< labelstyle="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 = "https://www.songbingjia.com/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="https://www.songbingjia.com/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;