您的位置:首页 > 房产 > 家装 > 微信公众号1000阅读量多少钱_网络技术培训内容_网络seo营销推广_谷歌关键词分析工具

微信公众号1000阅读量多少钱_网络技术培训内容_网络seo营销推广_谷歌关键词分析工具

2025/7/2 14:12:07 来源:https://blog.csdn.net/2201_75999403/article/details/148809487  浏览:    关键词:微信公众号1000阅读量多少钱_网络技术培训内容_网络seo营销推广_谷歌关键词分析工具
微信公众号1000阅读量多少钱_网络技术培训内容_网络seo营销推广_谷歌关键词分析工具

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

1.vscode

2.maven

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

一.后端搭建

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

建立一个项目,目录结构如下:

helloController.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如下:

<!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如下:

<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如下:

import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

vite.config.js如下

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') 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com