Vue+ElementUI实现动态树和表格数据的分页模糊查询

目录

前言

一、动态树的实现

1.数据表

2.编写后端controller层

3.定义前端发送请求路径

4.前端左侧动态树的编写

4.1.发送请求获取数据

4.2.遍历左侧菜单

5.实现左侧菜单点击展示右边内容

5.1.定义组件

5.2.定义组件与路由的对应关系

5.3.渲染组件内容

5.4.通过动态路由跳转为当前项内容

二、表格分页模糊查询的实现

1.数据表

2.后端分页模糊查询的实现

3.编写书籍管理请求路径

4.编写书籍管理前端


前言

在Element UI搭建首页导航和左侧菜单以及Mock.js和(组件通信)总线的运用博文中讲解了首页导航和左侧树形菜单的搭建,今天我们将通过前后端结合将左侧菜单数据变活,以及实现点击动态树右边展示相应内容。并实现对表格的分页模糊查询。

一、动态树的实现

后端mapper.xml,以及biz层都比较简单,这里就不过多讲解了

1.数据表

2.编写后端controller层

package com.ctb.ssm.controller;import com.ctb.ssm.model.Module;
import com.ctb.ssm.model.RoleModule;
import com.ctb.ssm.model.TreeNode;
import com.ctb.ssm.service.IModuleService;
import com.ctb.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);}}}

3.定义前端发送请求路径

api/action.js

'SYSTEM_MENUS': '/module/queryRootNode',  //左侧菜单

4.前端左侧动态树的编写

4.1.发送请求获取数据

let url = this.axios.urls.SYSTEM_MENUS;this.axios.get(url, {}).then(r => {console.log(r);this.menus = r.data.rows;}).catch(e => {})

4.2.遍历左侧菜单

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

效果展示

5.实现左侧菜单点击展示右边内容

先编写两个组件测试效果,也为下面内容进行铺垫

5.1.定义组件

AddBook

<template><h1>书籍新增</h1>
</template><script>
</script><style>
</style>

BookList

<template><h1>书籍管理</h1>
</template><script>
</script><style>
</style>

5.2.定义组件与路由的对应关系

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}]}]
})

5.3.渲染组件内容

 在AppMain.vue中心区域显示内容处改为以下内容:

<router-view></router-view>

5.4.通过动态路由跳转为当前项内容

router :default-active="$route.path"

 效果展示:

二、表格分页模糊查询的实现

1.数据表

2.后端分页模糊查询的实现

这里也就只展示controller层了,有需要的评论区留言或私聊

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

3.编写书籍管理请求路径

'SYSTEM_BookList': '/book/queryBookPager',  //书籍管理---分页模糊查询

4.编写书籍管理前端

BookList.vue

