前后端分离 element ui+axios封装

项目目录：

main.js

import Vue from 'vue'
import App from './App.vue'
import {Button,Input,Form,FormItem} from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
Vue.config.productionTip = false
Vue.use(Button)
Vue.use(Input)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(axios)
new Vue({
  render: h => h(App),
}).$mount('#app')

request.js

import axios from "axios";
import {Loading,Message} from 'element-ui'
let baseUrl='http://localhost:8088'
let config={
    baseUrl:baseUrl,
    timeout:30000
}
let _axios=axios.create(config);
let l1; 
/* 请求拦截器（请求之前的操作） */
_axios.interceptors.request.use(
    (config) => {
        l1=Loading.service({
            text:'加载中...'
        })
        //如果有需要在这里开启请求时的loading动画效果
       // config.headers.Authorization = getToken; //添加token,需要结合自己的实际情况添加，
        return config;
    },
    (err) => Promise.reject(err)
);
 
/* 请求之后的操作 */
_axios.interceptors.response.use(
    (res) => {
        setTimeout(() => {
        l1.close();    
        }, 2000);
        //关闭请求时的loading动
        //返回401无权限，可能会是跳回到登录页的操作，结合项目写
        if (res.data.meta.status === 401) {
            Message.error("无权限操作");
        }
        if (res.data.meta.status === 400) {
            Message.error("请求网络失败");
        }
        if (res.data.meta.status === 404) {
            Message.error("请求网络失败");
        }
        return res;
    },
    (err) => {
        if (err) {
            setTimeout(() => {
                l1.close();
            }, 2000);
            //在这里关闭请求时的loading动画效果
            Message.error("请求网络失败");
        }
        return Promise.reject(err);
    }
);
 
 const http = {
     get(url = baseUrl+"", params = {}) {
         return new Promise((resolve, reject) => {
            _axios({
                    url,
                     params,
                     headers: { "Content-Type": "application/json;charset=UTF-8" },
                     method: "GET",
                })
                .then((res) => {
                     resolve(res.data);
                     return res;
                 })
                 .catch((error) => {
                     reject(error);
                 });
         });
     },
     post(url =baseUrl+ "", params = {}) {
         return new Promise((resolve, reject) => {
             _axios({
                     url,
                    data: params,
                     headers: { "Content-Type": "application/json;charset=UTF-8" },
                     method: "POST",
                })
                 .then((res) => {
                    resolve(res.data);
                    return res;
                })
                .catch((error) => {
                     reject(error);
                });
        });
    },
 };
// methods可变的请求方式
const request = (methods, url ="", params = {}) => {
    let paramsRequest = {
        url,
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: methods,
    };
    paramsRequest.url=baseUrl+url;
    // get请求使用params
    if (methods === "get" || methods === "GET") {
        paramsRequest.params = params;
    } else {
        // post put 请求使用data
        paramsRequest.data = params;
    }
    return new Promise((resolve, reject) => {
        _axios(paramsRequest)
            .then((res) => {
                resolve(res.data);
                return res;
            })
            .catch((error) => {
                reject(error);
            });
    });
};
export default request;

HelloWorld.vue

TestElementUi.vue

App.vue

ctrl+~打开控制台输入npm run serve 运行vue项目

服务端代码：

 @GetMapping("/login")
    public String login(String username,String password){
        System.out.println(username);
        System.out.println(password);
        return "登陆成功!";
    }

记得在controller前加@CrossOrigin跨域访问，

服务端开启服务，开放8088端口

运行结果：