vue에서 추가, 삭제, 수정 및 확인 기능을 구현하는 방법

Vue.js에서 추가, 삭제, 수정 및 쿼리 기능을 구현합니다. 만들기: v-model을 사용하여 데이터를 바인딩하고 서버에 POST 요청을 보내 새 레코드를 만듭니다. 읽기: 데이터를 얻기 위해 서버에 GET 요청을 보냅니다. 업데이트: v-model을 사용하여 데이터를 편집하고 PUT 요청을 서버에 보내 레코드를 업데이트합니다. 삭제: 레코드를 삭제하려면 서버에 DELETE 요청을 보냅니다.

Vue에서 CRUD 기능 구현

CRUD(CRUD)는 웹 애플리케이션의 기본 작업으로, 데이터베이스에서 데이터를 생성, 읽기, 업데이트 및 삭제할 수 있습니다. Vue.js에서 CRUD 기능을 구현하는 것은 비교적 간단합니다.

Create

새 레코드를 생성할 때 v-model을 사용하여 데이터를 양방향으로 바인딩하고 서버에 POST 요청을 보냅니다. 예: 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>

Read

데이터를 읽을 때 서버에 GET 요청을 보냅니다. 예:

<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>

🎜Update🎜🎜🎜기록을 업데이트할 때 v-model을 사용하여 데이터를 편집하고 서버에 PUT 요청을 보냅니다. 예: 🎜rrreee🎜🎜Delete🎜🎜🎜기록을 삭제할 때 서버에 DELETE 요청을 보냅니다. 예: 🎜rrreee

위 내용은 vue에서 추가, 삭제, 수정 및 확인 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!