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

快来打我* 2023-10-13 09:11 5阅读 0赞

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

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

#### 目录 ####

*  前言
 *  1、安装
 *  2、解决Java后台跨域的几种方式
 *   *  2.1、springboot项目添加跨域配置类
     *  2.2、在java类上增加@CrossOrigin配置
     *  2.3、在java方法上增加@CrossOrigin配置
     *  2.4、通过HttpServletResponse 配置跨域
 *  3、get调用
 *  4、post调用
 *  5、总结

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

## 前言 ##

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请求。

[node.js_npm]: https://blog.csdn.net/s445320/article/details/130107403
[Link 1]: https://blog.csdn.net/s445320/article/details/130108162
[Link 2]: https://blog.csdn.net/s445320/article/details/130198834
[Link 3]: https://blog.csdn.net/s445320/article/details/130200350
[Link 4]: https://blog.csdn.net/s445320/article/details/130200783
[Link 5]: https://blog.csdn.net/s445320/article/details/130200903
[Link 6]: https://blog.csdn.net/s445320/article/details/130213404
[Link 7]: https://blog.csdn.net/s445320/article/details/130213662
[Link 8]: https://blog.csdn.net/s445320/article/details/130110029
[Element plus]: https://blog.csdn.net/s445320/article/details/130197081
[Vue_Axios_get_post]: https://blog.csdn.net/s445320/article/details/131490211