SpringMVC 参数传递方式/Axios

参数传递方式

1.1简单的参数传递

url地址: http://localhost:8090/getUserById?id=100
编辑后台Controller代码:

1.2 对象的方式传递

URL: http://localhost:8090/getUser?id=100&name=“tomcat”&age=18
后台代码说明:

1.3 RestFul风格

特点:
1. 参数需要使用/ 进行分割
2. 参数的位置是固定的.
3. restFul请求方法路径不能出现动词

作用:
用户可以通过一个URL请求的地址,可以实现不同的业务操作
知识回顾:
查询: http://localhost:8090/getUserById?id=100 类型:get
新增: http://localhost:8090/insertUser 类型:post
更新: http://localhost:8090/updateUser 类型:post
删除: http://localhost:8090/deleteUserById?id=200 类型:get
意图明显: 常规的请求的方式其中包含了动词,导致操作的意图非常明显.

RestFul风格实现CURD操作:
1.查询: http://localhost:8090/user/100 type:GET
2.新增: http://localhost:8090/user/tomcat/18/男 type:POST
3.删除: http://localhost:8090/user/100 type:DELETE
4.更新: http://localhost:8090/user/mysql/100 type:PUT

2. Axios-Get-简单参数

2.1 前端Ajax请求

/**
			 *  GET请求-简单参数的写法
			 * 需求: 根据ID查询数据
			 * URL: http://localhost:8090/axios/getUserById?id=100
			 * then(): 回调函数通过then返回 结构
			 */
			axios.get("http://localhost:8090/axios/getUserById?id=100")
					 .then(function(result){
						 console.log(result.data)
					 })

2.2 后端Controller

    /**
     * 查询用户信息
     * URL: http://localhost:8090/axios/getUserById?id=100
     * 参数: id=100
     * 返回值: String
     */
    @GetMapping("/axios/getUserById")
    public String getUserById(Integer id){

        return "axios的ID查询:"+id;
    }

2.1 Axios-Get-resultFul结构

2.1 前端Ajax请求

	/**
			 * restFul风格实现业务传参 
			 * 需求: 根据name/age查询数据
			 * URL: http://localhost:8090/axios/user/tomcat/18
			 * 注意: 模版字符串优化参数  ``
			 */
			let name = "mysql"
			let age = 20
			axios.get(`http://localhost:8090/axios/user/${name}/${age}`)
					 .then(function(result){
						 console.log(result.data)
					 })

2.2 编辑后端Controller

   /**
     * restFul ajax传参
     * URL: http://localhost:8090/axios/user/mysql/20
     * 参数: name/age
     * 返回值: User对象
     */
    @GetMapping("/axios/user/{name}/{age}")
    public User getUser2(User user){
        return user;
    }

2.2 Axios-Get-对象传参(重要!!!)

2.2.1 需求说明

说明: 如果用户查询数据 其中包含了多个参数,可以使用restFul风格(少量参数)/可以使用对象封装(多个参数)
如果参数较多则建议使用对象的方式封装.
案例: 查询name=“mysql” age=18 sex="女"的用户 要求使用对象的方式封装参数

2.2.2 编辑前端Ajax

/**
				 * 需求: 实现对象方式的数据传递
				 * url:  http://localhost:8090/axios/user/getUserObj
				 * 语法: axios.get("url","参数").then(回调函数)
				 * 业务需求:  查询name="mysql" age=18   sex="女"的用户
				 */
				
				//封装对象
				let user = {
					name: "mysql",
					age: 18,
					sex: "女"
				}
			
				axios.get(
					"http://localhost:8090/axios/user/getUserObj",{params: user})
					.then(function(result){
						console.log(result.data)
					})

2.2.3 编辑后端Controller

/**
     * url:http://localhost:8090/axios/user/getUserObj
     * 参数: 多个参数,使用对象接收
     * 返回值: User
     */
    @GetMapping("/axios/user/getUserObj")
    public User getUserObj(User user){

        return user;
    }

2.3 Axios-Delete请求

2.3.1 Delete请求说明
一般用户通过Delete请求做删除操作. 删除的语法与Get请求的语法一致的.

2.3.2 Delete请求方式说明 了解delete代码结构
1.不带参数的删除
axios.delete(“url地址”).then(function(result){ … })

2.携带个别参数 ?id=100
axios.delete(“url地址?id=100”).then(function(result){ … })

