在vue项目中，使用Patch请求，实现根据id修改某张发票的日结状态

news2025/3/19 16:55:06

前言

一.问题描述

二.后端实现

1.分析

2.检查后端拦截器，看看是否允许接收Patch类型的请求

3.编写Dto

4.编写controller层

5.编写service层

6.mapper层

7.使用apifox，测试后端接口的可用性

三.前端实现

1.封装api（本质是axios请求）

2.在vue代码中，使用该api发送patch请求给后端

3、展示效果

四.重要的点

结语

前言

在vue项目中，我们修改表的某一行的部分字段时，是需要用axios中patch类型的请求来完成的，所以掌握发送、接收patch请求，是绕不开的一环。

一.问题描述

二.后端实现

1.分析

分析一下：由于是修改发票表的某一行的某个字段（即部分资源），所以要用Patch请求来完成该操作。请求的参数应该有：id（代表我们要修改的那行发票记录）、日结状态（是个整数，如：3代表审核通过）。

注意：

①一般使用patch请求时，id参数直接就放在请求路径中了。因为这样简洁明了。

②其他参数应该放到一个data对象中。

2.检查后端拦截器，看看是否允许接收Patch类型的请求

注意：这一步很重要，如果你没配置后端拦截器，那么这一步可以跳过。如果你配置了后端拦截器，就好检查一下你的拦截器是否允许PATCH请求通过。

博主就是因为没有好好检查，整了半天才发现是这个问题导致前端代码报错。

3.编写Dto

注意：

①patch请求要用data对象来传递参数。（除了get请求用params传递参数以外，其他类型的请求很少用params传递参数）。

②在InvoiceDto中，我们为什么没写id呢？因为我们想在patch请求的请求路径中携带id参数，所以就不在该Dto中携带了。

4.编写controller层

@RestController//表明这是一个controller层，并且自动将对象转为JSON格式返回
@RequestMapping("/api/invoice")//该controller的访问路径
public class InvoiceController {
    @Autowired
    private InvoiceService invoiceService;

    //根据id，修改某个发票的状态（dailyState）
    @PatchMapping("/{id}/dailyState")
    public Result updateInvoiceDailyState(@PathVariable Integer id,@RequestBody InvoiceDto invoiceDto){
        //System.out.println(id + "--" + invoiceDto.toString());
        int i = invoiceService.updateInvoiceDailyState(id, invoiceDto);
        if(i>0){
            return new Result(200, "审核成功");
        }else{
            return new Result(500, "审核失败");
        }
    }
}

注意：

①我们在patch请求路径中携带id参数的形式如：@PatchMapping("/{id}/dailyState")，要用大括号{ }给id参数括起来。

②"/{id}/dailyState"的意思是：我们要修改该id对应的那张发票的日结状态dailyState,这样就能表示该patch请求是用来根据id修改某张发票的日结状态了。这做到了见名知意。

③要用@PathVariable注解来接收请求路径中的参数。

④要用@RequestBody注解来接收请求中的data对象参数。

5.编写service层

service层：

public interface InvoiceService {
    //根据id，修改某条发票记录的日结状态（dailyState）
    public int updateInvoiceDailyState(Integer id, InvoiceDto invoiceDto);
}

serviceImpl层：

@Service
public class InvoiceServiceImpl implements InvoiceService {
    @Autowired
    private InvoiceMapper invoiceMapper;

    //根据id，修改某条发票记录的日结状态（dailyState）
    public int updateInvoiceDailyState(Integer id, InvoiceDto invoiceDto) {
        int i = invoiceMapper.updateInvoiceDailyState(id, invoiceDto);
        return i;//返回的是影响行数
    }

}

6.mapper层

@Mapper
public interface InvoiceMapper {

    //根据id，修改某条发票记录的日结状态（dailyState）
    @Update("update invoice set daily_state = #{invoiceDto.dailyState} where id=#{id}")
    public int updateInvoiceDailyState(Integer id, InvoiceDto invoiceDto);
}

注意：当mapper层中，形参列表中不单单只有对象类型的参数时，我们访问对象中的属性，要通过#{对象名.属性名}的形式。反之，要是形参列表中，只有对象参数，那么直接#{属性名}即可。

7.使用apifox，测试后端接口的可用性

三.前端实现

1.封装api（本质是axios请求）

import request from '@/request/request'

//编写方法“根据id，修改某张发票的日结状态（dailyState）”，并将其暴露出去
export function updateInvoiceDailyState(id, data){
    return request.patch(`/api/invoice/${id}/dailyState`,data);
}

注意：

①我们在前端发送axios请求时，如果要携带路径参数，那么就不能用单引号来盛请求路径，而是用反引号（也称“飘号”，如下图）

②上面的代码中，id表示要修改的发票id，data表示要修改的字段（放在了data对象中）。

2.在vue代码中，使用该api发送patch请求给后端

//点击气泡确认框的“通过”按钮,触发事件passInvoice(row)
const passInvoice = async (row) => {
    //alert("通过");
    //alert(JSON.stringify(row))//这是点击的那一行的发票的全部信息
    //根据发票id，将该发票的状态改为审核通过（daily_state == 3）
    //构造参数对象data
    const invoiceDto = {
        dailyState: 3
    }
    const res = await updateInvoiceDailyState(row.id, invoiceDto);
    if(res.code == 200){
        //弹框提示审核成功
        ElMessage.success(res.message);
        //刷新表格（查询所有待审核的发票）
        doQueryAllInvoice({dailyState:"2"});
    }else{
        ElMessage.error("审核失败");
    }

}

3、展示效果

四.重要的点

1、除了get请求使用params传递参数以外，其他类型的请求很少使用params传递参数，而是使用data对象来传递参数（后端使用@RequestBody注解来接收）。

2、patch请求代表修改某个id对应的一行数据的部分字段。此时尽量将id参数放在请求路径中（后端使用@PathVariable注解来接收请求路径参数），因为这样简洁明了、一眼能看出来，而且更加符合RESTful请求风格的要求。

3、其实将id放在data对象中传递也可以，只是不推荐而已，因为这样不简洁。

4、patch请求用来修改部分资源（即：一行中的部分字段）。

put请求用来修改全部资源（即：一行中的所有字段）。