一文教会你如何搭建Vue + Spring Boot 项目

本文将详细讲解如何使用Vue.js和Spring Boot搭建一个全栈Web应用程序。我们将从创建项目开始，一步步地进行讲解，涵盖前端和后端两个方面，最终将两者结合起来，搭建完成一个完整的应用程序。

准备工作

在开始之前，确保您已经安装了以下工具或软件：

最新的Node.js
最新的Java JDK
一个集成开发环境（IDE），比如IntelliJ IDEA或Eclipse
一个现代的浏览器，比如Google Chrome或Mozilla Firefox

创建Vue项目

首先，我们需要创建一个Vue项目。我们可以使用Vue CLI（命令行界面）来创建项目。Vue CLI是一个官方的CLI工具，可以帮助我们快速创建一个新的Vue项目，并带有一些预先配置好的选项。

打开命令行终端，并输入以下命令来安装Vue CLI：

npm install -g @vue/cli

安装完成后，输入以下命令来创建一个新的Vue项目：

vue create my-app

其中，my-app是您想要创建的项目名称。

cd my-app

最后，输入以下命令来启动Vue开发服务器：

npm run serve

执行完毕后，在浏览器中访问http://localhost:8080就可以看到Vue应用程序正在运行。

创建Spring Boot项目

接下来，我们将创建一个使用Spring Boot作为后端的Web应用程序。我们可以使用Spring Initializr来帮助我们快速创建一个Spring Boot项目。Spring Initializr是一个官方的工具，可以用来创建Spring Boot项目。

打开浏览器，并访问 https://start.spring.io/。
在页面上选择以下选项：
Project: Maven Project
Language: Java
Spring Boot: 2.5.0
Project Metadata：填写您自己的项目信息
在依赖列表中添加Web、JPA和MySQL的依赖，如下所示：
Spring Web
Spring Data JPA
MySQL Driver
最后，点击“Generate”按钮来下载已创建的项目。
在IDE中打开已下载的项目，并让IDE自动配置依赖。

连接Vue和Spring Boot

现在，我们已经创建了两个项目：一个Vue项目和一个Spring Boot项目。接下来，我们需要将这两个项目连接起来，以便Vue应用程序与Spring Boot后台交互。

我们将通过一个示例来演示如何实现这一点。

在Vue项目中，创建一个新的文件夹（例如src/api），并在其中添加一个新的文件api.js。
在api.js文件中添加以下代码：

```javascript
import axios from "axios";

const API_URL = "http://localhost:8081/api/";

const client = axios.create({
baseURL: API_URL,
headers: {
"Content-Type": "application/json"
}
});

export default {
getAll() {
return client.get("users");
},

 createUser(user) {
   return client.post("users", user);
 }

};
```

该文件使用axios库来创建一个RESTful API客户端，该客户端连接到Spring Boot后台的API端点。

请注意，在此示例中，API的URL设置为http://localhost:8081/api/。确保将其替换为您自己的应用程序URL。

在Vue组件中使用API：

```vue

```

在此示例中，我们将使用api.js文件中定义的getAll()方法来获取所有用户的数据，并将其存储在Vue组件的users数组中。

在Spring Boot项目中，创建一个新的Java类UserController：

```java
@RestController
@RequestMapping("/api")
public class UserController {

   @Autowired
   private UserRepository userRepository;

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

   @PostMapping("/users")
   public void createUser(@RequestBody User user) {
       userRepository.save(user);
   }

}
```

该类使用Spring Boot的@RestController注解，将其转换为RESTful Web服务。该类也使用了JPA库和MySQL数据库，以便对数据库进行操作。