使用Axios与Spring Boot交互-优快云博客

本文链接：https://blog.youkuaiyun.com/w7635122886/article/details/128715817

1，Axios介绍

Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。

2，Axios演示

2.1新建springboot工程

springboot08_axios_server

2.1.1，pom文件配置

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.5.0</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.study</groupId>
	<artifactId>springboot08_axios_server</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>springboot08_axios_server</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<java.version>8</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
			<version>2.3.4.RELEASE</version>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

2.2.2，新建application.yml

# 公共配置
server:
  port: 8888 # 修改内嵌服务器端口号
  servlet:
    context-path: /spring-boot-day08

spring:
  mvc:
    static-path-pattern: /**
  web:
    resources:
      static-locations: classpath:/META-INF/resources/, classpath:/resources/, classpath:/static/, classpath:/public/,classpath:/resources/static/

2.2.3，新建启动类

package com.study.springboot08_axios_server;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Springboot08AxiosServerApplication {

    public static void main(String[] args) {
        SpringApplication.run(Springboot08AxiosServerApplication.class, args);
    }

}

2.2.4，新建 AxiosController

package com.study.springboot08_axios_server.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("axios")
public class AxiosController {
    @GetMapping("get")
    public String get(){
        return "get success";
    }

    @PostMapping("post")
    public String post(){
        return "post success";
    }
}

2.2.5，新建index.html

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>index hello</h1>
</body>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
    //发送get请求
    axios.get("http://localhost:8888/spring-boot-day08/axios/get")
        .then(function (resp) {
            alert(resp.data);
        })

    //发送post请求 data是参数
    axios.post(
        "http://localhost:8888/spring-boot-day08/axios/post",
        "data"
    ).then(function (resp) {
        alert(resp.data);
    })
</script>
</html>