【axios】vue-antd-admin axios配置

最新推荐文章于 2024-03-01 18:09:11 发布

Joise.

最新推荐文章于 2024-03-01 18:09:11 发布

阅读量271

点赞数

分类专栏： axios vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/joise_/article/details/125602995

版权

vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

axios

2 篇文章 0 订阅

订阅专栏

vue-antd-admin axios配置

axios获取后端数据

https://www.iczer.gitee.io/vue-antd-admin-docs/develop/service.html

安装axios

//使用npm
npm install axios
//使用淘宝源
cnpm install axios

引入

main.js文件

//main.js
import axios from 'axios'
//把axios对象挂到Vue实例上面，使用axios的时候直接 this.$axios就可以了 
Vue.prototype.$axios = axios

真不错！以上都不需要 antd已经封装好了

跨域问题

根目录下面的vue.config.js
在这里插入图片描述

ctrl点进去修改配置

在这里插入图片描述

请求数据封装数据

在这里插入图片描述

api.js 增加接口

在这里插入图片描述

再services目录下创建对应的.js文件，对应修改红色框里面的东西

在这里插入图片描述

带请求参数的
- index.js

在这里插入图片描述

测试

<template>
    <div>
        <el-button :plain="true"   @click="open">打开消息提示</el-button>
    </div>

</template>

<script>
    import {dishesList} from "@/services/dishesdata";

    export default {
        data(){
            return{

            }
        },
        methods: {
            open() {
                // this.DishData
                this.$antdconfirm('这是一条消息提示');
                console.log(dishesList());
            },
		}
    }
</script>

深层套娃结果

处理数据

getDishesSort(){
  // this.dishesData=dishesSortList();
   // console.log(this.dishesData)
    console.log(dishesSortList())
    dishesSortList().then((res)=>{
    console.log(res.data.data.dishesList.xj)
     for(let i=0;i<res.data.data.dishesList.xj.length;i++)
      {
            this.xj.push(res.data.data.dishesList.xj[i])
      }
},