ElementUI动态树,数据表格以及分页的实现

目录

前言

一. ElementUI动态树

二. 数据表格和分页

三. 后端代码

 service层

controller层


前言

在上一篇博客中实现了左侧菜单栏,在此基础上将它变为动态的,即动态的展示数据库的数据。还有数据表格的实现以及分页。(纯代码分享)

ElementUI官网https://element.eleme.cn/#/zh-CN/component/pagination

一. ElementUI动态树

LeftNav.vue

<template><el-menu router :default-active="$route.path" default-active="2" class="el-menu-vertical-demo" background-color="#334157" text-color="#fff"active-text-color="#ffd04b" :collapse="collapsed"><div class="logobox"><img class="logoimg" src="../assets/img/logo.png" alt=""></div><el-submenu v-for="m in menus" :index="'idx_'+m.id" :key="'key'+m.id"><template slot="title"><i :class="m.icon"></i><span>{{m.text}}</span></template><el-menu-item v-for="m2 in m.modules" :index="m2.url" :key="'key'+m2.id"><i :class="m2.icon"></i><span>{{m2.text}}</span></el-menu-item></el-submenu></el-menu>
</template>
<script>export default {data() {return {collapsed: false,menus: []}},created() {this.$root.Bus.$on('aaa', v => {this.collapsed = v});let url = this.axios.urls.SYSTEM_MENUS;this.axios.get(url, {}).then(r => {console.log(r);this.menus = r.data.rows;}).catch(e => {});}}
</script>
<style>.el-menu-vertical-demo:not(.el-menu--collapse) {width: 240px;min-height: 400px;}.el-menu-vertical-demo:not(.el-menu--collapse) {border: none;text-align: left;}.el-menu-item-group__title {padding: 0px;}.el-menu-bg {background-color: #1f2d3d !important;}.el-menu {border: none;}.logobox {height: 40px;line-height: 40px;color: #9d9d9d;font-size: 20px;text-align: center;padding: 20px 0px;}.logoimg {height: 40px;}
</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
import Login from '@/views/Login'
import Register from '@/views/Register'
import AddBook from '@/views/book/AddBook'
import BookList from '@/views/book/BookList'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Login',component: Login},{path: '/Register',name: 'Register',component: Register},{path: '/AppMain',name: 'AppMain',component: AppMain,children:[{path: '/LeftNav',name: 'LeftNav',component: LeftNav},{path: '/TopNav',name: 'TopNav',component: TopNav},{path: '/book/AddBook',name: 'AddBook',component: AddBook},{path: '/book/BookList',name: 'BookList',component: BookList}]}]
})

action.js

/*** 对后台请求的地址的封装,URL格式如下:* 模块名_实体名_操作*/
export default {'SERVER': 'http://localhost:8080', //服务器'SYSTEM_USER_DOLOGIN': '/user/userLogin', //登陆'SYSTEM_USER_DOREG': '/user/userRegister', //注册'SYSTEM_MENUS': '/module/queryRootNode', //左侧菜单树'getFullPath': k => { //获得请求的完整地址,用于mockjs测试时使用return this.SERVER + this[k];}
}

展示效果:

二. 数据表格和分页

 BookList.vue

