vue+springboot前后端分离的优点（springboot和vue实现前后端分离基础教程）
前言
本学期大作业是做一个系统 ，然后前段时间也学习了vue和springboot ，所以就打算使用springboot和vue来实现前后端分离 ，练习和巩固所学的东西 。然后下面是一些自己遇到的问题 ，希望能帮助到别人 。
一 、环境的搭建
创建一个springboot和一个vue项目 ，并且将他们放在同一个文件夹下 ，使用idea打开文件夹
打开之后项目有可能无法被识别出是什么类型的项目 ，可以在项目结构-->facet中点击+号 ，添加类型
这样环境也就基本搭建成功了 ，我们可以写一点代码来测试一下前后端是否可以正常获取数据
二 、测试springboot和vue
测试springboot
package com.example.controller; import org.springframework.web.bind.annotation.*; @RequestMapping("/test") @RestController public 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>点击按钮产生的结果
报错 ，这是由于前端向后端请求数据 ，而他们的端口号不一样 ，前端的端口号为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 配置代理）
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili
ps:有任何问题都可以给我留言 ，大家一起进步！
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！