Einführung in die Verwendung von vue3 Axios und Datenrendering

Dieser Artikel stellt vor, wie man mit Axios die Schnittstelle aufruft und die erhaltenen Daten rendert. Ich hoffe, dass er Freunden in Not hilfreich sein wird!

1. Welche Funktion haben Axios?

axios wird hauptsächlich verwendet, um Anfragen an den Hintergrund zu initiieren, und es gibt mehr steuerbare Funktionen in der Anfrage. [Verwandte Empfehlungen: vue.js Video-Tutorial]

2. Projektinstallation axios und andere Umgebungen

Öffnen Sie cmd und geben Sie das Projektstammverzeichnis (src-Verzeichnis auf derselben Ebene) ein. Geben Sie den Befehl npm install axios ein

3. Erstellen Sie einen neuen axios.js Inhalt Kopieren Sie den folgenden

axios.js

import axios from "axios";
import qs from "qs";

// axios.defaults.baseURL = ''  //正式
axios.defaults.baseURL = 'http://localhost:8099' //测试

//post请求头
axios.defaults.headers.post["Content-Type"] ="application/x-www-form-urlencoded;charset=UTF-8";
//设置超时
axios.defaults.timeout = 10000;

axios.interceptors.request.use(
    config => {
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

axios.interceptors.response.use(
    response => {
        if (response.status == 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    error => {
        alert(`异常请求：${JSON.stringify(error.message)}`)
    }
);
export default {
    post(url, data) {
        return new Promise((resolve, reject) => {

            axios({
                method: 'post',
                url,
                data: qs.stringify(data),
            })
                .then(res => {
                    resolve(res.data)
                })
                .catch(err => {
                    reject(err)
                });
        })
    },

    get(url, data) {
        return new Promise((resolve, reject) => {
            axios({
                method: 'get',
                url,
                params: data,
            })
                .then(res => {
                    resolve(res.data)
                })
                .catch(err => {
                    reject(err)
                })
        })
    }
};

4. axios.get oder .post Methode

(vue2 muss das globale System in main.js mounten, vue3 muss jedes Mal importieren, wenn darauf verwiesen wird, was sich etwas aufgebläht anfühlt).

<template>
    <div>
        <table>
            <tr>
                <td>编号</td>
                <td>图书名称</td>
                <td>作者</td>
            </tr>
            <tr v-for="item in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.author}}</td>
            </tr>
        </table>
        请求状态码：{{code}},请求状态：{{msg}}
    </div>
</template>
<script>
    import axios from &#39;../js/axios&#39;;
 
    export default {
        name: "Book",
        data() {
            return {
                code: "",
                msg: "",
                books: [],
            }
        },
        created() {   //生命周期函数（或者 mounted 函数）调用的方法才能运行
            this.getShops();
        },
        methods: {
            getShops: function () {
                const vm = this;
                axios.get("/book/findAll", {
                    // id: 1
                }).then(function (response) {
                    console.log(response.data);
                    let results = response.data || [];
                    let code = response.code;
                    let msg = response.msg;
                    if (results && results.length > 0) {
                        // 获取搜索到的商品
                        vm.code = code;
                        vm.msg = msg;
                        vm.books = results;
                    }
                }).catch(function (error) {
                    console.log(error);
                    vm.code = 0;
                    vm.msg = error;
                    vm.books = [];
                })
            }
        }
    }
</script>

运 Betriebseffekt anzeigen

Back-End-Schnittstelle:

Frage 1: Vue3 Axios-Fehler: Netzwerkfehler

domänenübergreifendes Anforderungsproblem, ich habe es in der Backend-Interceptor-Klasse behandelt und dabei die Methode addCorsMappings überschrieben

   //跨域问题
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedHeaders("*")
                .allowedMethods("*")
                .allowedOriginPatterns("*")
                .allowCredentials(true);
    }

Frage 2: Eigenschaften von undefiniert können nicht festgelegt werden (Einstellung „Bücher“)

oder Referenzfehler: Bücher sind nicht definiert

Kann nicht Weisen Sie Variablen Werte direkt zu. Sie müssen die Variablenzuweisung über

const vm = this; () periodische Funktion.

created() {   //生命周期函数（或者 mounted 函数）调用的方法才能运行
    this.getShops();
},
methods: {
    getShops: function () {
    const vm = this;   //传获取的结果 给页面
    }
}

Frage 3: Nicht erfasster Referenzfehler: Vue ist nicht definiert oder Eigenschaften von undefiniert können nicht gelesen werden (liest „get“)

vue3 wurde nicht über das Vue-Objekt gemountet. Später habe ich Axios auf jeder Seite direkt referenziert (derzeit vue3). scheint nur so zu sein)🎜🎜🎜🎜🎜🎜 6. Zusammenfassung der ersten Schritte mit vue3🎜🎜🎜Lesen Sie unbedingt die offizielle Vue-Website (https://v3.cn.vuejs.org/) sorgfältig durch, bevor Sie beginnen um allgemeine Funktionen und einige grundlegende Verwendungszwecke zu verstehen. Nur während der Entwicklung können Sie Fallstricke reduzieren! ! ! 🎜

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von vue3 Axios und Datenrendering. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!