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

最新推荐文章于 2024-09-17 23:49:55 发布

晨犀

最新推荐文章于 2024-09-17 23:49:55 发布

阅读量380

点赞数 1

分类专栏： SSM 文章标签： maven mybatis java vue.js

本文链接：https://blog.csdn.net/m0_73557631/article/details/132119460

版权

SSM 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

文章目录

SSM--功能实现

SSM–功能实现

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

需求分析/图解

思路分析

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

代码实现

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

修改FurnService.java

public void update(Furn furn);

修改FurnServiceImpl.java,

@Override
public void update(Furn furn) {
//因为传入的furn 的字段不一定是完整的，所以使用updateByPrimaryKeySelective
	furnMapper.updateByPrimaryKeySelective(furn);
}

修改FurnServiceTest.java ，测试update

 @Test
    public void update() {
 
        Furn furn = new Furn();
        furn.setId(1);
        furn.setName("北欧风格小桌子~~");
        furn.setMaker("小猪家居");
        //因为imgPath属性有一个默认值,
        //所以如果我们不希望生成update 语句有对imgPath 字段修改，就显式的设置null
 
        furn.setImgPath(null);
        furnService.update(furn);
 
        System.out.println("修改OK");
 
    }

修改FurnController.java , 处理修改请求, 并使用Postman 完成测试

   @PutMapping("/update")
    @ResponseBody
    public Msg update(@RequestBody Furn furn) {
 
        furnService.update(furn);
        return Msg.success();
 
    }

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

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

修改HomeView.vue , 修改save 方法, 处理修改请求, 说明更新成功的消息框, 不需要做额外处理, 直接使用this.$message 即可.

save() {
    //增加处理修改逻辑
    if (this.form.id) {
        request.put("/api/update", this.form).then(res => {
            if (res.code === 200) {//如果code 为200
                this.$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 = false
            this.list()
        })
    }
}

完成测试, 浏览器http://localhost:10000/

注意事项和细节

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

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

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

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

需求分析/图解

思路分析

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

代码实现

修改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");
}

修改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();
}

修改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. 如果你点击的确定，就会触发handleDel
              2. 如果你点击的是取消，就不会触发handleDel
          -->
          <el-popconfirm title="确认删除吗?" @confirm="handleDel(scope.row.id)">
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>

完成测试测试

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

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

需求分析/图解

思路分析

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

代码实现

修改pom.xml 加入分页插件

<!-- 引入mybatis pageHelper 分页插件-->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper</artifactId>
    <version>5.2.1</version>
</dependency>

修改mybatis-config.xml, 配置分页拦截器

<!-- plugins 标签要放在typeAliases 标签后面-->
<plugins>
    <plugin interceptor="com.github.pagehelper.PageInterceptor">
        <!-- 分页合理化，如果pageNum > pages，就让他查询最后一页。
        如果pageNum < 0，就查询第一页-->
        <property name="reasonable" value="true"/>
    </plugin>
</plugins>

修改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.我们后面会给大家抓取SQL
        PageHelper.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);
    }

使用Postman 进行测试，看看分页查询是否OK

修改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.list
                this.total = res.extend.pageInfo.total
            })
        }
        //增加方法, 处理记录的变化, 这两个方法是和分页控件绑定的.
        //处理每页显示多少条记录变化
        handlePageSizeChange(pageSize) {
            this.pageSize = pageSize
            this.list()
        }
        ,
        //处理当前页变化, 比如点击分页连接,或者go to 第几页
        handleCurrentChange(pageNum) {
            this.currentPage = pageNum
            this.list()
        }