Vue3+SpringBoot教程：从零开始搭建全栈应用

本教程将指导你从零开始搭建Vue3和Spring Boot的全栈应用，涵盖环境搭建、项目创建、前后端交互及部署运行等步骤。通过详细讲解，你将学会如何实现前后端的无缝集成，并构建一个简单的博客系统。文中还包括性能优化和安全性提升的建议，帮助你进一步完善应用。

Vue3和Spring Boot是当前流行的前端和后端开发框架。Vue3是Vue.js的最新版本，它在性能、易用性和可维护性方面做了很多改进。Spring Boot则是一个基于Spring框架的快速开发工具，它简化了Java应用的初始搭建和配置过程。通过本教程，你将学习如何从零开始搭建一个全栈应用，实现前后端的无缝集成。

安装Node.js和Java开发环境

首先确保安装了Node.js和Java开发环境。

1. Node.js

   访问Node.js官网下载并安装最新版本的Node.js。安装完成后，可以通过以下命令检查安装是否成功：

   node -v
   npm -v

   检查是否安装成功，输出版本号即代表安装成功。

2. Java开发环境

   下载并安装Java SDK。可以通过以下命令检查Java环境是否安装成功：

   java -version
   javac -version

   输出版本号即代表安装成功。

安装并配置Vue CLI与Spring Boot开发工具

1. Vue CLI

   Vue CLI是Vue.js的官方脚手架工具，用于快速搭建Vue.js项目。使用npm安装Vue CLI：

   npm install -g @vue/cli

   安装完成后，可以通过以下命令验证安装是否成功：

   vue --version

   输出版本号即代表安装成功。

2. Spring Boot开发工具

   推荐使用Spring Initializr创建Spring Boot项目。Spring Initializr是一个在线工具，可以帮助快速创建Spring Boot项目。你也可以使用IDE（如IntelliJ IDEA或Spring Tool Suite）来创建和开发Spring Boot应用，这里我们仅介绍使用Spring Initializr创建项目的方法。

使用Vue CLI快速创建Vue3项目

通过Vue CLI快速创建Vue3项目：

vue create my-vue3-project

选择默认配置或自定义配置，可根据需要选择模块和预设选项。创建完成后，在项目目录中：

cd my-vue3-project
npm install

项目目录结构简介

创建Vue3项目后，将生成如下的目录结构：

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

• node_modules：存放项目依赖的包。
• public：存放静态资源文件，如index.html。
• src：存放主要的源代码和资源文件。
  • assets：存放静态资源文件，如图片等。
  • components：存放Vue组件。
  • App.vue：根组件，整个应用的根节点。
  • main.js：应用的入口文件。
• .gitignore：Git版本控制忽略文件。
• babel.config.js：配置ES2015转ES5。
• package.json：项目依赖和脚本配置。
• README.md：项目描述和说明。

基本的Vue组件和路由配置

通过Vue CLI创建的项目已经默认配置了基本的路由和组件。下面展示如何添加和配置一个简单的Vue组件和路由。

1. 创建组件

   在src/components目录下创建一个新的组件文件HelloWorld.vue，内容如下：

   <template>
    <div class="hello">
      <h1>{{ msg }}</h1>
    </div>
   </template>
   
   <script>
   export default {
    name: 'HelloWorld',
    props: {
      msg: String
    }
   }
   </script>
   
   <style scoped>
   .hello {
    color: #42b983;
   }
   </style>

2. 配置路由

   在src/router/index.js中配置路由，将HelloWorld组件添加到路由：

   import Vue from 'vue'
   import Router from 'vue-router'
   import HelloWorld from '@/components/HelloWorld.vue'
   
   Vue.use(Router)
   
   export default new Router({
    routes: [
      {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
      }
    ]
   })

3. 在App.vue中引入组件

   在src/App.vue中引入并使用HelloWorld组件：

   <template>
    <div id="app">
      <router-view/>
    </div>
   </template>
   
   <script>
   import HelloWorld from './components/HelloWorld.vue'
   
   export default {
    name: 'App',
    components: {
      HelloWorld
    }
   }
   </script>
   
   <style>
   #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
   }
   </style>

