vue前端如何获取django后端数据

在我们构建好后端api，也就相当于把让前端获取的数据准备好了。这个时候需要前端使用axios请求向后端api请求数据。其实这个过程很简单啊，为什么第一次做的时候就做的这么吃力呢？？？

script

首先我们在想要获得数据的vue组件里的script部分编写获取数据、处理数据的方法，然后将数据返回。返回的数据可以在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>

因为前面我们已经在main.js中将axios、setting作为vue的property，所以我们能够直接通过this来调用。这里有几个点需要注意：

1. ${}语法：{}中，javascript会将其认为是变量，在渲染的时候会填充相应的值
2. axios使用方法得记住
3. 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">
        <img :src="banner.image_url">
      </a>
    </el-carousel-item>
  </el-carousel>
</template>

在标签中循环script返回的列表，将得到的image_url作为img标签的源链接，得到的link作为a标签的跳转链接。
有这么几个点要注意：

1. v-for的使用，有点像python里面的for循环
2. vue的属性前的冒号

加冒号的，说明后面的是一个变量或者表达式；
没加冒号的后面就是对应的字符串字面量。

ajax和axios有什么区别呢？

• axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封 装一样。（ajax技术实现了局部数据的刷新，axios实现了对ajax的封装。）；
• axios是ajax，ajax不止axios；axios有的ajax都有，ajax有的axios不一 定有。