<template><div class="books" style="padding: 20px;"><!-- 1.搜索框 --><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><!-- 2.数据表格 --><el-table :data="tableData" stripe style="width: 100%"><el-table-column prop="id" label="书籍编号" width="180"></el-table-column><el-table-column prop="bookname" label="书籍名称" width="180"></el-table-column><el-table-column prop="price" label="书籍价格"></el-table-column><el-table-column prop="booktype" label="书籍类型"></el-table-column></el-table><!-- 3.分页条 --><div class="block" style="padding: 20px;"><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: [],rows:10,page:1,total:0}},methods: {// 定义一个查询的方法,方便调用减少代码冗余query(params) {// 向后台请求数据的访问路径let url = this.axios.urls.SYSTEM_BookList;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);},handleSizeChange(r) { //当页大小发生变化// 输出查看console.log("当前页大小:"+r);let params = {bookname: this.bookname,rows:r,page:this.page}// 调用查询方法this.query(params);},handleCurrentChange(p) { //当前页页码发生变化// 输出查看console.log("当前页码:"+p);let params = {bookname: this.bookname,page:p,rows:this.rows}// 调用查询方法this.query(params);}},created() {// 调用查询方法this.query({});}}
</script><style>
</style>

 效果展示

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

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

相关文章

PHP8中伪变量“$this->”和操作符“::”的使用-PHP8知识详解

对象不仅可以调用自己的变量和方法&#xff0c;也可以调用类中的变量和方法。PHP8通过伪变量“$this->”和操作符“::”来实现这些功能。 1.伪变量“$this->” 在通过对象名->方法调用对象的方法时&#xff0c;如果不知道对象的名称&#xff0c;而又想调用类中的方法…

zabbix实现钉钉报警

首先钉钉创建一个团队 自定义关键词 查看zabbix-server脚本存放的位置&#xff1a; [rootcontrolnode ~]# grep ^AlertScriptsPath /etc/zabbix/zabbix_server.conf AlertScriptsPath/usr/lib/zabbix/alertscripts zabbix server设置 在配置文件书写脚本目录vim /etc/za…

威胁追踪如何增强您的网络安全态势

网络威胁的复杂性、频率和影响正在加剧。2022 年&#xff0c;勒索软件攻击达到2.361 亿次&#xff0c;其中 39% 的英国企业遭受网络攻击。 这些攻击需要工具和资源来识别和纠正漏洞&#xff0c;以在云环境中维护强大的安全框架&#xff0c;从而降低数据泄露和合规违规的风险。…

ptmalloc源码分析 - realloc()函数的实现(11)

目录 一、步骤1-判断边界情况&#xff0c;realloc也可以执行malloc和free的功能 二、步骤2-原chunk如果MMAP方式分配&#xff0c;申请新内存并拷贝实现 三、步骤3-非MMAP方式分配&#xff0c;则_int_realloc进行合并/裁剪等实现 1. _int_realloc函数&#xff1a;老chunk足够…

系统化思考,从初级到高级书单推荐

用思考工具进行系统思考&#xff0c;解决复杂问题&#xff0c;成为某个领域的高手&#xff0c;下面这几本书就是补充你脑海的系统思考的工具&#xff0c;一定要保存。 《简单的逻辑学》 作者&#xff1a;麦克伦尼 一切的系统源自于逻辑&#xff0c;如果你没有逻辑分析的能力&…

jenkins容器内配置python项目运行环境(Python3.7.3)

目录 1.查看启动的容器2.进入jenkins容器内部3.使用wget&#xff1a;提示没有wget命令4.查看jenkins容器系统版本5.换成国内源&#xff08;阿里&#xff09;5.更新apt-get6.安装wget7.创建python存放目录8.下载python9.解压10.安装依赖11.运行脚本configure12.make编译make ins…

JavaWeb 学习笔记 11:JDBC

JavaWeb 学习笔记 11&#xff1a;JDBC 1.简介 JDBC 是一个 Java 为接入不同类型的数据库定义的一个数据库连接和执行 SQL 的 API。 可以用下图表示&#xff1a; 图中的具体数据库的驱动实际上就是数据库厂商提供的 JDBC 接口的实现类。 2.快速开始 用 Maven 创建一个简单的…

使用 PyTorch 的计算机视觉简介 (5/6)

一、说明 本文主要介绍CNN中在pytorch的实现&#xff0c;其中VGG16网络&#xff0c;数据集来源&#xff0c;以及训练过程&#xff0c;模型生成和存储&#xff0c;模型调入等。 二、预训练模型和迁移学习 训练 CNN 可能需要大量时间&#xff0c;并且该任务需要大量数据。但是&am…

Python+Django前后端分离

程序示例精选 PythonDjango前后端分离 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《PythonDjango前后端分离》编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易读。 学习与应…

安防视频/集中云存储平台EasyCVR(V3.3)部分通道显示离线该如何解决?

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

c语言练习67:写一个宏,可以将一个整数的二进制位的奇数位和偶数位交换。

写一个宏&#xff0c;可以将一个整数的二进制位的奇数位和偶数位交换。 #define SwapIntBit(n) (((n) & 0x55555555) << 1 | ((n) & 0xaaaaaaaa) >> 1) 交换奇偶位&#xff0c;需要先分别拿出奇偶位。既然是宏&#xff0c;分别拿出用循环不是很现实&…

消息中间件(二)——kafka

文章目录 Apache Kafka综述什么是消息系统&#xff1f;点对点消息类型发布-订阅消息类型 什么是Kafka?优点关键术语Kafka基本原理用例 Apache Kafka综述 在大数据中&#xff0c;会使用到大量的数据。面对这些海量的数据&#xff0c;我们一是需要做到能够收集这些数据&#xf…

Vue3 中的虚拟DOM、 h() 函数,渲染函数,渲染器知识点一网打尽!

在平常开发阶段我们总是分不清虚拟 DOM、 h() 函数、渲染函数和渲染器的知识。笔者在翻阅相关文档之后&#xff0c;总结了下面这些知识点。 h() 函数用于创建虚拟 DOM&#xff0c;渲染函数的作用就是返回虚拟 DOM。因此&#xff0c;我们可以在渲染函数中使用 h() 创建虚拟 DOM…

【KingFusion】如何在3D场景实现流水效果

哈喽&#xff0c;大家好,我是雷工&#xff01; 在项目过程中&#xff0c;经常会涉及到实现管道水流动效果&#xff0c;此篇记录在KingFusion中的3D场景实现水流效果。 以下为简单流水效果的样例&#xff0c; 一、效果展示 当点击水泵&#xff0c;水泵启动&#xff0c;显示流水…

知网G4期刊-基础教育论坛-如何投稿?

《基础教育论坛》知网 3版5000字符 24年上半年刊期&#xff0c;可收中小学基础教育&#xff0c;幼儿教育等教育全科文章。 《基础教育论坛》主要刊登有关教育教学理论探讨及课程改革、教学改革、考试改革研究等方面的文章&#xff0c;为广大基础教育工作者提供学术交流的…

卫星图像应用 - 洪水检测 数据预处理

执行环境&#xff1a;Google Colab !pip install basemap下载basemap用于在地图上绘制2D数据。 import os import json import numpy as np import matplotlib.pyplot as plt import matplotlib.image as mpimg import matplotlib.gridspec as gridspec from mpl_toolkits.ba…

逻辑像素与物理像素引发学习型探索

文章目录 目的关于像素从像素到分辨率DP(设备像素&#xff09;- 物理像素DIP(逻辑像素&#xff09;- 设备独立像素CSS 像素屏幕特性 DRP&#xff08;设备像素比&#xff09;PPI(Pixels Per Inch ) - 像素密度屏幕像素密度PPI 目的 做一个前端或或者产品开发者&#xff0c; 在涉…

MySQL基础篇-约束

目录 1.约束概述 2.分类 3.测试user表的约束情况 主键约束 非空约束及唯一约束 检查约束 默认约束 4.外键约束 外键约束的语法 外键约束的删除/更新行为 小结 1.约束概述 MySQL约束&#xff08;Constraints&#xff09;是用于确保表中数据完整性和一致性的规则。它们定…

ArrayList 的扩容机制

ArrayList扩容的本质就是计算出新的扩容数组的size后实例化&#xff0c;并将原有数组内容复制到新数组中去。默认情况下&#xff0c;新的容量会是原容量的1.5倍。以JDK1.8为例说明 ArrayList的构造方法有三种&#xff1a; 第一个构造方法用来返回一个初始容量为10的数组 在初…

C++学习资源

https://www.cnblogs.com/xueweihan/p/13928719.html GitHub - Light-City/CPlusPlusThings: C那些事 GitHub - 0voice/introduce_c-cpp_manual: 一个收集C/C新手学习的入门项目&#xff0c;整理收纳开发者开源的小项目、工具、框架、游戏等&#xff0c;视频&#xff0c;书籍&a…