前后端分离常用配置（Spring Boot + Vue）

前后端分离

1、解决跨域问题

1.1 、后端配置

1.1.1、 配置类

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**") // 任意路径
        .allowedOrigins("*")  //允许所有域
        .allowedMethods("GET","HEAD","PUT","DELETE") //允许的方法
        .allowCredentials(true)  
        .maxAge(3600)
        .allowedHeaders("*"); //允许跨的域
}

1.1.2、注解

 @CrossOrigin("*")

2、前端处理

vue工程中创建vue.config.js文件

/**
 * 请求代理对象，解决跨域问题
 * 拦截http请求
 * target：拦截目标地址
 * pathRewrite：拦截的地址是否修改
 * **/
let proxyObj = {};
proxyObj['/']={
    ws:false,
    target:'http://localhost:80',
    changeOrigin:true,
    pathRewrite:{
        '^/':''
    }
}

module.exports={
    //生产服务器
    devServer:{
        host:'localhost',
        port:8080,
        //代理对象
        proxy:proxyObj
    }
}

2、前端处理

2.1、axios处理

首先安装axios

npm install axios

2.1.1、局部配置

import Axios from 'axios'
Axios.get('http://localhost:8081/blogs/'+(currentPage)+'/3').then(function (data) {
    ......
});

2.1.2、全局配置

配置一

import axios from 'axios';
Vue.prototype.axios = axios;

this.axios.get('http://localhost:8081/blogs/'+this.id).then(function (resp) {
    ......
});

配置二

import axios from 'axios';
Vue.prototype.$axios = axios;
//全局配置
axios.defaults.baseURL='http://localhost:8081/'
axios.defaults.headers.common['Authorization']  = 'Token '
axios.defaults.headers.post['Content-type'] = 'application/urlencode'
axios.defaults.headers.get['Accepts'] = 'application/json'

//使用
_this.$axios.get('/blogs/'+(currentPage)+'/3').then(function (data) {
    ......
});

2.2、 封装axios方法

2.2.1 key/value形式

import axios from "axios";

/**
 * 封装post请求
 * */
let base= '';
export const  postRequest = (url,params)=>{
    return axios({
        method:'post',
        url:`${base}${url}`,
        data:params,//对象key/value
        transformRequest: [function (params) {
            let ret = '';
            for (let item in params){
                //encodeURIComponent()函数可把字符串作为URI组件进行编码
                ret += encodeURIComponent(item)+'='+encodeURIComponent(params[item])+'&';
            }
            return ret;
        }],
        headers:{
            'Content-Type':'application/x-www-form-urlencoded',
        }
    });
}

/**
 * 封装put请求
 * */
export const putRequest = (url,params)=>{
    return axios({
        method:'put',
        url:`${base}${url}`,
        data:params,//对象key/value
        transformRequest: [function (params) {
            let ret = '';
            for (let item in params){
                //encodeURIComponent()函数可把字符串作为URI组件进行编码
                ret += encodeURIComponent(item)+'='+encodeURIComponent(params[item])+'&';
            }
            return ret;
        }],
        headers:{
            'Content-Type':'application/x-www-form-urlencoded',
        }
    });
}

/**
 * 封装delete请求
 * */
export const deleteRequest = (url)=>{
    return axios({
        method:'delete',
        url:`${base}${url}`,
    });
}

/**
 * 封装delete请求
 * */
export const deleteRequest = (url,params)=>{
    return axios({
        method:'delete',
        url:`${base}${url}`,
        data:params,//对象key/value
        transformRequest: [function (params) {
            let ret = '';
            for (let item in params){
                //encodeURIComponent()函数可把字符串作为URI组件进行编码
                ret += encodeURIComponent(item)+'='+encodeURIComponent(params[item])+'&';
            }
            return ret;
        }],
        headers:{
            'Content-Type':'application/x-www-form-urlencoded',
        }
    });
}

2.2.2 JSON形式

//.js文件引入方式
import { Message } from 'element-ui';
import axios from 'axios'
import router from '../router'

/**封装响应
 * 响应的拦截器
 * success回调
 * error回调
 * 失败的情况：
 * 1.业务的失败。如删除失败，服务端的响应还是200，进入success
 * 2.服务端的异常信息，进入error，请求一定失败
 * **/
axios.interceptors.response.use(success=>{
    console.log(success);
    /**
     * success.data.status 返回的json
     * 业务错误
     * axios的resp返回空，直接判断是否为空，没有则请求失败
     * **/
    if (success.status && success.status ==200 && success.data.status==500){
        Message.error({message:success.data.msg})
        return;
    }
    /**
     * 输出服务端返回的消息
     * **/
    if (success.data.msg){
        Message.success({message:success.data.msg});
    }
    /**
     * 返回json
     * 返回到axios请求调用中
     *
     * **/
    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:'账户已过期，请重新登陆'})
        //返回到登录界面
        router.replace("/")
    }else {
        if (error.response.data.msg){
            Message.error({message:error.response.data.msg})
        } else{
            Message.error({message:'未知错误'})
        }
    }
    return;
})


/**
 * 定义请求
 * base 可以统一加前缀
 * transformRequest
 * **/
let base = '';
export const postKeyValueRequest=(url,params)=>{
    return axios({
        method:'post',
        url:`${base}${url}`,    //`` 字符串拼接
        data:params,
        transformRequest:[function (data) {
            let ret = '';
            for (let i in data) {
                //key->value加&
                ret+=encodeURIComponent(i)+'='+encodeURIComponent(data[i])+'&'
            }
            //console.log(ret)
            return ret;
        }],
        headers:{
            'Content-Type':'application/x-www-form-urlencoded'
        }
    })
}

/**
 * GET
 * POST 传递JSON
 * PUT	传递JSON
 * DELETE 请求
 * **/

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,
    })
}

2.3、axios过滤器

//.js文件引入方式
import { Message } from 'element-ui';
import axios from 'axios'
import router from '../router'

/**封装响应
 * 响应的拦截器
 * success回调
 * error回调
 * 失败的情况：
 * 1.业务的失败。如删除失败，服务端的响应还是200，进入success
 * 2.服务端的异常信息，进入error，请求一定失败
 * **/
axios.interceptors.response.use(success=>{
    console.log(success);
    /**
     * success.data.status 返回的json
     * 业务错误
     * axios的resp返回空，直接判断是否为空，没有则请求失败
     * **/
    if (success.status && success.status ==200 && success.data.status==500){
        Message.error({message:success.data.msg})
        return;
    }
    /**
     * 输出服务端返回的消息
     * **/
    if (success.data.msg){
        Message.success({message:success.data.msg});
    }
    /**
     * 返回json
     * 返回到axios请求调用中
     *
     * **/
    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:'账户已过期，请重新登陆'})
        //返回到登录界面
        router.replace("/")
    }else {
        if (error.response.data.msg){
            Message.error({message:error.response.data.msg})
        } else{
            Message.error({message:'未知错误'})
        }
    }
    return;
})

2.4 、ES6新特性

1.5以前

const _this = this;
_this.$axios.get('/blogs/'+(currentPage)+'/3').then(function (data) {
	_this......
});

新特性

  this.$axios.delete('http://localhost:8081/blogs/'+_this.id).then(resp=>{
  	this.....
  });

2.5、element UI

安装

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

导入提示框

import {Message} from "element-ui";
Message({
    message: '删除博客成功',
    type: 'success'
});

2.6 字符串拼接

let ids = '?';
//拼接字符
this.multipleSelection.forEach(item => {
    ids += 'ids=' + item.id + '&';
})