Resumo dos eixos do VUE

Axios (sistema de entrada e saída ajax) é uma estrutura de comunicação assíncrona de código aberto que pode ser usada no lado do navegador e node.js. Sua principal função é implementar a comunicação assíncrona ajax.

Características

Crie xmlHttpRequests no navegador
Crie uma solicitação http de node.js
Interceptar solicitações e respostas
Converter dados de solicitação e dados de resposta
Cancelar pedido
Converta dados JSON automaticamente
O cliente oferece suporte à defesa contra xsrf (ataque de falsificação de solicitação entre sites)

Nota: Ajax é encapsulado e aprimorado em Vue, que é melhor que Ajax nativo em processamento assíncrono e simultâneo.

Tipo de solicitação

postagem: nova operação
colocar: operação de modificação
get: operação de consulta
excluir: operação de exclusão

Definir prefixo de axios

Método de escrita: axios.defaults.baseURL="nome do prefixo"

Resultado: Depois de escrever o prefixo, o caminho de solicitação de axios subsequente pode ser abreviado (remover o prefixo)

Formato de escrita Axios

axios({
    url:"地址信息",
    method:"请求方法",
    params:{name:"lili"},
    data:{name:"lili"}
}).then(res=>{
    <!--结果被封装到promise的data中-->
    console.log(res.data)
})

Informações de atributos

url: caminho solicitado
método: método de solicitação
parâmetros: parâmetros de solicitação
dados: parâmetros de solicitação

A diferença entre parâmetros e dados

parâmetros

Envie parâmetros de solicitação no formato name=value&name=value na forma de parâmetros, e os parâmetros transferidos são objetos não formatados.
Independentemente de o método de solicitação usado ser get ou post, os parâmetros da solicitação serão unidos ao endereço da solicitação.
Os dados desta forma podem obter parâmetros diretamente

dados

data é enviar parâmetros de solicitação na forma de string json
Os parâmetros da solicitação serão salvos no corpo da mensagem de solicitação.
Os parâmetros obtidos desta forma são json e você precisa convertê-los em objetos java.
Este método só é aplicável aos métodos put, post e patch (o método get não possui corpo de solicitação)

Casos de uso

antes de usar

Instale axios: npm install --save axios

Instale a string de consulta: npm install --save querystring

Introduzido no componente:

importar axios de "axios"

importar string de consulta de "querystring"

<template>
<div id="a">
    {
   
   {msg}}
</div>
</template>
<script>
import axios from "axios"
import querystring from "querystring"
export default{
    name:"mycomponent",
    data() {
        return {
            msg:""
        }
    },
    mounted() {
        // get请求方式
        axios({
            method:"get",
            url:"https://limestart.cn/"
        }).then(res =>{
            console.log(res.data);
            this.msg=res.data
        })
    // post请求参数
    axios({
        method:"post",
        url:"http://iwenwiki.com/api/blueberrypai/login.php",
        data:querystring.stringify({
            user_id:"[email protected]",
            password:"iwen123",
            verification_code:"crfvw"
        })
    }).then(res=>{
        console.log(res.data);
    })
    },
}
</script>

Nota: Os dados em data devem ser passados no formato json

abreviatura de axios

axios.请求方法("url地址信息"，参数信息)
.then(function(promise){console.log(promise.data)})

Perceber:

axios.O método de solicitação ("informações de endereço de URL", informações de parâmetro) é um objeto de promessa e o resultado da solicitação é encapsulado no atributo de dados.
Use o valor de retorno da função "método axios.request ("informações de endereço de URL", informações de parâmetro)" como parâmetro da próxima função de retorno de chamada, promessa

prática de forma abreviada

<template>
<div id="a">
    {
   
   {msg}}
</div>
</template>
<script>
import axios from "axios"
import querystring from "querystring"
export default{
    name:"mycomponent",
    data() {
        return {
            msg:""
        }
    },
    mounted() {
        // get请求方式
        axios.get("https://limestart.cn/")
        .then(res=>{
            console.log(res.data);
        })
        // post请求参数
        axios.post("http://iwenwiki.com/api/blueberrypai/login.php",querystring.stringify({
            user_id:"[email protected]",
            password:"iwen123",
            verification_code:"crfvw"
        })).then(res=>{
        console.log(res.data);
        })
    },
}
</script>

Uso para diferentes tipos de solicitação

postar formulário e colocar formulário

axios.请求方法("url地址"，对象名称) 
.then(function(promise){console.log(promise.data)})

obter formulário e excluir formulário

axios.请求方法("url地址"，{params：对象名称}) 
.then(function(promise){console.log(promise.data)})

Nota: Para o parâmetro {params: object name}, o navegador analisará o objeto interno e, em seguida, dividirá automaticamente os parâmetros.

Formulário de emenda de parâmetros de obter formulário e excluir

Método de gravação de URL de emenda de parâmetro: http://localhost:8080/del?age=9&name=lili&hobby=basketball&hobby=football

Noções básicas sobre emenda de parâmetros: quais são os atributos por trás do caminho? Separe, conecte vários atributos com &

axios.请求方法("url地址带拼接参数") 
.then(function(promise){console.log(promise.data)})

forma repousante

