从 0 开始实现一个 SpringBoot + Vue 项目

从 0 开始实现一个 Spring Boot + Vue 项目

在当今互联网开发中，Spring Boot 和 Vue.js 是两个非常流行的技术栈。Spring Boot 是一个用于简化 Java 网站和应用程序开发的框架，而 Vue.js 则是一个用于构建用户界面的渐进式 JavaScript 框架。本文将从零开始，教你如何构建一个简单的 Spring Boot + Vue 项目。

环境准备

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

1. Java Development Kit (JDK) - 至少版本为 8。
2. Maven - 用于管理 Java 依赖和构建项目。
3. Node.js 和 npm - 用于管理 Vue 项目的依赖。
4. IDE - 推荐使用 IntelliJ IDEA（对于 Java）和 Visual Studio Code（对于 Vue）。

创建 Spring Boot 项目

1. 使用 Spring Initializr 创建项目：

访问 Spring Initializr，选择以下设置： - Project: Maven Project - Language: Java - Spring Boot: 选择最新稳定版本 - Project Metadata: 填写 Group 和 Artifact，例如 com.example 和 vue-springboot-demo。选择 packaging 为 Jar。 - Dependencies: 添加以下依赖： - Spring Web - Spring Data JPA - H2 Database（作为示例数据库）

点击 "Generate" 下载生成的项目压缩包，并解压到你的工作目录。

1. 编写业务逻辑：

假设我们要实现一个简单的待办事项（Todo）应用。我们需要创建实体类、Repository 和 Controller。

• 创建实体类 Todo.java:

```java package com.example.vuespringbootdemo.model;

import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id;

@Entity public class Todo { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String task; private boolean completed;

   // Getters and Setters
   public Long getId() {
       return id;
   }

   public void setId(Long id) {
       this.id = id;
   }

   public String getTask() {
       return task;
   }

   public void setTask(String task) {
       this.task = task;
   }

   public boolean isCompleted() {
       return completed;
   }

   public void setCompleted(boolean completed) {
       this.completed = completed;
   }

} ```

• 创建 Repository TodoRepository.java:

```java package com.example.vuespringbootdemo.repository;

import com.example.vuespringbootdemo.model.Todo; import org.springframework.data.jpa.repository.JpaRepository;

public interface TodoRepository extends JpaRepository { } ```

• 创建 Controller TodoController.java:

```java package com.example.vuespringbootdemo.controller;

import com.example.vuespringbootdemo.model.Todo; import com.example.vuespringbootdemo.repository.TodoRepository; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController @RequestMapping("/api/todos") public class TodoController { @Autowired private TodoRepository todoRepository;

   @GetMapping
   public List<Todo> getAllTodos() {
       return todoRepository.findAll();
   }

   @PostMapping
   public Todo createTodo(@RequestBody Todo todo) {
       return todoRepository.save(todo);
   }

   @DeleteMapping("/{id}")
   public ResponseEntity<?> deleteTodo(@PathVariable Long id) {
       todoRepository.deleteById(id);
       return ResponseEntity.ok().build();
   }

} ```

1. 运行 Spring Boot 应用：

在项目根目录下运行以下命令：

bash ./mvnw spring-boot:run

你的 Spring Boot 后端服务将运行在 http://localhost:8080。

创建 Vue 前端项目

1. 使用 Vue CLI 创建项目：

如果还没有安装 Vue CLI，可以通过以下命令安装：

bash npm install -g @vue/cli

使用 Vue CLI 创建一个新的 Vue 项目：

bash vue create vue-todo-app

选择 Vue 3 和 Babel 选项。

1. 安装 Axios：

我们将使用 Axios 来与后端进行 HTTP 请求：

bash cd vue-todo-app npm install axios

1. 创建 Todo 组件：

在 src/components 目录下，创建一个 TodoApp.vue 组件：

```vue

```

1. 更新 App.vue 来使用 Todo 组件：

修改 src/App.vue 文件：

```vue

```

1. 运行 Vue 应用：

在 Vue 项目目录下，运行以下命令：

bash npm run serve

你的 Vue 应用将运行在 http://localhost:8081。

总结

现在，您已经成功创建了一个简单的 Spring Boot + Vue 的待办事项应用。后端使用 Spring Boot 构建 RESTful API，前端使用 Vue.js 进行交互。用户可以添加、查看和删除待办事项。

通过这个示例，你能够了解 Spring Boot 和 Vue.js 的基本用法，您可以在此基础上进行扩展，添加更多的功能和优化。这只是旅程的开始，随着对这两个技术的深入理解，您将能构建出更加复杂和有趣的应用。