Cara menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan keahlian pengurusan gudang

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan ahli pengurusan gudang

Dalam masyarakat perniagaan hari ini, pengurusan ahli memainkan peranan penting dalam pembangunan perusahaan. Untuk mengurus maklumat ahli dengan lebih baik dan meningkatkan kecekapan pengurusan gudang, kami boleh menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan ahli pengurusan gudang. Berikut akan memperkenalkan langkah pelaksanaan khusus dan menyediakan contoh kod yang berkaitan.

1. Reka bentuk pangkalan data

Pertama, kita perlu mereka bentuk jadual keahlian untuk menyimpan maklumat ahli. Jadual boleh mengandungi medan berikut: ID ahli, nama ahli, nombor telefon bimbit ahli, nombor kad ID ahli dan maklumat lain. Jadual ini boleh dibuat menggunakan pangkalan data MySQL.

2. Pelaksanaan back-end

1. Buat fail PHP bernama "member.php" untuk mengendalikan permintaan berkaitan keahlian.
2. Dalam fail "member.php", mula-mula sambung ke pangkalan data, anda boleh menggunakan kod berikut:

$conn = new mysqli("localhost", "username", "password", "database");

if ($conn->connect_error) {
    die("连接数据库失败: " . $conn->connect_error);
}

Sila gantikan "nama pengguna" dan "kata laluan" dengan nama pengguna dan kata laluan pangkalan data, dan gantikan "pangkalan data " dengan nama pangkalan data .

3. Untuk melaksanakan fungsi mendapatkan semua maklumat ahli, anda boleh menggunakan kod berikut:

$sql = "SELECT * FROM members";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    $members = array();
    while ($row = $result->fetch_assoc()) {
        $members[] = $row;
    }
    echo json_encode($members);
} else {
    echo "暂无会员信息";
}

Kod ini akan menanyakan semua maklumat ahli daripada pangkalan data dan mengembalikannya ke bahagian hadapan dalam format JSON.

4. Untuk melaksanakan fungsi menambah ahli, anda boleh menggunakan kod berikut:

$name = $_POST["name"];
$phone = $_POST["phone"];
$idCard = $_POST["idCard"];

$sql = "INSERT INTO members (name, phone, id_card) VALUES ('$name', '$phone', '$idCard')";

if ($conn->query($sql) === TRUE) {
    echo "添加会员成功";
} else {
    echo "添加会员失败: " . $conn->error;
}

Kod ini akan mendapat nama ahli, nombor telefon bimbit dan nombor ID dari bahagian hadapan dan memasukkannya ke dalam pangkalan data.

5. Untuk melaksanakan fungsi memadam ahli, anda boleh menggunakan kod berikut:

$id = $_POST["id"];

$sql = "DELETE FROM members WHERE id=$id";

if ($conn->query($sql) === TRUE) {
    echo "删除会员成功";
} else {
    echo "删除会员失败: " . $conn->error;
}

Kod ini akan mendapatkan ID ahli dari bahagian hadapan dan memadamkannya daripada pangkalan data.

3. Pelaksanaan bahagian hadapan

1. Buat contoh Vue dan perkenalkan perpustakaan Vue dan pustaka Axios dalam fail "index.html".
2. Dalam contoh Vue, gunakan Axios untuk menghantar permintaan, mendapatkan senarai ahli dan memaparkannya pada halaman. Anda boleh menggunakan kod berikut:

new Vue({
  el: '#app',
  data: {
    members: []
  },
  mounted() {
    this.fetchMembers();
  },
  methods: {
    fetchMembers() {
      axios.get('member.php')
        .then(response => {
          this.members = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
});

Kod ini akan menghantar permintaan ke bahagian belakang, mendapatkan senarai ahli dan menetapkannya kepada atribut "ahli" dalam contoh Vue.

3. Paparkan senarai ahli pada halaman. Anda boleh menggunakan kod berikut:

<div id="app">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>手机号码</th>
        <th>身份证号码</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="member in members">
        <td>{{ member.id }}</td>
        <td>{{ member.name }}</td>
        <td>{{ member.phone }}</td>
        <td>{{ member.id_card }}</td>
        <td>
          <button @click="deleteMember(member.id)">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Kod ini akan memaparkan senarai ahli pada halaman dan menambah butang padam untuk setiap ahli.

4. Laksanakan fungsi menambah ahli. Anda boleh menggunakan kod berikut:

<div id="app">
  <form @submit.prevent="addMember">
    <input type="text" v-model="name" placeholder="姓名" required>
    <input type="tel" v-model="phone" placeholder="手机号码" required>
    <input type="text" v-model="idCard" placeholder="身份证号码" required>
    <button type="submit">添加</button>
  </form>
  <table>
    <!-- 省略会员列表展示的代码 -->
  </table>
</div>

Kod ini akan memaparkan borang pada halaman untuk menambah maklumat ahli baharu. Apabila pengguna mengklik butang "Tambah", kaedah "addMember" akan dipanggil.

methods: {
  addMember() {
    axios.post('member.php', {
      name: this.name,
      phone: this.phone,
      idCard: this.idCard
    })
    .then(response => {
      alert(response.data);
      this.fetchMembers();
      this.name = '';
      this.phone = '';
      this.idCard = '';
    })
    .catch(error => {
      console.log(error);
    });
  }
}

Kod ini akan menghantar permintaan ke bahagian belakang, menambah maklumat ahli pada pangkalan data dan menyegarkan senarai ahli.

5. Laksanakan fungsi memadam ahli. Anda boleh menggunakan kod berikut:

methods: {
  deleteMember(id) {
    axios.post('member.php', {
      id: id
    })
    .then(response => {
      alert(response.data);
      this.fetchMembers();
    })
    .catch(error => {
      console.log(error);
    });
  }
}

Kod ini akan menghantar permintaan ke bahagian belakang, memadamkan ahli yang dipilih daripada pangkalan data dan memuat semula senarai ahli.

Melalui langkah di atas, kita boleh menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan ahli pengurusan gudang. Dengan cara ini, kami boleh menguruskan maklumat ahli dengan lebih mudah dan meningkatkan kecekapan pengurusan gudang. Semoga kandungan di atas dapat membantu anda!

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan keahlian pengurusan gudang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!