Vue3-Axios

一、Axios安装及应用

• Axios是一个基于promise的网络请求库，而Promise是JavaScript中一种处理异步操作的模式，它提供了一种更加优雅的方式来处理异步操作的结果和错误，了解一下即可。
• 安装Axios：

npm install --save axios

• 全局导入和局部导入：

a）局部导入
在需要使用的axios的组件中引入

import axios from 'axios'

b）全局导入
在main.js中引入

import { createApp } from 'vue';
import App from './App.vue';
import './assets/main.css';
import axios from 'axios';

// 创建 Vue 应用实例
const app = createApp(App)
app.provide("axios",axios)
// 挂载应用到 DOM
app.mount('#app')

处理跨域问题

• 前端处理跨域问题，后端不动
  1）找到vite.config.js,在defineConfig里输入

server: {
    proxy: {     // proxy配置项通常是出现在前端的配置文件中的，用于设置代理规则
      '/api': {   // 是一个路径前缀，表示所有以/api开头的请求都将被代理
        target: '后端的端口号，一般是8080，以个人实际为准',     // 指定代理的目标地址，即前端的请求都会被转发到这个地址上
        changeOrigin: true,   // 表示开启代理时是否改变请求的origin，这对于处理跨域问题很重要
        rewrite: (path) => path.replace(/^\/api/, '')   // rewrite 函数用于重写请求路径，这里将请求路径中的 /api 前缀移除，确保请求能够正确地发送到后端服务器上的正确路由。
      }
    }
  }

• 前端不动，后端处理跨域问题
  1）一般都是在后端的Controller里加"@CrossOrigin"

package com.example.blogserver2.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.http.ResponseEntity;

@RestController
@CrossOrigin   // 看这里就好，下面就是一个接口,关于文章的
@RequestMapping("/api/articles")
public class ArticleController {
    private final ArticleService articleService;

    @Autowired
    public ArticleController(ArticleService articleService) {

        this.articleService = articleService;
    }
}

发送异步请求

• 实例代码：

<script setup>
import { ref,onMounted} from 'vue';
import axios from 'axios';
import '../assets/main1.css'

const articles = ref([]);

// 获取文章数据
async function fetchArticles() {
  try {
    const response = await axios.get('http://localhost:8081/api/articles');  // 发送get请求到后端
    const fetchedArticles = response.data;

    articles.value = fetchedArticles;
  } catch (error) {
    console.error('Error fetching articles:', error);
  }
}

// 初始化时获取数据
onMounted(fetchArticles);
</script>

这个请求是从后端拿取文章数据，其中await 关键字只能在 async 函数内部使用。这是因为 await 用于等待 Promise 的解决，它使异步代码看起来更像是同步代码，但这一能力是基于 async 函数提供的异步执行上下文。

1、使用onMounted钩子函数去执行fetchArticles()。
2、onMounted 是 Vue 3 中的一个组合式 API 函数，用于在组件挂载到 DOM 后执行一些初始化操作。
3、其中 ref 是一个函数，用于创建一个响应式的引用。这个引用是一个对象，具有一个 .value 属性，用于存储数据。使用 ref 创建的值会在模板中自动追踪依赖，并触发更新。

DOM（文档对象模型，Document Object Model）是一种与平台和语言无关的应用程序接口（API），用于动态地访问、更新文档的内容、结构和样式。DOM 主要用于处理 HTML 和 XML 文档。当你在浏览器中加载一个 HTML 页面时，浏览器会根据 HTML 内容构建一个 DOM 树，使得你可以通过 JavaScript 对页面上的元素进行操作。
主要特点：
树形结构：DOM 将文档表示为一个节点树，每个节点都是文档中的某个部分，如元素、属性、文本等。
节点类型：DOM 包括多种类型的节点，如元素节点、属性节点、文本节点等。
可编程性：DOM 提供了访问和修改文档的方法和属性，允许你通过编程方式来改变文档的状态。
常见的 DOM 方法和属性：
访问节点：document.getElementById, document.getElementsByClassName, document.getElementsByTagName, querySelector, querySelectorAll 等。
创建节点：document.createElement, document.createTextNode 等。
插入节点：appendChild, insertBefore 等。
删除节点：removeChild。
替换节点：replaceChild。
节点属性：nodeType, nodeName, nodeValue, attributes, childNodes 等。
修改节点内容：innerHTML, textContent。

• 后端需要处理GET请求

package com.example.blogserver2.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements  WebMvcConfigurer{
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:5173" , "http://localhost:5174")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .allowedHeaders("*")
                .maxAge(3600);
    }
}

实际上除了get请求之外，还有可能需要接收别的请求：
1、GET: 用于请求访问已被URI（统一资源标识符）识别的资源。它是最常用的HTTP方法之一，通常用于获取数据。使用GET请求时，请求参数会附加在URL后面。
2、POST: 用于向指定资源提交数据，请求服务器进行处理（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
3、PUT: 用来传输文件，就像“开放式”的FTP一样。但是PUT请求通常用于更新已存在的资源。客户端使用PUT发送数据给服务器，覆盖现有资源的内容。
4、DELETE: 请求服务器删除URI指定的资源。当客户端想要删除某项资源时，向服务器发送DELETE请求。
5、OPTIONS: 用于获取关于当前资源支持的通信选项的信息。可以查看服务器支持哪些请求方法以及其他通信相关的信息。

后续

• Axios网络请求的封装，因为往往一个项目中会有很多的网络请求，这个时候就需要将请求封装起来。