3、vue axios返回后端数据接收

看图,看代码

安装axios

 npm install axios

在你的mian.js里

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'


Vue.config.productionTip = false

new Vue({
     
  router,
  store,
  axios,
  render: h => h(App)
}).$mount('#app')

3、vue axios返回后端数据接收_第1张图片

api.js里 配置你的后端接口地址,我的是2020端口


const ApiRootUrl='http://192.168.1.104:2020/';

//找个是你要访问的后端方法地址
module.exports={
     
	//拼接之后http://192.168.1.104:2020/b
    indexUrl:ApiRootUrl + 'b',
    
}

接下来去你的,vue页面

<template>
    <div>
        <h1></h1>
    </div>
</template>
<script>
//导入刚配置的api地址
import api from'../api/api.js'
//导入axios
import axios from 'axios'
export default {
     
    name:'apiName',
    data:function(){
     
        return{
     

        }
    },
    //这里async  是异步的意思
    async mounted(){
     
        console.log(api)
        //await 等待方法执行完毕,就是等待数据接收回来之后再运行其他方法,api.indexUrl是地址
        let res =await axios.get(api.indexUrl)
        console.log(res)
        console.log(res.data)
    },
}
</script>

你可能感兴趣的:(vue,接口)