springboot+vue+axios封装请求

定义api.js对请求的地址以及响应回来的数据处理

import axios from "axios"
import { Message } from 'element-ui';

// 封装服务端响应信息
axios.interceptors.response.use(success=>{
    // 业务上的错误
    if(success.status && success.status==200 && success.data.status===500){
        Message.error({message:success.data.msg})
        return;
    }
    return success.data;
},error => {
    if(error.response.status==504 || error.response.status == 404){
        Message.error({message:"服务器走失了"})
    }else if(error.response.status==403){
        Message.error({message:"权限不足，请联系管理员"})
    }else if(error.response.status==401){
        Message.error({message:"未登录"})
    }else {
        if(error.response.data.msg){
            Message.error({message:error.response.data.msg})
        }else {
            Message.error({message:"未知错误"})
        }
    }
    return;
})

let base='';
// 封装post请求
export const postKeyValueRequest=(url,params)=>{
    return axios({
        method:'post',
        url:`${base}${url}`,
        data:params,
        transformRequest:[function (data){
            let ret='';
            for (let i in data) {
                ret+=encodeURIComponent(i)+'='+encodeURIComponent(data[i])+'&'
            }
            console.log("ret"+ret);
            return ret;
        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    });
}

export const postRequest=(url,params)=>{
    return axios({
        method:'post',
        url:`${base}${url}`,
        data:params
    })
}
export const putRequest=(url,params)=>{
    return axios({
        method:'put',
        url:`${base}${url}`,
        data:params
    })
}
export const getRequest=(url,params)=>{
    return axios({
        method:'get',
        url:`${base}${url}`,
        data:params
    })
}
export const deleteRequest=(url,params)=>{
    return axios({
        method:'delete',
        url:`${base}${url}`,
        data:params
    })
}

定义vue.config.js处理跨域请求

// node.js处理前后端的跨域请求
let proxyObj={};
proxyObj['/']={
    ws:false,
    target:'http://localhost:8081',
    changeOrigin:true,
    pathRewrite:{
        '^/':''
    }
}
module.exports={
    devServer:{
        host:'localhost',
        port:8080,
        proxy:proxyObj
    }
}

实际使用

登录界面的Login.vue，使用post请求登录

<template>
    <div>
		<el-form :rules="rules" :model="loginForm" ref="loginForm" class="loginContainer">
			<h3>系统登录</h3>
			<el-form-item prop="username">
				<el-input type="text" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input type="password" v-model="loginForm.password" placeholder="请输入用户密码"></el-input>
			</el-form-item>
			<el-checkbox v-model="checked"></el-checkbox>
			<el-button type="primary" @click="submitLogin">登录</el-button>
		</el-form>
	</div>
</template>

<script>
  import {postKeyValueRequest} from "../utils/api";

  export default {
	  data() {
	    return {
			checked:true,
			loginForm:{
				username:"admin",
				password:"123"
			},
			rules: {
			  username:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
			  password:[{ required: true, message: '请输入密码', trigger: 'blur' },]
		  }
	    }
	  },
	  methods:{
		  submitLogin(){
			this.$refs.loginForm.validate((valid) => {
			  if (valid) {
				// alert('submit!');
          postKeyValueRequest('/login',this.loginForm).then(resp=>{
            if (resp){
              window.sessionStorage.setItem("user",JSON.stringify(resp.obj));
              this.$router.replace('home')
            }
          })
			  } else {
				this.$message.error('请输入所有字段');
				return false;
			  }
			});
		  }
	  }
	}
</script>

<style>
	.loginContainer {
		border-radius: 15px;
		background-clip: padding-box;
		margin: 100px auto;
		width: 350px;
		padding: 35px 35px 15px 35px;
		background: #FFFFFF;
		border: 1px solid #00FF00;
		box-shadow: 0 0 25px #82848A;
	}
</style>