Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】

😀前言
本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】,希望你能够喜欢

🏠个人主页:晨犀主页
🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉
💕欢迎大家:这里是CSDN,我总结知识的地方,欢迎来到我的博客,感谢大家的观看🥰
如果文章有什么需要改进的地方还请大佬不吝赐教 先在此感谢啦😊

文章目录

  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】
    • 实现功能07-删除家居信息
      • 需求分析/图解
      • 思路分析
      • 代码实现
    • 实现功能08-分页显示列表
      • 需求分析/图解
        • 说明
      • 思路分析
      • 代码实现
      • 完成测试
        • 分页显示效果

Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】

实现功能07-删除家居信息

需求分析/图解

image-20230822144126930

image-20230822144139198

思路分析

  1. 完成后台代码从mapper -> service -> controller , 并对代码进行测试
  2. 完成前台代码,使用axios 发送http 请求,删除数据, 将数据绑定显示

代码实现

  1. 修改FurnController.java , 处理删除请求, 并使用Postman 完成测试
    //增加方法[接口],根据id,返回对应的家居信息//如何设计? 依然使用url占位符+@PathVariable@GetMapping("/find/{id}")public Result findById(@PathVariable Integer id) {Furn furn = furnService.getById(id);log.info("furn={}", furn);return Result.success(furn);//返回成功的信息-携带查询到furn信息}

image-20230822144300232

  1. 修改HomeView.vue , 编写handleDel 方法, 完成删除并测试
