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.rhkb.cn/news/144367.html

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

相关文章

SpringCloud + SpringGateway 解决Get请求传参为特殊字符导致400无法通过网关转发的问题

title: “SpringCloud SpringGateway 解决Get请求传参为特殊字符导致400无法通过网关转发的问题” createTime: 2021-11-24T10:27:5708:00 updateTime: 2021-11-24T10:27:5708:00 draft: false author: “Atomicyo” tags: [“tomcat”] categories: [“java”] description: …

燃气安全如何保障?万宾燃气管网监测系统时刻感知管网运行态势

近年来随着我国城镇化建设的加快&#xff0c;燃气已经成为每个家庭的必需品。然而&#xff0c;每年夏季频繁发生的燃气爆炸事故&#xff0c;已经严重危害人民生命财产安全危害社会公共安全和公共利益。为了保障燃气安全运行&#xff0c;近日&#xff0c;许多城市都在大力推进燃…

wepack打包生产环境使用http-proxy-middleware做api代理转发的方法

首先安装http-proxy-middleware依赖&#xff0c;这个用npm和yarn安装都可以。 然后在express服务器的代码增加如下内容&#xff1a; const express require("express"); const app express(); const { createProxyMiddleware, fixRequestBody, } require("h…

WebGL笔记:绘制多个点,三角形,以及画各种不同的线条

绘制多点 1 &#xff09; WebGL 缓冲区 我们在用js定点位的时候&#xff0c;肯定是要建立一份顶点数据的&#xff0c;这份顶点数据是给着色器的&#xff0c;因为着色器需要这份顶点数据绘图然而&#xff0c;我们在js中建立顶点数据&#xff0c;着色器肯定是拿不到的&#xff…

ElementUI之首页导航与左侧菜单

目录 一、Mock 1.1 什么是Mock.js 1.2 安装与配置 1.2.1 安装mock.js 1.2.2 引入mock.js 1.3 mock.js使用 1.3.1 定义测试数据文件 1.3.2 mock拦截Ajax请求 1.3.3 界面代码优化 二、总线 2.1 定义 2.2 类型分类 2.3 前期准备 2.4 配置组件与路由关系 2.4.1 配置…

arduino - UNO-R3,mega2560-R3,NUCLEO-H723ZG的arduino引脚定义区别

文章目录 arduino - UNO-R3,mega2560-R3,NUCLEO-H723ZG的引脚定义区别概述笔记NUCLEO-H723ZGmega2560-R3UNO-R3经过比对, 这2个板子(NUCLEO-H723ZG, mega2560-R3)都是和UNO-R3的arduino引脚定义一样的.mega2560-r3和NUCLEO-H723ZG的区别补充arduino uno r3的纯数字IO和模拟IO作…

HTTP 协商缓存 Last-Modified,If-Modified-Since

浏览器第一次跟服务器请求一个资源&#xff0c;服务器在返回这个资源的同时&#xff0c;在respone header加上Last-Modified属性&#xff08;表示这个资源在服务器上的最后修改时间&#xff09;&#xff1a; ----------------------------------------------------------------…

【Java 进阶篇】MySQL 数据库备份与还原

MySQL 是一款常用的关系型数据库管理系统&#xff0c;用于存储和管理数据。在数据库应用中&#xff0c;数据备份和还原是非常重要的操作&#xff0c;用于保护数据免受意外删除、损坏或数据丢失的影响。本文将详细介绍如何在 MySQL 中进行数据库备份和还原操作&#xff0c;包括常…

5+铁死亡+分型+WGCNA+机器学习分析

今天给同学们分享一篇铁死亡分型WGCNA机器学习的生信文章“Identification of ferroptosis-related molecular clusters and genes for diabetic osteoporosis based on the machine learning”&#xff0c;这篇文章于2023年8月14日发表在Front Endocrinol (Lausanne)期刊上&am…

Swift 周报 第三十八期

文章目录 前言新闻和社区苹果自研调制解调器芯片受挫&#xff1a;速度太慢容易过热&#xff0c;落后高通 3 年App Store 现已接受适用于最新版操作系统的 App 和游戏提交 提案通过的提案正在审查的提案驳回的提案 Swift论坛推荐博文话题讨论关于我们 前言 本期是 Swift 编辑组…

