正文

从零开始，手把手教你构建Spring Boot + Vue框架的实战项目案例

/0 浏览量
0823

在当今的软件开发领域，Spring Boot和Vue.js都是非常受欢迎的技术栈。Spring Boot为Java开发者提供了快速开发Spring应用的框架，而Vue.js则是一个用于构建用户界面的渐进式JavaScript框架。本篇文章将手把手教你如何从零开始，构建一个使用Spring Boot和Vue.js的实战项目案例。

准备工作

在开始之前，请确保你已经安装了以下工具：

  • Java开发工具包（JDK）
  • Maven或Gradle
  • Node.js和npm
  • Visual Studio Code（推荐）
  • Git

第一步：创建Spring Boot项目

  1. 打开Visual Studio Code，创建一个新的Spring Boot项目。
  2. 选择项目名称、位置和Spring Boot版本。
  3. 在创建过程中，选择需要添加的依赖项，例如Spring Web、Spring Data JPA等。
mvn archetype:generate -DarchetypeArtifactId=org.springframework.boot:spring-boot-starter-parent -DgroupId=com.example -DartifactId=myproject -Dversion=2.4.3
  1. 项目创建完成后，打开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-data-jpa</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>
  1. 创建一个简单的Spring Boot应用，例如MyApplication.java：
package com.example.myproject;

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);
    }
}
  1. 运行Spring Boot应用，访问http://localhost:8080，看到欢迎页面，表示Spring Boot应用启动成功。

第二步：创建Vue.js项目

  1. 打开终端，进入Spring Boot项目目录。
  2. 创建一个名为client的文件夹，用于存放Vue.js项目。
  3. 在client文件夹中，使用Vue CLI创建一个新的Vue.js项目：
vue create client
  1. 选择默认设置，然后等待项目创建完成。
  2. 进入client文件夹，运行以下命令启动Vue.js项目：
npm run serve
  1. 在浏览器中访问http://localhost:8080，你应该能看到Vue.js项目的首页。

第三步：整合Spring Boot和Vue.js

  1. 在Spring Boot项目中，创建一个名为Client的模块，用于存放与Vue.js项目交互的API接口。
  2. 在Client模块中，创建一个名为ClientController的控制器类，用于处理与Vue.js项目相关的请求。
package com.example.myproject.client;

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

@RestController
public class ClientController {
    @GetMapping("/api/data")
    public String getData() {
        return "Hello, Vue.js!";
    }
}
  1. 在Vue.js项目中，创建一个名为App.vue的组件，用于调用Spring Boot API接口。
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      fetch('http://localhost:8080/api/data')
        .then(response => response.text())
        .then(data => {
          this.message = data;
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
  }
};
</script>
  1. 运行Spring Boot应用和Vue.js项目，在浏览器中访问http://localhost:8080，你应该能看到Vue.js组件显示从Spring Boot API接口获取的数据。

总结

通过以上步骤，你已经成功构建了一个使用Spring Boot和Vue.js的实战项目案例。你可以根据自己的需求，进一步完善和扩展这个项目。希望这篇文章能帮助你更好地理解Spring Boot和Vue.js框架，以及它们之间的整合方式。

-- 展开阅读全文 --