《Vue3实战》第十一章 Axios，Vue里使用get、post请求

《Vue3实战》篇章整体栏目
—————————————————————————————
【第一章】node.js/npm安装、配置
【第二章】创建项目和目录结构
【第三章】基础语法
【第四章】条件语句、循环语句
【第五章】计算、监听属性
【第六章】样式绑定和事件处理
【第七章】表单
【第八章】自定义指令
【第九章】路由
【第十章】Element plus指南
【第十一章】Vue里的Axios及使用get、post请求

—————————————————————————————

—————————————————————————————

前言

Axios是一个基于promise 的 HTTP 库，可以用在浏览器和 node.js中。

1、安装

cnpm install axios

或

npm install axios

2、解决Java后台跨域的几种方式

2.1、springboot项目添加跨域配置类

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 所有接口
                .allowCredentials(true) // 是否发送 Cookie
                .allowedOriginPatterns("*") // 支持域
                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"}) // 支持方法
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

2.2、在java类上增加@CrossOrigin配置

package com.kelvin.spiderx.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
/***
 * @title CsdnQcController
 * @desctption CSDN博客质量查询
 * @author kelvin
 * @create 2023/7/1 14:33
 **/
@CrossOrigin("*")
public class CsdnQcController {
}

2.3、在java方法上增加@CrossOrigin配置

 @CrossOrigin
 // 执行查询操作
 public ResutlDto executeCsdnQc(String username) {
     return ResutlTools.buildSuccess(csdnQcService.allBlogQcDataByRest(username));
 }

2.4、通过HttpServletResponse 配置跨域

 // 执行查询操作
    public ResutlDto executeCsdnQc(String username , HttpServletResponse response) {
        //解决跨域问题
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        //返回数据时指定编码格式:utf-8
        response.setContentType("application/json;charset=utf-8");
        response.setCharacterEncoding("UTF-8");
        return ResutlTools.buildSuccess(csdnQcService.allBlogQcDataByRest(username));
    }

3、get调用

<template>  
  <h1>
  <button @click="invokeUserList">点我button>  
  h1>  
  <h1>
    <ol>
       <li v-for="userInfo in userList" :key="userInfo.id">
           {{userInfo.userAccount}}
       li>
    ol>
  h1>
template>
<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  data(){
        return{
            userList:[]
        }
  },
  mounted(){
    this.invokeUserList();
  },
  methods:{
    invokeUserList(){
      //axios调用后台get方法
      axios.get("http://localhost:8001/user/userInfoList")
      .then(response =>{
          //对返回结果进行处理
          this.userList = response.data;
          console.log(this.userList);
      }).catch(function(error){
          //异常处理
          console.log(error);
      })
    }
  }
}
script>

4、post调用

<template>  
  <h1>
  <button @click="invokeUserList">点我button>  
  h1>  
  <h1>
    <ol>
       <li v-for="userInfo in userList" :key="userInfo.id">
           {{userInfo.userAccount}}
       li>
    ol>
  h1>
template>

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  data(){
        return{
            userList:[]
        }
  },
  mounted(){
    this.invokeUserList();
  },
  methods:{
    invokeUserList(){
      axios.post("http://localhost:8001/user/userInfoList",
      {account:'tiger',pwd:'123456'})
      .then(response =>{
         this.userList = response.data;
         console.log(this.userList);
      }).catch(function(error){
          console.log(error);
      })
    }
  }
}
script>

5、总结

在此，我们使用Vue里的Axios，调用了get、post请求。