vue配置axios统一管理后端接口API

一、安装axios

        执行命令安装：npm install axios --save-dev

 二、创建request.js引入axios

        在src目录下新建文件夹utils,在该文件下创建request.js文件，引入axios。后续一些实用的工具js都放在该目录下，如过滤器、token等。

import axios from "axios";

const request = axios.create({

    baseURL: 'http://localhost:8090/api',

    timeout: 3000

})

export default request;

  baseURL为后端接口通用地址

三、统一管理后端API接口地址

        在src目录下创建api文件夹用于存放后端的接口地址。

        在api下创建user目录，在use目录下创建user.js用来存放后端user相关的接口地址

        例如：       

 import request from '@/utils/request'

export function getById(id) {

    return request({

        method: 'get',

        url: '/user/getUserById',

        params: {

            'userId': id

        }

    })

}

 前后端参数如何传递获取，参考之前的博客：前后端分离，后端参数的接收_前后端分离，后端参数的接收@RequestParamRequestParam只能用于接收请求带的paramse.g: http://localhost:8080/XXXX/selectUser?userName=admin@PathVariablePathVariable只能用于接收url路径上的参数e.g: http://localhost:8080/XXXX/selectUser/adminPathVariable一般用于get和delete请求，RequestParam一般用于post请https://blog.csdn.net/shaogaiyue9745602/article/details/109049349?spm=1001.2014.3001.5501

四、修改Index.vue页面，添加按钮测试后台接口地址

        

<template>

    <div>

        版本号：{{version}}

        <el-button type="primary" @click="getOne">获取数据</el-button>

    </div>

</template>

<script>

import { getById } from '@/api/user/user'

export default {

  name: 'Index',

  data () {

    return {

      // 版本号

      version: '3.3.0'

    }

  },

  methods: {

    goTarget (href) {

      window.open(href, '_blank')

    },

    getOne(){

        getById('1').then(response => {

            console.log(response)

        })

    }

  }

}

</script>

五、启动后端与前端，点击按钮测试        

 注：

        后端需在controller接口上方添加注解@CrossOrigin 允许跨域，也可在前端配置跨域