vue 前后端分离调用后端数据（加深记忆）

vue 前后端分离调用后端数据（加深记忆）

1、在.vue文件中引入调用对应后台数据方法，并调用此方法

import {getAccount} from '../assets/js/index'

2、前端申请后台数据（安装axios依赖）

//上方引入的index.js
import axios from 'axios'
import {baseUrl} from "./config";
import $ from 'jquery'
import './base'

export const getAccount=()=>{
    return axios.post(`${baseUrl}/index/index/index`).then(res=>{
        return res.data;
    })
}

//config.js
export const baseUrl='http://shagua.com';
//base.js
import axios from 'axios';
import qs from 'qs';
import router from '../../router'

axios.defaults.withCredentials=true;	//允许跨域发送cookie
axios.defaults.transformRequest = [function(data) { //解析post数据
	if(typeof data=='object'){
		return qs.stringify(data);
	}else{
		return data;
	}
    
}];

axios.defaults.transformResponse=[function(data){ //拦截response请求，做统一跳转
	data=JSON.parse(data);
	if(data.status=='-99'){
		router.push({path:'/login'});
	}
	return data;
}];

3、后端接收前端申请并返回数据（此处使用tp5，这里是允许访问，后台业务去对应调用的方法里写）

//跨域访问的时候才会存在此字段
$origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
 
$allow_origin = array(
    'http://localhost:8080',
);
 
if(in_array($origin, $allow_origin)){
    header('Access-Control-Allow-Credentials: true');
    header("Access-Control-Allow-Headers: *");
    header('Access-Control-Allow-Origin:'.$origin);
    header('Access-Control-Max-Age:3600');
}