SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客(七)
系列文章目录
- 系统功能演示——基于SpringBoot和Vue的后台管理系统项目系列博客(一)
- Vue2安装并集成ElementUI——基于SpringBoot和Vue的后台管理系统项目系列博客(二)
- Vue2前端主体框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客(三)
- SpringBoot后端初始框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客(四)
- SpringBoot集成Mybatis——基于SpringBoot和Vue的后台管理系统项目系列博客(五)
- SpringBoot实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客(六)
- SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客(七)
- SpringBoot实现集成Mybatis-Plus和SwaggerUI——基于SpringBoot和Vue的后台管理系统项目系列博客(八)
- Vue实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客(九)
- SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客(十)
- Vue使用路由——基于SpringBoot和Vue的后台管理系统项目系列博客(十一)
- SpringBoot和Vue实现导入导出——基于SpringBoot和Vue的后台管理系统项目系列博客(十二)
- SpringBoot和Vue实现用户登录注册与异常处理——基于SpringBoot和Vue的后台管理系统项目系列博客(十三)
- SpringBoot和Vue实现用户个人信息展示与保存与集成JWT——基于SpringBoot和Vue的后台管理系统项目系列博客(十四)
- SpringBoot和Vue实现文件上传与下载——基于SpringBoot和Vue的后台管理系统项目系列博客(十五)
- SpringBoot和Vue整合ECharts——基于SpringBoot和Vue的后台管理系统项目系列博客(十六)
- SpringBoot和Vue实现权限菜单功能——基于SpringBoot和Vue的后台管理系统项目系列博客(十七)
- SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客(十八)
- 用户前台页面设计与实现——基于SpringBoot和Vue的后台管理系统项目系列博客(十九)
- SpringBoot集成Redis实现缓存——基于SpringBoot和Vue的后台管理系统项目系列博客(二十)
- SpringBoot和Vue集成高德地图——基于SpringBoot和Vue的后台管理系统项目系列博客(二十一)
- SpringBoot和Vue集成视频播放组件——基于SpringBoot和Vue的后台管理系统项目系列博客(二十二)
- SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客(二十三)
项目资源下载
- GitHub下载地址
- Gitee下载地址
- 项目MySql数据库文件
文章目录
- 系列文章目录
- 项目资源下载
- 前言
- 一、使用Sql实现分页查询
- 二、跨域问题的解决
- 三、将数据渲染至前端
- 四、动态分页功能的实现
- 五、根据用户名进行模糊查询的动态分页
- 总结
前言
今天博客的主要内容包括:使用Sql实现分页查询、跨域问题的解决、将数据渲染至前端、动态分页功能的实现、根据用户名进行模糊查询的动态分页等内容。分页功能非常常用,经常可以应用到其他地方,还有模糊检索等内容都是Web应用常见内容。下面就开始今天的内容!
一、使用Sql实现分页查询
- 首先在UserMapper.java中新建两个Sql语句,分别用来完成分页功能和统计个数功能
- 然后在UserController中通过Sql进行分页和个数统计功能的实现,并返回结果
- 然后使用Postman进行测试,我们发现不仅实现了分页功能也实现了数据个数统计功能,注意要启动后台服务器
二、跨域问题的解决
- 因为数据在后台,又要将数据拿到前端,所以要在HomeView.vue的中加入如下代码,为了去拿到我们的后台分页查询数据
- 但是我们的项目分别由前端服务器和后端服务器构成,处于不同的端口,当它们传输数据时,就会产生跨域问题,当我们进行分页查询时,要将后端的数据传输到前端,当我们测试刚才写好的分页功能的时候(分别启动前端和后台服务器,看控制台即可),由于跨域问题会报错,报错内容如下所示:
- 为了解决这个问题,我们需要进行SpringBoot的跨域设置。这个问题比较好解决,我们只需要新建config/CorsConfig.java,加入以下代码就可以解决跨域问题
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;/*** 解决前端跨域问题*/
@Configuration
public class CorsConfig {// 当前跨域请求最大有效时长。这里默认1天private static final long MAX_AGE = 24 * 60 * 60;@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedOrigin("http://localhost:8080"); // 1 设置访问源地址corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法corsConfiguration.setMaxAge(MAX_AGE);source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置return new CorsFilter(source);}}
- 然后我们将前端服务器和后台服务器都启动,测试是否实现了跨域间的数据传输,打开控制台我们发现前端已经拿到了后台的数据
三、将数据渲染至前端
- 首先在User.java中将password设置注解,目的是不显示用户密码
- 然后删除HomeView.vue中的初始化数据,并设置tableData为默认的空数组
- 然后将表格字段与我们分页查询的内容一一对应
- 然后将后台查询到的数据渲染给前端的表格
- 然后我们需要修改以下几个地方来将后台查询到的数据个数传输给前端服务器
①:首先将total 初始化为0
②:然后将total变为变量,由后台数据传入
③:最后将从后台查询到的total赋值给前端的total
- 最后刷新一下前端服务器,我们可以看到后台数据已经成功传输到前端服务器上
四、动态分页功能的实现
- 因为我们之前是将页码和数据个数写死,不适用于业务需求,所以我们需要根据实时数据以实现动态分页功能。首先在HomeView.vue中初始化分页需要用到的参数
- 修改当前页码、每页个数、当前页个数
- 设置动态分页请求
- 现在如果我们测试还不能实现分页的功能,因为我们没有将值赋给我们要查询的链接,所以我们需要如下几步,目的是将我们要去往的页码和数据个数传输给我们要查询的数据链接
①:首先将数据库查询操作封装
②:然后调用load()以实现请求分页查询数据
③:然后加入如下两个函数,目的是获取我们实时的页码和数据个数
④:最后将我们的实时数据赋值给数据查询链接,以实现动态分页请求
- 最后我们测试一下,发现实现了动态分页查询的功能
五、根据用户名进行模糊查询的动态分页
- 为了实现可以根据用户名进行模糊查询,我们首先在UserMapper.java中修改如下几处代码
- 然后在UserController.java中修改如下几处,目的是可以根据传进来的用户名进行模糊分页查询
- 最后使用Postman进行测试,我们发现可以实现根据用户名进行模糊分页查询
- 现在已经得到数据了,下面就是将数据渲染到前端中,我们需要在HomeView.vue中进行以下几步
①:首先将姓名搜索框绑定一个参数
②:然后将此参数初始化
③:然后将此参数拼接到数据链接中
④:最后将搜索框绑定获取数据的函数
- 最后我们可以去前端测试一下,我们模糊搜索有关用户名中包括“a”的数据,可以看到我们已经实现了根据用户名的模糊分页查询
总结
那么我们到此为止就完成了这篇博文的内容了,现在我们不仅可以实现前端后台的数据交互了,还可以实现分页/模糊查询,这对后面的功能实现有很大的帮助。我们下篇博文见!
SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客(七)相关推荐
- SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客(十八)
系列文章目录 系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
- SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客(十)
系列文章目录 系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
- SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客(二十三)
系列文章目录 系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
- 订单支付和评论——基于Django框架的天天生鲜电商网站项目系列博客(十五)
系列文章目录 需求分析--基于Django框架的天天生鲜电商网站项目系列博客(一) 网站框架搭建--基于Django框架的天天生鲜电商网站项目系列博客(二) 用户注册模块--基于Django框架的天天 ...
- 项目体系架构设计——基于Spark平台的协同过滤实时电影推荐系统项目系列博客(四)
系列文章目录 初识推荐系统--基于Spark平台的协同过滤实时电影推荐系统项目系列博客(一) 利用用户行为数据--基于Spark平台的协同过滤实时电影推荐系统项目系列博客(二) 项目主要效果展示--基 ...
- 实时推荐服务建设——基于Spark平台的协同过滤实时电影推荐系统项目系列博客(八)
系列文章目录 初识推荐系统--基于Spark平台的协同过滤实时电影推荐系统项目系列博客(一) 利用用户行为数据--基于Spark平台的协同过滤实时电影推荐系统项目系列博客(二) 项目主要效果展示--基 ...
- 利用用户行为数据——基于Spark平台的协同过滤实时电影推荐系统项目系列博客(二)
系列文章目录 初识推荐系统--基于Spark平台的协同过滤实时电影推荐系统项目系列博客(一) 利用用户行为数据--基于Spark平台的协同过滤实时电影推荐系统项目系列博客(二) 项目主要效果展示--基 ...
- 基础环境搭建——基于Spark平台的协同过滤实时电影推荐系统项目系列博客(五)
系列文章目录 初识推荐系统--基于Spark平台的协同过滤实时电影推荐系统项目系列博客(一) 利用用户行为数据--基于Spark平台的协同过滤实时电影推荐系统项目系列博客(二) 项目主要效果展示--基 ...
- 网站框架搭建——基于Django框架的天天生鲜电商网站项目系列博客(二)
系列文章目录 需求分析--基于Django框架的天天生鲜电商网站项目系列博客(一) 网站框架搭建--基于Django框架的天天生鲜电商网站项目系列博客(二) 用户注册模块--基于Django框架的天天 ...
最新文章
- 机器学习中的数学 人工智能深度学习技术丛书
- 1.Spring Security 详细简绍与入门
- 关于COPC后台配置的几个关键步骤及其事务代码
- 16位模式/32位模式下PUSH指令探究——《x86汇编语言:从实模式到保护模式》读书笔记16
- iOS开发——手机号,密码,邮箱,身份证号,中文判断
- 叮咚!7.24运维节,您有一份礼物待查收!
- 第一百三十一节,JavaScript,封装库--CSS
- 计算机科学 高中研究项目,高中信息科技教学中渗透计算机科学史的实践研究...
- 30天敏捷结果(24):恢复你的精力
- hashmap浅析-get方法
- jmeter压力测试
- MCSA / Windows Server 2016 安装,配置和管理 Nano Server
- 微信java sdk 多公众号_Java版微信公众号支付开发全过程
- 10个全网最具创意的聊天机器人:漫威和联合国儿童基金会都在尝试使用聊天机器人
- 化工原理计算机辅助设计,化工原理课程设计心得体会
- 【C++】加油站加油
- win10 桌面体验 服务器,windows server 2012 R2 安装桌面体验
- 工控机CF卡槽无法使用的解决方案
- DM6467的CAN模块调试(SPI转CAN)
- 用python爬小说_今天分享一个用Python来爬取小说的小脚本!(附源码)
热门文章
- Python-Web后端框架:Flask
- Word控件Spire.Doc 【脚注】教程(5):单词脚注的位置与数字格式
- office无法显示联机服务器,Microsoft Office Outlook出现无法打开服务器的解决方法
- 邹欣对话MongoDB CTO:新数据库时代将带来什么?
- 为什么有人可以在屎一样混乱的几千行代码里加功能?不重构能驾驭屎山吗?...
- 手机批发业务—产品选购
- Wex5仿微店代码学习与分析
- Redis(九):Redis的主从同步
- 2023最新SSM计算机毕业设计选题大全(附源码+LW)之java校内考研吧hd450
- 是先设计mysql表再进行php代码_MySQL设计与开发规范_MySQL