Vue? Axios? ????? ???? ????? ??? ?? ?? ??

????? ????? ??? ??? ???? ?????. ?? ?? ???? ???? ? ? ???? ??? ??? ??? ??? ?? ???? ????? ???. Vue? ??? ????? ??????? Axios? ?? ???? ???? ?? ?????? ?? ???? ????? ???? ?? ??? ??? ? ????. ? ???? ??? ?? ??? ?? Vue? Axios? ????? ???? ??? ??? ???? ?? ?? ??? ?????.

?? ????? Vue? Axios? ???? ???. CDN? ?? ????? npm? ???? ??? ? ????. ????? ???? ??? ??? ? ????.

??? ??? ???? ???? ?? ??? ?? ???? ??? ??? ?????. ??? ???? JSON ???? ??? ??????? ?????. ?? ????? ??? ???? ??? ????? ???? ???? ???.

?? Vue ??????? ??? Life Cycle Hook ??? ?? ??? ???? ?? ? ????. ?? ????? Axios? ???? GET ??? ?? ????? ???? ??? ?? ?? Vue? ??? ??? ?????. ??? ??? ?? ?????.

<template>
  <div>
    <h1>用戶管理系統(tǒng)</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    axios.get('/api/users')
      .then((response) => {
        this.users = response.data;
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>

? ????? ??? ???? ?? ?? Axios? ?? GET ??? ???, ?? ???? Vue ????? users ??? ?????. ?? ?? v-for ???? ???? ????? ? ??? ???? ???? ??? ??? ??? ?????.

???? ??? ??? ?? ? ?? ?? ??? ??? ? ????. ? ??? ????? ??? ??? ????? ???? ????? ?? ???? ???? ???. ???? ???? ??? ???? ??? ????, ???? ?? ???? ??? ???? ???? ?????. ??? ?? ??? ??? ? ??? ?? ??? ???? Axios? ???? ??? ???? ???? POST ??? ????. ??? ?? ?? ??? ????.

<template>
  <div>
    <h1>用戶管理系統(tǒng)</h1>
    <button @click="deleteSelectedUsers">刪除選中用戶</button>
    <ul>
      <li v-for="user in users" :key="user.id">
        <input type="checkbox" v-model="selectedUsers" :value="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      selectedUsers: [],
    };
  },
  created() {
    axios.get('/api/users')
      .then((response) => {
        this.users = response.data;
      })
      .catch((error) => {
        console.log(error);
      });
  },
  methods: {
    deleteSelectedUsers() {
      axios.post('/api/deleteUsers', { ids: this.selectedUsers })
        .then((response) => {
          this.selectedUsers = [];
          console.log('批量刪除用戶成功');
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

? ????? v-model ???? ???? selectedUsers ??? ????? ??????. ???? ???? ?? ??? ID? selectedUsers ??? ????, ???? ?? ???? ?? ??? ID? selectedUsers ???? ?????. ?? ??? ???? Axios? ???? selectedUsers ???? ???? ????? POST ??? ????.

?? ?? ??? ?? Vue? Axios? ???? ????? ???? ?? ??? ????? ???? ??? ??? ? ????. Vue? Axios? ??? ??? ?? ??? ?? ????? ?? ???? ???? ? ????. ? ?? ????? ???? ??? ??? ?? ????? ??? ??? ????.

? ??? Vue? Axios? ????? ???? ????? ??? ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!