前台vue框架+后台SpringBoot框架连通

准备

前台框架可以参考
通过代码搭建Vue项目
后台框架
IDEA 搭建SpringBoot项目

准备必要的js文件

首先我们需要定义一个全局变量，在后面我们需要改动地址就比较方便了
1、global-variable.js

//全局变量文件

//baseURL:访问后台路径
 const baseURL = 'http://localhost:后台的端口号';

export default {
    baseURL,
}

前台访问后台肯定需要一个中间的桥梁，该桥梁我们用request.js
2、request.js

//--------------------------------------------拦截器  axios-------------------------------------------------------------------
import axios from 'axios';
import globalVariable from '../constant/global-variable.js' //引用变量文件 此处无this 故单独引用



// 创建实例时设置配置的默认值
const service = axios.create({
    baseURL: globalVariable.baseURL, //访问地址
    timeout: 2000000    //设置超时时间
})
//对请求的封装
export const post = (url, param) => {
    return service({
        url: url,
        method: 'post',
        data: param
    })
}

export const get = (url, param) => {
    return service({
        url: url,
        method: 'get',
        params: param
    })
}

我们对请求再次进行封装 baseApi.js

3、baseApi.js

import {get,post} from './request'

export default class BaseApi {
  static $get = get;
  static $post = post;
}

写一个我们需要的js可以分类（用于访问后台）
我这边定义了一个user.js
4、user.js

import BaseApi from './baseApi.js'
export default class user extends BaseApi {

    /**
     * 查找所有学生
     */
    static async findAllStudent() {
        const url = "/student/findAllStudent";
        const data = await this.$get(url)     
        return data;
    }
}

页面调用user.js
5、FirstPage.vue

前台安装必要的插件等

前台准备好了以后就可以启动，中途会报错
这个时候是因为没有装axios，因为我们在request.js的时候用到了axios
1：安装axios（建议安装淘宝镜像）
npm install axios/cnpm install axios
2：项目导入
npm install --save axios vue-axios /cnpm install --save axios vue-axios
3：页面导入（这边我们在 2、request.js这步已经做完了）
import axios from ‘axios’;
在启动前台会启动成功

访问后台

我这边为了测试，所以页面很简单
当进入firstPage页面直接访问后台的方法

这边会出现跨域问题
此时不要慌，因为我经历过所以我这边后台解决跨域。只需要一个类就可以了
CorsConfig.java

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 跨域配置
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {

    /**
     * 开启跨域
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路由
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许证书（cookies）
                .allowCredentials(true)
                // 设置允许的方法
                .allowedMethods("*")
                // 跨域允许时间
                .maxAge(3600);
    }
}

再次访问就访问成功了！！！