Vue.js 和 Spring Boot 前后端分离任务管理系统教程

本项目是一个简单的任务管理系统，包含任务的增删改查功能。

前端使用 Vue 框架实现，后端使用 Spring Boot 框架实现。

前端代码：

<template>
  <div>
    <h2>任务管理系统</h2>
    <form @submit.prevent="addTask">
      <input type="text" v-model="newTask" placeholder="输入任务名称">
      <button type="submit">添加任务</button>
    </form>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        <input type="checkbox" v-model="task.completed" @change="updateTask(task)">
        <span :class="{ completed: task.completed }">{{ task.name }}</span>
        <button @click="deleteTask(task)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'App',
  data() {
    return {
      tasks: [],
      newTask: '',
    };
  },
  created() {
    this.fetchTasks();
  },
  methods: {
    fetchTasks() {
      axios.get('/api/tasks')
        .then((response) => {
          this.tasks = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    addTask() {
      axios.post('/api/tasks', { name: this.newTask, completed: false })
        .then((response) => {
          this.tasks.push(response.data);
          this.newTask = '';
        })
        .catch((error) => {
          console.log(error);
        });
    },
    updateTask(task) {
      axios.put(`/api/tasks/${task.id}`, task)
        .catch((error) => {
          console.log(error);
        });
    },
    deleteTask(task) {
      axios.delete(`/api/tasks/${task.id}`)
        .then(() => {
          const index = this.tasks.indexOf(task);
          this.tasks.splice(index, 1);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style>
.completed {
  text-decoration: line-through;
}
</style>

后端代码：

@RestController
@RequestMapping("/api/tasks")
public class TaskController {

  private final AtomicLong counter = new AtomicLong();
  private final List<Task> tasks = new ArrayList<>();

  @GetMapping
  public List<Task> getTasks() {
    return tasks;
  }

  @PostMapping
  public Task addTask(@RequestBody Task task) {
    task.setId(counter.incrementAndGet());
    tasks.add(task);
    return task;
  }

  @PutMapping("/{id}")
  public Task updateTask(@PathVariable long id, @RequestBody Task updatedTask) {
    Task task = tasks.stream()
      .filter(t -> t.getId() == id)
      .findFirst()
      .orElseThrow(() -> new ResponseStatusException(HttpStatus.NOT_FOUND));
    task.setName(updatedTask.getName());
    task.setCompleted(updatedTask.isCompleted());
    return task;
  }

  @DeleteMapping("/{id}")
  public void deleteTask(@PathVariable long id) {
    Task task = tasks.stream()
      .filter(t -> t.getId() == id)
      .findFirst()
      .orElseThrow(() -> new ResponseStatusException(HttpStatus.NOT_FOUND));
    tasks.remove(task);
  }
}

public class Task {

  private long id;
  private String name;
  private boolean completed;

  // getters and setters

}

前后端分离后，前端通过 axios 库向后端发送请求，后端返回 JSON 格式数据，前端再将数据展示在页面上。通过这种方式，前后端可以彼此独立开发，减少耦合度，提高开发效率。