通过上述步骤，你已经成功配置了一个简单的Vue3项目，包含了一个组件和路由。

使用Spring Initializr创建Spring Boot项目

使用Spring Initializr创建一个新的Spring Boot项目。访问Spring Initializr网站，选择所需的依赖项，如Spring Web、Spring Data JPA等。

1. 创建项目

   下载生成的项目，解压并导入到IDE（如IntelliJ IDEA）中。

2. 项目目录结构简介

   解压后的项目结构类似于：

   my-springboot-project/
   ├── .gitignore
   ├── pom.xml
   ├── src/
   │   ├── main/
   │   │   ├── java/
   │   │   │   └── com/
   │   │   │       └── example/
   │   │   │           └── myapp/
   │   │   │               └── MyApplication.java
   │   │   └── resources/
   │   │       ├── application.properties
   │   │       └── static/
   │   │       └── templates/
   │   └── test/
   │       └── java/
   │           └── com/
   │               └── example/
   │                   └── myapp/
   │                       └── MyApplicationTests.java
   └── README.md

   • .gitignore：Git版本控制忽略文件。
   • pom.xml：Maven项目配置文件。
   • src/main/java：存放Java类文件。
   • src/main/resources：存放配置文件如application.properties。
   • src/main/resources/static：存放静态资源文件。
   • src/main/resources/templates：存放Thymeleaf模板文件。
   • src/test/java：存放测试文件。

配置SpringBoot的数据库连接

在application.properties中配置数据库连接，以下是MySQL的配置示例：

spring.datasource.url=jdbc:mysql://localhost:3306/mydb
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true

开发简单的RESTful API

1. 配置Spring Data JPA

   在pom.xml中添加Spring Data JPA依赖：

   <dependency>
      <groupId>org.springframework.boot</groupId>
     . . .
   </dependency>

2. 创建实体类

   在src/main/java/com/example/myapp中创建一个实体类User.java：

   package com.example.myapp;
   
   import javax.persistence.Entity;
   import javax.persistence.GeneratedValue;
   import javax.persistence.GenerationType;
   import javax.persistence.Id;
   
   @Entity
   public class User {
      @Id
      @GeneratedValue(strategy = GenerationType.IDENTITY)
      private Long id;
      private String name;
      private String email;
   
      // Getter and Setter methods
   }

3. 创建Repository接口

   创建一个UserRepository接口继承自JpaRepository：

   package com.example.myapp;
   
   import org.springframework.data.jpa.repository.JpaRepository;
   import org.springframework.stereotype.Repository;
   
   @Repository
   public interface UserRepository extends JpaRepository<User, Long> {
   }

4. 创建Controller

   创建一个UserController，提供RESTful API：

   package com.example.myapp;
   
   import org.springframework.beans.factory.annotation.Autowired;
   import org.springframework.web.bind.annotation.*;
   
   import java.util.List;
   
   @RestController
   public class UserController {
   
      @Autowired
      private UserRepository userRepository;
   
      @GetMapping("/users")
      public List<User> getAllUsers() {
          return userRepository.findAll();
      }
   
      @PostMapping("/users")
      public User createUser(@RequestBody User user) {
          return userRepository.save(user);
      }
   
      @GetMapping("/users/{id}")
      public User getUserById(@PathVariable Long id) {
          return userRepository.findById(id).orElse(null);
      }
   
      @PutMapping("/users/{id}")
      public User updateUser(@PathVariable Long id, @RequestBody User user) {
          User existingUser = userRepository.findById(id).orElse(null);
          existingUser.setName(user.getName());
          existingUser.setEmail(user.getEmail());
          return userRepository.save(existingUser);
      }
   
      @DeleteMapping("/users/{id}")
      public void deleteUser(@PathVariable Long id) {
          userRepository.deleteById(id);
      }
   }

