前後端分離

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、注解

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 + '&';
})

前後端分離常用配置（Spring Boot + Vue）前後端分離

前後端分離

1、解決跨域問題

1.1 、後端配置

1.1.1、配置類

1.1.2、注解

2、前端處理

2、前端處理

2.1、axios處理

2.1.1、局部配置

2.1.2、全局配置

2.2、封裝axios方法

2.2.1 key/value形式

2.2.2 JSON形式

2.3、axios過濾器

2.4 、ES6新特性

2.5、element UI

2.6 字元串拼接

繼續閱讀

Vue監視資料原理

vue項目：npm打包-S和-D差別：

vue滑動插件：vue-drag-verify

vue插件的使用

使用Vue自定義元件出現的錯誤

Vue+原生JS實作點選粘貼到剪貼闆

vue時間段選擇器實作的功能

VueX 做狀态管理( state , mutations , getters , actions 概念)

vue 中英文切換

【GIT】git指令行代碼送出流程及注意事項

Django項目實戰——3—(圖形驗證碼後端邏輯、短信驗證碼、短信驗證碼後端邏輯)1、圖形驗證碼後端邏輯2、短信驗證碼3、短信驗證碼後端邏輯

前後端分離之跨域問題

vue3 transitionvue3 transition元件和vue2 transition元件

vue學習筆記day12 vue的生命周期

父子元件間傳值的實作父子元件間傳值的實作

手把手教你配置：Jenkins+Github+Webhook +Nginx自動化打包部署Vue項目

前後端分離常用配置（Spring Boot + Vue）前後端分離

前後端分離

1、解決跨域問題

1.1 、後端配置

1.1.1、 配置類

1.1.2、注解

2、前端處理

2、前端處理

2.1、axios處理

2.1.1、局部配置

2.1.2、全局配置

2.2、 封裝axios方法

2.2.1 key/value形式

2.2.2 JSON形式

2.3、axios過濾器

2.4 、ES6新特性

2.5、element UI

2.6 字元串拼接

繼續閱讀

1.1.1、配置類

2.2、封裝axios方法