@PathVariable 、@RequestParam、@RequestBody注解用法

思考：

       前端传过来路径时候，后端需要接受前端传过来的参数，那么前端通过什么方法传过来参数呢？后端又是怎么接收的呢 ？

前端传参数有三种方法：

                       一是通过url路径后面传参数  客户端路径：http://localhost:8080/user/1

                       二是通过 ？方式传参 客户端路径：http://localhost:8080/user?id=1

                       三是通过 请求体 传参  ：大多数时候使用psot 方法，因为 get 方法 没有请求体

一、@PathVariable 直译：路径变量

1.前端传数据：(前端传数据有多种传法：比如原生ajax、封装ajax、form表单、jquery等等，此次举例的是封装ajax) 

封装ajax为request.js :

import axios from "axios";
const request = axios.create({
	baseURL: 'http://localhost:9090',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
    timeout: 5000
})


// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
  
 // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request

1.传输数据：

 del(id) {
            this.request.delete("/user/" + id).then(res => {
                if (res.data) {
                    this.$message.success("删除成功")
                    this.load()
                } else {
                    this.$message.error("删除失败")
                }
            })
        },

2.后端接收：

@DeleteMapping("/{id}")
    public Result delete(@PathVariable(value="id") Integer id) {
        return Result.success(userService.removeById(id));
    }

若方法参数名称和需要绑定的url中变量名称一致时,可以简写

@DeleteMapping("/{id}")
    public Result delete(@PathVariable Integer id) {
        return Result.success(userService.removeById(id));
    }

二、@RequestParam直译：请求参数

1.前端传输

  load() {
            this.request.get("/user/page", {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    username: this.username,
                    email: this.email,
                    address: this.address
                }
            }).then(res => {     
                this.tableData = res.data.records
                this.total = res.data.total
            })
        },

2.后端接收：

@GetMapping("/user/page")
    public Result findPage(@RequestParam Integer pageNum,
                                @RequestParam Integer pageSize,
                                @RequestParam(defaultValue = "")String email,
                                @RequestParam(defaultValue = "") String address,
                                @RequestParam(defaultValue = "") String username
                                                                   ) {
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        
        if(!"".equals(username)){
            queryWrapper.like("username",username);
        } if(!"".equals(email)){
            queryWrapper.like("email",email);
        } if(!"".equals(address)){
            queryWrapper.like("address",address);
        }
        //降序
        queryWrapper.orderByDesc("id");
        return Result.success(userService.page(new Page<>(pageNum, pageSize),queryWrapper));
    }

 

三、@RequestBody直译：请求体

1.前端发送：

   save() {
            this.request.post("/user/update", this.form).then(res => {
                if (res.data) {
                    this.$message.success("保存成功")
                    this.dialogFormVisible = false
                    this.load()
                } else {
                    this.$message.error("保存失败")
                }
            })
        },

2.后端接收：

 @PostMapping("/user/update")
    public Result saveUser(@RequestBody User user){
        return Result.success(userService.saveOrUpdate(user));
    }