Springboot在Vue上实施增删改查

Spring Boot 是一个非常流行的后端框架，Vue 是一个非常流行的前端框架，它们可以通过 RESTful API 实现交互。

下面是一个简单的示例，演示如何使用 Spring Boot 和 Vue 实现增删改查功能：

1. 创建 Spring Boot 项目，并添加必要的依赖。

2. 创建一个 RESTful API，用于处理增删改查操作。

@RestController
@RequestMapping("/api/users")
public class UserController {
 
    @Autowired
    private UserService userService;
 
    @GetMapping("")
    public List<User> getAllUsers() {
        return userService.getAllUsers();
    }
 
    @GetMapping("/{id}")
    public User getUserById(@PathVariable("id") Long id) {
        return userService.getUserById(id);
    }
 
    @PostMapping("")
    public void addUser(@RequestBody User user) {
        userService.addUser(user);
    }
 
    @PutMapping("/{id}")
    public void updateUser(@PathVariable("id") Long id, @RequestBody User user) {
        userService.updateUser(id, user);
    }
 
    @DeleteMapping("/{id}")
    public void deleteUser(@PathVariable("id") Long id) {
        userService.deleteUser(id);
    }
}

3. 创建一个 Vue 组件，用于显示用户列表和处理用户操作。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>
            <button @click="editUser(user)">Edit</button>
            <button @click="deleteUser(user.id)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
 
    <form v-if="showForm" @submit.prevent="submitUser">
      <label for="name">Name:</label>
      <input type="text" v-model="user.name" required>
 
      <label for="email">Email:</label>
      <input type="email" v-model="user.email" required>
 
      <button type="submit">{{ editMode ? 'Update' : 'Add' }}</button>
    </form>
 
    <button @click="addUser">Add User</button>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      users: [],
      user: {
        name: '',
        email: ''
      },
      showForm: false,
      editMode: false,
      editUserId: null
    }
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      axios.get('/api/users')
        .then(res => {
          this.users = res.data;
        })
        .catch(err => console.log(err));
    },
    addUser() {
      this.showForm = true;
      this.editMode = false;
      this.user = {
        name: '',
        email: ''
      };
    },
    editUser(user) {
      this.showForm = true;
      this.editMode = true;
      this.editUserId = user.id;
      this.user = {
        name: user.name,
        email: user.email
      };
    },
    submitUser() {
      if (this.editMode) {
        axios.put(`/api/users/${this.editUserId}`, this.user)
          .then(() => {
            this.showForm = false;
            this.getUsers();
          })
          .catch(err => console.log(err));
      } else {
        axios.post('/api/users', this.user)
          .then(() => {
            this.showForm = false;
            this.getUsers();
          })
          .catch(err => console.log(err));
      }
    },
    deleteUser(id) {
      axios.delete(`/api/users/${id}`)
        .then(() => {
          this.getUsers();
        })
        .catch(err => console.log(err));
    }
  }
}
</script>

4. 运行项目，在浏览器中访问 Vue 组件所在的页面，即可看到用户列表和增删改查操作。

这只是一个简单的示例，实际的项目中可能需要更复杂的操作和更多的功能。但是，这个示例可以让你了解如何使用 Spring Boot 和 Vue 实现增删改查功能。