springboot和vue实现前后端分离基础教程(springboot和vue结合)

编辑：rootadmin

springboot和vue实现前后端分离基础教程

前言

一、环境的搭建

二、测试springboot和vue

三、解决跨域问题

1.修改vue的vue.config.js文件

2.修改访问的url地址

前言

推荐整理分享springboot和vue实现前后端分离基础教程(springboot和vue结合)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:springboot+vue3,spring boot与vue,springboot和vue结合,springboot 和vue,spring boot与vue,spring boot与vue,springboot 和vue,spring boot与vue,内容如对您有帮助，希望把文章链接给更多的朋友！

本学期大作业是做一个系统，然后前段时间也学习了vue和springboot，所以就打算使用springboot和vue来实现前后端分离，练习和巩固所学的东西。然后下面是一些自己遇到的问题，希望能帮助到别人。

一、环境的搭建

创建一个springboot和一个vue项目，并且将他们放在同一个文件夹下，使用idea打开文件夹

打开之后项目有可能无法被识别出是什么类型的项目，可以在项目结构-->facet中点击+号，添加类型

这样环境也就基本搭建成功了，我们可以写一点代码来测试一下前后端是否可以正常获取数据

二、测试springboot和vue

测试springboot

package com.example.controller;import org.springframework.web.bind.annotation.*;@RequestMapping("/test")@RestControllerpublic class TestController { @GetMapping public String t(){ return "springboot"; }}

成功获取数据

测试vue

<template> <div class="info"> <button v-on:click="postInfo">showInfo</button> <br> {{info}} </div></template><script> import axios from "axios"export default { name: 'App', data() { return { info: "ee" } }, methods: { postInfo: function () { axios.get('http://localhost:80/test').then(resp=>{ this.info = resp.data }).catch(error=>{ console.log((error)) }) } }}</script> springboot和vue实现前后端分离基础教程(springboot和vue结合)

springboot和vue实现前后端分离基础教程(springboot和vue结合)

点击按钮产生的结果

报错，这是由于前端向后端请求数据，而他们的端口号不一样，前端的端口号为8080，后端的是80，所有前端无法向后端获取数据，存在跨域问题

三、解决跨域问题1.修改vue的vue.config.js文件const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, //关闭语法检查 lintOnSave:false, // 开启代理服务器（方式一） // devServer: { // proxy:'http://localhost:80' // } //第二种 devServer:{ proxy:{ // 以api为前缀才开启代理,可修改 // 可以配置多个 '/api':{ target: 'http://localhost:80', //正则表达式判断，将路径中的/api转换为"" pathRewrite:{'^/api':''}, //用于支持websocket // ws:true, //用于控制请求头中的host值 // changeOrigin: true } } }})

有两种开启代理服务器的方法，第一种简单，但是只能处理一种情况，比如你向80，81两个端口请求信息，80配置了代理服务器，而81没配置，你就无法获取到81的信息；第二种就可以处理多个。

2.修改访问的url地址

修改前

axios.get('http://localhost:80/test').then()

修改后

axios.get('http://localhost:8080/api/test').then()

你需要把端口号改为你前端网页对应的那个端口号，并且加上'/api'（就是你vue.config.js配置的那个前缀）

接下来就大功告成了！

结果：

总结

简单介绍了springboot和vue实现前后端分离的操作流程。

如果想更清楚了解解决跨域问题可以看尚硅谷的课程（96-97 配置代理）