Spring Boot与Vue.js整合-SpringBoot零基础到实战

当前位置:　首页>> 技术小册>> SpringBoot零基础到实战

Vue.js 是一个流行的 JavaScript 框架，它可以使前端开发更加简单和快速。而 Spring Boot 是一个强大的后端框架，可以轻松地构建 Web 应用程序。在本文中，我们将探讨如何将 Spring Boot 和 Vue.js 结合起来，以便构建出色的全栈 Web 应用程序。

创建 Spring Boot 应用程序
首先，我们需要创建一个 Spring Boot 应用程序。可以使用 Spring Initializr 来快速创建一个 Spring Boot 应用程序。在这个应用程序中，我们将使用 Spring Boot 来提供后端服务和 RESTful API。

**添加 Vue.js 依赖项**
要将 Vue.js 添加到我们的 Spring Boot 应用程序中，我们可以使用 Maven 或 Gradle。以下是在 Maven 中添加 Vue.js 的步骤：

在 pom.xml 中添加以下依赖项：
```asp
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>vue</artifactId>
    <version>2.6.11</version>
</dependency>

```
然后，在 application.properties 文件中添加以下配置：
```asp
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,classpath:/web/

```
这将确保我们的 Vue.js 文件可以在我们的应用程序中正确地加载和使用。

**创建 Vue.js 应用程序**
现在我们已经准备好开始创建我们的 Vue.js 应用程序了。我们可以在 src/main/resources/static 文件夹中创建一个新文件夹 js，并在其中创建一个名为 app.js 的文件。在这个文件中，我们将编写我们的 Vue.js 应用程序。

以下是一个简单的 Vue.js 应用程序示例：
```asp
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    }
});

```
在上面的代码中，我们创建了一个名为 app 的 Vue.js 实例，并将其附加到 HTML 页面上的 #app 元素上。我们还定义了一个名为 message 的变量，它将被用于在 HTML 页面中显示一条消息。

**创建 HTML 页面**
现在，我们已经准备好在我们的 HTML 页面中添加 Vue.js 应用程序了。我们可以在 src/main/resources/templates 文件夹中创建一个新文件夹 views，并在其中创建一个名为 index.html 的文件。

以下是一个简单的 HTML 页面示例：
```asp
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Spring Boot Vue.js Example</title>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <script src="/webjars/vue/2.6.11/vue.min.js"></script>
    <script src="/js/app.js"></script>
</body>
</html>

```
在上面的代码中，我们定义了一个 div 元素，它的 id 属性为 app，这将是我们 Vue.js 应用程序的
挂载点。我们还定义了一个 p 元素，并使用 {{ message }} 绑定了 message 变量，这将在我们的 Vue.js 应用程序中进行更新。最后，我们在页面的底部添加了两个 JavaScript 文件：vue.min.js 和 app.js。

运行应用程序
现在我们已经完成了我们的 Spring Boot 应用程序和 Vue.js 应用程序的编写，我们可以运行它并查看结果。我们可以使用以下命令运行我们的应用程序：
```asp
mvn spring-boot:run

```
或者，我们可以使用我们喜欢的 IDE 来运行它。一旦应用程序开始运行，我们可以在浏览器中访问 http://localhost:8080， 我们将看到 Hello Vue.js! 这条消息。

**与后端交互**
现在我们已经成功地将 Vue.js 集成到我们的 Spring Boot 应用程序中，接下来我们可以开始与后端进行交互。为了演示这一点，我们将创建一个简单的 RESTful API，它将返回一个字符串。

我们可以在 src/main/java/com/example/demo 文件夹中创建一个新的 Java 文件 RestController.java，并编写以下代码：
```asp
@RestController
public class RestController {
    @GetMapping("/api")
    public String getMessage() {
        return "Hello from the backend!";
    }
}

```
在上面的代码中，我们创建了一个名为 RestController 的类，并将其标记为 @RestController 注解，以指示它将用于处理 RESTful 请求。我们还创建了一个名为 getMessage 的方法，并使用 @GetMapping("/api") 注解将其映射到 /api 路径。在该方法中，我们简单地返回一条字符串。

现在，我们可以在我们的 Vue.js 应用程序中使用 axios 库来发送 GET 请求，以从后端获取消息。我们可以在 app.js 文件中添加以下代码：
```asp
new Vue({
    el: '#app',
    data: {
        message: ''
    },
    mounted() {
        axios.get('/api')
            .then(response => {
                this.message = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    }
});

```
在上面的代码中，我们在 mounted 生命周期钩子中使用 axios 库发送一个 GET 请求，并将其映射到 /api 路径。一旦我们收到响应，我们将响应数据更新到 message 变量中。如果发生错误，我们将在控制台中记录该错误。

**运行应用程序**
现在我们已经完成了我们的 Spring Boot 应用程序、Vue.js 应用程序和 RESTful API 的编写，我们可以运行它并查看结果。我们可以使用以下命令运行我们的应用程序：
```asp
mvn spring-boot:run

```
或者，我们可以使用我们喜欢的 IDE 来运行它。一旦应用程序开始运行，我们可以在浏览器中
访问 http://localhost:8080， 我们将看到 Hello from the backend! 这条消息，这是从后端发送的。这表明我们的 Vue.js 应用程序和后端已经成功地进行了交互。

**小结：**

在本文中，我们学习了如何在 Spring Boot 应用程序中集成 Vue.js。我们使用了 Maven 构建工具创建了一个新的 Spring Boot 应用程序，并添加了必要的依赖项。我们使用 Thymeleaf 模板引擎创建了一个简单的 HTML 页面，并将 Vue.js 应用程序挂载到该页面上。最后，我们添加了一个 RESTful API，以演示我们的 Vue.js 应用程序如何与后端进行交互。

Vue.js 允许我们轻松地创建现代、交互式的用户界面，而 Spring Boot 可以帮助我们快速地构建稳健的后端应用程序。将它们结合起来，可以让我们创建强大的全栈应用程序。

该分类下的相关小册推荐：

SpringBoot合辑-高级篇

Mybatis合辑3-Mybatis动态SQL

Java语言基础1-基础知识

Java语言基础10-Java中的集合

Java语言基础11-Java中的泛型

Java语言基础15-单元测试和日志技术

手把手带你学习SpringBoot-零基础到实战

Java语言基础12-网络编程

java源码学习笔记

Java并发编程

SpringBoot合辑-初级篇

Mybatis合辑2-Mybatis映射文件