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完整的增删改查项目-CSDN博客

二、项目具体内容

进入到vue3项目

项目结构解读

my-vue3-project/
├── public/           # 静态资源文件夹，其中的文件会直接复制到构建输出目录中，无需经过编译处理
│   ├── favicon.ico    # 网站图标
│   └── index.html    # 应用程序入口HTML文件，Vue应用将挂载于此文件中的特定元素上

├── src/
│   ├── assets/        # 静态资源目录，包含图片、字体等未经过webpack编译的文件，可使用import导入并在构建时进行处理
│   ├── components/    # 组件目录，按照功能或类别划分存放单文件组件（.vue文件）
│   │   ├── Common/     # 公共组件目录
│   │   ├── Layout/     # 布局组件目录
│   │   └── ...         # 其他分类组件目录
│   ├── directives/    # 自定义指令目录，存放Vue自定义指令实现
│   ├── hooks/         # Vue Composition API 的自定义 Hooks 目录，用于组织和复用可组合的逻辑单元
│   ├── layouts/       # 应用布局相关的组件存放处，例如通用页面布局组件
│   │   ├── AppLayout.vue 
│   │   └── ...         # 其他布局相关页面组件
│   ├── pages/          # 页面组件目录，根据功能模块划分不同页面组件
│   │   ├── Home/       # 主页或首页相关页面组件
│   │   │   ├── Index.vue
│   │   │   └── ...
│   │   ├── User/       # 用户管理相关的页面组件
│   │   │   ├── Profile.vue
│   │   │   ├── Settings.vue
│   │   │   └── ...
│   │   ├── Product/    # 产品管理相关的页面组件
│   │   │   ├── List.vue
│   │   │   ├── Detail.vue
│   │   │   └── ...
│   │   └── ...         # 其他功能模块的页面组件目录
│   ├── plugins/       # Vue 插件配置目录，存放全局注册的插件及其配置
│   ├── router/        # 路由配置目录，主要包含index.js路由文件，用于配置应用程序的路由规则
│   ├── store/         # Vuex 状态管理目录，用于集中管理组件状态和数据流
│   ├── styles/        # 样式文件目录，包括全局样式、主题样式等
│   ├── utils/         # 工具函数和类库目录，存放项目中常用的工具函数、辅助类等
│   ├── App.vue        # 应用程序根组件，整个应用的入口点，通常包含路由视图和其他全局共享组件
│   ├── main.ts        # 应用程序入口脚本，用于初始化Vue实例、引入并配置路由、状态管理等核心模块
│   └── shims-vue.d.ts # TypeScript 类型声明文件，为Vue相关API提供类型支持

├── tests/             # 测试相关文件目录，存放单元测试、集成测试等代码
├── .env.*             # 环境变量配置文件，根据不同环境如开发、生产等设置不同的环境变量
├── .eslintrc.js       # Eslint 配置文件，用于定义项目的代码风格规范和错误检查规则
├── .gitignore         # Git 忽略文件，列出不需要添加到版本控制的文件或目录
├── package-lock.json       #  npm 包管理器中用于锁定项目依赖版本的文件
├── package.json       # npm 包配置文件，包括项目依赖、脚本命令、项目信息等元数据
├── vite.config.ts     # Vite 构建工具的配置文件，用于定制Vite的构建行为（如果使用Vite构建系统）
├── README.md          # 项目文档和说明文件，介绍项目结构、启动方式及注意事项等
├── tsconfig.json          # TypeScript 项目的核心配置文件，用于指定编译选项、包含的源文件、排除的文件等信息
├── tsconfig.node.json          # 针对 Node.js 应用程序进行更细粒度的 TypeScript 编译设置
├── .prettierrc        # Prettier 代码格式化配置文件，定义代码格式化规则
├── .ls-lint.yml       # Linting 规则配置文件，例如针对Less预处理器的代码风格检查规则
└── changelog.md       # 更新日志文件，记录项目的版本迭代和更新内容

没有写过前后端分离项目的朋友，我在这里简单说明一下项目前后端交互的思路

一个Springboot项目最终提供的是一个接口地址例如http://localhost:8080/queryUserList
而前端调用这个接口就相当于使用某个函数
但在vue项目中不能直接使用这个接口，这个时候就用到了axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
用来完成ajax请求
引入方式

npm install axios
//使用淘宝源
cnpm install axios
//或者使用cdn：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

指令执行完后,在HelloWorld.vue中输入以下代码,APP.vue改写

<template>
  <div>
    <h2>User List</h2>
    <ul>
      <li v-for="user in userList" :key="user.id">
        {{ user.name }} - {{ user.sex }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const userList = ref([]);

onMounted(async () => {
  try {
    const response = await axios.get('http://localhost:8080/queryUserList');
    userList.value = response.data;
  } catch (error) {
    console.error('Error fetching user list:', error);
  }
});

</script>

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue';
</script>

<template>
  <HelloWorld />
</template>

<style scoped></style>

三、问题

有可能会出现请求已发出，但后端并未响应的问题

其实这个问题是跨域问题

跨域问题是指在Web开发中，一个网页的资源（例如脚本、样式表、图片等）请求另一个源的资源时，两个源的协议、域名或端口不相同

这里大家可以了解一下游览器的同源策略，就会有更深的理解

解决办法

我们可以在项目文件夹下添加一个Config包加入CorsConfig类

packagecom.example.springboot.Config;importorg.springframework.context.annotation.Configuration;importorg.springframework.web.servlet.config.annotation.CorsRegistry;importorg.springframework.web.servlet.config.annotation.WebMvcConfigurer;@ConfigurationpublicclassCorsConfigimplementsWebMvcConfigurer{@OverridepublicvoidaddCorsMappings(CorsRegistry registry){
                registry.addMapping("/**").allowedOrigins("*")// 允许所有源.allowedMethods("GET","POST","PUT","DELETE")// 允许的方法.allowedHeaders("*");// 允许所有头部信息}}

启用跨域配置：确保在 Spring Boot 应用程序中启用了跨域配置。

importorg.springframework.boot.SpringApplication;importorg.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplicationpublicclassYourApplicationNameApplication{publicstaticvoidmain(String[] args){SpringApplication.run(YourApplicationNameApplication.class, args);}}