vue后台管理增删改查

Vue 后台管理的增删改查一般是通过与后端 API 接口进行交互来实现的。下面是一个简单的示例，假设我们要实现一个用户管理模块。

首先，我们需要定义用户数据的结构，例如：

{
  id: 1,
  name: '张三',
  age: 20,
  gender: '男'
}

然后，我们可以在 Vue 组件中定义一个 users 数组，用来存储从后端获取到的用户数据。在组件的 created 钩子中，可以通过调用后端的 API 接口来获取用户数据：

created() {
  axios.get('/api/users').then(response => {
    this.users = response.data
  })
}

接着，我们可以在页面上展示用户数据，并实现增删改查的功能。例如：

1. 展示用户数据

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.gender }}</td>
          <td>
            <button @click="editUser(user)">编辑</button>
            <button @click="deleteUser(user)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

2. 添加用户

<template>
  <div>
    <form @submit.prevent="addUser">
      <div>
        <label>姓名：</label>
        <input v-model="newUser.name" type="text">
      </div>
      <div>
        <label>年龄：</label>
        <input v-model="newUser.age" type="number">
      </div>
      <div>
        <label>性别：</label>
        <select v-model="newUser.gender">
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div>
        <button type="submit">添加用户</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newUser: {
        name: '',
        age: 0,
        gender: '男'
      }
    }
  },
  methods: {
    addUser() {
      axios.post('/api/users', this.newUser).then(response => {
        this.users.push(response.data)
        this.newUser = {
          name: '',
          age: 0,
          gender: '男'
        }
      })
    }
  }
}
</script>

3. 编辑用户

<template>
  <div>
    <form @submit.prevent="updateUser">
      <div>
        <label>姓名：</label>
        <input v-model="currentUser.name" type="text">
      </div>
      <div>
        <label>年龄：</label>
        <input v-model="currentUser.age" type="number">
      </div>
      <div>
        <label>性别：</label>
        <select v-model="currentUser.gender">
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div>
        <button type="submit">保存</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentUser: null
    }
  },
  methods: {
    editUser(user) {
      this.currentUser = user
    },
    updateUser() {
      axios.put('/api/users/' + this.currentUser.id, this.currentUser).then(response => {
        Object.assign(this.currentUser, response.data)
        this.currentUser = null
      })
    }
  }
}
</script>

4. 删除用户

<template>
  <div>
    <button @click="deleteUser">删除</button>
  </div>
</template>

<script>
export default {
  methods: {
    deleteUser(user) {
      axios.delete('/api/users/' + user.id).then(response => {
        const index = this.users.findIndex(u => u.id === user.id)
        this.users.splice(index, 1)
      })
    }
  }
}
</script>

上述示例中，我们使用了 axios 库来发送 HTTP 请求，并且假设后端的 API 接口如下：

1. 获取所有用户：GET /api/users
2. 获取单个用户：GET /api/users/:id
3. 添加用户：POST /api/users
4. 更新用户：PUT /api/users/:id
5. 删除用户：DELETE /api/users/:id

当然，这只是一个简单的示例，实际的业务逻辑可能更为复杂。