redis主从从,redis-7.0.13

redis主从从&#xff0c;redis-7.0.13 下载redis安装redis安装redis-7.0.13过程报错1、没有gcc&#xff0c;报错2、没有python3&#xff0c;报错3、[adlist.o] 错误 127 解决安装报错安装完成 部署redis 主从从结构redis主服务器配置redis启动redis登录redisredis默认是主 redi…

DEM格式转换:转换NSDTF-DEM国标数据格式为通用格式,使用ArcGIS工具转换NSDTF-DEM国标.dem文件为通用.tif格式。

DEM格式转换&#xff1a;转换NSDTF-DEM国标数据格式为通用格式&#xff0c;使用ArcGIS工具转换NSDTF-DEM国标.dem文件为通用.tif格式。 *.dem是一种比较常见的DEM数据格式&#xff0c;其有两种文件组织方式&#xff0c;即NSDTF-DEM和USGS-DEM。 &#xff08;1&#xff09;NSDT…

【Linux】网络原理

文章目录 &#x1f4d6; 前言1. 计算机内部的交流1.1 计算机之间的交流&#xff1a; 2. 协议2.1 网络分层&#xff1a;2.2 以打电话为例&#xff1a;2.3 OSI七层模型&#xff1a;2.4 TCP/IP&#xff1a; 3. 操作系统与网络的关系4. 报头与解包4.1 报头的作用&#xff1a; 5. 局…

IDEA Debug技巧大全,看完就能提升工作效率

作者简介 目录 1.行断点 2.方法断点 3.异常断点 4.字段断点 5.条件表达式 1.行断点 行断点就是平时我们在代码行旁边单击鼠标打上的断点&#xff0c;这个没有什么好说的。关键点在于很多人不知道的&#xff0c;行断点其实是可以右击选择是对改行的全部调用都生效&#xf…

最新影视视频微信小程序源码-带支付和采集功能/微信小程序影视源码PHP(更新)

源码简介&#xff1a; 这个影视视频微信小程序源码&#xff0c;新更新的&#xff0c;它还带支付和采集功能&#xff0c;作为微信小程序影视源码&#xff0c;它可以为用户 提供丰富的影视资源&#xff0c;包括电影、电视剧、综艺节目等。 这个小程序影视源码&#xff0c;还带有…

Opengl之抛光物

我们目前使用的光照都来自于空间中的一个点。它能给我们不错的效果&#xff0c;但现实世界中&#xff0c;我们有很多种类的光照&#xff0c;每种的表现都不同。将光投射(Cast)到物体的光源叫做投光物(Light Caster) 平行光 当一个光源处于很远的地方时&#xff0c;来自光源的…

使用LDA(线性判别公式)进行iris鸢尾花的分类

线性判别分析((Linear Discriminant Analysis &#xff0c;简称 LDA)是一种经典的线性学习方法&#xff0c;在二分类问题上因为最早由 [Fisher,1936] 提出&#xff0c;亦称 ”Fisher 判别分析“。并且LDA也是一种监督学习的降维技术&#xff0c;也就是说它的数据集的每个样本都…

Simulink仿真封装中的参数个对话框设置

目录 参数和对话框窗格 初始化窗格 文档窗格 为了更加直观和清晰的分析仿真&#xff0c;会将多个元件实现的一个功能封装在一起&#xff0c;通过参数对话框窗格&#xff0c;可以使用参数、显示和动作选项板中的对话框控制设计封装对话框。如图所示&#xff1a; 参数和对话框…

Flutter笔记:关于应用程序中提交图片作为头像

Flutter笔记 关于应用程序中提交图片作为头像 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/133418554…

【数据库——MySQL】(12)过程式对象程序设计——存储过程

目录 1. 存储过程2. 局部变量3. 条件分支3.1 IF 语句3.2 CASE 语句 4. 循环语句4.1 WHILE 语句4.2 REPEAT 语句4.3 LOOP和LEAVE语句4.4 LOOP和ITERATE语句 5. 存储过程应用示例参考书籍 1. 存储过程 要创建存储过程&#xff0c;需要用到 CREATE 语句&#xff1a; CREATE PROCED…