vue结合springboot实现增删改查 小案例

 2023-04-07 21:33:48  阅读 0

Vue.js是一个流行的JavaScript框架,可以用于构建现代Web应用程序。在Vue.js中,可以通过Vue组件与后端的API进行交互以实现多条删除。

以下是利用Vue.js结合后端实现多条删除的步骤:

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user, index) in users" :key="index">
          <td><input type="checkbox" v-model="selected" :value="user.id"></td>
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="deleteSelected">Delete Selected</button>
  </div>
</template>

添加Vue组件的数据属性。selected数组用于存储所选记录的ID,而users数组用于存储从后端API获取的所有记录。

<script>
export default {
  data() {
    return {
      selected: [],
      users: []
    };
  },
  ...
};
</script>

加Vue组件的方法,该方法将向后端API发送删除请求,并在成功删除后更新用户列表。

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selected: [],
      users: []
    };
  },
  mounted() {
    axios.get('/api/users').then(response => {
      this.users = response.data;
    });
  },
  methods: {
    deleteSelected() {
      axios.post('/api/users/delete', { ids: this.selected }).then(response => {
        const deletedIds = response.data;

        this.users = this.users.filter(user => !deletedIds.includes(user.id));
        this.selected = [];
      });
    }
  }
};
</script>

后端API中添加处理多条删除请求的路由和控制器方法。在这个例子中,我们使用Express.js作为后端框架,Mongoose作为数据访问层

标签:

如本站内容信息有侵犯到您的权益请联系我们删除,谢谢!!


Copyright © 2020 All Rights Reserved 京ICP5741267-1号 统计代码