前台vue框架+后台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);
    }
}

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