5. 配置Spring Boot主应用类

   在src/main/java/com/example/myapp中创建一个主应用类MyApplication.java：

   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);
      }
   }

通过上述步骤，你已经成功创建了一个简单的Spring Boot后端项目，并实现了基本的RESTful API。

前端如何通过axios请求后端API

axios是一个基于Promise的HTTP库，用于浏览器和Node.js的HTTP客户端。在Vue3项目中，可以通过axios请求后端API。首先安装axios：

npm install axios

在Vue组件中使用axios请求后端API：

import axios from 'axios';

export default {
  name: 'HelloWorld',
  data() {
    return {
      users: []
    };
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      axios.get('http://localhost:8080/users')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}

后端如何处理前端请求并返回数据

在Spring Boot项目中，通过创建Controller处理前端请求，并返回数据。在前面创建的UserController中，已经实现了处理GET和POST请求的方法。例如：

@GetMapping("/users")
public List<User> getAllUsers() {
    return userRepository.findAll();
}

使用JWT实现前后端的认证与授权

JWT（JSON Web Token）是一种开放标准（RFC 7519），用于在网络应用环境中安全地传输信息。下面展示如何使用JWT实现前后端的认证与授权。

1. 添加依赖

   在pom.xml中添加JWT依赖：

   <dependency>
      <groupId>io.jsonwebtoken</groupId>
      <artifactId>jjwt</artifactId>
      <version>0.9.1</version>
   </dependency>

2. 创建JWT工具类

   创建一个工具类JwtUtil.java，用于生成和验证JWT：

   package com.example.myapp.utils;
   
   import io.jsonwebtoken.Claims;
   import io.jsonwebtoken.Jwts;
   import io.jsonwebtoken.SignatureAlgorithm;
   
   import java.util.Date;
   
   public class JwtUtil {
      private static final String SECRET = "mysecret";
      private static final long EXPIRATION = 3600000; // 1 hour
   
      public String generateToken(String username) {
          return Jwts.builder()
                  .setSubject(username)
                  .setExpiration(new Date(System.currentTimeMillis() + EXPIRATION))
                  .signWith(SignatureAlgorithm.HS512, SECRET)
                  .compact();
      }
   
      public boolean validateToken(String token) {
          try {
              Claims claims = Jwts.parser()
                      .setSigningKey(SECRET)
                      .parseClaimsJws(token)
                      .getBody();
              return !claims.getExpiration().before(new Date());
          } catch (Exception e) {
              return false;
          }
      }
   
      public String getUsernameFromToken(String token) {
          return Jwts.parser()
                  .setSigningKey(SECRET)
                  .parseClaimsJws(token)
                  .getBody()
                  .getSubject();
      }
   }

3. 在Controller中使用JWT

   在UserController中添加登录接口，生成JWT并返回给前端：

   @PostMapping("/login")
   public ResponseEntity<Map<String, String>> login(@RequestBody User user) {
      User existingUser = userRepository.findByEmail(user.getEmail());
      if (existingUser != null && existingUser.getPassword().equals(user.getPassword())) {
          JwtUtil jwtUtil = new JwtUtil();
          String token = jwtUtil.generateToken(user.getEmail());
          return ResponseEntity.ok(Map.of("token", token));
      } else {
          return ResponseEntity.status(HttpStatus.UNAUTHORIZED).build();
      }
   }

4. 前端使用JWT

   在前端组件中使用JWT进行认证：

   methods: {
    login() {
      axios.post('http://localhost:8080/login', {
        email: 'user@example.com',
        password: 'password'
      })
      .then(response => {
        localStorage.setItem('token', response.data.token);
      })
      .catch(error => {
        console.error(error);
      });
    }
   }

通过上述步骤，你已经实现了使用JWT进行前后端的认证与授权。

将Vue3项目打包并部署到服务器

通过npm run build命令打包Vue3项目，将生成的dist目录部署到服务器。

npm run build

dist目录中包含编译后的静态资源文件，将其部署到服务器的静态资源目录。

部署SpringBoot应用到Tomcat或Docker容器

1. 部署到Tomcat

   将Spring Boot应用打包成一个可执行的jar文件，使用Tomcat部署：

   mvn clean package

   执行生成的jar文件：

   java -jar target/my-springboot-project.jar

   将jar文件复制到Tomcat的webapps目录，启动Tomcat服务器：

   cd $CATALINA_HOME/webapps
   cp target/my-springboot-project.jar .
   $CATALINA_HOME/bin/startup.sh

2. 部署到Docker容器

   创建Dockerfile，内容如下：

   FROM openjdk:8-jdk-alpine
   VOLUME /tmp
   ARG JAR_FILE
   COPY ${JAR_FILE} app.jar
   ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]

   构建并运行Docker容器：

   mvn clean package -DskipTests
   docker build -t my-springboot-project .
   docker run -p 8080:8080 my-springboot-project

