前端请求后端的方式

前端请求后端的方式

使用字符串拼接

try {
    const response = axios.put('http://localhost:8080/api/user/getId?id=1');
} catch (error) {
    console.error('获取用户失败:', error);
}

标准的GET请求格式,使用params定义请求参数

try {
    const response = axios.get(
        'http://localhost:8080/api/user/getId', {
            params: {
                id: 1
            },
            headers: {
                'Access-Control-Allow-Origin': '*', // 添加允许的域名,可以根据实际情况设置
            },
        });
} catch (error) {
    console.error('获取用户失败:', error);
}

使用FormData来构建请求体,常见于文件上传操作,因为是表单格式上传所以后端不需要设置js对象的解析

// 使用 FormData 对象构建上传数据
const formData = new FormData();
formData.append('multipartFile', selectedFile);
formData.append('directoryInfoId', 25);
try {
    // 发送包含文件的请求
    const response = axios.put('http://localhost:8080/api/minio/addFile',
        formData, {
            headers: {
                'Content-Type': 'multipart/form-data',
                // 添加其他需要的请求头
            },
        });

    console.log('文件上传成功:', response.data);
    onMounted();
} catch (error) {
    console.error('上传文件失败:', error);
}

直接传输JSON对象给后端,在后端(SpringMvc)添加 @RequestBody 可以进行解析

const responses = await axios.post('http://127.0.0.1:8080/api/user/update', {
    userId: 32,
    userName: "红彤彤"
});

后端

@PostMapping("/update")
public BaseResponse update(@RequestBody User user) {
    service.update(user, new UpdateWrapper<User>().eq("user_id", user.getUserId()));
    template.convertAndSend(RabbitConfig.EXCHANGE_NAME, RabbitUpdate.ROUTING_KEY, UpdateMessage.getUpdateMessage(getUserDoc(user)));
    return success();
}