前言

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

一、环境的搭建

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

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

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

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

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

二、测试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";
    }
}

成功获取数据

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

测试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实现前后端分离基础教程

报错，这是由于前端向后端请求数据，而他们的端口号不一样，前端的端口号为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实现前后端分离基础教程

总结

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

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

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili

ps:有任何问题都可以给我留言，大家一起进步！

标签 Boot, Vue, 教程