三阶段--day06--Ajax请求Axios,请求的方式,get请求方式及restFul风格,delete请求方式,post请求方式及restFul风格,箭头函数_axios get requestbody 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

	/**
     * 1.restFul实现用户查询
     * URL: http://localhost:8090/user/100
     * type: GET
     * RequestMapping 默认的可以接收所有的请求类型
     * RestFul语法:
     *      1.参数的位置固定.
     *      2.参数必须使用{}包裹
     *      3.必须使用@PathVariable 动态的接收参数
     *      注意事项: {参数名称}必须与方法中的名称一致.
     */
    //@RequestMapping(value = "/user", method = RequestMethod.GET)
    @GetMapping("/user/{id}")
    public String restFulGet(@PathVariable Integer id){

        return "restFul动态的获取参数:"+id;
    }

2.4 RestFul风格-对象参数接收

 /**
     * 需求: 查询name=tomcat age=18 sex=女的用户
     * 要求使用:restFul
     * URL: http://localhost:8090/user/tomcat/18/女
     * restFul的优化:
     *  如果{参数名称}与对象中的属性名称一致,
     *      则SpringMVC动态的为对象赋值,
     *      @PathVariable 可以省略
     * 注意事项:
     *      前后端的参数的传递必须保持一致!!!!
     */
    @GetMapping("/user/{name}/{age}/{sex}")
    public User restGetUser(User user){
        //执行后续的业务操作 userService
        return user;
    }

二 Axios学习

1 Axios介绍

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
1)特点:
1.从浏览器中创建 XMLHttpRequests
2.从 node.js 创建 http 请求
3.支持 Promise API
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动转换 JSON 数据
8.客户端支持防御 XSRF
2)结构说明:
   1. JS中原生提供了Ajax操作. 弊端: 操作特别的复杂易用性较差.
   2. jQuery中的Ajax 封装了原生的JS Ajax 提高了开发的效率
   3. Axios是VUE中默认支持的Ajax的请求的方式.
3)重要特点: 调用简洁解决了 “回调地狱问题”!!!

2 回调地狱问题(了解)

说明: 前端中如果需要发起大量的Ajax请求,并且Ajax 请求有嵌套的关系.则可能引发回调地狱问题.
例子: 请求参数A --1–结果B/参数B—2–结果C/参数C—3--- 结果D
课下了解: 什么是回调地狱!!!

在这里插入图片描述

三 Axios 请求方式

1 入门案例

1.1编辑后台controller代码

编辑后台代码完成业务获取

在这里插入图片描述

1.2 前端Axios调用步骤

导入Axios的JS文件
发起Ajax请求
解析返回值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios</title>
	</head>
	<body>
		<h1>Axios练习</h1>
		<!-- 引入JS文件 -->
		<script src="../js/axios.js"></script>
		<script>
			/**
			 * 注意事项:
			 * 		1.Axios将原来的嵌套的结构,改为链式加载方式
			 *    2.回调函数中的data,不是服务器的返回值,是promise对象
			 * 
			 * 发起Ajax请求:
			 * 	1. GET请求获取数据
			 */
			axios.get("http://localhost:8090/axios/getUser")
					 .then(function(result){//promise对象
						//获取服务器返回值  promise.data
						 console.log(result.data)
					 })
			
		</script>
	</body>
</html>

/**嵌套结构:结构负载,不够直观
			$.get("url",data,function(data){
				$.get("url2",data2,function(data2){
					$.get("url3",data3,function(data3){
						...
					}
				})
			})
			axios链式加载:有层次感,直观
			axios.get("url")
			        .then(function(result){
					.then(function(result2){
					....
					}
					})*/

promise对象说明: 其中data表示服务器的返回值.

在这里插入图片描述

页面及控制台:

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

在这里插入图片描述

2.3 前端控制台

3 Axios-Get请求方式-restFul结构

3.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)
					 })

3.2 后端Controller

在这里插入图片描述

3.3 页面控制台

