Vue在后端接口获取数据

2022-05-09 09:01:27 阅读：492 来源： 互联网

标签：Vue api res baseUrl 接口 data 获取数据 axios cateId

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue在后端接口获取数据