Forma tranquila de escrita: http://localhost:8080/del/9/lili

Compreensão tranquila do formulário: uso/junção entre caminhos e valores de parâmetros

Perceber:

O valor do parâmetro de escrita repousante é editado no URL
Use / para separar parâmetros uns dos outros
Restful divide os locais dos dados em uma ordem estrita (pense nisso)
Na estrutura repousante, os verbos não podem aparecer no caminho da solicitação para fins de ocultação.
O formato repousante suporta get/post/put/delete e outros métodos de solicitação.
Se a solicitação restful for post/put, o seguinte nome do objeto precisará ser escrito.

Uso

axios.请求方法("url地址信息restful形式",[对象名称])
.then(function(promise){console.log(promise.data)})

Eixos de referência globais

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
//引入axios
import axios from "axios"
const app=createApp(App)
//将axios挂载到全局
app.config.globalProperties.$axios=axios
// 使用时直接this.$axios()来调用axios
app.mount('#app')

Encapsulamento de solicitações de rede axios

Prefácio: No processo diário de aplicação, haverá muitas solicitações de rede em um projeto. Neste momento, a solução geralmente adotada é encapsular as solicitações de rede.

Solução de embalagem

Instale axios: npm install --save axios

Instale a string de consulta: npm install --save querystring

Introduzido no componente:

importar axios de axios

importar string de consulta de "querystring"

import axios from "axios"
import querystring from "querystring"

const errorHandle=(status,info)=>{
    switch(status){
        case 400:
            console.log("语义有误");
            break
        case 401:
            console.log("服务器认证失败");
            break
        case 403:
            console.log("服务器拒绝访问");
            break
        case 404:
            console.log("地址错误");
            break
        case 500:
            console.log("服务器遇到意外");
            break
        case 502:
            console.log("服务器无响应");
            break
        default:
            console.log(info);
            break
    }
}
/* 创建自己的网络请求对象 */
const instance=axios.create({
    /* 网络请求的公共配置 */
    timeout:5000
})
//拦截器常用
//发送数据之前
instance.interceptors.request.use(
    //拦截成功执行的函数
    //config包含网络请求的所有信息
    config=>{
        if(config.methods==="post"){
            /* 转化post请求参数格式 */
            config.data=querystring.stringify(config.data)
        }
        return config
    },
    //拦截失败执行的函数
    error=>{
        return Promise.reject(error)
    }
)
//获取数据之前
instance.interceptors.response.use(
    //成功时返回结果
    response=>{
        return response.status===200?Promise.resolve(response):Promise.reject(response)
    },
    //失败时返回结果
    error=>{
        const {response}=error
        // 错误处理才是重中之重
        errorHandle(response.status,response.info)
    }
)
export default instance

Uso: introduza diretamente esta instância exportada como uma instância axios e use-a diretamente

Solução entre domínios para solicitações de rede

js adota a mesma política de origem

A política de mesma origem é uma política de segurança do navegador. O navegador só permite que o código js solicite dados na interface de dados com o mesmo nome de domínio, porta e protocolo do servidor atual. Esta é a mesma política de origem.

Compreensão: Quando qualquer um dos protocolos, nomes de domínio e números de porta for diferente, ocorrerão problemas entre domínios.

restrição não homogênea

Não é possível ler cookies, localStorage e IndexedDB de páginas da web não originais
Não é possível acessar o DOM de páginas da web não originais
Não é possível enviar solicitação ajax para endereço não original

Solução para problemas entre domínios

Solução de back-end: cors
Solução de recepção: proxy

Caso de solução de recepção entre domínios

O front-end acessa o serviço de back-end por meio de um proxy

<template>
  <div id="container">
    <button @click="send">点击调用</button>
  </div>
</template>
<script>
export default {
  name:"app",
  methods: {
    send() {
      //这里的开头用代理（我全局配置了axios）
      this.$axios.get("/randomPath/user/login?username=lili&password=123").then(
        function(promise) {
          console.log(promise.data);
        })
    }
  }
}
</script>

//vue.config.js文件内
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
    /* 解决跨域问题的配置 */
    devServer:{
      //配置代理
      proxy:{
      "/randomPath":{
        //参数为产生跨域的域名地址
        target:"http://localhost:8888",
        //设置true后，那么会在本地创建一个虚拟服务端（同域的），然后发送请求的数据并同时接收请求的数据，这样服务端和服务端进行数据交互就不会有跨域问题了
        changeOrigin:true,
        //路径重写
        pathRewrite:{
          //用来替换target中得到请求地址（前面为正则匹配）
          //也就是你在请求target中的地址时直接写成/randomPath即可
          '^/randomPath':''
        }
      }
    }
  }
})

Nota: Depois que o front-end resolver o problema de domínio cruzado, lembre-se de reiniciar o servidor.

Serviços de back-end

Nota: O número da porta backend é 8888 para fornecer serviços e não há configuração entre domínios.

@RestController
@RequestMapping("/user")
public class GetMsg {
    @GetMapping("/login")
    public String doLogin(@RequestParam("username") String username,@RequestParam("password") String password){
        System.out.println("请求进来了");
        return "你的名字为"+username+"你的密码为"+password;
    }
}