在这里插入图片描述

4 Axios-get-对象传参(重点)

4.0 F12的说明

一般用来检查网络的请求使用network 其中不要添加缓存, 检查所有的请求的路径
在这里插入图片描述

4.1 需求说明

说明:如果用户查询数据,其中包含了多个参数,可以使用restFul风格(少量参数),或者使用对象封装(多个参数),如果参数较多建议使用对象方式封装

案例:查询name="mysql" age=18 sex="女"的用户,要求使用对象的方式封装参数

4.2 编辑前端Ajax

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios-get-对象传递</title>
	</head>
	<body>
		<h1>axios-get-对象传递</h1>
		<script src="../js/axios.js"></script>
		<script>
			/* 需求:实现对象方式数据传递
			 url:http://localhost:8090/axios/user/getUserObj
			 语法:axios.get("url","参数").then(回调函数)
			 */
			//封装对象:更简洁
			let user={
				name:"mysql",
				age:18,
				sex:"女"
			}
			axios.get(
			"http://localhost:8090/axios/user/getUserObj",{params:user})
				.then(function(result){
				console.log(result.data)
			})
			//正常情况下:
			// axios.get("http://localhost:8090/axios/user/getUserObj",
			// {   //key:value  key固定写法  params参数对象
			// 	params:{
			// 		再写用户参数
			// 		name:"mysql",
			// 		age:18,
			// 		sex:"女"
			// 	}
			// }).then(function(result){
			// 	console.log(result.data)
			// })
		</script>
	</body>
</html>

4.3 编写后端controller代码

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

页面控制台效果:

5 Axios-Delete请求

5.1 Delete请求说明

一般用户通过delete请求做删除操作,删除的语法结构与get请求的语法一致

5.2 delete请求方式说明

1)不带参数的删除语法结构:

axios.delete("url地址").then(function(result){... })

2)携带个别参数的语法结构: 比如:url?id=100

axios.delete("url地址?id=100").then(function(result){... })

3)restFul结构:可以使用模板字符串的方式简化代码结构

axios.delete(`url地址/xxx/xxx/xxx`).then(function(result){... })

4)采用对象方式进行参数传递:

let 对象= {xx:yyy,xx:yyy,xx:yyy}

axios.delete(`url地址/xxx/xxx/xxx`,{params:封装后的对象}).then(function(result){... })

6 Axios-post请求

6.1 编辑页面Ajax

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios-POST请求</title>
	</head>
	<body>
		<h1>Axios练习</h1>
		<!-- 引入JS文件 -->
		<script src="../js/axios.js"></script>
		<script>
					
					/* 
						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)
							 })
					
					
					
					
		</script>
	</body>
</html>

6.2 参数的数据结构

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

6.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;
    }

页面控制台:

7 Axios-post-restFul结构

7.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)
							 })

7.2 编辑后端Controller

在这里插入图片描述

页面效果:

8 async-await用法-箭头函数(变态)

8.1 概念解释

1.async/await 是ES7引入的新语法可以更加方便的进行异步操作
2.async 关键字用在函数上. 返回值是一个promise对象
3.await 关键字用在async 函数中

8.2 箭头函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>async-await语法</title>
	</head>
	<body>
		<h1>async-await练习</h1>
		
		<script src="../js/axios.js"></script>
		<script>
			/**
			 * axios的get请求语法
			 * 知识点:
			 * 1.箭头函数:主要简化回调函数的写法
			 * 简化思路:重复的,固定的可以简化
			 * 规则:如果参数只有一个则括号可以省略
			 * */
			let url = "http://localhost:8090/axios/getUserById?id=100"
			//箭头函数:去掉function和括号,改为 对象=>{...}

			axios.get(url)
			        .then(result =>{
				     alert(result.data)
			})
			
			//回调函数
			// axios.get(url)
			//         .then(function(result){
			// 	   alert(result.data)
			// })
			
		</script>
		
	</body>
</html>