<template><div class="books" style="padding: 20px;"><!-- 搜索框 --><el-form :inline="true" class="demo-form-inline"><el-form-item label="书籍名称"><el-input v-model="bookname" placeholder="书籍名称"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!-- 数据表格 --><template><el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="id"label="编号"width="180"></el-table-column><el-table-columnprop="bookname"label="书籍名称"width="180"></el-table-column><el-table-columnprop="price"label="书籍价格"></el-table-column><el-table-columnprop="booktype"label="书籍类别"></el-table-column></el-table></template><!-- 分页 --><div class="block"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="page":page-sizes="[10, 20, 30, 40]":page-size="rows"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div></div>
</template><script>export default {data() {return {bookname:'',tableData:[],page:1,rows:10,total:0}},methods:{// 当前页大小handleSizeChange(r){let params = {bookname : this.bookname,rows : r,page : this.page}this.query(params);// 当前页码},handleCurrentChange(p){let params = {bookname : this.bookname,rows : this.rows,page : p}this.query(params);},query(params){let url = this.axios.urls.BOOK_LIST;this.axios.get(url, {params:params}).then(r => {console.log(r);this.tableData = r.data.rows;this.total = r.data.total;}).catch(e => {});},onSubmit(){let params = {bookname : this.bookname}this.query(params);}},created() {this.query({});}}
</script><style>
</style>

action.js

  'BOOK_LIST': '/book/queryBookPager', //数据表格

展示效果:

三. 后端代码

 service层

IModuleService

package com.zking.ssm.service;import com.zking.ssm.model.Module;
import com.zking.ssm.model.RoleModule;
import com.zking.ssm.model.TreeNode;
import com.zking.ssm.vo.RoleModuleVo;
import org.springframework.stereotype.Repository;import java.util.List;public interface IModuleService {List<Module> queryRootNode(Integer id);List<TreeNode> queryTreeNode(Integer id);int addRoleModule(RoleModule roleModule);List<String> queryModuleByRoleId(RoleModule roleModule);
}

ModuleServiceImpl

package com.zking.ssm.service.impl;import com.zking.ssm.mapper.ModuleMapper;
import com.zking.ssm.mapper.RoleModuleMapper;
import com.zking.ssm.model.Module;
import com.zking.ssm.model.RoleModule;
import com.zking.ssm.model.TreeNode;
import com.zking.ssm.service.IModuleService;
import com.zking.ssm.vo.RoleModuleVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class ModuleServiceImpl implements IModuleService {@Autowiredprivate ModuleMapper moduleMapper;@Autowiredprivate RoleModuleMapper roleModuleMapper;@Overridepublic List<Module> queryRootNode(Integer id) {return moduleMapper.queryChildNodeByPid(id);}@Overridepublic List<TreeNode> queryTreeNode(Integer id) {return moduleMapper.queryTreeNodeByPid(id);}@Overridepublic int addRoleModule(RoleModule roleModule) {roleModuleMapper.deleteRoleModule(roleModule);roleModuleMapper.insertRoleModule(roleModule);return 1;}@Overridepublic List<String> queryModuleByRoleId(RoleModule roleModule) {return roleModuleMapper.queryModuleByRoleId(roleModule);}
}

IBookService

package com.zking.ssm.service;import com.zking.ssm.model.Book;
import com.zking.ssm.util.PageBean;import java.util.List;
import java.util.Map;public interface IBookService {int deleteByPrimaryKey(Integer id);int insert(Book record);Book selectByPrimaryKey(Integer id);int updateByPrimaryKey(Book record);List<Book> queryBookPager(Book book, PageBean pageBean);Map<String,Object> queryBookCharts();
}

BookServiceImpl

package com.zking.ssm.service.impl;import com.zking.ssm.mapper.BookMapper;
import com.zking.ssm.model.Book;
import com.zking.ssm.service.IBookService;
import com.zking.ssm.util.PageBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;
import java.util.Map;@Service
public class BookServiceImpl implements IBookService {@Autowiredprivate BookMapper bookMapper;@Overridepublic int deleteByPrimaryKey(Integer id) {return bookMapper.deleteByPrimaryKey(id);}@Overridepublic int insert(Book record) {return bookMapper.insert(record);}@Overridepublic Book selectByPrimaryKey(Integer id) {return bookMapper.selectByPrimaryKey(id);}@Overridepublic int updateByPrimaryKey(Book record) {return bookMapper.updateByPrimaryKey(record);}@Overridepublic List<Book> queryBookPager(Book book, PageBean pageBean) {return bookMapper.queryBookPager(book);}@Overridepublic Map<String, Object> queryBookCharts() {return bookMapper.queryBookCharts();}
}

controller层

ModuleController

package com.zking.ssm.controller;import com.zking.ssm.model.Module;
import com.zking.ssm.model.RoleModule;
import com.zking.ssm.model.TreeNode;
import com.zking.ssm.service.IModuleService;
import com.zking.ssm.util.JsonResponseBody;
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;import java.util.List;@Controller
@RequestMapping("/module")
public class ModuleController {@Autowiredprivate IModuleService moduleService;@RequestMapping("/queryRootNode")@ResponseBodypublic JsonResponseBody<List<Module>> queryRootNode(){try {List<Module> modules = moduleService.queryRootNode(-1);return new JsonResponseBody<>("OK",true,0,modules);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody<>("初始化首页菜单错误",false,0,null);}}@RequestMapping("/queryElementTree")@ResponseBodypublic JsonResponseBody<List<TreeNode>> queryElementTree(){try {List<TreeNode> modules = moduleService.queryTreeNode(-1);return new JsonResponseBody<>("OK",true,0,modules);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody<>("初始化ElementUI的Tree组件错误",false,0,null);}}@RequestMapping("/addRoleModule")@ResponseBodypublic JsonResponseBody<?> addRoleModule(RoleModule roleModule){try {moduleService.addRoleModule(roleModule);return new JsonResponseBody<>("新增角色权限成功",true,0,null);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody<>("新增角色权限失败",false,0,null);}}@RequestMapping("/queryModuleByRoleId")@ResponseBodypublic JsonResponseBody<List<String>> queryModuleByRoleId(RoleModule roleModule){try {List<String> modules = moduleService.queryModuleByRoleId(roleModule);return new JsonResponseBody<>("OK",true,0,modules);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody<>("获取角色权限失败",false,0,null);}}
}

BookController

package com.zking.ssm.controller;import com.zking.ssm.model.Book;
import com.zking.ssm.service.IBookService;
import com.zking.ssm.util.JsonResponseBody;
import com.zking.ssm.util.PageBean;
import com.zking.ssm.vo.BookFileVo;
import org.apache.commons.io.IOUtils;
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;
import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.URLEncoder;
import java.util.List;
import java.util.Map;@Controller
@RequestMapping("/book")
public class BookController {@Autowiredprivate IBookService bookService;@RequestMapping("/addBook")@ResponseBodypublic JsonResponseBody<?> addBook(Book book){try {bookService.insert(book);return new JsonResponseBody<>("新增书本成功",true,0,null);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody<>("新增书本失败",false,0,null);}}@RequestMapping("/editBook")@ResponseBodypublic JsonResponseBody<?> editBook(Book book){try {bookService.updateByPrimaryKey(book);return new JsonResponseBody<>("编辑书本成功",true,0,null);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody<>("编辑书本失败",false,0,null);}}@RequestMapping("/delBook")@ResponseBodypublic JsonResponseBody<?> delBook(Book book){try {bookService.deleteByPrimaryKey(book.getId());return new JsonResponseBody<>("删除书本成功",true,0,null);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody<>("删除书本失败",false,0,null);}}@RequestMapping("/queryBookPager")@ResponseBodypublic JsonResponseBody<List<Book>> queryBookPager(Book book, HttpServletRequest req){try {PageBean pageBean=new PageBean();pageBean.setRequest(req);List<Book> books = bookService.queryBookPager(book, pageBean);return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody<>("分页查询书本失败",false,0,null);}}@RequestMapping("/queryBookCharts")@ResponseBodypublic JsonResponseBody<?> queryBookCharts(){try{Map<String, Object> charts = bookService.queryBookCharts();return new JsonResponseBody<>("OK",true,0,charts);}catch (Exception e){e.printStackTrace();return new JsonResponseBody<>("查询统计分析数据失败",false,0,null);}}@RequestMapping("/upload")@ResponseBodypublic JsonResponseBody<?> upload(BookFileVo bookFileVo){try {MultipartFile bookFile = bookFileVo.getBookFile();System.out.println(bookFileVo);System.out.println(bookFile.getContentType());System.out.println(bookFile.getOriginalFilename());return new JsonResponseBody<>("上传成功",true,0,null);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody<>("上传失败",false,0,null);}}@RequestMapping("/download")public void download(HttpServletRequest request, HttpServletResponse response){try {String relativePath = "uploads/1.jpg";String absolutePath = request.getRealPath(relativePath);InputStream is = new FileInputStream(new File(absolutePath));OutputStream out = response.getOutputStream();response.setContentType("application/octet-stream");response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("1.jpg", "UTF-8"));byte[] by = new byte[1024];int len = -1;while (-1 != (len = is.read(by))) {out.write(by);}is.close();out.close();} catch (Exception e) {e.printStackTrace();}}@RequestMapping("/downloadUrl")public void downloadUrl(HttpServletRequest request, HttpServletResponse response){String relativePath = "uploads/1.jpg";String absolutePath = request.getRealPath(relativePath);InputStream is = null;OutputStream out = null;try {is = new FileInputStream(new File(absolutePath));// 设置Content-Dispositionresponse.setHeader("Content-Disposition","attachment;filename=" + URLEncoder.encode("1.jpg", "UTF-8"));out = response.getOutputStream();IOUtils.copy(is, out);response.flushBuffer();System.out.println("完成");} catch (Exception e) {e.printStackTrace();} finally {IOUtils.closeQuietly(is);IOUtils.closeQuietly(out);}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/91995.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pyspark常用功能记录

前言 pyspark中很多常用的功能&#xff0c;过段时间没有使用就容易忘记&#xff0c;需要去网上搜索&#xff0c;这里总结一下&#xff0c;省的以后还去去搜&#xff0c;供自己以后参考。 withColumn def hot_func(info_str):if info_str:eturn "1"return "0&…

新闻报道的未来:自动化新闻生成与爬虫技术

概述 自动化新闻生成是一种利用自然语言处理和机器学习技术&#xff0c;从结构化数据中提取信息并生成新闻文章的方法。它可以实现大规模、高效、多样的新闻内容生产。然而&#xff0c;要实现自动化新闻生成&#xff0c;首先需要获取可靠的数据源。这就需要使用爬虫技术&#…

步进电机只响不转

我出现问题的原因是相位线接错。 我使用的滑台上示17H的步进电机&#xff0c;之前用的是57的步进电机。 57步进电机的相位线是A黑、A-绿、B红、B-蓝。 17步进电机的相位线是A红、A-绿、B黑、B-蓝。 这两天被一个问题困扰了好久&#xff0c;在调试步进电机开发板的时候电机发生…

分类预测 | Matlab实现SSA-CNN-SVM麻雀算法优化卷积支持向量机分类预测

分类预测 | Matlab实现SSA-CNN-SVM麻雀算法优化卷积支持向量机分类预测 目录 分类预测 | Matlab实现SSA-CNN-SVM麻雀算法优化卷积支持向量机分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现SSA-CNN-SVM麻雀算法优化卷积支持向量机分类预测&#xff0…

Sentinel学习(1)——CAP理论,微服务中的雪崩问题,和Hystix的解决方案 Sentinel的相关概念 + 下载运行

前言 Sentinel 是面向分布式、多语言异构化服务架构的流量治理组件&#xff0c;主要以流量为切入点&#xff0c;从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维度来帮助开发者保障微服务的稳定性。 本篇博客介绍CAP理论&#xff0c;微…

Plant Simulation双深位库堆垛库

Plant Simulation双深位库堆垛库视频演示 自定义多入口&#xff0c;多出口 Plant Simulation双深位库堆垛库

【面试经典150 | 矩阵】螺旋矩阵

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;模拟方法二&#xff1a;按层模拟 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于…

【数据结构】选择排序 堆排序(二)

目录 一&#xff0c;选择排序 1&#xff0c;基本思想 2&#xff0c; 基本思路 3&#xff0c;思路实现 二&#xff0c;堆排序 1&#xff0c;直接选择排序的特性总结&#xff1a; 2&#xff0c;思路实现 3&#xff0c;源代码 最后祝大家国庆快乐&#xff01; 一&#xf…

测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)

文章目录 一、任务描述二、指标分析2.1 TP/FP/FN/TN2.2 精准率2.3 召回率 三、接口处理四、数据集处理五、开始计算指标五、实用工具5.1 移动文件5.2 可视化JSON标签5.3 可视化TXT标签 一、任务描述 通过给定的算法接口&#xff0c;对算法的输出&#xff08;置信度、检测框、告…

(原创)视频图像接口之eDP

一、视频图像接口 视频图像接口有多种&#xff0c;eDP、DP、LVDS、CPHY、DPHY、HDMI、V-BY-ONE、QSPI、RGB等等&#xff0c;今天主要讲eDP视频接口。 二、协议 DP协议很多&#xff0c;比如有DP1.4a、DP1.4b、DP2.0&#xff0c;诸多协议&#xff0c;大家有兴趣自行查找。 eD…

SQL 杂谈 1

在 SQL 语言中&#xff0c;DISTINCT 关键字是用于返回唯一的行。当使用多个列&#xff08;如 DISTINCT column1, column2&#xff09;时&#xff0c;它会返回这些列的唯一组合。但是&#xff0c;不能对每个列单独使用 DISTINCT 关键字&#xff08;比如 DISTINCT column1, DISTI…

英飞凌 Tricore 架构中断系统详解

本文以TC3系列MCU为例&#xff0c;先来了解中断源是如何产生的&#xff0c;再看一下CPU是如何处理中断源的。 AURIX TC3XX的中断路由模块 Interrupt Router (IR) 在TC3中&#xff0c;中断既可以被CPU处理&#xff0c;也可以被DMA处理&#xff0c;所以手册中不再把中断称为中断…

Apache Commons Pool2 池化技术

对象池是一种设计模式&#xff0c;用于管理和重用对象&#xff0c;以提高性能和资源利用率。对象池的概念在许多应用程序中都有广泛应用&#xff0c;特别是在需要频繁创建和销毁对象的情况下&#xff0c;例如数据库连接、线程、HTTP连接等 对象池通过预先创建一组对象并将它们存…

【论文笔记】SVDM: Single-View Diffusion Model for Pseudo-Stereo 3D Object Detection

原文链接&#xff1a;https://arxiv.org/abs/2307.02270 1. 引言 目前的从单目相机生成伪传感器表达的方法依赖预训练的深度估计网络。这些方法需要深度标签来训练深度估计网络&#xff0c;且伪立体方法通过图像正向变形合成立体图像&#xff0c;会导致遮挡区域的像素伪影、扭…

【数据结构篇】堆

文章目录 堆前言基本介绍认识堆堆的特点堆的分类堆的操作堆的常见应用 堆的实现JDK 自带的堆手动实现堆 堆 前言 本文主要是对堆的一个简单介绍&#xff0c;如果你是刚学数据结构的话&#xff0c;十分推荐看这篇文章&#xff0c;通过本文你将对堆这个数据结构有一个大致的了解…

C++ 传值调用

向函数传递参数的传值调用方法&#xff0c;把参数的实际值复制给函数的形式参数。在这种情况下&#xff0c;修改函数内的形式参数不会影响实际参数。 默认情况下&#xff0c;C 使用传值调用方法来传递参数。一般来说&#xff0c;这意味着函数内的代码不会改变用于调用函数的实…

阿里云ACP知识点(三)

1、弹性伸缩不仅提供了在业务需求高峰或低谷时自动调节ECS实例数量的能力&#xff0c;而且提供了ECS实例上自动部署应用的能力。弹性伸缩的伸缩配置支持多种特性&#xff0c;例如______,帮助您高效、灵活地自定义ECS实例配置&#xff0c;满足业务需求。 标签、密钥对、 实例RAM…

大学各个专业介绍

计算机类 五米高考-计算机类 注&#xff1a;此处平均薪酬为毕业五年平均薪酬&#xff0c;薪酬数据仅供参考 来源&#xff1a; 掌上高考 电气类 五米高考-电气类 机械类 五米高考-机械类 电子信息类 五米高考-电子信息类 土木类 五米高考-土木类

【多媒体技术与实践】音频信息获取和处理——编程题汇总

1&#xff1a;音频信息数据量计算 已知采样频率&#xff08;单位KHz&#xff09;、量化位数、声道数及持续时间&#xff08;单位分钟&#xff09;&#xff0c;求未压缩时的数据量&#xff08;单位MB&#xff09;. 例如&#xff1a; 输入&#xff1a; 22.05 16 2 3 &#xff…

从零手搓一个【消息队列】实现数据的硬盘管理和内存管理(线程安全)

文章目录 一、硬盘管理1, 创建 DiskDataCenter 类2, init() 初始化3, 封装交换机4, 封装队列5, 关于绑定6, 关于消息 二、内存管理1, 数据结构的设计2, 创建 MemoryDataCenter 类3, 关于交换机4, 关于队列5, 关于绑定6, 关于消息7, 恢复数据 三、小结 创建 Spring Boot 项目, S…