Comment implémenter les fonctions d'ajout, de suppression, de modification et de vérification dans Vue

Implémentez les fonctions d'ajout, de suppression, de modification et de requête dans Vue.js : Créer : utilisez v-model pour lier les données et envoyer une requête POST au serveur pour créer un nouvel enregistrement. Lire : Envoyez une requête GET au serveur pour obtenir des données. Mise à jour : utilisez v-model pour modifier les données et envoyer une requête PUT au serveur pour mettre à jour l'enregistrement. Supprimer : envoyez une demande DELETE au serveur pour supprimer l'enregistrement.

Implémentation de la fonction CRUD dans Vue

CRUD (CRUD) est une opération de base dans les applications Web, qui nous permet de créer, lire, mettre à jour et supprimer des données dans la base de données. L'implémentation de la fonctionnalité CRUD dans Vue.js est relativement simple.

Créer

Lors de la création d'un nouvel enregistrement, nous utiliserons v-model pour lier les données dans les deux sens et faire une requête POST au serveur. Par exemple : v-model 双向绑定数据并向服务器发出 POST 请求。例如：

<template>
  <form @submit.prevent="createItem">
    <input v-model="newItem.name" />
    <button type="submit">Create</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      newItem: { name: '' }
    }
  },
  methods: {
    createItem() {
      // 向服务器发送 POST 请求
      axios.post('/items', this.newItem).then(() => {
        // 重新获取数据或执行其他操作
      })
    }
  }
}
</script>

读取

读取数据时，我们将向服务器发出 GET 请求。例如：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: []
    }
  },
  mounted() {
    // 在组件挂载时向服务器发送 GET 请求
    axios.get('/items').then((response) => {
      this.items = response.data
    })
  }
}
</script>

更新

更新记录时，我们将使用 v-model

<template>
  <form @submit.prevent="updateItem">
    <input v-model="item.name" />
    <button type="submit">Update</button>
  </form>
</template>

<script>
export default {
  props: ['item'],
  methods: {
    updateItem() {
      // 向服务器发送 PUT 请求
      axios.put(`/items/${this.item.id}`, this.item).then(() => {
        // 重新获取数据或执行其他操作
      })
    }
  }
}
</script>

Read

Lors de la lecture des données, nous ferons une requête GET au serveur. Par exemple :

<template>
  <button @click="deleteItem">Delete</button>
</template>

<script>
export default {
  props: ['item'],
  methods: {
    deleteItem() {
      // 向服务器发送 DELETE 请求
      axios.delete(`/items/${this.item.id}`).then(() => {
        // 重新获取数据或执行其他操作
      })
    }
  }
}
</script>

🎜Update🎜🎜🎜Lors de la mise à jour d'un enregistrement, nous utiliserons v-model pour modifier les données et faire une requête PUT au serveur. Par exemple : 🎜rrreee🎜🎜Delete🎜🎜🎜Lors de la suppression d'un enregistrement, nous ferons une demande DELETE au serveur. Par exemple : 🎜rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!