SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--功能实现【四】

文章目录

  • SSM--功能实现
    • 实现功能06-修改家居信息
      • 需求分析/图解
      • 思路分析
      • 代码实现
      • 注意事项和细节
    • 实现功能07-删除家居信息
      • 需求分析/图解
      • 思路分析
      • 代码实现
    • 实现功能08-分页显示列表
      • 需求分析/图解
      • 思路分析
      • 代码实现
      • 完成测试
        • 分页显示效果

SSM–功能实现

实现功能06-修改家居信息

需求分析/图解

image-20230801151715560

思路分析

  1. 完成后台代码从dao -> serivce -> controller , 并对每层代码进行测试
  2. 完成前台代码, 回显家居信息,再使用axios 发送http / ajax 请求,更新数据, 将数据绑定显示

代码实现

  1. 修改FurnService.java 和FurnServiceImpl.java, 增加update 方法

修改FurnService.java

public void update(Furn furn);

修改FurnServiceImpl.java,

@Override
public void update(Furn furn) {
//因为传入的furn 的字段不一定是完整的,所以使用updateByPrimaryKeySelectivefurnMapper.updateByPrimaryKeySelective(furn);
}
  1. 修改FurnServiceTest.java ,测试update
 @Testpublic void update() {Furn furn = new Furn();furn.setId(1);furn.setName("北欧风格小桌子~~");furn.setMaker("小猪家居");//因为imgPath属性有一个默认值,//所以如果我们不希望生成update 语句有对imgPath 字段修改,就显式的设置nullfurn.setImgPath(null);furnService.update(furn);System.out.println("修改OK");}
  1. 修改FurnController.java , 处理修改请求, 并使用Postman 完成测试
   @PutMapping("/update")@ResponseBodypublic Msg update(@RequestBody Furn furn) {furnService.update(furn);return Msg.success();}
  1. 修改HomeView.vue , 编写handleEdit 方法, 回显数据并测试
handleEdit(row) {//说明//1. JSON.stringify(row) 将row 转成json 字符串//2. JSON.parse(xx) 将字符串转成json 对象//3. 为什么这样做? 其实JSON.parse(JSON.stringify(row)) 就是对row 进行了深拷贝//4. 这样表格中的行数据和弹出框的数据就是独立的了this.form = JSON.parse(JSON.stringify(row))this.dialogVisible = true}//触发handleEdit 方法<el-button size="mini" @click="handleEdit(scope.row)" type="primary">编辑</el-button>

可以测试一下, 点击编辑, 回显数据

image-20230801152221432

image-20230801152236415

  1. 修改HomeView.vue , 修改save 方法, 处理修改请求, 说明更新成功的消息框, 不需要做额外处理, 直接使用this.$message 即可.
save() {//增加处理修改逻辑if (this.form.id) {request.put("/api/update", this.form).then(res => {if (res.code === 200) {//如果code 为200this.$message({ //弹出更新成功的消息框type: "success",message: "更新成功"})} else {this.$message({//弹出更新失败信息type: "error",message: res.msg})}this.list() //刷新列表this.dialogVisible = false})} else {//添加//=======说明======//1. 将form 表单提交给/api/save 的接口//2. /api/save 等价http://localhost:10001/save//3. 如果成功,就进入then 方法//4. res 就是返回的信息//5. 查看Mysql 看看数据是否保存request.post("/api/save", this.form).then(res => {this.dialogVisible = falsethis.list()})}
}
  1. 完成测试, 浏览器http://localhost:10000/

注意事项和细节

1.使用<template #default=“scope”>可以在外部获取组件内的数据,值为scope,那么由scope.row就可以得到数据了,根据得到的数据执行业务处理。。

2.调用list() 刷新数据需要注意的地方说明

​ list在添加数据时,显示页面不会马上更新需要手动刷新,数据库的数据在完成操作时会联动更新。因为异步处理,put发出请求本质是一个回调,当request发出put请求后,箭头函数对应的是一个回调机制。意思是说如果是异步的话,把对应的数据发过去不会等到回调函数结束就直接往下走,直接执行下面的lis刷新。而你操作的那一条数据有可能还没有修改到数据库。这就解释了为什么没有报错对话框就消失了,list因为他刷新时没有看到最新数据,取得还是上一次的数据。因为他是异步的,所以不会等回调,他是两条线执行,他直接往下走,等另一个接收请求处理完回到回调函数时,list方法早就执行完毕了。所以有可能没有拿到最新数据。他在本地执行,速度比回调快多了,所以往往拿不到。我们只要把代码拿上去,放在回调里面就可以了。

image-20230801161934572

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

需求分析/图解

image-20230801162747508

思路分析

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

代码实现

  1. 修改FurnService.java 和FurnServiceImpl.java, 增加del 方法

修改FurnService.java

public void del(Integer id);

修改FurnServiceImpl.java

@Override
public void del(Integer id) {furnMapper.deleteByPrimaryKey(id);
}

2.修改FurnServiceTest.java ,测试del.

 @Test
public void del() {furnService.del(1);System.out.println("del ok");
}
  1. 修改FurnController.java , 处理删除请求, 并使用Postman 完成测试
@DeleteMapping("/del/{id}")
@ResponseBody
public Msg del(@PathVariable Integer id) {System.out.println("del id= " + id);furnService.del(id);return Msg.success();
}
  1. 修改HomeView.vue , 编写handleDel 方法, 完成删除
  handleDel(id) {// console.log("id-", id)request.delete("/api/del/" + id).then(res => {if (res.code === 200) {//删除成功//提示一个成功的消息框this.$message({type: "success",message: res.msg})} else { //删除失败//提示一个错误的消息框this.$message({type: "error",message: res.msg})}//刷新页面数据this.list()})}<!--  响应删除点击说明:1、这里通过 handleEdit(scope.row)2, 可以将当前行数据传递给handleEdit--><template #default="scope"><el-button type="text" @click="handleEdit(scope.row)">编辑</el-button><!--  说明1. 如果你点击的确定,就会触发handleDel2. 如果你点击的是取消,就不会触发handleDel--><el-popconfirm title="确认删除吗?" @confirm="handleDel(scope.row.id)"><template #reference><el-button size="small" type="danger">删除</el-button></template></el-popconfirm></template>
  1. 完成测试测试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ticBhXKt-1691216417785)(https://gitee.com/nlcwyx/imags/raw/master/imags/202308011637705.png)]

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

需求分析/图解

image-20230804211436976

思路分析

  1. 后台使用MyBatis PageHelper 插件完成分页查询, 前端我们使用分页组件。
  2. 修改FurnController , 增加处理分页显示代码API/接口。
  3. 完成前台代码,加入分页导航,并将分页请求和后台接口结合。
  4. 说明:有了现在的MyBatis PageHelper和前端的分页组件,完成分页就非常的方便,但是底层的分页模型和前面我们的java web原生项目一样。

代码实现

  1. 修改pom.xml 加入分页插件
<!-- 引入mybatis pageHelper 分页插件-->
<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.2.1</version>
</dependency>
  1. 修改mybatis-config.xml, 配置分页拦截器
<!-- plugins 标签要放在typeAliases 标签后面-->
<plugins><plugin interceptor="com.github.pagehelper.PageInterceptor"><!-- 分页合理化,如果pageNum > pages,就让他查询最后一页。如果pageNum < 0,就查询第一页--><property name="reasonable" value="true"/></plugin>
</plugins>
  1. 修改FurnController.java 增加分页查询处理
 /*** 分页请求接口** @param pageNum:  要显示第几页 : 默认为1* @param pageSize: 每页要显示几条记录:默认为5* @return*/@ResponseBody@RequestMapping("/furnsByPage")public Msg listFurnsByPage(@RequestParam(defaultValue = "1") Integer pageNum,@RequestParam(defaultValue = "5") Integer pageSize) {//设置分页参数//解读//1.调用findAll是完成查询,底层会进行物理分页,而不是逻辑分页//2.会根据分页参数来计算 limit ?, ?, 在发出SQL语句时,会带limit//3.我们后面会给大家抓取SQLPageHelper.startPage(pageNum, pageSize);List<Furn> furnList = furnService.findAll();//将分页查询的结果,封装到PageInfo//PageInfo 对象包含了分页的各个信息,比如当前页面pageNum , 共有多少记录//...PageInfo pageInfo = new PageInfo(furnList, pageSize);//将pageInfo封装到Msg对象,返回return Msg.success().add("pageInfo", pageInfo);}
  1. 使用Postman 进行测试,看看分页查询是否OK

image-20230801182120045

  1. 修改HomeView.vue , 完成分页导航显示、分页请求

在这里插入图片描述
在这里插入图片描述

//增加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()}

完成测试

启动项目后台服务furns_ssm
启动项目前台ssm_vue

分页显示效果

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

在这里插入图片描述

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

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

相关文章

4,链表【p5】

链表 4.1哈希表简介4.2有序表简介4.3链表4.3.1例1-反转单向和双向链表4.3.2例2-打印两个有序链表的公共部分4.3.3面试时链表解题的方法论4.3.4例3-判断一个链表是否为回文结构4.3.4.1快慢指针 4.3.5例4-将单向链表按某值划分成左边小、中间相等、右边大的形式4.3.6例5-复制好友…

Deep Java Library(三)人体检测demo摄像机抽帧推理绘制结果和围栏

1.主程序文件 package com.xxx.onnx;import ai.djl.Application; import ai.djl.Device; import ai.djl.MalformedModelException; import ai.djl.inference.Predictor; import ai.djl.modality.cv.BufferedImageFactory; import ai.djl.modality.cv.Image; import ai.djl.mod…

【类和对象】日期类总结

日期类是我们学习类和对象这部分知识的常客&#xff0c;本篇博客我们就对日期类成员函数进行全面总结 目录 一、一览Date.h函数声明 二、Date.cpp逐部分实现 一、流插入与流提取运算符重载 二、日期之间比较大小相等运算符重载 1. > 2. 3. > 4. ! 5. <…

mac前端代码编辑 Sublime Text 4 Dev 中文v4.0(4151)

Sublime Text 4 for Mac是一款功能强大的代码编辑器&#xff0c;适合所有需要高效编写代码和进行代码管理的程序员使用。 快速响应&#xff1a;Sublime Text 4在加载文件和执行命令时非常快速&#xff0c;能够让用户在高效的开发过程中体验到无缝的交互。 多种语言支持&#…

LNMP搭建

LNMP&#xff1a;目前成熟的企业网站的应用模式之一&#xff0c;指的是一套协同工作的系统和相关软件 能够提供静态页面服务&#xff0c;也可以提供动态web服务。 这是一个缩写 L linux系统&#xff0c;操作系统。 N nginx网站服务&#xff0c;也可也理解为前端&#xff0c…

STM32——STM32F401x系列标准库的下载+环境搭建+建工程步骤(更完整)

文章目录 标准库的下载环境搭建建工程最后的话 标准库的下载 1.STM32标准库的官网下载网站https://www.st.com/content/st_com/en.html 2. 3. 4. 5. 6. 7.点击之后下滑 8.选择自己需要的版本下载 环境搭建建工程 大致步骤同之前我写的一篇STM32——建工程差不多&#xff0…

记录下:win10 AMD CPU 下载 Chromium 源码并编译(版本 103.0.5060.66)

文章目录 一、一些主要地址连接二、环境配置1、如何找官方环境文档&#xff1a;1.1 如何找到这个不同版本的文档&#xff1a; 2、电脑配置&#xff1a;3、visual studio 2019安装&#xff1a;3.1 社区版下载&#xff1a;3.2 安装配置&#xff1a; 4、debugtools配置4.1 如何判断…

webpack基础知识八:说说如何借助webpack来优化前端性能?

一、背景 随着前端的项目逐渐扩大&#xff0c;必然会带来的一个问题就是性能 尤其在大型复杂的项目中&#xff0c;前端业务可能因为一个小小的数据依赖&#xff0c;导致整个页面卡顿甚至奔溃 一般项目在完成后&#xff0c;会通过webpack进行打包&#xff0c;利用webpack对前…

【Linux】冯诺伊曼体系结构|操作系统概念理解

个人主页&#xff1a;&#x1f35d;在肯德基吃麻辣烫 我的gitee&#xff1a;Linux仓库 个人专栏&#xff1a;Linux专栏 分享一句喜欢的话&#xff1a;热烈的火焰&#xff0c;冰封在最沉默的火山深处 文章目录 前言一、先谈硬件——冯诺依曼体系结构1.什么是冯诺依曼体系结构&am…

sql 关联了2张表的 update 语句(转)

转自&#xff1a;SQL Update&#xff1a;使用一个表的数据更新另一张表 、update 关联两个表 基本上 select 能支持的关联和子查询操作&#xff0c;都能在 update 语句中使用。 在 where 条件中使用子查询 update a set a.age 1 where id in (select device_id from b) 在 wher…

shell 脚本

一、使用PID过滤该进程的所有信息 #! /bin/bash # Function: 根据用户输入的PID&#xff0c;过滤出该PID所有的信息 read -p "请输入要查询的PID: " P nps -aux| awk $2~/^$P$/{print $11}|wc -l if [ $n -eq 0 ];thenecho "该PID不存在&#xff01;&#xff0…

Flink开发环境准备: centos-jdk8

linux-jdk8 - Flink开发环境准备 一、基本介绍二、环境准备1.1 JDK环境1.2 开发工具1.3 Maven环境 三、flink下载安装配置3.1 Flink下载3.2 flink本地模式安装 - linux3.3 常用配置3.4 日志的查看和配置 四、单机 Standalone 的方式运行 Flink 一、基本介绍 Flink底层源码是基于…