Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengiraan inventori untuk pengurusan gudang

Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengiraan inventori untuk pengurusan gudang

Dalam operasi perniagaan moden, pengurusan gudang ialah pautan penting. Sistem pengiraan inventori yang cekap boleh membantu syarikat mencapai kawalan inventori yang tepat dan meningkatkan kecekapan operasi. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi pengiraan inventori pengurusan gudang dan menyediakan contoh kod khusus.

Pertama, kita perlu mewujudkan struktur pangkalan data asas. Kita boleh mencipta pangkalan data bernama "inventori" dan mencipta dua jadual di dalamnya, satu ialah jadual "produk" untuk menyimpan maklumat produk, dan satu lagi ialah jadual "stok" untuk menyimpan maklumat inventori.

Struktur jadual "produk" adalah seperti berikut:

CREATE TABLE `products` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `price` decimal(10,2) NOT NULL,
  PRIMARY KEY (`id`)
);

Struktur jadual "stok" adalah seperti berikut:

CREATE TABLE `stock` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_id` int(11) NOT NULL,
  `quantity` int(11) NOT NULL,
  PRIMARY KEY (`id`),
  FOREIGN KEY (`product_id`) REFERENCES `products`(`id`)
);

Seterusnya, kita boleh menggunakan PHP untuk menulis API back-end untuk mengendalikan permintaan yang dimulakan oleh bahagian hadapan. Pertama, kita perlu mencipta fail "db.php" untuk menyambung ke pangkalan data, dengan kandungan berikut:

<?php
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "inventory";

$conn = new mysqli($servername, $username, $password, $dbname);

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

Kemudian, kita boleh mencipta fail bernama "products.php" untuk mengendalikan permintaan berkaitan produk. Berikut ialah contoh kod untuk mendapatkan semua produk:

<?php
include 'db.php';

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

$products = array();

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $products[] = $row;
    }
}

echo json_encode($products);

Begitu juga, kita boleh mencipta fail yang dipanggil "stock.php" yang akan mengendalikan permintaan berkaitan inventori. Berikut ialah contoh kod untuk mendapatkan semua maklumat inventori:

<?php
include 'db.php';

$sql = "SELECT stock.id, products.name, stock.quantity FROM stock JOIN products ON stock.product_id = products.id";
$result = $conn->query($sql);

$stock = array();

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $stock[] = $row;
    }
}

echo json_encode($stock);

Kini kami boleh menggunakan Vue untuk membina antara muka bahagian hadapan dan berkomunikasi dengan API bahagian belakang melalui permintaan Ajax. Berikut ialah contoh kod komponen Vue yang memaparkan senarai produk:

<template>
  <div>
    <h2>产品列表</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products" :key="product.id">
          <td>{{ product.id }}</td>
          <td>{{ product.name }}</td>
          <td>{{ product.price }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: []
    };
  },
  mounted() {
    this.fetchProducts();
  },
  methods: {
    fetchProducts() {
      axios.get('/products.php').then(response => {
        this.products = response.data;
      });
    }
  }
}
</script>

Begitu juga, kita boleh mencipta komponen Vue yang memaparkan maklumat inventori. Berikut ialah contoh kod komponen Vue yang memperoleh maklumat inventori dan memaparkannya:

<template>
  <div>
    <h2>库存信息</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>产品名称</th>
          <th>数量</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in stock" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.quantity }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stock: []
    };
  },
  mounted() {
    this.fetchStock();
  },
  methods: {
    fetchStock() {
      axios.get('/stock.php').then(response => {
        this.stock = response.data;
      });
    }
  }
}
</script>

Ringkasnya, menggunakan PHP dan Vue untuk membangunkan fungsi pengiraan inventori pengurusan gudang boleh membantu syarikat mencapai pengurusan inventori yang tepat. Dengan menulis API bahagian belakang dalam PHP dan menggabungkannya dengan Vue untuk membina antara muka bahagian hadapan, kami boleh dengan mudah melaksanakan fungsi paparan produk dan paparan maklumat inventori, dan berinteraksi dengan pangkalan data bahagian belakang. Saya harap contoh kod yang disediakan dalam artikel ini akan membantu kerja pembangunan anda.

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