快捷導(dǎo)航

vue前端獲取django后端數(shù)據(jù)實(shí)現(xiàn)方式

更新時(shí)間：2026年02月05日 08:46:19 作者：Wanncye

這篇文章主要介紹了如何在Vue組件中使用axios獲取和處理數(shù)據(jù),并在模板中展示這些數(shù)據(jù),文章還詳細(xì)講解了Vue的生命周期、v-for指令的使用以及axios與ajax的區(qū)別

script

首先我們在想要獲得數(shù)據(jù)的vue組件里的script部分編寫獲取數(shù)據(jù)、處理數(shù)據(jù)的方法，然后將數(shù)據(jù)返回。返回的數(shù)據(jù)可以在template部分獲取、展示。

<script>
    export default {
        name: "Banner",
        data(){
          return{
            banner_list : []
          }
        },
        created(){
          this.get_banner_list();
        },
        methods: {
          get_banner_list(){
            //獲取輪播廣告
            this.$axios.get(`${this.$settings.HOST}/banner`, {}).then(response=>{
            console.log(response.data)
            this.banner_list = response.data
            }).catch(error=>{
              console.log(error.response)
            })
          }
        }
    }
</script>

因?yàn)榍懊嫖覀円呀?jīng)在main.js中將axios、setting作為vue的property，所以我們能夠直接通過this來調(diào)用。

這里有幾個(gè)點(diǎn)需要注意：

${}語法：{}中，javascript會將其認(rèn)為是變量，在渲染的時(shí)候會填充相應(yīng)的值
axios使用方法得記住
created(){}是vue的生命周期，有必要了解，起碼得熟悉

template

<template>
  <el-carousel height="720px" :interval="3000" arrow="always">
    <el-carousel-item :key="key" v-for="banner,key in banner_list">
      <a :href="banner.link" rel="external nofollow" >
        <img :src="banner.image_url">
      </a>
    </el-carousel-item>
  </el-carousel>
</template>

在標(biāo)簽中循環(huán)script返回的列表，將得到的image_url作為img標(biāo)簽的源鏈接，得到的link作為a標(biāo)簽的跳轉(zhuǎn)鏈接。

有這么幾個(gè)點(diǎn)要注意：

v-for的使用，有點(diǎn)像python里面的for循環(huán)
vue的屬性前的冒號

加冒號的，說明后面的是一個(gè)變量或者表達(dá)式；

沒加冒號的后面就是對應(yīng)的字符串字面量。

ajax和axios有什么區(qū)別呢？

axios是通過Promise實(shí)現(xiàn)對ajax技術(shù)的一種封裝，就像jquery對ajax的封裝一樣。（ajax技術(shù)實(shí)現(xiàn)了局部數(shù)據(jù)的刷新，axios實(shí)現(xiàn)了對ajax的封裝。）；
axios是ajax，ajax不止axios；axios有的ajax都有，ajax有的axios不一定有。