[Kapitel 1] Installation und Konfiguration von node.js/npm [Kapitel 2] Erstellen von Projekten und Verzeichnisstrukturen [Kapitel 3] Grundlegende Syntax [Kapitel 4] Bedingte Anweisungen und Schleifenanweisungen [Kapitel 5] Berechnungs- und Überwachungseigenschaften [Kapitel 6] Stilbindung und
Ereignisverarbeitung [Kapitel 7] Formulare [Kapitel 8] Benutzerdefinierte Anweisungen [Kapitel 9] Routing [Kapitel 10] Element plus Leitfaden [Kapitel 11 ] Axios und Verwendung in Vue get, post request
————————————————————————————
Inhaltsverzeichnis
————————————————————————————
Vorwort
Axios ist eine Promise-basierte HTTP-Bibliothek, die im Browser und in node.js verwendet werden kann.
1. Installation
cnpm install axios
oder
npm install axios
2. Mehrere Möglichkeiten zur domänenübergreifenden Lösung des Java-Hintergrunds
2.1, Springboot-Projekt zum Hinzufügen einer domänenübergreifenden Konfigurationsklasse
@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. Fügen Sie der Java-Klasse die @CrossOrigin-Konfiguration hinzu
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. Fügen Sie der Java-Methode die @CrossOrigin-Konfiguration hinzu
@CrossOrigin
// 执行查询操作
public ResutlDto executeCsdnQc(String username) {
return ResutlTools.buildSuccess(csdnQcService.allBlogQcDataByRest(username));
}
2.4. Konfigurieren Sie domänenübergreifend über 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. Anruf erhalten
<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. Anrufe posten
<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. Zusammenfassung
Hier verwenden wir Axios in Vue, um Get- und Post-Anfragen aufzurufen.