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

简介: 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">
         <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;
  }
}

 

目录
打赏
0
0
0
0
6
分享
相关文章
基于SpringBoot+Vue实现的留守儿童爱心网站设计与实现(计算机毕设项目实战+源码+文档)
博主是一位全网粉丝超过100万的CSDN特邀作者、博客专家,专注于Java、Python、PHP等技术领域。提供SpringBoot、Vue、HTML、Uniapp、PHP、Python、NodeJS、爬虫、数据可视化等技术服务,涵盖免费选题、功能设计、开题报告、论文辅导、答辩PPT等。系统采用SpringBoot后端框架和Vue前端框架,确保高效开发与良好用户体验。所有代码由博主亲自开发,并提供全程录音录屏讲解服务,保障学习效果。欢迎点赞、收藏、关注、评论,获取更多精品案例源码。
79 10
基于SpringBoot+Vue实现的家政服务管理平台设计与实现(计算机毕设项目实战+源码+文档)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
61 8
基于SpringBoot+Vue实现的家乡特色推荐系统设计与实现(源码+文档+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
76 8
基于SpringBoot+Vue实现的大学生就业服务平台设计与实现(系统源码+文档+数据库+部署等)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
83 6
基于Java+SpringBoot+Vue实现的车辆充电桩系统设计与实现(系统源码+文档+部署讲解等)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
64 6
基于SpringBoot+Vue的班级综合测评管理系统设计与实现(系统源码+文档+数据库+部署等)
✌免费选题、功能需求设计、任务书、开题报告、中期检查、程序功能实现、论文辅导、论文降重、答辩PPT辅导、会议视频一对一讲解代码等✌
53 4
基于SpringBoot+Vue实现的高校食堂移动预约点餐系统设计与实现(源码+文档+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
76 3
基于SpringBoot+Vue实现的大学生体质测试管理系统设计与实现(系统源码+文档+数据库+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
43 2
建筑施工一体化信息管理平台源码,支持微服务架构,采用Java、Spring Cloud、Vue等技术开发。
智慧工地云平台是专为建筑施工领域打造的一体化信息管理平台,利用大数据、云计算、物联网等技术,实现施工区域各系统数据汇总与可视化管理。平台涵盖人员、设备、物料、环境等关键因素的实时监控与数据分析,提供远程指挥、决策支持等功能,提升工作效率,促进产业信息化发展。系统由PC端、APP移动端及项目、监管、数据屏三大平台组成,支持微服务架构,采用Java、Spring Cloud、Vue等技术开发。
基于SpringBoot+Vue实现的冬奥会科普平台设计与实现(系统源码+文档+数据库+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
52 0

热门文章

最新文章