Vue在后端接口获取数据

Vue通过后端接口获取数据分为两种：

在这里我们通过axios获取数据

 

首先建立一个文件夹api，并创建index.js

 

 

1、不需要传参的接口数据

在api/index.js中编写

import axios from "axios";
//引入axios
//定义baseUrl  接口网址
const baseUrl = "http://47.95.13.193/myToiletries";

//暴漏函数AllShops  请求类型为get  无请求参数

// 接口网址/biz/queryAllCommodity

//``连接字符串

export function AllShops() { 
return axios.get(`${baseUrl}/biz/queryAllCommodity`) 
}

在组件中引用，并使用

<script>
    import {AllShops} from "@/api";

    export default {
        name: 'App',
        data() {
            return {
                isAllShop: [],//定义空数组
            }
        },
        created() {
            this.getShops()//调用getShops函数
        },
        methods: {
            async getShops() { //异步  async与await
                const res = await AllShops()
                this.isAllShop = res.data//将后端获取的数据赋值给isAllShop空数组
                console.log(res.data)//空数组输出获得的数据
            }
        },
    }
</script>

 

 

 

 可见成功获取到数据。

2、需要传参

api/index.js

import axios from "axios";
//引入axios
//定义baseUrl  接口网址
const baseUrl = "http://47.95.13.193/myToiletries";

export function getSortGoods(cateId) {
    return axios.get(`${baseUrl}/biz/queryCommodityByCateId?cateId=${cateId}`)
}
//cateId为请求参数

//${cateId}与getSortGoods(cateId)内的请求参数需一致。 

 

    import {getSortGoods} from "@/api";
//引入getSortGoods在api
    export default {
        name: "DetailListCom",
        data() {
            return {
                GoodsAllClass: [],
            }
        },
    
        created() {
            this.getGoodsAllClass()
        },
        methods: {
            async getGoodsAllClass() {
                const res = await getSortGoods(this.$route.params.id)
//this.$route.params.id  接收参数
                this.GoodsAllClass = res.data
                console.log(res.data);
            },

        }
    }
</script>

 

传参与不传参的区别就在于接收参数，也无太大区别，整体思想是相同的。

 

标签：Vue,api,res,baseUrl,接口,data,获取数据,axios,cateId
来源： https://www.cnblogs.com/reverse-x/p/16246335.html