vue项目调用后端api模板实例

        相信有些人后端写完，在postman中也能看到接口正常运行。可转到前端，一脸懵，什么啊这是。

 ∴  我在这参上一脚，在vue项目中，接口很简单。

案例（按照 前端不同数据 从 后台固定数据 取值）：

<template>
  <div>
    {{name}}欢迎您来到喵生世界，尽情雀跃吧！
  </div>
</template>

<script>
export default {
  data(){
    return {
      name: "豪豪家族",
      Cats: ["橘猫","布偶","三花"],
      CatLike:[
        {
          id:'001',
          name:'橘猫'
        },
        {
          id:'001',
          name:'布偶'
        },
        {
          id:'001',
          name:'三花'
        }
      ]
    }
  },
  mounted () {
    this.getCatClass();
  },
  methods:{
    getCatClass(){
      this.$api.get(' 此处写后端接口地址 ').then(res = >{
        if(res.data){  //判断
        // 此处写页面想要取的值
        // 案例(前提：后台所取到的值为json串，记得看看自己的postman)：
        // 比如前端想要取到这个name名，那么我们可以写
        // this.name = res.data[0].name
        // 比如前端想要取到这个Cats名，那么我们可以写
        // this.Cats = res.data.map(x = > x.Cats)
        // 比如前端想要取到这个CatLike名，那么我们可以写
        // this.CatLike = res.data
        }
        //if结束
      })
      //getCatClass结束
    }
  }

}
</script>

<style scoped>

</style>