Bagaimana untuk melaksanakan fungsi tambah, padam, ubah suai dan semak dalam Vue

Laksanakan fungsi tambah, padam, ubah suai dan pertanyaan dalam Vue.js: Cipta: Gunakan v-model untuk mengikat data dan hantar permintaan POST kepada pelayan untuk mencipta rekod baharu. Baca: Hantar permintaan GET kepada pelayan untuk mendapatkan data. Kemas kini: Gunakan v-model untuk mengedit data dan menghantar permintaan PUT kepada pelayan untuk mengemas kini rekod. Padam: Hantar permintaan DELETE kepada pelayan untuk memadam rekod.

Melaksanakan fungsi CRUD dalam Vue

CRUD (CRUD) ialah operasi asas dalam aplikasi web, yang membolehkan kami mencipta, membaca, mengemas kini dan memadam data dalam pangkalan data. Melaksanakan fungsi CRUD dalam Vue.js agak mudah.

Buat

Apabila mencipta rekod baharu, kami akan menggunakan v-model untuk mengikat data dua hala dan membuat permintaan POST ke pelayan. Contohnya: v-model 双向绑定数据并向服务器发出 POST 请求。例如：

<code class="html"><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></code>

读取

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

<code class="html"><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></code>

更新

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

<code class="html"><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></code>

Baca

Apabila membaca data, kami akan membuat permintaan GET kepada pelayan. Contohnya:

<code class="html"><template>
  <button @click="deleteItem">Delete</button>
</template>

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

🎜Kemas kini🎜🎜🎜Apabila mengemas kini rekod, kami akan menggunakan v-model untuk mengedit data dan membuat permintaan PUT ke pelayan. Contohnya: 🎜rrreee🎜🎜Delete🎜🎜🎜Apabila memadam rekod, kami akan membuat permintaan DELETE ke pelayan. Contohnya: 🎜rrreee

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi tambah, padam, ubah suai dan semak dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!