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

 

目录
相关文章
|
11天前
|
安全 Java 应用服务中间件
Spring Boot + Java 21:内存减少 60%,启动速度提高 30% — 零代码
通过调整三个JVM和Spring Boot配置开关,无需重写代码即可显著优化Java应用性能:内存减少60%,启动速度提升30%。适用于所有在JVM上运行API的生产团队,低成本实现高效能。
88 3
|
4月前
|
监控 Java 数据安全/隐私保护
阿里面试:SpringBoot启动时, 如何执行扩展代码?你们项目 SpringBoot 进行过 哪些 扩展?
阿里面试:SpringBoot启动时, 如何执行扩展代码?你们项目 SpringBoot 进行过 哪些 扩展?
|
20天前
|
前端开发 安全 Java
基于springboot+vue开发的会议预约管理系统
一个完整的会议预约管理系统,包含前端用户界面、管理后台和后端API服务。 ### 后端 - **框架**: Spring Boot 2.7.18 - **数据库**: MySQL 5.6+ - **ORM**: MyBatis Plus 3.5.3.1 - **安全**: Spring Security + JWT - **Java版本**: Java 11 ### 前端 - **框架**: Vue 3.3.4 - **UI组件**: Element Plus 2.3.8 - **构建工具**: Vite 4.4.5 - **状态管理**: Pinia 2.1.6 - **HTTP客户端
128 4
基于springboot+vue开发的会议预约管理系统
|
6月前
|
前端开发 Java 关系型数据库
基于Java+Springboot+Vue开发的鲜花商城管理系统源码+运行
基于Java+Springboot+Vue开发的鲜花商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的鲜花商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。技术学习共同进步
431 7
|
2月前
|
前端开发 JavaScript Java
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
本系统基于SpringBoot与Vue3开发,实现校园食堂评价功能。前台支持用户注册登录、食堂浏览、菜品查看及评价发布;后台提供食堂、菜品与评价管理模块,支持权限控制与数据维护。技术栈涵盖SpringBoot、MyBatisPlus、Vue3、ElementUI等,适配响应式布局,提供完整源码与数据库脚本,可直接运行部署。
100 0
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
|
4月前
|
Java 数据库连接 数据库
Spring boot 使用mybatis generator 自动生成代码插件
本文介绍了在Spring Boot项目中使用MyBatis Generator插件自动生成代码的详细步骤。首先创建一个新的Spring Boot项目,接着引入MyBatis Generator插件并配置`pom.xml`文件。然后删除默认的`application.properties`文件,创建`application.yml`进行相关配置,如设置Mapper路径和实体类包名。重点在于配置`generatorConfig.xml`文件,包括数据库驱动、连接信息、生成模型、映射文件及DAO的包名和位置。最后通过IDE配置运行插件生成代码,并在主类添加`@MapperScan`注解完成整合
639 1
Spring boot 使用mybatis generator 自动生成代码插件
|
4月前
|
监控 数据可视化 JavaScript
springboot + vue的MES系统生产计划管理源码
MES系统(制造执行系统)的生产计划管理功能是其核心模块之一,涵盖生产计划制定与优化、调度排程、进度监控反馈、资源管理调配及可视化报告五大方面。系统基于SpringBoot + Vue-Element-Plus-Admin技术栈开发,支持多端应用(App、小程序、H5、后台)。通过实时数据采集与分析,MES助力企业优化生产流程,适用于现代化智能制造场景。
164 1
|
5月前
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
480 2
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
|
4月前
|
Java 调度 流计算
基于Java 17 + Spring Boot 3.2 + Flink 1.18的智慧实验室管理系统核心代码
这是一套基于Java 17、Spring Boot 3.2和Flink 1.18开发的智慧实验室管理系统核心代码。系统涵盖多协议设备接入(支持OPC UA、MQTT等12种工业协议)、实时异常检测(Flink流处理引擎实现设备状态监控)、强化学习调度(Q-Learning算法优化资源分配)、三维可视化(JavaFX与WebGL渲染实验室空间)、微服务架构(Spring Cloud构建分布式体系)及数据湖建设(Spark构建实验室数据仓库)。实际应用中,该系统显著提升了设备调度效率(响应时间从46分钟降至9秒)、设备利用率(从41%提升至89%),并大幅减少实验准备时间和维护成本。
263 0
|
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

热门文章

最新文章