axios请求总结

总结：

1、get（查询） delete（删除）的四种种请求方式

1.1）普通字符串拼接（建议：传单个属性）

前端代码：

async deleteUser(id){
	console.log(id)
	await axios.delete("/vue/del?id="+id)		//普通拼接字符串
},

后端代码：

	@DeleteMapping("/del")
	public  void del(Integer id){
		System.out.println(id);
	}

字符串拼接
前端代码：

async deleteUser(id){
		console.log(id)
		await axios.delete("/del/" +id)      //字符串拼接，传单个值								
},

后端代码：

@DeleteMapping("/del/{id}")
	//必须使用@PathVariable 动态的接收参数
	public  void del(@PathVariable Integer id){
		System.out.println(id);
	}

1.2）模版字符串拼接（建议：传多个属性）

前端代码：

async deleteUser(id){
	console.log(id)
	await axios.delete(`/vue/del?id=${id}`) //模版字符串,需要用反撇号引起来
},

后端代码：

	@DeleteMapping("/del")
	public  void del(Integer id){
		System.out.println(id);
	}

1.3） restFul的属性写法，拼接字符串（建议：传属性）

前端代码：

async deleteUser(id){
		console.log(id)
		await axios.delete(`/vue/del/${id}`)      //restFul结构，传单个值								
},

后端代码：

@DeleteMapping("/del/{id}")
	//必须使用@PathVariable 动态的接收参数
	public  void del(@PathVariable Integer id){
		System.out.println(id);
	}

1.4） restFul的对象写法，拼接字符串（建议：传对象）

axios的get请求，传对象，需要封装成params对象，URL，{params:user}

前端代码：

async deleteUser(user){
		console.log(user.id)
		await axios.delete("/vue/del",{params:user})  //restFul结构，传对象
},

后端代码：

@DeleteMapping("/del")
	//get delete 请求不需要使用@RequestBody，将json字符串转成对象
	
	public  void del(User user){
		System.out.println(user.getId());
	}

2、post（新增） put（更新）的请求方式

axios的post请求，传对象，不需要封装成params对象，URL，user

2.1）普通字符串拼接（建议：传对象）

前端代码：

let user = {
		name: "post请求的语法",
		age: 20,
		sex: '女'
}
axios.post("http://localhost:8090/axios/user",user)

后端代码：

	/**
     * url:http://localhost:8090/axios/user
     * 参数: 对象接收
     * 返回值: User对象  demo练习简单 由业务决定
     */
    @PostMapping("/axios/user")
    public User insertUserRest(@RequestBody User user){
        System.out.println(user.getName());
        System.out.println(user.getAge());
        System.out.println(user.getSex());
        return user;
    }

3、区分对象，json字符串

3.1）对象

3.2）json字符串

3.3）前端传值，后端注解写法

1、后端返回对象是data，axios会自动封装成params对象，获取对象属性需要，params.data.属性

2、前端传值，是form表单等类型（如以下代码），后端接收时不需要加@ResponseBody

name=mysql&age=18&sex=%E5%A5%B3

3、前端传值，是以下类型，后端接收时需要加@ResponseBody

{id: null, name: "mysql", age: 18, sex: "女"}