Pengenalan kepada penggunaan vue3 axios dan pemaparan data

Artikel ini akan memperkenalkan cara menggunakan axios untuk memanggil antara muka dan memberikan data yang diperolehi saya harap ia akan membantu rakan yang memerlukan!

1. Apakah fungsi axios?

axios digunakan terutamanya untuk memulakan permintaan ke latar belakang dan untuk melakukan lebih banyak fungsi yang boleh dikawal dalam permintaan. [Cadangan berkaitan: tutorial video vue.js]

2 Pemasangan projekaxios dan persekitaran lain

Buka cmd. Masukkan direktori akar projek (direktori pada tahap yang sama dengan src) dan masukkan arahan npm install axios

3 Cipta baharu axios.js kandungan Salin yang berikut

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 . Petikan terus pada halaman vue, kaedah axios.get atau .post

(vue2 perlu memasang global dalam main.js, keperluan vue3 untuk mengimport setiap kali ia dirujuk, yang terasa agak kembung).

<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>

Tunjukkan kesan larian

Antara muka belakang:

Paparan bahagian hadapan:

5. Rekod pitfall

Masalah 1: vue3 axios Ralat: Ralat Rangkaian

Masalah permintaan merentas domain, saya berada di belakang -kelas pemintas akhir Diproses masuk, ganti kaedah addCorsMappings

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

Masalah 2: Tidak dapat menetapkan sifat undefined (menetapkan 'buku')

atau ReferenceError: buku tidak ditakrifkan

Anda tidak boleh memberikan nilai kepada pembolehubah secara langsung Anda perlu mendapatkan tugasan pembolehubah melalui kaedah const vm = this;

kod antara muka permintaan vue perlu meletakkan kaedah , dan dalam kitaran create() atau mounted() Kaedah ini dipanggil dalam fungsi.

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

Soalan 3: Ralat Rujukan Tidak Ditangkap: Vue tidak ditakrifkan

atau Tidak boleh membaca sifat yang tidak ditentukan (membaca 'get')

vue3 tidak dipasang melalui Vue object , saya terus merujuk axios pada setiap halaman kemudian (pada masa ini vue3 nampaknya hanya mempunyai kaedah ini)

6. Ringkasan permulaan dengan vue3

Sebelum bermula, pastikan anda membaca laman web rasmi vue (https://v3.cn.vuejs.org/) dengan teliti untuk memahami fungsi biasa dan beberapa kegunaan asas. Hanya semasa pembangunan anda boleh mengurangkan perangkap! ! !

Atas ialah kandungan terperinci Pengenalan kepada penggunaan vue3 axios dan pemaparan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!