8.3 箭头函数简化写法:解构赋值操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>async-await语法</title>
	</head>
	<body>
		<h1>async-await简化练习</h1>
		
		<script src="../js/axios.js"></script>
		<script>
			
			/**
			 * 2.async-await简化,叫作解构赋值操作
			 * 1)async 需要标识一个函数
			 * 2)await需要标识ajax的请求*/
			 //第一步:先定义一个方法--async标识
			async function getUserById(){
			let url = "http://localhost:8090/axios/getUserById?id=100"
			 //第二步:发起ajax请求--await标识--获取promise对象
		    // let promise = await axios.get(url)
			// console.log(promise)
			// console.log(promise.data)
			
			//第二步简化:解构赋值操作 提取对象中有价值的数据
			//let {data: xxxx} = await axios.get(url)
			let {data: resultData,status:code} = await axios.get(url)
			console.log(resultData)
			console.log(code)
			}
			//第三步:方法调用
			getUserById()
			
		</script>
		
	</body>
</html>

8.4 Axios配置信息

说明: 可以通过下列的配置简化 Ajax请求的路径

	//配置基本请求路径
	axios.defaults.baseURL = "http://localhost:8080/"

在这里插入图片描述

四关于前后端调用细节说明

1. 请求类型

在这里插入图片描述

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

1)分类A

get	请求类型	查询
delete	请求类型	删除

2)分类B

post	请求类型	form表单提交,新增操作
put	请求类型	更新操作

2. 关于POST请求说明

浏览器解析数据结构:
在这里插入图片描述

说明: 数据在进行参数传递时数据需要转化

1)post请求方式是把JSON串转化为对象,需要注解 @RequestBody

* {"id":"100","name":"tomcat"}

2)过程:

* 1.拆窜去除左右{} id:100,name:tomcat

* 2.按照,号拆分 id:100 name:tomcat

* 3.根据key调用对象的set方法为属性赋值.

* 4.获取了User对象

在这里插入图片描述

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

3.1 Axios中的Post请求格式

在这里插入图片描述

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

3.2 jQuery中的post请求格式

如果采用form表单的方式提交,则可以直接采用对象的方式接收
name=xxx&age=xx&sex=xx

在这里插入图片描述

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

在这里插入图片描述

本文链接：https://blog.csdn.net/weixin_58580280/article/details/119209978

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

【2024】MathorCupA 题| 移动通信网络中 PCI 规划问题（思路、代码持续更新......)-程序员宅基地

文章浏览阅读685次，点赞5次，收藏6次。物理小区识别码(PCI)规划是移动通信网络中下行链路层上，对各覆盖小区编号进行合理配置，以避免PCI冲突、PCI混淆以及PCI 模3干扰等现象。PCI 规划对于减少物理层的小区间互相干(ICI)，增加物理下行控制信道(PDCCH)的吞吐量有着重要的作用，尤其是对于基站小区覆盖边缘的用户和发生信号切换的用户，能有效地降低信号干扰，提升用户的体验。

STM32CubeMX ULN2003步进电机驱动_stm32 步进电机-程序员宅基地

文章浏览阅读690次，点赞10次，收藏16次。根据数据表，当28BYJ-48电机在全步模式下运行时，每步对应于11.25°的旋转。这意味着每转有32步 (360°/11.25° = 32)。链接: https://pan.baidu.com/s/1iucYeZGygwHi3DYeds4gqA?电机转一圈有360°，那么转一圈的脉冲数 = 360 / 5.625 * 64 = 4096 个脉冲。28BYJ-48是一款5线单极步进电机，运行电压为5V。如上图所示，步距角=5.625°/64。一、28BYJ-48 步进电机。二、CubeMX配置。_stm32 步进电机

论文阅读 Vision Transformer - VIT_vision transformer论文-程序员宅基地