//处理删除方法
handleDel(id) {request.delete("/api/del/" + id).then(res => {if (res.code === 200) {this.$message({type: "success",message: "删除成功"})} else {this.$message({type: "error",message: res.msg})}this.list() // 刷新列表})
}//响应删除点击<template #default="scope"><el-button size="mini" @click="handleEdit(scope.row)" type="primary">编辑</el-button><!--增加popcomfirm 控件,确认删除-- ><el-popconfirmtitle="确定删除吗?" @confirm="handleDel(scope.row.id)" ><template #reference><el-button size="small" type="danger">删除</el-button></template></el-popconfirm></template >
  1. 完成测试测试

image-20230822144840183

实现功能08-分页显示列表

需求分析/图解

说明

  1. 显示共多少记录
  2. 可以设置每页显示几条
  3. 点击第几页,显示对应数据

image-20230822145119107

思路分析

  1. 后台使用MyBatis-plus 分页插件完成查询
  2. 修改FurnController , 增加处理分页显示代码
  3. 完成前台代码,加入分页导航,并将分页请求和后台接口结合

代码实现

  1. 创建com/nlc/furn/config/MybatisPlusConfig.java 配置类,引入mybatis-plus 分页插件
@Configuration
public class MybatisPlusConfig {/*** 梳理* 1、注入MybatisPlusInterceptor 对象/bean* 2. 在MybatisPlusInterceptor bean 加入分页插件 PaginationInnerInterceptor*/@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();//这里分页需要指定数据库类型,因为不同的DB,分页SQL语句不同interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));return interceptor;}
}
  1. 修改FurnController.java 增加分页查询处理
    /*** @param pageNum  显示第几页 ,默认1* @param pageSize 每页显示几条记录 , 默认5* @return*///分页查询的接口/方法@GetMapping("/furnsByPage")public Result listFurnsByPage(@RequestParam(defaultValue = "1") Integer pageNum,@RequestParam(defaultValue = "5") Integer pageSize) {//这里通过page方法,返回Page对象, 对象中就封装了分页数据Page<Furn> page = furnService.page(new Page<>(pageNum, pageSize));//这里我们注意观察,返回的page数据结构是如何的?这样你才能指定在前端如何绑定返回的数据return Result.success(page);}
  1. 为方便观察SQL, 配置MyBatis-Plus 日志输出, 修改D:\nlc_springboot_vue_temp\springboot_furns\src\main\resources\application.yml
mybatis-plus:configuration:#这里我们配置输出底层的sql,方便我们观察sqllog-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  1. 使用Postman 进行测试, 看看分页查询是否OK , 浏览器输入http://localhost:10000/furnsByPage

image-20230822150038711

------看后端sql--------

==> Preparing: SELECT COUNT(*) FROM furn
==> Parameters:
<== Columns: COUNT(*)
<== Row: 5
<== Total: 1
==> Preparing: SELECT id,name,maker,price,sales,stock FROM furn LIMIT ?
==> Parameters: 3(Long)
<== Columns: id, name, maker, price, sales, stock <== Row: 1, 北欧风格小桌子, 熊猫家居, 180.00, 666, 7
<== Row: 2, 简约风格小椅子, 熊猫家居, 180.00, 666, 7
<== Row: 3, 典雅风格小台灯, 蚂蚁家居, 180.00, 666, 7
<== Total: 3
  1. 修改HomeView.vue , 完成分页导航显示、分页请求

image-20230822150129750

image-20230822150557035

//增加element-plus 分页控件
<div style="margin: 10px 0"><el-pagination
@size-change="handlePageSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5,10]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total">
</el-pagination>
</div >
</div >
</template >//增加分页初始化数据data() {return {currentPage: 1,pageSize: 5,total: 10,//修改list(), 换成分页请求数据list() { //请求显示家居列表-不带检索request.get("/api/furnsByPage", {params: {pageNum: this.currentPage,pageSize: this.pageSize}}).then(res => {//绑定tableData, 显示在表格this.tableData = res.extend.pageInfo.listthis.total = res.extend.pageInfo.total})}
//增加方法, 处理记录的变化, 这两个方法是和分页控件绑定的.
//处理每页显示多少条记录变化
handlePageSizeChange(pageSize) {this.pageSize = pageSizethis.list()},//处理当前页变化, 比如点击分页连接,或者go to 第几页handleCurrentChange(pageNum) {this.currentPage = pageNumthis.list()}

完成测试

启动项目后台服务springboot-furn, 启动项目前台springboot_vue, 浏览器输入: http://localhost:10000/

分页显示效果

● 测试分页显示效果, 浏览器: http://localhost:10000/

image-20230822150801931

文章到这里就结束了,如果有什么疑问的地方请指出,诸大佬们一起来评论区一起讨论😁
希望能和诸大佬们一起努力,今后我们一起观看感谢您的阅读🍻
如果帮助到您不妨3连支持一下,创造不易您们的支持是我的动力🤞

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

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

相关文章

vscode使用anaconda自带的python环境在终端运行时报错

目录 具体报错内容官方翻译报错讲人话解决方法 具体报错内容 CommandNotFoundError: Your shell has not been properly configured to use conda activate. If your shell is Bash or a Bourne variant, enable conda for the current user with$ echo ". E:\Anaconda/e…

ResNet详解:网络结构解读与PyTorch实现教程

目录 一、深度残差网络&#xff08;Deep Residual Networks&#xff09;简介深度学习与网络深度的挑战残差学习的提出为什么ResNet有效&#xff1f; 二、深度学习与梯度消失问题梯度消失问题定义为什么会出现梯度消失&#xff1f;激活函数初始化方法网络深度 如何解决梯度消失问…

vulnhub Seattle-0.0.3

环境&#xff1a;vuluhub Seattle-0.0.3 1.catelogue处任意文件下载(目录穿越) http://192.168.85.139/download.php?item../../../../../../etc/passwd 有个admin目录&#xff0c;可以下载里面的文件进行读取 2.cltohes详情页面处(参数prod)存在sql报错注入 http://192.16…

数据分析作业四-基于用户及物品数据进行内容推荐

## 导入支持库 import pandas as pd import matplotlib.pyplot as plt import sklearn.metrics as metrics import numpy as np from sklearn.neighbors import NearestNeighbors from scipy.spatial.distance import correlation from sklearn.metrics.pairwise import pairwi…

AxureRP制作静态站点发布互联网,内网穿透实现公网访问

AxureRP制作静态站点发布互联网&#xff0c;内网穿透实现公网访问 文章目录 AxureRP制作静态站点发布互联网&#xff0c;内网穿透实现公网访问前言1.在AxureRP中生成HTML文件2.配置IIS服务3.添加防火墙安全策略4.使用cpolar内网穿透实现公网访问4.1 登录cpolar web ui管理界面4…

Android studio APK切换多个摄像头(Camera2)

1.先设置camera的权限 <uses-permission android:name"android.permission.CAMERA" /> 2.布局 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"and…

服务器部署前后端项目-SQL Father为例

hello~大家好哇&#xff0c;好久没更新博客了。现在来更新一波hhh 现在更新一下部署上的一些东西&#xff0c;因为其实有很多小伙伴跟我之前一样&#xff0c;很多时候只是开发了&#xff0c;本地前后端都能调通&#xff0c;也能用&#xff0c;但是没有部署到服务器试过&#x…

新SDK平台下载开源全志V853的SDK

获取SDK SDK 使用 Repo 工具管理&#xff0c;拉取 SDK 需要配置安装 Repo 工具。 Repo is a tool built on top of Git. Repo helps manage many Git repositories, does the uploads to revision control systems, and automates parts of the development workflow. Repo is…

用NeRFMeshing精确提取NeRF网络中的3D网格

准确的 3D 场景和对象重建对于机器人、摄影测量和 AR/VR 等各种应用至关重要。 NeRF 在合成新颖视图方面取得了成功&#xff0c;但在准确表示底层几何方面存在不足。 推荐&#xff1a;用 NSDT编辑器 快速搭建可编程3D场景 我们已经看到了最新的进展&#xff0c;例如 NVIDIA 的…

【算法与数据结构】404、LeetCode左叶子之和

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;思路比较简单&#xff0c;遍历所有节点然后判断该节点是否为左叶子节点&#xff0c;如果是&#xff0c…

文件夹无法删除?简单3招,轻松解决问题!

“我电脑里有一个文件夹占用了很大的内存&#xff0c;我想将它删除来释放一些内存&#xff0c;但是根本没法删除&#xff0c;为什么会这样呢&#xff1f;文件夹无法删除应该怎么办呢&#xff1f;” 在日常电脑使用中&#xff0c;有时候会遇到文件夹无法删除的情况&#xff0c;这…

“互联网+”背景下燃气行业的数字化之路

文章来源&#xff1a;智慧美好生活 关键词&#xff1a;智慧燃气、智慧燃气场站、智慧燃气平台、设备设施数字化、数字孪生、工业互联网 近年来&#xff0c;随着互联网行业的发展&#xff0c;其影响力正在逐渐渗透到各个领域。在能源行业&#xff0c;各个互联网巨头与燃气企业…