调试与运行应用的技巧

1. 前端调试

   使用浏览器的开发者工具进行前端调试，查看网络请求、控制台输出等。

2. 后端调试

   在IDE中设置断点调试，或使用Spring Boot的Actuator端点进行监控和调试。

3. 日志查看

   查看application.properties中的日志配置，使用日志框架（如Logback）记录日志，便于调试和维护。

通过以上步骤，你可以顺利地将Vue3前端项目和Spring Boot后端项目部署到服务器，并调试和运行应用。

构建一个简单的博客系统

下面展示如何构建一个简单的博客系统，包括用户注册、登录、发布文章等功能。

用户注册与登录功能

1. 在Spring Boot中实现用户注册

   首先在数据库中添加用户表：

   CREATE TABLE users (
      id BIGINT AUTO_INCREMENT PRIMARY KEY,
      username VARCHAR(255) NOT NULL,
      password VARCHAR(255) NOT NULL,
      email VARCHAR(255) NOT NULL,
      UNIQUE KEY users_email_unique (email)
   );

   在Spring Boot项目中，创建User实体类：

   package com.example.myapp;
   
   import javax.persistence.Entity;
   import javax.persistence.GeneratedValue;
   import javax.persistence.GenerationType;
   import javax.persistence.Id;
   
   @Entity
   public class User {
      @Id
      @GeneratedValue(strategy = GenerationType.IDENTITY)
      private Long id;
      private String username;
      private String password;
      private String email;
   
      // Getter and Setter methods
   }

   创建UserRepository接口：

   package com.example.myapp;
   
   import org.springframework.data.jpa.repository.JpaRepository;
   import org.springframework.stereotype.Repository;
   
   @Repository
   public interface UserRepository extends JpaRepository<User, Long> {
      User findByEmail(String email);
   }

   实现用户注册接口：

   @PostMapping("/users/register")
   public ResponseEntity<String> registerUser(@RequestBody User user) {
      boolean userExists = userRepository.findByEmail(user.getEmail()) != null;
      if (!userExists) {
          userRepository.save(user);
          return ResponseEntity.ok("User registered successfully");
      } else {
          return ResponseEntity.status(HttpStatus.CONFLICT).body("User already exists");
      }
   }

2. 在前端实现用户注册

   在Vue组件中实现用户注册功能：

   <template>
    <div>
      <h1>注册</h1>
      <form @submit.prevent="registerUser">
        <input type="text" v-model="username" placeholder="用户名" required>
        <input type="password" v-model="password" placeholder="密码" required>
        <input type="email" v-model="email" placeholder="邮箱" required>
        <button type="submit">注册</button>
      </form>
    </div>
   </template>
   
   <script>
   export default {
    data() {
      return {
        username: '',
        password: '',
        email: ''
      };
    },
    methods: {
      registerUser() {
        axios.post('http://localhost:8080/users/register', {
          username: this.username,
          password: this.password,
          email: this.email
        })
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
      }
    }
   }
   </script>

