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

 1.html

   

     

     

 

	NO	名称	权限标识	备注	操作
没有相关数据

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

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

map.put("varList", varList);

map.put("page", page);

map.put("pd", pd);

map.put("result", errInfo);

return map;

}

}