-1.RestFul风格

作用:
用户可以通过一个URL请求的地址,可以实现不同的业务操作

之前的 get/post请求方式:
查询: http://localhost:8090/getUserById?id=100&name=匿名 类型:get
新增: http://localhost:8090/insertUser 类型:post
更新: http://localhost:8090/updateUser 类型:post
删除: http://localhost:8090/deleteUserById?id=200 类型:get
意图明显: 常规的请求的方式其中包含了动词,导致操作的意图非常明显.

特点:

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

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.-简单参数接收

0.普通实现用户查询
url地址: http://localhost:8090/getUserById?id=100
Controller代码

@GetMapping("/axios/getUserId")
    public String getUserById(Integer id){
        return "Id:"+id;
    }

WEB前端编写

axios.get("http://localhost:8080/axios/getUserById?id=100")
					 .then(function(result){
						 console.log(result.data)
					 })

** 1.restFul实现用户查询**

  • URL: http://localhost:8090/user/100
  • type: GET
  • RequestMapping 默认的可以接收所有的请求类型
  • RestFul语法:
1.参数的位置固定.
2.有参数必须使用{}包裹   @GetMapping("/axios/getName/{name}")
3.必须使用@PathVariable 动态的接收参数
注意事项: {参数名称}必须与方法中的名称一致., 非restFul ,将不使用 以上3点

UserController

@GetMapping("/axios/getName/{name}")
    public String getName(@PathVariable String name){
        return "起个名儿吧";
    }

WEB前端编写

<script src="../js/axios.js"></script>
		<script>
			/**
			 * 注意事项:
			 * 		1.Axios将原来的嵌套的结构,改为链式加载方式
			 *    2.回调函数中的result是promise对象, 获取返回值:result.data
			 * 
			 * 发起Ajax请求:
			 * 	1. GET请求获取数据
			 */
			axios.get("http://localhost:8080/axios/getName/猛哥")
				.then(function(result){//回调函数
					console.log(result)  //promise对象
					console.log(result.data)// "起个名儿吧"
				})

Restful风格发送请求_ios

-3.-对象参数接收

3.0.普通实现对象参数接收

URL=“http://localhost:8080/axios/getUser?id=12&name=加菲喵&age=45&sex=男”
UserController

@GetMapping("/axios/getUser")
    public  String getUser(User user){
        System.out.println(user);
        return "axios";
    }

WEB前端编写

axios.get("http://localhost:8080/axios/getUser?id=12&name=加菲喵&age=45&sex=男")
					 .then(function(result){ //promise对象
						//获取服务器返回值  promise.data
						 console.log(result)
						 console.log(result.data)
					 })

**

3.1 restFul实现对象参数接收

**

  • 需求: 查询name=tomcat age=18 sex=女的用户
  • 要求使用:restFul
  • URL: http://localhost:8080/user/tomcat/18/女
  • restFul的优化:
  • 如果{参数名称}与对象中的属性名称一致,
则SpringMVC动态的为对象赋值,
@PathVariable 可以省略
  • 注意事项:
前后端的参数的传递必须保持一致!!!!

UserController

@GetMapping("/user/{name}/{age}/{sex}")
    public  User restget(@PathVariable String name,
                         @PathVariable Integer age,
                         @PathVariable String sex){
        User user = new User();
        user.setName(name).setAge(age).setSex(sex);

        return user;
        }

可简化:

@GetMapping("/axios/get/{id}/{name}/{sex}")
    public User get( User user){
        return  user;
    }

WEB前端编写

restful 风格实现业务传参数
http://localhost:8080/axios/user/tomcat/18 模板字符串里面参数动态获取 ${ } 整个地址值外层 用 ` 号包裹

let id = 10;
		   let name ="tomcat"
		   let sex = "女"
			axios.get(`http://localhost:8080/axios/get/${id}/${name}/${sex}`)
				.then(function(result){
					console.log(result.data)
				})

Restful风格发送请求_Restful风格发送请求_02

-4. Axios介绍

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
特点:
1.从浏览器中创建 XMLHttpRequests
2.从 node.js 创建 http 请求
3.支持 Promise API
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动转换 JSON 数据
8.客户端支持防御 XSRF

结构说明:
	1. JS中原生提供了Ajax操作.  弊端: 操作特别的复杂 易用性较差.
	2. jQuery中的Ajax    封装了原生的JS Ajax    提高了开发的效率  
	3. Axios是VUE中默认支持的Ajax的请求的方式
  • 特点: 调用简洁 解决了 “回调地狱问题”!!!**

-5. 回调地狱问题

说明: 前端中如果需要发起大量的Ajax请求,并且Ajax 请求有嵌套的关系.则可能引发回调地狱问题.

例子: 请求 参数A --1–结果B/参数B—2–结果C/参数C—3— 结果D

Restful风格发送请求_ios_03

