Spring前后端业务交互Axios

最新推荐文章于 2024-08-09 16:42:09 发布

李滇滇

最新推荐文章于 2024-08-09 16:42:09 发布

阅读量386

点赞数

文章标签： spring 交互 javascript

本文链接：https://blog.csdn.net/qq_44772261/article/details/121769324

版权

项目环境搭建

在这里插入图片描述

Axiosj讲解

Ajax介绍

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。 [3]

功能和作用: Ajax主要实现前后端交互.提高用户页面与服务器之间交互效率. 特点: 局部刷新,异步访问

Ajax异步原理说明

组成部分:

用户
Ajax引擎–代理
服务器

异步的特点：

由Ajax引擎直接访问后端服务器。
在回调函数没有执行之前，用户可以执行自己的任务。异步

入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios测试</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<h1>Axios测试案例-1</h1>
		<script>
			/* 
				1.可以编辑Axios 发送ajax请求
				2.不同的服务器之间发送ajax请求时会有"跨域"问题
				3.解决跨域问题 通过注解搞定. @CrossOrigin  
			 */
			var url = "http://localhost:8080/hello"
			axios.get(url)
				 .then(function(result){ //回调函数!!!
					 console.log(result)
				 })
		</script>
	</body>
</html>

在这里插入图片描述

前后端交互案例

Axios-Get请求

业务需求说明

需求: 根据ID查询用户信息
URL地址: http://localhost:8080/axios/getUserById?id=100
参数: id = 100
返回值: User对象的JSON 伪造一个User对象

编辑AxiosController

package com.jt.controller;

import com.jt.pojo.User;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin    //主要解决跨域问题
@RequestMapping("/axios")
public class AxiosController {
    /**
     * URL地址:  http://localhost:8080/axios/getUserById?id=100
     * 参数:     id = 100
     * 返回值:  User对象的JSON   伪造一个User对象
     */
    @RequestMapping("/getUserById")
    public User getUserById(Integer id){
        //根据ID查询数据库
        User user = new User();
        user.setId(id);
        user.setName("好好学习");
        user.setAge(1000);
        user.setSex("男");
        return user;
    }
}

编辑页面HTML

/**
			 * var 关键字 没有作用域的概念!!!!
			 * let 相当于var 有作用域 更加安全.
			 * const 定义常量的
			 * 关于axios数据返回值对象的说明:
			 * 		axios为了接收后端服务器数据,利用promise对象
			 * 		封装参数
			 */
			let url1 = "http://localhost:8080/axios/getUserById?id=100"	
			axios.get(url1)
				 .then(function(promise){
					 console.log(promise.data)
				 })

在这里插入图片描述

Axios-Get-对象参数写法

业务需求说明

需求: 根据ID查询用户信息
URL地址: http://localhost:8080/axios/getUserByNA?id=xxx&name=xxxx
参数: id=xxx name=xxx
返回值: List [user1,user2]

编辑UserController

 /**
     * URL地址:  http://localhost:8080/axios/getUserByNA?id=xxx&name=xxxx
     * 参数:         id=xxx  name=xxx
     * 返回值:     List [user1,user2]
     */
    @RequestMapping("/getUserByNA")
    public List<User> getUserByNA(User user){
        List<User> list = new ArrayList<>();
        list.add(user);//简化赋值操作 直接返回
        list.add(user);
        return list;
    }

编辑页面JS

/**
			 * 1.get请求 对象传参
			 * 2.语法说明:
			 * 		关键字: params : 对象信息
			 */
			let user2 = {name:"tomcat",age:100}
			let url2 = "http://localhost:8080/axios/getUserByNA"
			axios.get(url2,{params:user2})
				 .then(function(promise){
					 console.log(promise.data)
				 })

Axios-Get-restFul结构

需求说明
查询name=tomcat sex=“男” 的用户要求请求采用restFul的风格实现数据获取.
URL地址: http://localhost:8080/axios/findUserByNS/tomcat/男
参数: name/sex
返回值: List

编辑AxiosController

 /**
     * URL地址:  http://localhost:8080/axios/findUserByNS/tomcat/男
     * 参数: name/sex
     * 返回值: List<User>
     */
    @RequestMapping("/findUserByNS/{name}/{sex}") //调用set方法为属性赋值
    public List<User> findUserByNS(User user){
        List<User> list = new ArrayList<>();
        list.add(user);
        list.add(user);
        return list;
    }

编辑前端JS

/**
				 * 需求: 利用restFul的风格实现前后端交互.
				 * URL:  http://localhost:8080/axios/findUserByNS/tomcat/男
				 * 难点:
				 * 		1.tomcat/男直接写死在url地址中. 后期扩展不方便
				 * 模版字符串写法:ES6引入的新功能
				 * 语法:
				 * 		1. 使用反引号  ``
				 * 		2. 作用:  1.可以保证字符串的格式
				 * 				  2.可以动态获取变量的值
				 */ 
				let user3 = {name: "tomcat", sex: "男"}
				let url3 = `http://localhost:8080/axios/findUserByNS/${user3.name}/${user3.sex}`
				let html = `<div>
								<p>AAA</p>
								<p>BBB</p>
							</div>
							`
				axios.get(url3)
					 .then(function(promise){
						 console.log(promise.data)
					 })

前端js

/**
				 * 需求: 利用restFul的风格实现前后端交互.
				 * URL:  http://localhost:8080/axios/findUserByNS/tomcat/男
				 * 难点:
				 * 		1.tomcat/男直接写死在url地址中. 后期扩展不方便
				 * 模版字符串写法:ES6引入的新功能
				 * 语法:
				 * 		1. 使用反引号  ``
				 * 		2. 作用:  1.可以保证字符串的格式
				 * 				  2.可以动态获取变量的值
				 */ 
				let user3 = {name: "tomcat", sex: "男"}
				let url3 = `http://localhost:8080/axios/findUserByNS/${user3.name}/${user3.sex}`
				let html = `<div>
								<p>AAA</p>
								<p>BBB</p>
							</div>
							`
				axios.get(url3)
					 .then(function(promise){
						 console.log(promise.data)
					 })