Axios、跨域问题

1.Axios

1.1Ajax简介

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML)，使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
功能和作用: Ajax主要实现前后端交互.提高用户页面与服务器之间交互效率。
特点: 局部刷新,异步访问

1.2Ajax异步原理

组成部分:

1. 用户
2. Ajax引擎–代理
3. 服务器

异步的特点：

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

1.3前后端交互

1.3.1GET请求案例

1.get请求

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

/**
			 * 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)
				 })