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

本文主要是介绍Vue3+SpringBoot教程：从零开始搭建全栈应用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

概述

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

引入与环境搭建

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

安装Node.js和Java开发环境

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

Node.js

访问Node.js官网下载并安装最新版本的Node.js。安装完成后，可以通过以下命令检查安装是否成功：
```
node -v
npm -v
```
检查是否安装成功，输出版本号即代表安装成功。
Java开发环境

下载并安装Java SDK。可以通过以下命令检查Java环境是否安装成功：
```
java -version
javac -version
```
输出版本号即代表安装成功。

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

Vue CLI

Vue CLI是Vue.js的官方脚手架工具，用于快速搭建Vue.js项目。使用npm安装Vue CLI：
```
npm install -g @vue/cli
```
安装完成后，可以通过以下命令验证安装是否成功：
```
vue --version
```
输出版本号即代表安装成功。
Spring Boot开发工具

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

创建Vue3前端项目

使用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组件和路由。

创建组件

在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>

配置路由

在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
   }
 ]
})

在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项目，包含了一个组件和路由。

创建SpringBoot后端项目

使用Spring Initializr创建Spring Boot项目

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

创建项目

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

项目目录结构简介

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

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

配置Spring Data JPA

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

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

创建实体类

在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
}

创建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> {
}

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

配置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实现前后端的认证与授权。

添加依赖

在pom.xml中添加JWT依赖：

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

创建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();
   }
}

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

前端使用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容器

部署到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
```

部署到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

调试与运行应用的技巧

前端调试

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

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

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

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

实战案例

构建一个简单的博客系统

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

用户注册与登录功能

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

在前端实现用户注册

在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>

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

在前端实现用户登录

在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>

发布文章功能

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

在前端实现发布文章

在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>

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

这篇关于Vue3+SpringBoot教程：从零开始搭建全栈应用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程