天天看點
傳回

day07-Axios中的post請求/get請求/restFul格式-10.jQuery中的post請求/Axios中的post請求/restFul格式 以對象為參數傳參

-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)// "起個名兒吧"
				})
day07-Axios中的post請求/get請求/restFul格式-10.jQuery中的post請求/Axios中的post請求/restFul格式 以對象為參數傳參

-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)
				})
day07-Axios中的post請求/get請求/restFul格式-10.jQuery中的post請求/Axios中的post請求/restFul格式 以對象為參數傳參

-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

day07-Axios中的post請求/get請求/restFul格式-10.jQuery中的post請求/Axios中的post請求/restFul格式 以對象為參數傳參

-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;
    }
day07-Axios中的post請求/get請求/restFul格式-10.jQuery中的post請求/Axios中的post請求/restFul格式 以對象為參數傳參

-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

day07-Axios中的post請求/get請求/restFul格式-10.jQuery中的post請求/Axios中的post請求/restFul格式 以對象為參數傳參

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;
    }
day07-Axios中的post請求/get請求/restFul格式-10.jQuery中的post請求/Axios中的post請求/restFul格式 以對象為參數傳參

-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請求格式

day07-Axios中的post請求/get請求/restFul格式-10.jQuery中的post請求/Axios中的post請求/restFul格式 以對象為參數傳參

如果傳遞的資料是JSON串 ,則在後端采用@RequestBody注解 實作JSON串轉化為對象

2.jQuery中的post請求格式

如果采用form表單的方式送出,則可以直接采用對象的方式接收

name=xxx&age=xx&sex=xx

day07-Axios中的post請求/get請求/restFul格式-10.jQuery中的post請求/Axios中的post請求/restFul格式 以對象為參數傳參

3. restFul的格式是将參數拼接到URL中 采用特殊的方式擷取資料

day07-Axios中的post請求/get請求/restFul格式-10.jQuery中的post請求/Axios中的post請求/restFul格式 以對象為參數傳參
第三階段 java
上一篇: Python 21st Day
下一篇: day08--async-await 操作+VUE+Axios案例

繼續閱讀