3.restFul结构
可以使用模版字符串的方式简化代码结构
axios.delete( "url地址/xxx/xxx/xxx").then(function(result){ … })

4.采用对象的方式进行参数传递
let 对象 = {xxxx:xxxx,xxxx:xxxx}
axios.delete( "url地址/xxx/xxx/xxx", {params: 封装后的对象}).then(function(result){ … })

2.4 Axios-post请求

2.4.1 编辑页面Ajax

/* 
						1.什么时候使用post请求????
						  答:一般采用form表单提交时,采用post请求类型
								 主要用于数据的新增操作
								 
						2.get请求/post请求主要的区别
							get: 参数动态的拼接到URL地址中 ?id=xx&name=xxx 数据是可见的
							post: 一般采用post请求数据是涉密的 
					 */
					
					
					/**
					 * post业务:
					 * 		实现用户的新增 传递User对象
					 * 
					 * URL地址:
					 * 		http://localhost:8090/axios/insertUser
					 * 总结: 如果需要对象传参  
					 * 				1.get请求采用 axios.get(url,{params: 对象})
					 * 				2.post请求 axios.post(url,对象)
					 */
					let user = {
						name: "post请求的语法",
						age: 20,
						sex: '女'
					}
					let url1 = "http://localhost:8090/axios/insertUser"
					axios.post(url1, user)
							 .then(function(result){
								 console.log(result.data)
							 })

2.4.2 参数的数据结构

说明: 如果采用post的方式传递对象,则数据结构是一个JSON

2.4.3 编辑后端Controller

/**
     *  需求:post请求实现数据入库
     *  URL: http://localhost:8090/axios/insertUser
     *  参数: "user对象结构"
     *  返回值: User对象返回
     *  注意事项:
     *      如果前端发起post请求方式,则传递的数据是一个JSON串
     *      常规参数: id=100 name="tomcat"
     *      post参数: {id:100,name:"tomcat"}
     *  解决方案:
     *       1.对象转化为JSON     @ResponseBody
     *       2.JSON串转化为对象   @RequestBody
     *          {"id":"100","name":"tomcat"}
     *          1.拆窜去除左右{}  id:100,name:tomcat
     *          2.按照,号拆分  id:100  name:tomcat
     *          3.根据key调用对象的set方法为属性赋值.
     *          4.获取了User对象
     */
    @PostMapping("/axios/insertUser")
    public User insertUser(@RequestBody User user){
        return user;
    }

2.5 Axios-post-restFul结构

2.5.1 编辑前端JS

	/**
					 * post请求 restFul的写法
					 * 实现用户新增入库
					 * url: http://localhost:8090/axios/user/name/age/sex
					 */
					let url2 = "http://localhost:8090/axios/user/redis/18/男"
					axios.post(url2)
							 .then(function(result){
								 console.log(result.data)
							 })

2.5.2 编辑后端Controller

 /**
     * url:http://localhost:8090/axios/user/name/age/sex
     * 参数: 对象接收
     * 返回值: User对象   由业务决定
     */
    @PostMapping("/axios/user/{name}/{age}/{sex}")
    public User insertUserRest(User user){
        System.out.println("调用service完成入库");
        return user;
    }
}

3.关于前后端调用细节说明

3.1 请求类型

请求的类型是由程序员手动控制

1. 分类A
   1.get 请求类型 查询
   2.delete 请求类型 删除
2. 分类B
   1.post 请求类型 form表单提交 新增操作
   2.put 请求类型 更新操作

3.2 关于POST请求说明

浏览器解析数据结构:

 

所以数据在进行参数传递时 数据需要转化

 

3.3 jQuery中的post请求/Axios中的post请求对比/restFul格式

1.Axios中的Post请求格式

 如果传递的数据是JSON串 ,则在后端采用@RequestBody注解 实现JSON串转化为对象

2.jQuery中的post请求格式
如果采用form表单的方式提交,则可以直接采用对象的方式接收
name=xxx&age=xx&sex=xx

 

3. restFul的格式是将参数拼接到URL中 采用特殊的方式获取数据

 /**
     * url:http://localhost:8090/axios/user/name/age/sex
     * 参数: 对象接收
     * 返回值: User对象   由业务决定
     */
    @PostMapping("/axios/user/{name}/{age}/{sex}")
    public User insertUserRest(User user){
        System.out.println("调用service完成入库");
        return user;
    }
}