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

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

 

目录
相关文章
|
20天前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
3月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
95 1
|
4月前
|
JavaScript 前端开发
怀孕b超单子在线制作,p图一键生成怀孕,JS代码装逼娱乐
模拟B超单的视觉效果,包含随机生成的胎儿图像、医疗文本信息和医院标志。请注意这仅用于前端开发学习
|
4月前
|
JavaScript
JS代码的一些常用优化写法
JS代码的一些常用优化写法
74 0
|
6月前
|
存储 JavaScript 前端开发
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
466 9
|
7月前
|
前端开发 JavaScript
【Javascript系列】Terser除了压缩代码之外,还有优化代码的功能
Terser 是一款广泛应用于前端开发的 JavaScript 解析器和压缩工具,常被视为 Uglify-es 的替代品。它不仅能高效压缩代码体积,还能优化代码逻辑,提升可靠性。例如,在调试中发现,Terser 压缩后的代码对删除功能确认框逻辑进行了优化。常用参数包括 `compress`(启用压缩)、`mangle`(变量名混淆)和 `output`(输出配置)。更多高级用法可参考官方文档。
488 11
|
7月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
6月前
|
JavaScript 前端开发 Java
Spring Boot 与 Vue.js 前后端分离中的数据交互机制
本文深入探讨了Spring Boot与Vue.js在前后端分离架构下的数据交互机制。通过对比传统`model.addAttribute()`方法与RESTful API的设计,分析了两者在耦合性、灵活性及可扩展性方面的差异。Spring Boot以RESTful API提供数据服务,Vue.js借助Axios消费API并动态渲染页面,实现了职责分明的解耦架构。该模式显著提升了系统的灵活性和维护性,适用于复杂应用场景如论坛、商城系统等,为现代Web开发提供了重要参考。
499 0
|
7月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~