JAVA-stage3-day07-axios

于 2021-07-30 14:25:33 发布
阅读量214 收藏
点赞数
分类专栏： java stage 3 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_58818711/article/details/119210319
版权

1.后端项目搭建

1.1 创建项目

项目名称: springboot_demo5_axios
要求: mapper/service/pojo/controller

1.2 SpringMVC参数传递方式

1.2.1 简单的参数传递

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

    @Autowired
    private UserService userService;

    /**
     *url:http://localhost:8090/getUserById?id=100
     */
    @RequestMapping("/getUserById")
    public String getUserById(Integer id){
        return "动态的获取参数:"+id;
    }

1.2.2 对象的参数传递

url地址: http://localhost:8090/getUser?id=100&name=“tomcat”&age=18
后台代码说明
在这里插入图片描述

1.2.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/usercat/18,男 type: POST
3.删除;http://localhost:8090/user/100 type: DELETE
4.更新: http://localhost:8090/user/mysql/100 type: PUT

1.例子:http://localhost:8090/user/100/tomcat/18 type: delete

    /**
     * RequestMapper默认的可以接收所有的请求类型
     * RestFul语法:
     * 1.参数的位置固定
     * 2.参数必须使用{}包裹
     * 3.必须使用@PathVariable 动态的接收参数
     * 注意事项:{参数名称}必须与方法中的名称一致
     */
    @GetMapping("/user/{id}")
    public String restFulGet(@PathVariable Integer id){
        return "restFul动态的获取参数"+id;
    }

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

2 Axios学习

2.1 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的请求的方式.

2.2 回调地狱

2.3 Axios入门案例

2.3.1 Axios后台代码

在这里插入图片描述

@RestController
@CrossOrigin
public class AxiosController {
    /**快速完成
     * 查询用户信息
     * URL: http://localhost:8090/axios/getUser
     */
    @GetMapping("/axios/getUser")
    public String getUser(){
        return "你好Axios";
    }
}

2.3.2 Axios前端代码 调用步骤

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios练习</title>
	</head>
	<body>
		<h1>Axios练习</h1>
		<div id="app">
			
		</div>
		<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)
					console.log(result.data)
				})
		</script>
	</body>
</html>

2.4 Axios-Get简单参数

2.4.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.4.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.5 Axios-Get-resultFul结构

2.5.1 前端Ajax请求

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

2.5.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.6 Axios-Get-对象传参

2.6.1 需求说明

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

2.6.2 编辑前端Ajax

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axiosget</title>
	</head>
	<body>
		<h1>Axios练习</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:"女"
		}//key: value 固定写法 params 参数对象
		axios.get("http://localhost:8090/axios/user/getUserObj",{params: user})
				.then(function(result){
					console.log(result.data)
				})
		</script>
	</body>
</html>

2.6.3 编辑后端Controller

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

2.7 Axios-Delete请求

2.7.1 Delete请求说明

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

2.7.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 对象={xxx:xxx,xxx:xxx}
axios.delete(“url地址/xxx/xxx/xxx”,{params:封装后的对象}).then(function(result){…})

2.8 Axios-post请求

2.8.1 编辑页面Ajax

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios练习</title>
	</head>
	<body>
		<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
		 * 总结 如果需要对象传参
		 * 	get请求需要采用axios.get(url,{params: 对象})
		 * 	post请求axios.post(url,对象)
		 */
		let user = {
			name: "post请求的语法",
			age: 20,
			sex: "女"
		}
		let url = "http://localhost:8090/axios/insertUser"
		axios.post(url, user)
				.then(function(result){
					console.log(result.data)
				})
		
		 </script>
	</body>
</html>

2.8.2 参数的数据结构

说明:如果采用post的方式传递对象,则数据结构是一个JSON
在这里插入图片描述

2.8.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
     */
    @PostMapping("axios/insertUser")
    public User insertUser(@RequestBody User user){
        return user;
    }

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

2.9.1 请求类型

在这里插入图片描述
请求的类型是由程序员手动控制
分类A
1.get请求类型 查询
3.delete请求类型 删除
分类B
2.post请求类型 form表单提交 新增操作
4.put请求类型 更新操作

2.9.2 关于POST请求说明

在这里插入图片描述

在这里插入图片描述

2.10 Axios-post-restFul结构

2.10.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.10.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;
    }

2.11 async-await用法-箭头函数

2.11.1 概念结实

1.async/await是ES7引入的新语法 可以更加方便的进行异步操作

2.11.2 箭头函数

/**
		 * axios的get请求语法
		 * 知识点
		 * 	1.箭头函数 主要简化回调函数的写法
		 * 	思路:重复的 固定的可以简化
		 * 	规则:如果参数只有一个则括号可以省略
		 * 
		 * 	2.async-await简化
		 * 	2.1 async 需要标识函数
		 * 	2.2 await需要标识ajax请求
		 * 	上述的操作可以将多行js 封装为一行执行 简化代码操作
		 */
		

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

2.11.3 asynv-await

		//1.定义一个方法
		async function getUserById(){
			let url="http://localhost:8090/axios/getUserById?id=100"
			// //发起ajax请求  获取promise对象
			// let promise = await axios.get(url)
			// console.log(promise)
			// console.log(promise.data)
			
			//解构赋值 提取对象中有价值的数据
			let {data: resultData, status: code} =await axios.get(url)
			console.log(resultData)
			console.log(code)
		}
		//2.调用方法
		getUserById()

2.11.4 Axios配置信息

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

		//定义axios基本请求路径 为ajax请求添加前缀
		axios.defaults.baseURL = "http://localhost:8090"

3.关于Axios练习

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值