Vue实战之axios基本使用

Vue 实战

十、Axios 基本使用

1、引言

Axios：是一个异步请求技术，核心作用就是用来在页面中发送异步请求，并获取对应数据在页面进行渲染 。

页面局部更新技术 类似jQuery、Ajax技术。

Axios 用来在页面发起异步请求到后端服务，并将后端服务响应数据渲染到页面上。

jQuery 推荐 ajax技术 vue里面并不推荐在使用jQuery框架 vue推荐使用axios 异步请求库。

axiox总结：用来在前端页面发起一个异步请求，请求之后页面不动，响应回来刷新页面局部

官方定义：axios异步请求库，并不是vue官方库，第三方异步请求库 在vue中推荐使用axios。

易用、简洁且高效的http库===>发送http异步请求

官方网站：http://www.axios-js.com/

特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

2、Axios 第一个程序

• 中文网站：https://www.kancloud.cn/yunye/axios/234845

• 安装： https://unpkg.com/axios/dist/axios.min.js

（1）搭建后端服务

（1）创建maven工程 vue_day02_back，在pom.xml文件中引入依赖坐标

<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.baizhi</groupId>
    <artifactId>vue_day02_back</artifactId>
    <version>1.0-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.5.RELEASE</version>
    </parent>

    <dependencies>
        <!--web-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>
</project>

（2）在项目的resources目录下新建application.properties

server.port=8081

（3）创建包结构，入口类函数、controller视图层、实体类

• 入口类函数

package com.baizhi;

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

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

• controller

package com.baizhi.controller;

import com.baizhi.entity.User;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.*;

@RestController
@CrossOrigin //用来解决跨域
public class DemoController {
   
   

    private static final Logger log = LoggerFactory.getLogger(DemoController.class);

    @GetMapping("/demo")
    public String demo(@RequestParam("id") String id, @RequestParam("name") String name) {
   
   
        log.info("demo ok...");
        log.info("id:{} name:{}", id, name);
        // int n = 1 / 0;
        return "demo ok...";
    }

    @PostMapping("/test")
    public String test(@RequestBody User user) {
   
   
        log.info("test ok...");
        log.info("id:{} name:{}", user.getId(), user.getName());
        return "test ok ";
    }

    @PutMapping("/test1")
    public String test1