记录VUE封装API的方法（vue+springboot）

src目录下新建tool文件夹，新建BaseAPI.js文件

BaseAPI.js文件内容如下：

import axios from 'axios';
import { Promise } from 'q';
//后端的路径
axios.defaults.baseURL = 'http://localhost:8081';
export class BaseAPI {
    static connection(method = 'get', url, data) {
        let methodArray = ["put", "delete", "post", "get"];
        let index = methodArray.indexOf(method.toLowerCase());
        switch (index) {
            case 0:
                return this.doPut(url, data);
            case 1:
                return this.doDelete(url, data);
            case 2:
                return this.doPost(url, data);
            case 3:
                return this.doGet(url, data);
            default:
                break;
        }
    }
    static doGet(url, params) {
        return new Promise((resolve, reject) => {
            axios.get(url, {
                params: params
            }).then(res => {
                resolve(res);
            }).catch(err => {
                reject(err);
            })
        });
    }
    static doPost(url, data) {
        return new Promise((resolve, reject) => {
            axios.post(url, data)
                .then(res => {
                    resolve(res);
                })
                .catch(err => {
                    reject(err)
                })
        });
    }
    //delete
    static doDelete(url, data) {
        return new Promise((resolve, reject) => {
            axios.delete(url,{params:data})
                .then(res => {
                    resolve(res);
                }).catch(err => {
                    reject(err)
                })
        });
    }
    //put
    static doPut(url, data) {
        return new Promise((resolve, reject) => {
            axios.put(url, data)
                .then(response => {
                    resolve(response);
                }, err => {
                    reject(err)
                })
        })
    }
}

在.vue里面的使用：
目录结构：

在任意地方新建.js文件（为了方便管理我在vue对应的目录下建立自己对应的.js）

loginAPI.js文件内容：

//引用刚建立的BaseAPI
import {BaseAPI} from '../../tool/BaseAPI'

export class loginAPI {
//为某个接口命名，方便在vue里调用
  static login(data){
  //显而易见，后端接口路径
    return BaseAPI.connection("get","/login/login",data);
  }
}

login.vue的调用 只列举script的部分：

<script>
//调用封装好的api
  import {loginAPI} from "./loginAPI";

  export default {
        name: "login",
        data(){
            return{
              autoLogin:false,
              msg:'',
              userInformation:{
                username:'',
                password:''
              }
            }
        },
        methods:{
          login(){
            let data = this.userInformation;
            //调用的语句
            loginAPI.login(data).then((res)=>{
              console.log(res);
              this.msg = res.data.msg;
            })
          }
        }
    }
</script>

后台springboot的代码（只列举controller接收参数的部分）：

    @RequestMapping("/login")
    public JSONResult login(UserInformation userInformation){
        JSONResult jsonResult = new JSONResult();
        jsonResult.setMsg(loginService.login(userInformation));
        return jsonResult;
    }

以及后台UserInformation类：

package com.cqut.finalproject.entity.login;

public class UserInformation {
    private String Username;
    private String Password;

    public String getUsername() {
        return Username;
    }

    public void setUsername(String username) {
        Username = username;
    }

    public String getPassword() {
        return Password;
    }

    public void setPassword(String password) {
        Password = password;
    }
}