spring boot html+vue.js 形式前后分离代码示例

240阅读 0评论2022-06-08 fhadmin
分类:Java


点击(此处)折叠或打开


  1. 1.html

  2. <table class="table table-hover">
  3.     <thead>
  4.       <tr>
  5.         <th style="width: 50px;" id="cts">
  6.         <div class="checkbox d-inline">
  7.          <input type="checkbox" name="fhcheckbox" id="zcheckbox">
  8.          <label style="max-height: 12px;" for="zcheckbox" class="cr"></label>
  9.          </div>
  10.                 </th>
  11.         <th style="width: 50px;">NO</th>
  12.         <th>名称</th>
  13.         <th>权限标识</th>
  14.         <th>备注</th>
  15.         <th>操作</th>
  16.         </tr>
  17.        </thead>
  18.     <tbody>
  19.         <!-- 开始循环 -->    
  20.         <template v-for="(data,index) in varList">
  21.         <tr>
  22.             <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>
  23.             </td>
  24.             <td scope="row">{{page.showCount*(page.currentPage-1)+index+1}}</td>
  25.             <td>{{data.NAME}}</td>
  26.             <td>{{data.SHIRO_KEY}}</td>
  27.             <td>{{data.BZ}}</td>
  28.             <td>
  29.                 <a v-show="edit" title="修改" v-on:click="goEdit(data.FHBUTTON_ID);" style="cursor:pointer;"><i class="feather icon-edit-2"></i></a>
  30.                 <a v-show="del" title="删除" v-on:click="goDel(data.FHBUTTON_ID);" style="cursor:pointer;"><i class="feather icon-x"></i></a>
  31.             </td>
  32.         </tr>
  33.         </template>
  34.         <tr v-show="varList.length==0">
  35.             <td colspan="10">没有相关数据</td>
  36.         </tr>
  37.     </tbody>
  38.    </table>

  39. 2.js 代码

  40. var vm = new Vue({
  41.     el: '#app',
  42.     
  43.     data:{
  44.         varList: [],    //list
  45.         page: [],        //分页类
  46.         pd: []            //map
  47.     },
  48.     
  49.     methods: {
  50.         
  51.         //初始执行
  52.         init() {
  53.             //复选框控制全选,全不选
  54.             $('#zcheckbox').click(function(){
  55.               if($(this).is(':checked')){
  56.                   $("input[name='ids']").click();
  57.               }else{
  58.                   $("input[name='ids']").attr("checked", false);
  59.               }
  60.             });
  61.             this.getList();
  62.         },
  63.         
  64.         //获取列表
  65.         getList: function(){
  66.             this.loading = true;
  67.             $.ajax({
  68.                 xhrFields: {
  69.                     withCredentials: true
  70.                 },
  71.                 type: "POST",
  72.                 url: httpurl+'fhbutton/list?showCount='+this.showCount+'¤tPage='+this.currentPage,
  73.                 data: {KEYWORDS:this.pd.KEYWORDS,tm:new Date().getTime()},
  74.                 dataType:"json",
  75.                 success: function(data){
  76.                  if("success" == data.result){
  77.                      vm.varList = data.varList;
  78.                      vm.page = data.page;
  79.                      vm.pd = data.pd;
  80.                      vm.hasButton();
  81.                      vm.loading = false;
  82.                      $("input[name='ids']").attr("checked", false);
  83.                  }else if ("exception" == data.result){
  84.                      showException("按钮模块",data.exception);//显示异常
  85.                  }
  86.                 }
  87.             }).done().fail(function(){
  88.                 swal("登录失效!", "请求服务器无响应,稍后再试", "warning");
  89.                 setTimeout(function () {
  90.                     window.location.href = "../../login.html";
  91.                 }, 2000);
  92.             });
  93.         }
  94.  
  95.         
  96.     },
  97.     
  98.     mounted(){
  99.         this.init();
  100.     }
  101. })
  102. 3. 后台代码

  103. package org.fh.controller.system;
  104.  
  105. import java.util.HashMap;
  106. import java.util.List;
  107. import java.util.Map;
  108.  
  109. import org.apache.shiro.authz.annotation.RequiresPermissions;
  110. import org.fh.controller.base.BaseController;
  111. import org.fh.entity.Page;
  112. import org.fh.entity.PageData;
  113. import org.fh.service.system.FHlogService;
  114. import org.fh.service.system.FhButtonService;
  115. import org.fh.util.Jurisdiction;
  116. import org.fh.util.Tools;
  117. import org.springframework.beans.factory.annotation.Autowired;
  118. import org.springframework.stereotype.Controller;
  119. import org.springframework.web.bind.annotation.RequestMapping;
  120. import org.springframework.web.bind.annotation.ResponseBody;
  121.  
  122. /**
  123.  * 说明:按钮管理处理类
  124.  * 作者:FH Admin
  125.  * from:fhadmin.cn
  126.  */
  127. @Controller
  128. @RequestMapping("/fhbutton")
  129. public class FhbuttonController extends BaseController {
  130.     
  131.     @Autowired
  132.     private FhButtonService fhButtonService;
  133.     @Autowired
  134.     private FHlogService FHLOG;
  135.     
  136.     /**列表
  137.      * @param page
  138.      * @throws Exception
  139.      */
  140.     @RequestMapping(value="/list", produces="application/json;charset=UTF-8")
  141.     @RequiresPermissions("fhbutton:list")
  142.     @ResponseBody
  143.     public Object list(Page page) throws Exception{
  144.         Map<String,Object> map = new HashMap<String,Object>();
  145.         String errInfo = "success";
  146.         PageData pd = new PageData();
  147.         pd = this.getPageData();
  148.         String KEYWORDS = pd.getString("KEYWORDS");                //关键词检索条件
  149.         if(Tools.notEmpty(KEYWORDS)){
  150.             pd.put("KEYWORDS", KEYWORDS.trim());
  151.         }
  152.         page.setPd(pd);
  153.         List<PageData>    varList = fhButtonService.list(page);    //列出Fhbutton列表
  154.         map.put("varList", varList);
  155.         map.put("page", page);
  156.         map.put("pd", pd);
  157.         map.put("result", errInfo);
  158.         return map;
  159.     }
  160.  
  161. }


上一篇:阿里注册中心 Nacos 启动报错 Unable to start web server
下一篇:微服务监控中心springboot-admin 配置登录密码