文章浏览阅读712次，点赞8次，收藏9次。通过将图像切成patch线形层编码成token特征编码的方法，用transformer的encoder来做图像分类multihead和我原有的理解偏差修正。我以为的是QKV会有N块相同的copy()，每一份去做后续的linear等操作。代码里是直接用linear将QKV分为一整个大块，用permute/rearrange的操作切成了N块，f(Q,K)之后再恢复成一整个大块，很强。_vision transformer论文

es安装后的配置_es安装完-程序员宅基地

文章浏览阅读180次。今天在安装好了es，启动和配置花了点时间，这里记录一下。配置elasticsearch.yml，参数大致如下：属性说明cluster.name集群名称，默认elasticsearchnode.name节点名称node.attr.rack节点服务器所在的机架信息path.data索引数据存储路径path.log日志存储路径bootstr..._es安装完

php程序控制打印机自动打印_php实现打印机打印-程序员宅基地

文章浏览阅读1.2k次。【代码】php程序控制打印机自动打印。_php实现打印机打印

[论文速度] 超分系列：基于频率分离的图像超分辨率算法两篇 ICCVW 2019 和 CVPRW 2020_frequency separation for real-world super-resoluti-程序员宅基地

文章浏览阅读2.9k次。Frequency Separation for Real-World Super-Resolution[PAPER]_frequency separation for real-world super-resolution

随便推点

论文参考文献的引用规则-程序员宅基地

文章浏览阅读927次，点赞19次，收藏24次。在科技论文中，凡是引用前人（包括作者自己过去）已发表的文献中的观点、数据和材料等，都要对它们在文中出现的地方予以标明，并在文末（致谢段之后）列出参考文献表。这项工作叫作参考文献著录。科学研究具有继承性，需要研究者充分了解前人的工作，吸收前人的研究精华，开拓创新。因此，撰写科技论文不可避免地要引用、参考别人的文献。论文列参考文献，一是交代作者的研究背景，反映出真实的科学依据，介绍他人的研究成果，又便于感兴趣的读者查阅，进行深入研究。

idea开发android studio插件,打印日志_idea 导出安卓日志-程序员宅基地

文章浏览阅读2.4k次。插件项目中需要打印的地方全部使用idea的logger类import com.intellij.openapi.diagnostic.Logger;/** * @Author: XIELINHUA * @Date: 2019/7/23 12:28 */public class ApkTools extends DumbAwareAction { private static..._idea 导出安卓日志

深入理解python的迭代器，生成器，可迭代对象区别-程序员宅基地

文章浏览阅读280次。要先搞清楚这三者区别首先需要给文章点个赞。呸呸呸，说错了，需要先弄明白什么是迭代，先补充一下迭代的概念在进入正题的讲解。迭代：像list，tuple，dict这样的数据类型，我们通过for...in...语法从中依次拿到数据进行使用，这样的遍历过程，就叫做迭代正文开始1，可迭代对象简单来说，某个对象内部具有__iter__方法，那么它就是可迭代对象（Iterable）。全剧终！事情..._请说一下迭代器,可迭代对象,生成器的定义,区别,优缺点。

2021年关于Delphi/Object Pascal编程语言的现状和历史-程序员宅基地

文章浏览阅读8.3k次，点赞4次，收藏8次。关于Delphi/Object PascalDelphi是一种基于 Object Pascal 的编程语言，用于桌面、移动、Web 和控制台软件开发。在 1995 年首次亮相之前的最初开发过程中，Delphi 是一种尚未命名的产品的代号。function DigitSum(AValue: Int64): Integer;begin if AValue mod 10 = AValue then Result := AValue else Result := (AVa.._delphi/object pascal

el-upload 上传文件，去掉默认动画效果。_去除el-upload上传动画-程序员宅基地

文章浏览阅读3.7k次，点赞5次，收藏5次。el-upload 上传文件，去掉默认动画效果。_去除el-upload上传动画

CentOS7离线安装Mysql_centos离线安装mysql5.7-程序员宅基地

文章浏览阅读776次。CenOS7 离线安装Mysql5.7 (rpm)_centos离线安装mysql5.7