-6.Axios-Get-对象传参(重要***)

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

6.1编辑前端Ajax

url: “http://localhost:8080/axios/user/getUserObj”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios</title>
	</head>
	<body>
		<h1>zz</h1>
		<script src="../js/axios.js"></script>
		<script>
			/*  url: "http://localhost:8080/axios/user/getUserObj"
			实现参数
			*/
		   let user = {
					name: "mysql",
					age: 18,
					sex: "女"
				}
			axios.get("http://localhost:8080/axios/user/getUserObj",{
				//key: value	key固定写法 params参数对象
				params: user
			}).then(function(result){
				console.log(result.data)
			})
			
		</script>
	</body>
</html>

6.2编辑后端Controller

//参数:多个参数 ,使用对象
///url: "http://localhost:8080/axios/user/getUserObj"
//返回值:user
    @GetMapping("/axios/user/getUserObj")
    public User getUser3(User user){
        return user;
    }

Restful风格发送请求_ios_04

-7. Axios-Delete请求

通过Delete请求做删除操作. 删除的语法与Get请求的语法一致的.
1.不带参数的删除
axios.delete(“url地址”).then(function(result){ … })

@DeleteMapping("/axios/delete")
    public String  delete(){
    	useservice.delete();
        return  "删除成功";
    }

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

@DeleteMapping("/axios/deleteId")
    public String  deleteId(Interge id){
        useservice.deleteId(id);
        return  "删除成功";
    }

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

@DeleteMapping("/axios/deleteId/{id}")
    public String  deleteId(@PathVariable Interge id){
        useservice.deleteId(id);
        return  "删除成功";
    }

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

@DeleteMapping("/axios/deleteUser")
    public String  deleteUser(User user){
        useservice.deleteUser(user);
        return  "删除成功";
    }

-8 Axios-post-对象传参

一般传递对象

8.1 编辑页面Ajax

//什么时候使用POST请求
			/*
			*1.一般采用form表单提交时采用post请求类型
			* 主要用于数据的新增操作
			* 2.get请求/post请求的主要区别
			* get:参数动态拼接到URL地址中?id=xx&name=xxx,数据是可见的
			* post:一般采用post请求数据是涉密的
			* */
			//post业务:实现用户的新增 ,传递User对象
			/*URL地址:
			http://localhost:8080/axios/insertuser
			总结:如果需要对象传参
				1.get请求采用 axios.get(url,{params:对象})
				2.post请求:axios.post(url,user)
			*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios-POST请求</title>
	</head>
	<body>
		<h1>zz</h1>
		<script src="../js/axios.js"></script>
		<script>
			

			let user = {
				name: "post请求",
				age: 20,
				sex: '女'
			}
			let url1 = "http://localhost:8080/axios/insertuser"
			axios.post(url1,user).then(function(result){
				console.log(result.data)
			})
			
		</script>
	</body>
</html>

8.2 参数的数据结构

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

Restful风格发送请求_post请求_05

8.3 编辑后端Controller

/*url1 = "http://localhost:8080/axios/insertuser"
    * 需求: post请求实现数据入库,
    * 参数:JSON串转化为对象  加 @RequestBody'user对象结构'
    * 返回值: User对象返回
    *注意事项: 传递数据是JSON串,不是常规参数 :id= 100 name="xx"
    * post参数:{id:100,name:"xx"}  JS对象 
    * 传到Contorller变成:{"id":100,"name":"xx"}  JSON串
    * 解决方案:
    *       1.对象转化为JSON     @ResponseBody
    *       2.JSON串转化为对象   @RequestBody
    *
    * */
bash
    @PostMapping("/axios/insertuser")
    public User insertUser(@RequestBody User user){
            return user;
    }

Restful风格发送请求_User_06

-9.Axios-post-restFul结构

9.1 编辑页面Ajax

/*post请求restFul
			实现用户新增入库
			URL地址:
			http://localhost:8080/axios/user/name/age/sex
			参数:
			*/
		   
			let url2 ="http://localhost:8080/axios/user/redis/18/男";
			axios.post(url2)
				.then(function(result){
					console.log(result.data)
				})
			/* axios.put() */

9.3 编辑后端Controller

@PostMapping("/axios/user//{name}/{age}/{sex}")
    public User insertUserRest(User user){
        System.out.println("完成");
        return user;
    }

-10.jQuery中的post请求/Axios中的post请求/restFul格式 以对象为参数传参

1.Axios中的Post请求格式

Restful风格发送请求_post请求_07


如果传递的数据是JSON串 ,则在后端采用@RequestBody注解 实现JSON串转化为对象2.jQuery中的post请求格式

如果采用form表单的方式提交,则可以直接采用对象的方式接收

name=xxx&age=xx&sex=xx

Restful风格发送请求_User_08


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

Restful风格发送请求_User_09