Vue3 + Springboot入门交互学习

Vue3 + Springboot入门交互学习

前言：

vue3项目和Springboot项目的交互思路

1.后端 API 开发：

• 在 Spring Boot 项目中开发 RESTful API，用于处理前端发送的请求并返回数据。

• 确保 API 能够响应标准的 HTTP 请求，包括 GET、POST、PUT、DELETE 等。

• 对于需要验证用户身份的操作，可以实现用户认证和授权机制，例如使用 Spring Security。

2.前端 Vue 3 项目开发：

• 在 Vue 3 项目中使用 Axios 或 Fetch 等工具发送 HTTP 请求到后端 API。
• 将后端返回的数据在前端进行展示或处理，例如渲染页面、更新状态等。
• 确保前端页面能够处理不同的响应状态，例如成功、失败、加载中等，以提供更好的用户体验。

3.跨域处理：

• 在 Spring Boot 项目中配置跨域访问，以允许 Vue 3 项目发送跨域请求。
• 在 Vue 3 项目中确保请求的目标地址和端口与后端 API 一致，以避免跨域问题。

4.前后端联调：

• 在开发阶段，前端和后端开发人员需要密切合作，以确保 API 的设计和前端的需求相符。
• 可以使用工具，例如 Postman 或 Swagger UI，来测试后端 API 的正确性和可用性。

5.部署和集成：

• 将前端和后端部署到相应的服务器上，确保它们能够正常运行并且可以相互通信。
• 在部署时，可以考虑使用 Docker 等容器技术来简化部署流程，并提高应用程序的可移植性和可扩展性。

一、创建项目

1、打开vscode进入到终端输入指令

//首先定位到你想创建文件的位置
cd D:\developProject

//使用npm命令创建项目
npm init vite@latest
    
//输入指令后，它会让你写项目名称，然后选择项目框架
 这里选择Vue

之后如图

按照给出的指令执行，就能得到如下图的展示效果

2、创建一个springboot项目

这里小小偷个懒一个简单的增删改查Spring boot项目教程（完整过程，附代码）（从搭建数据库到实现增删改查功能），Springboot学习，Springboot项目，_springboot完整的增删改查项目-优快云博客

二、项目具体内容

进入到vue3项目

项目结构解读

my-vue3-project/
├── public/           # 静态资源文件夹，其中的文件会直接复制到构建输出目录中，无需经过编译处理
│   ├── favicon.