前后端分离 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

<template>
  <div>
    <el-form label-width="80px">
  <el-form-item label="用户名">
    <el-input v-model="username"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input v-model="password"></el-input>
  </el-form-item>
  <el-button type="warn" @click="login">登录</el-button>
    </el-form>
    <h1>{{ username }}</h1>
    <h1>{{ password }}</h1>
  </div>
</template>
<script>
import apiFun from "@/api/api"; // 引入网络请求
export default {
  name: "HelloWorld",
  data() {
    return {
        username:'admin',
        password:'1234'
    };
  },
  methods: {
    //登陆
    async login() {
      const res = await apiFun.Login(this.username,this.password); // 使用请求
      console.log(res)
    },
  },
};
</script>

TestElementUi.vue

<template>
    <div id="app">
        <h1>{{ tt }}</h1>
        <el-button type="primary" @click="onload">msg:{{ tt }}</el-button>
        <el-button type="warn" @click="postInfo">发起请求</el-button>
        <h1>{{ info }}</h1>
    </div>
</template>
<script>
import axios from 'axios';
    export default {
        name: "TestElementUi",
         data(){
        return{
            tt:1,
            info:'等待请求获取中...'
        }
    },
    methods: {            
        // 获取数据            
        onload:function(){
            this.tt++;
        } ,
        postInfo(){
            axios.get('http://localhost:8088/test').then(resp=>{
            this.info = resp.data
          }).catch(error=>{
            console.log((error))
          })
        }
        } 
    }
   
</script>

<style scoped>

</style>

App.vue

<template>
  <div id="app">
    <HelloWorld></HelloWorld>
    <TestElementUi></TestElementUi>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import TestElementUi from './components/TestElementUi.vue'
export default {
  name: 'App',
  components: {
    HelloWorld,TestElementUi
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

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端口

运行结果：