Vue+spring boot前后端分离项目搭建---小白入门

首先，介绍一下软件准备工作

1.vscode

2.maven

3.vue搭建：node.js+yarn+vite

一.后端搭建

打开vscode,建立一个springboot项目，参考链接：sping boot项目搭建

建立一个项目，目录结构如下：

helloController.java

java 复制代码

package example.example1;


import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin // 允许所有跨域请求（仅用于开发）
public class HelloController {
    
    @GetMapping("/hello")
    public String hello() {
        return "你好，Spring Boot! 当前时间: " + new java.util.Date();
    }
}

访问浏览器：http://localhost:8080/hello

运行界面如下：

二.前端搭建

打开一个文件夹，建立一个vue项目，参考链接：vue项目创建

项目目录结构如下：

public/index.html如下：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>极简Vue+SpringBoot</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

Components/App.vue如下：

javascript 复制代码

<template>
  <div>
    <h1>Vite + Spring Boot 测试</h1>
    <button @click="fetchData">获取后端数据</button>
    <div v-if="message">{{ message }}</div>
    <div v-if="error" style="color: red">{{ error }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      error: ''
    }
  },
  methods: {
    async fetchData() {
      try {
        const response = await fetch('/api/hello') // 注意 /api 前缀
        this.message = await response.text()
        this.error = ''
      } catch (err) {
        this.error = '请求失败: ' + err.message
      }
    }
  }
}
</script>

main.js如下：

javascript 复制代码

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

vite.config.js如下

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 你的 Spring Boot 后端地址
        changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, '') // 去掉 /api 前缀
      }
    }
  }
})

运行界面如下：

点击获取后台数据：

这样就完成了前后端分离啦。

注意：要先运行后端再运行前端。

关键步骤总结：

一.后端搭建

1.首先，搭建后端，在servlet里面设置@CrossOrigin

2.用@GetMapping(）定义访问映射

编写@GetMapping("/hello")定义访问的映射

二.前端搭建：

1.用fetch方法来获取数据

fetch 是浏览器内置的一个用于发送网络请求（如 HTTP 请求）的函数。它可以用来向服务器获取数据或提交数据，常用于前后端分离项目中前端与后端的通信。

const response = await fetch('/api/hello')

这行代码的意思是：向 /api/hello 这个接口发送一个 GET 请求，等待服务器返回响应，然后把响应结果赋值给 response 变量。

2.其中，api接口是自己在vite.config.js中定义的

proxy: {

'/api': {

target: 'http://localhost:8080', // 你的 Spring Boot 后端地址

changeOrigin: true,

rewrite: (path) => path.replace(/^\/api/, '') // 去掉 /api 前缀

}

}

这样访问也就是访问了http://localhost:8080/hello

当然，你也可以选择把接口直接定义为hello,这样地址就不用重写了，就可以写成，

proxy: {

'/hello': {

target: 'http://localhost:8080', // 你的 Spring Boot 后端地址

changeOrigin: true

}

}

不过，这样 const response = await fetch('/api/hello') 也要改成 const response = await fetch('/hello')