博主
258
258
258
258
专辑

第三十二节 Vue+SpringBoot参数请求的三种方式

亮子 2022-07-08 09:37:14 879 0 0 0

1、SpringBoot接收参数

@RestController
@Slf4j
@RequestMapping(value = "/param")
public class ParamController {

    @Autowired
    TbSysUserMapper tbSysUserMapper;

    //--1

    @PostMapping(value = "/body")
    public ResultResponse body(@RequestBody IdVo id) {
        TbSysUser sysUser = tbSysUserMapper.selectById(id.getId());

        return ResultResponse.SUCCESS(sysUser);
    }

    //-2

    @PostMapping(value = "/param")
    public ResultResponse param(@RequestParam("id") Integer id) {
        TbSysUser sysUser = tbSysUserMapper.selectById(id);

        return ResultResponse.SUCCESS(sysUser);
    }

    //--3

    @GetMapping(value = "/path/{id}")
    public ResultResponse path(@PathVariable("id") Integer id) {
        TbSysUser sysUser = tbSysUserMapper.selectById(id);

        return ResultResponse.SUCCESS(sysUser);
    }
}

2、Vue发送请求

        import axios from 'axios'

        doSend1() {
            let param = {}
            param.id = 5
            axios.post('http://localhost:9000/user/param/body', param).then(res => {
                console.log('doSend1', res)
            })
        },
        doSend2() {
            let param = new FormData()
            param.append('id', 5)

            axios.post('http://localhost:9000/user/param/param', param).then(res => {
                console.log('doSend2', res)
            })
        },
        doSend3() {
            let url = 'http://localhost:9000/user/param/path' + '/5'
            // http://localhost:9000/user/param/path/5
            axios.get(url).then(res => {
                console.log('doSend3', res)
            })
        }