vue axios请求后台数据接口

下面是我在做婚纱项目时做的，希望对你有帮助
这是后台给的接口，我们直接拿来用就行

首先，安装axios

npm i axios --save

引用

 import axios from 'axios'

前端渲染数据

          

             

                

                    

                      
                        

                          
                          

                        
                      
                    
                    

                       
                         
{{item.content}}
                       
                       

                         

                           

                             
                               
                               {{item.author}}
                             
                           
                           

                             
                             {{item.time}}
                           
                         
                       
                    
                
              
          

vuejs代码

data () {
   return {
     dataShow : []
    }
},
methods: {
  getlists () {
      // 相当于ajax请求
      axios({
        method: 'get',  // 请求方式
        url: 'http://192.168.97.236:3000/blog/'  //后台服务器接口 
      }).then((res) => {
        this.dataShow = res.data.data  //请求的数据传给数组dataShow 
      })
    }
},
//页面挂载完成时 调用方法
mounted () {
    this.getlists()
  }

效果如下：