一、项目概述

在本篇文章中，我们将通过一个简单的待办事项管理应用，展示如何使用Spring Boot和Vue.js进行前后端分离开发。这个应用将包括以下功能：

• 后端：使用Spring Boot实现待办事项的增删改查API。
• 前端：使用Vue.js构建动态界面，与后端API进行交互。

二、后端实现（Spring Boot）

1. 创建Spring Boot项目

使用Spring Initializr（https://start.spring.io/）创建一个新的Spring Boot项目，添加以下依赖：

• Spring Web
• Spring Data JPA
• H2 Database（用于示例，实际项目中可以替换为MySQL等）

2. 定义数据模型

创建一个Todo实体类，用于表示待办事项：

java复制

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 title;
    private boolean completed;

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

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

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public boolean isCompleted() {
        return completed;
    }

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

3. 创建Repository

使用Spring Data JPA创建一个TodoRepository接口，用于数据访问：

java复制

import org.springframework.data.jpa.repository.JpaRepository;

public interface TodoRepository extends JpaRepository<Todo, Long> {
}

4. 创建Service

创建一个TodoService类，实现业务逻辑：

java复制

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class TodoService {
    @Autowired
    private TodoRepository todoRepository;

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

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

    public Todo updateTodo(Todo todo) {
        return todoRepository.save(todo);
    }

    public void deleteTodo(Long id) {
        todoRepository.deleteById(id);
    }
}

5. 创建Controller

创建一个TodoController类，定义RESTful API接口：

java复制

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

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

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

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

    @PutMapping("/{id}")
    public Todo updateTodo(@PathVariable Long id, @RequestBody Todo todo) {
        todo.setId(id);
        return todoService.updateTodo(todo);
    }

    @DeleteMapping("/{id}")
    public void deleteTodo(@PathVariable Long id) {
        todoService.deleteTodo(id);
    }
}

三、前端实现（Vue.js）

1. 创建Vue项目

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

sh复制

vue create todo-app

2. 安装依赖

安装Axios库，用于发送HTTP请求：

sh复制

npm install axios

3. 配置路由

在src/router/index.js中配置路由：

JavaScript复制

import Vue from 'vue';
import VueRouter from 'vue-router';
import TodoList from '../views/TodoList.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'TodoList',
    component: TodoList
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

4. 编写TodoList组件

在src/views/TodoList.vue中编写组件：

HTML复制

<template>
  <div>
    <h1>待办事项列表</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.title }} - {{ todo.completed ? '已完成' : '未完成' }}
        <button @click="deleteTodo(todo.id)">删除</button>
      </li>
    </ul>
    <form @submit.prevent="addTodo">
      <input v-model="newTodo.title" placeholder="添加新事项">
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      todos: [],
      newTodo: { title: '', completed: false }
    };
  },
  created() {
    this.fetchTodos();
  },
  methods: {
    fetchTodos() {
      axios.get('/api/todos')
        .then(response => {
          this.todos = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    addTodo() {
      axios.post('/api/todos', this.newTodo)
        .then(response => {
          this.todos.push(response.data);
          this.newTodo.title = '';
        })
        .catch(error => {
          console.error(error);
        });
    },
    deleteTodo(id) {
      axios.delete(`/api/todos/${id}`)
        .then(() => {
          this.todos = this.todos.filter(todo => todo.id !== id);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

5. 运行Vue应用

启动Vue应用：

sh复制

npm run serve

前端应用启动成功，访问http://localhost:8080即可看到待办事项管理界面。

四、前后端联调

1. 启动Spring Boot项目：
2. sh复制
3. mvn spring-boot:run
4. 启动Vue项目：
5. sh复制
6. npm run serve
7. 访问http://localhost:8080，测试待办事项的增删改查功能。

五、部署

1. 打包后端项目

sh复制

mvn clean package

2. 部署后端项目

将生成的JAR文件部署到服务器上，使用命令启动应用：

sh复制

java -jar target/todo-app.jar

3. 打包前端项目

sh复制

npm run build

4. 部署前端项目

将dist目录下的文件上传到静态文件服务器，如Nginx。

六、总结

通过本文的实践，我们成功构建了一个基于Spring Boot和Vue.js的前后端分离项目。这种开发模式不仅提高了开发效率，还使得前后端团队可以更加灵活地协作。未来，随着微服务架构和云原生技术的不断发展，前后端分离模式将迎来更加广阔的应用前景。