Vue3+SpringBoot资料入门教程

概述

本文将详细介绍如何学习和使用Vue3+SpringBoot资料，从Vue3的基础入门到SpringBoot的环境搭建，再到两者项目的集成与部署，帮助开发者快速掌握这一技术栈。

Vue3基础入门

Vue3简介

Vue 是一个用于构建用户界面的渐进式框架。Vue 3 是 Vue.js 的最新版本，提供了更好的性能、更小的体积和更强大的功能。Vue 3 在其核心库中重写了大部分代码，包括新的响应式系统、组件 API、Composition API 等。这些改进使得开发人员可以更高效地编写可维护的代码。

Vue3安装与配置

安装 Vue CLI

首先需要安装 Vue CLI，它是 Vue.js 的官方脚手架，可以快速创建和管理 Vue 项目。

npm install -g @vue/cli

创建项目

使用 Vue CLI 创建一个新的 Vue 3 项目：

vue create my-vue3-project

在创建项目时，Vue CLI 会询问你是否选择预设配置或手动选择特性。选择手动选择特性并确保选择 Vue 3，然后按提示完成项目创建。

配置项目

进入项目目录并安装依赖：

cd my-vue3-project
npm install

Vue3项目结构介绍

一个典型的 Vue 3 项目结构如下：

my-vue3-project/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── .gitignore
├── package.json
└── README.md

主要文件说明

• public/index.html：项目入口 HTML 文件。
• src/App.vue：项目的根组件。
• src/main.js：项目的入口文件，负责挂载根组件。

Vue3基本语法与组件化开发

基本语法

Vue 3 支持模板语法和 JavaScript 语法。以下是简单的示例：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue 3'
    };
  }
};
</script>

组件化开发

Vue 3 的组件化开发是通过声明式语法实现的。组件的定义和使用如下：

<!-- 子组件 -->
<template>
  <div>
    <p>子组件显示的内容</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

Composition API 示例

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

const count = ref(0);
onMounted(() => {
  console.log('Component is mounted!');
});
</script>

SpringBoot基础入门

SpringBoot简介

Spring Boot 是一个基于 Spring 框架的简化开发工具，它通过一系列配置和约定来简化 Spring 应用的开发。Spring Boot 支持快速开发独立的、生产级别的应用，它简化了 Java 配置，提供了默认配置。

SpringBoot环境搭建与配置

创建 Spring Boot 项目

你可以使用 Spring Initializr（https://start.spring.io/）或本地 IDE（如 IntelliJ IDEA）创建一个新的 Spring Boot 项目。

添加依赖

在 pom.xml 文件中添加必要的依赖：

<dependencies>
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
  </dependency>
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-test</artifactId>
    <scope>test</scope>
  </dependency>
</dependencies>

配置文件

Spring Boot 使用 application.properties 或 application.yml 作为配置文件。以下是一个简单的配置示例：

server.port=8080
spring.datasource.url=jdbc:mysql://localhost:3306/mydb
spring.datasource.username=root
spring.datasource.password=root

SpringBoot项目结构与基本功能配置

项目结构

一个典型的 Spring Boot 项目结构如下：

my-springboot-project/
├── src/
│   ├── main/
│   │   ├── java/
│   │   │   └── com/
│   │   │       └── example/
│   │   │           └── myapp/
│   │   │               ├── MyApplication.java
│   │   │               └── controller/
│   │   │                   └── UserController.java
│   │   └── resources/
│   │       └── application.properties
│   └── test/
│       └── java/
│           └── com/
│               └── example/
│                   └── myapp/
│                       └── MyApplicationTests.java
└── pom.xml

主应用类

主应用类通常包含 @SpringBootApplication 注解，用于启动 Spring Boot 应用：

package com.example.myapp;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class MyApplication {
    public static void main(String[] args) {
        SpringApplication.run(MyApplication.class, args);
    }
}

控制器

控制器用来处理 HTTP 请求。以下是一个简单的控制器示例：

package com.example.myapp.controller;

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

@RestController
public class UserController {
    @GetMapping("/user")
    public String getUser() {
        return "Hello User!";
    }
}

Vue3与SpringBoot项目集成

什么是前后端分离

前后端分离是指前端和后端通过 API 进行数据交互，前端负责展示用户界面，后端负责处理业务逻辑和数据存储。

如何将Vue3前端项目与SpringBoot后端项目进行集成

集成主要涉及两个方面：前端项目配置跨域请求和后端设置跨域支持。

前端项目配置跨域请求

在 Vue 3 项目中，通常使用 axios 或其他 HTTP 客户端库进行数据请求。以下是在 Vue 3 中使用 axios 发起跨域请求的示例：

// main.js
import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:8080';
axios.defaults.withCredentials = true;

export default function (Vue) {
  Vue.prototype.$axios = axios;
}

后端设置跨域支持

在 Spring Boot 中，可以通过配置 CorsConfiguration 来支持跨域请求：

package com.example.myapp.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8081")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

数据交互与接口调用

前后端数据传输方式

常见的前后端数据传输方式包括 JSON、XML 和其他格式。JSON 是最常用的方式，因为它简单、可读性强且易于解析。

使用axios进行接口调用

