Rumah > Artikel > pembangunan bahagian belakang > Cara menggunakan PHP dan Vue untuk melaksanakan fungsi tetapan inventori standard pengurusan gudang

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi tetapan inventori standard pengurusan gudang

WBOYasal: 2023-09-25 17:15:401265semak imbas

Pengenalan:
Dalam pengurusan gudang moden, kawalan inventori adalah bahagian yang sangat penting. Cara menggunakan PHP dan Vue untuk melaksanakan fungsi tetapan inventori standard pengurusan gudang telah menjadi persoalan yang patut dikaji. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi tetapan inventori standard pengurusan gudang dan menyediakan contoh kod khusus.

1. Persediaan
Pertama, kita perlu membina persekitaran pembangunan berdasarkan PHP dan Vue. Anda boleh memilih untuk menggunakan pelayan setempat, seperti XAMPP, dsb., atau menggunakan persekitaran pembangunan dalam talian, seperti CodePen, JSFiddle, dsb. Selepas memastikan persekitaran berjalan dengan betul, kami boleh memulakan pengekodan.

2. Buat pangkalan data
Pertama, kita perlu buat pangkalan data untuk menyimpan maklumat produk dan data inventori gudang. Anda boleh menggunakan MySQL atau pangkalan data hubungan lain untuk mencipta pangkalan data bernama "inventori" dan mencipta dua jadual, "produk" dan "stok".

Jadual "produk" mengandungi medan berikut:

id: ID Produk (kunci utama auto-incremented)
nama: Nama produk
harga: Harga produk
kategori: Kategori produk

mengandungi medan berikut :

product_id: ID Produk (kunci asing yang dikaitkan dengan medan id jadual "produk")
kuantiti: Kuantiti produk

. Cipta antara muka belakang

Gunakan PHP Untuk mencipta antara muka belakang, biarkan bahagian hadapan mendapatkan dan mengubah suai data dalam pangkalan data melalui antara muka. Berikut ialah contoh kod PHP mudah untuk mendapatkan senarai produk dan maklumat inventori produk:

<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "inventory";
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 获取商品列表
$sql = "SELECT * FROM products";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    $products = array();
    while($row = $result->fetch_assoc()) {
        $products[] = $row;
    }
    echo json_encode($products);
} else {
    echo "0 结果";
}
// 获取商品的库存信息
$product_id = $_GET['product_id'];
$sql = "SELECT * FROM stock WHERE product_id = $product_id";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    $stock = array();
    while($row = $result->fetch_assoc()) {
        $stock[] = $row;
    }
    echo json_encode($stock);
} else {
    echo "0 结果";
}
$conn->close();
?>

IV Cipta antara muka hadapan

Gunakan Vue untuk mencipta antara muka hadapan, dan gunakan perpustakaan axios untuk menghantar permintaan HTTP dan. berinteraksi dengan antara muka bahagian belakang . Berikut ialah contoh kod Vue mudah untuk memaparkan senarai produk dan maklumat inventori produk:

<!DOCTYPE html>
<html>
<head>
  <title>仓库管理</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <h1>商品列表</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        <span>{{ product.name }}</span> -
        <span>{{ product.price }}</span>元 -
        <span>{{ product.category }}</span>
        <button @click="getStock(product.id)">查看库存</button>
      </li>
    </ul>
    <h1>库存信息</h1>
    <ul>
      <li v-for="stock in stockList" :key="stock.id">
        <span>{{ stock.quantity }}</span>件
      </li>
    </ul>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        products: [],
        stockList: []
      },
      methods: {
        getProducts() {
          axios.get('backend.php')
            .then(response => {
              this.products = response.data;
            })
            .catch(error => {
              console.log(error);
            });
        },
        getStock(product_id) {
          axios.get(`backend.php?product_id=${product_id}`)
            .then(response => {
              this.stockList = response.data;
            })
            .catch(error => {
              console.log(error);
            });
        }
      },
      mounted() {
        this.getProducts();
      }
    });
  </script>
</body>
</html>

5. Jalankan dan uji

Simpan kod PHP di atas sebagai fail "backend.php", dan simpan kod Vue sebagai " indeks .html" fail. Letakkan kedua-dua fail ini dalam direktori yang sama dan buka fail "index.html" dalam penyemak imbas untuk melihat senarai produk dan maklumat inventori.

6. Ringkasan

Melalui langkah di atas, kami berjaya menggunakan PHP dan Vue untuk melaksanakan fungsi tetapan inventori standard pengurusan gudang. Senarai produk dan maklumat inventori boleh dipaparkan melalui antara muka bahagian hadapan, dan data dalam pangkalan data boleh diperoleh secara dinamik dan diubah suai melalui antara muka bahagian belakang. Sudah tentu, dalam projek sebenar, kami juga boleh mengembangkan dan mengoptimumkan mengikut keperluan tertentu. Saya harap kandungan di atas dapat membantu anda, dan saya berharap anda mendapat hasil yang lebih baik dalam pengurusan gudang!

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

php mysql html 接口数据库 http axios

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cara menggunakan PHP dan Vue untuk melaksanakan fungsi sandaran dataArtikel seterusnya：Cara menggunakan PHP dan Vue untuk melaksanakan fungsi sandaran data

Artikel berkaitan

Lihat lagi