当前位置：首页 > news >正文

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

news 来源：原创 2025/5/15 9:04:15

前言

一.问题描述

二.后端实现

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;//返回的是影响行数
    }

}