在 Vue 3 中，可以使用 axios 发起 HTTP 请求。以下是一个示例：

import axios from 'axios';

export function getUserData() {
  return axios.get('/user')
    .then(response => {
      return response.data;
    });
}

SpringBoot后端接口开发与测试

在 Spring Boot 中，可以使用 @RestController 和 @GetMapping 等注解来定义 RESTful 接口。以下是一个简单的接口示例：

package com.example.myapp.controller;

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

@RestController
public class UserController {
    @GetMapping("/user")
    public User getUser() {
        return new User(1, "John Doe");
    }

    static class User {
        int id;
        String name;

        User(int id, String name) {
            this.id = id;
            this.name = name;
        }
    }
}

测试接口可以使用 Postman、curl 或其他 HTTP 客户端工具。

处理分页数据示例

package com.example.myapp.controller;

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

@RestController
public class UserController {
    @GetMapping("/users")
    public List<User> getUsers(@RequestParam int page, @RequestParam int size) {
        // 实现分页逻辑
        return users.subList(page * size, Math.min(page * size + size, users.size()));
    }
}

错误处理示例

package com.example.myapp.controller;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class UserController {
    @GetMapping("/user")
    public User getUser() {
        throw new RuntimeException("User not found");
    }

    @ExceptionHandler
    public ResponseEntity<Error> handleException(Exception ex) {
        Error error = new Error();
        error.setMessage(ex.getMessage());
        return new ResponseEntity<>(error, HttpStatus.INTERNAL_SERVER_ERROR);
    }

    static class Error {
        String message;
    }
}

Vue3与SpringBoot项目部署

Vue3前端项目部署方法

部署 Vue 3 前端项目通常涉及构建项目和将静态文件部署到 Web 服务器。首先，使用 Vue CLI 构建项目：

npm run build

构建完成后，dist 目录下会生成静态文件。这些文件可以部署到任何支持静态文件托管的服务器，如 Nginx、Apache 等。

SpringBoot后端项目部署方法

Spring Boot 后端项目可以部署在任何 Java 应用服务器上，如 Tomcat、Jetty 等。以下是使用 Maven 插件部署到 Tomcat 的示例：

<build>
  <plugins>
    <plugin>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-maven-plugin</artifactId>
    </plugin>
    <plugin>
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-compiler-plugin</artifactId>
      <version>3.8.1</version>
      <configuration>
        <source>11</source>
        <target>11</target>
      </configuration>
    </plugin>
    <plugin>
      <groupId>org.apache.tomcat.maven</groupId>
      <artifactId>tomcat7-maven-plugin</artifactId>
      <version>2.2</version>
      <configuration>
        <port>8080</port>
        <path>/</path>
      </configuration>
    </plugin>
  </plugins>
</build>

使用 mvn tomcat7:run 命令启动 Tomcat 服务器。

实际部署案例

部署到云服务器如 AWS 或 Azure 的具体步骤：

1. 创建一个 S3 bucket 并上传构建的静态文件。
2. 配置 CloudFront 分配来提供静态文件。
3. 使用 AWS EC2 实例或 Azure VM 部署 Spring Boot 应用。

使用 Docker 部署的示例：

FROM openjdk:11-jre-slim
COPY target/my-springboot-app.jar app.jar
ENTRYPOINT ["java", "-jar", "/app.jar"]

构建并运行 Docker 镜像：

docker build -t my-springboot-app .
docker run -p 8080:8080 my-springboot-app

项目联调与上线注意事项

在项目联调和上线时，需要注意以下几点：

• 环境一致性：确保前后端开发环境、测试环境和生产环境的一致性。
• 数据同步：确保前后端数据结构一致，接口文档清晰。
• 错误处理：前端需要处理各种可能的错误，后端需要提供详细的错误信息。
• 性能优化：确保前后端性能稳定，避免阻塞操作。
• 安全性：确保前后端均遵守安全编码规范，防止注入攻击。

常见问题及解决方法

常见问题汇总

• 前端请求跨域失败。
• 后端接口返回数据格式不一致。
• 构建和部署过程中遇到错误。
• 项目联调时数据传输异常。

常见问题解决思路和解决方案

• 前端请求跨域失败：
  • 检查前端请求配置，确保跨域设置正确。
  • 检查后端跨域配置，确保允许前端的域名和端口。

// 前端配置
axios.defaults.withCredentials = true;

// 后端配置
registry.addMapping("/**")
        .allowedOrigins("http://localhost:8081")
        .allowedMethods("GET", "POST", "PUT", "DELETE")
        .allowedHeaders("*")
        .allowCredentials(true);

• 后端接口返回数据格式不一致：

  • 检查前后端数据结构定义，确保一致。
  • 在接口文档中明确数据格式要求。
• 构建和部署过程中遇到错误：
  • 检查依赖版本冲突，确保所有依赖版本兼容。
  • 检查配置文件，确保配置正确。

# 配置文件示例
server.port=8080
spring.datasource.url=jdbc:mysql://localhost:3306/mydb
spring.datasource.username=root
spring.datasource.password=root

• 项目联调时数据传输异常：
  • 检查网络连接，确保前后端能够正常通信。
  • 检查数据传输过程中是否有错误发生，确保数据格式正确。