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

轮播图前端获取数据

  • script
  • template
  • ajax和axios有什么区别呢?

在我们构建好后端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不一 定有。

你可能感兴趣的:(VUE+Django,vue.js,django)