3. 在Spring Boot中实现用户登录

   实现用户登录接口：

   @PostMapping("/login")
   public ResponseEntity<Map<String, String>> loginUser(@RequestBody User user) {
      User existingUser = userRepository.findByEmail(user.getEmail());
      if (existingUser != null && existingUser.getPassword().equals(user.getPassword())) {
          JwtUtil jwtUtil = new JwtUtil();
          String token = jwtUtil.generateToken(user.getEmail());
          return ResponseEntity.ok(Map.of("token", token));
      } else {
          return ResponseEntity.status(HttpStatus.UNAUTHORIZED).build();
      }
   }

4. 在前端实现用户登录

   在Vue组件中实现用户登录功能：

   <template>
    <div>
      <h1>登录</h1>
      <form @submit.prevent="loginUser">
        <input type="text" v-model="email" placeholder="邮箱" required>
        <input type="password" v-model="password" placeholder="密码" required>
        <button type="submit">登录</button>
      </form>
    </div>
   </template>
   
   <script>
   export default {
    data() {
      return {
        email: '',
        password: ''
      };
    },
    methods: {
      loginUser() {
        axios.post('http://localhost:8080/login', {
          email: this.email,
          password: this.password
        })
        .then(response => {
          localStorage.setItem('token', response.data.token);
        })
        .catch(error => {
          console.error(error);
        });
      }
    }
   }
   </script>

发布文章功能

1. 在Spring Boot中实现发布文章

   首先在数据库中添加文章表：

   CREATE TABLE posts (
      id BIGINT AUTO_INCREMENT PRIMARY KEY,
      title VARCHAR(255) NOT NULL,
      content TEXT NOT NULL,
      user_id BIGINT NOT NULL,
      FOREIGN KEY (user_id) REFERENCES users(id)
   );

   在Spring Boot项目中，创建Post实体类：

   package com.example.myapp;
   
   import javax.persistence.Entity;
   import javax.persistence.GeneratedValue;
   import javax.persistence.GenerationType;
   import javax.persistence.Id;
   import javax.persistence.ManyToOne;
   
   @Entity
   public class Post {
      @Id
      @GeneratedValue(strategy = GenerationType.IDENTITY)
      private Long id;
      private String title;
      private String content;
      @ManyToOne
      private User user;
   
      // Getter and Setter methods
   }

   创建PostRepository接口：

   package com.example.myapp;
   
   import org.springframework.data.jpa.repository.JpaRepository;
   import org.springframework.stereotype.Repository;
   
   @Repository
   public interface PostRepository extends JpaRepository<Post, Long> {
   }

   实现发布文章接口：

   @PostMapping("/posts")
   public ResponseEntity<Post> createPost(@RequestBody Post post) {
      JwtUtil jwtUtil = new JwtUtil();
      String token = jwtUtil.getUsernameFromToken(post.getUser().getEmail());
      if (jwtUtil.validateToken(post.getUser().getEmail())) {
          post.setUser(userRepository.findByEmail(token));
          return ResponseEntity.ok(postRepository.save(post));
      } else {
          return ResponseEntity.status(HttpStatus.UNAUTHORIZED).build();
      }
   }

2. 在前端实现发布文章

   在Vue组件中实现发布文章功能：

   <template>
    <div>
      <h1>发布文章</h1>
      <form @submit.prevent="createPost">
        <input type="text" v-model="title" placeholder="标题" required>
        <textarea v-model="content" placeholder="内容" required></textarea>
        <button type="submit">发布</button>
      </form>
    </div>
   </template>
   
   <script>
   export default {
    data() {
      return {
        title: '',
        content: ''
      };
    },
    methods: {
      createPost() {
        axios.post('http://localhost:8080/posts', {
          title: this.title,
          content: this.content
        }, {
          headers: {
            'Authorization': 'Bearer ' + localStorage.getItem('token')
          }
        })
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
      }
    }
   }
   </script>

通过上述步骤，你已经构建了一个简单的博客系统，实现了用户注册、登录和发布文章等功能。