Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan penambahan untuk pengurusan gudang

Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan penambahan pengurusan gudang

Dalam operasi perniagaan moden, pengurusan gudang adalah salah satu pautan yang sangat penting. Untuk gudang, fungsi pengurusan penambahan boleh memastikan pengisian semula inventori tepat pada masanya untuk memenuhi keperluan pelanggan dan mengelakkan kekurangan item. Dalam artikel ini, kami akan meneroka cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan penambahan sistem pengurusan gudang dan menyediakan contoh kod khusus.

1. Pemilihan Teknologi

Untuk merealisasikan fungsi pengurusan penambahan, kami memilih untuk menggunakan PHP sebagai bahasa hujung belakang dan Vue sebagai rangka kerja bahagian hadapan. PHP ialah bahasa pembangunan bahagian belakang yang berkuasa dan fleksibel, manakala Vue ialah rangka kerja JavaScript yang progresif untuk membina antara muka pengguna. Melalui pemilihan teknologi sedemikian, kami boleh mencapai pemisahan bahagian hadapan dan belakang dengan mudah, dan menjadikan pembangunan projek lebih cekap dan boleh diselenggara.

2. Pembangunan bahagian belakang

1. Persediaan persekitaran

Pertama sekali, kita perlu menyediakan persekitaran pembangunan PHP. Anda boleh menggunakan persekitaran pembangunan bersepadu seperti XAMPP atau WAMP untuk membina persekitaran pembangunan PHP tempatan. Pastikan anda telah memasang PHP dan pangkalan data (seperti MySQL).

2. Buat pangkalan data

Buat pangkalan data bernama "pengurusan_gudang" dalam MySQL dan buat dua jadual: "produk" dan "tambahan". Jadual "produk" digunakan untuk menyimpan maklumat produk, manakala jadual "tambahan" digunakan untuk menyimpan rekod penambahan.

Bidang jadual produk termasuk: id, nama, kuantiti.

Medan jadual penambahan termasuk: id, product_id, kuantiti, tarikh.

3. Writing API

Dalam PHP, kita boleh menggunakan PDO (Objek Data PHP) untuk berinteraksi dengan pangkalan data. Mula-mula, kita perlu mencipta fail yang bersambung ke pangkalan data, seperti db.php:

<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "warehouse_management";

try {
  $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
  echo "Connection failed: " . $e->getMessage();
}
?>

Kemudian, kita boleh menulis API untuk mengendalikan permintaan bahagian hadapan. Sebagai contoh, kita boleh mencipta fail bernama "getProducts.php" untuk mendapatkan maklumat tentang semua produk:

<?php
require_once('db.php');

try {
  $stmt = $conn->prepare("SELECT * FROM products");
  $stmt->execute();

  $results = $stmt->fetchAll(PDO::FETCH_ASSOC);

  echo json_encode($results);
} catch(PDOException $e) {
  echo "Error: " . $e->getMessage();
}
?>

Begitu juga, kita boleh mencipta fail "addReplenishment.php" untuk menambah rekod penambahan:

<?php
require_once('db.php');

$product_id = $_POST['product_id'];
$quantity = $_POST['quantity'];

try {
  $stmt = $conn->prepare("INSERT INTO replenishments (product_id, quantity, date) VALUES (:product_id, :quantity, NOW())");
  $stmt->bindParam(':product_id', $product_id);
  $stmt->bindParam(':quantity', $quantity);

  $stmt->execute();
  
  echo "Replenishment added successfully";
} catch(PDOException $e) {
  echo "Error: " . $e->getMessage();
}
?>

3. Pembangunan bahagian hadapan

1. Persediaan persekitaran

Untuk pembangunan bahagian hadapan, kami perlu memasang Node.js dan Vue CLI. Anda boleh memuat turun pemasang dari tapak web rasmi Node.js dan jalankan arahan berikut untuk memasang Vue CLI:

npm install -g @vue/cli

2. Buat projek Vue

Dalam baris arahan, kita boleh menggunakan Vue CLI untuk mencipta projek Vue. Sebagai contoh, kita boleh menjalankan arahan berikut untuk mencipta projek yang dipanggil "warehouse-management":

vue create warehouse-management

Kita kemudian boleh memilih beberapa pilihan untuk mengkonfigurasi projek. Semasa proses ini, kita boleh memilih untuk menggunakan Babel dan Penghala, dan pilih "Pilih ciri secara manual", kemudian tekan Enter untuk meneruskan.

3. Menulis komponen dan panggilan API

Dalam projek Vue, kami boleh menggunakan komponen Vue untuk membina antara muka pengguna. Mula-mula, kita perlu mencipta komponen (ProductList.vue) untuk memaparkan senarai produk:

<template>
  <div>
    <h2>Product List</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Quantity</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products" :key="product.id">
          <td>{{ product.id }}</td>
          <td>{{ product.name }}</td>
          <td>{{ product.quantity }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: []
    };
  },
  mounted() {
    this.getProducts();
  },
  methods: {
    getProducts() {
      fetch('http://localhost/api/getProducts.php')
        .then(response => response.json())
        .then(data => {
          this.products = data;
        });
    }
  }
};
</script>

Kemudian, kita boleh mencipta komponen (AddReplenishment.vue) untuk menambah rekod pengisian semula:

<template>
  <div>
    <h2>Add Replenishment</h2>
    <form @submit.prevent="addReplenishment">
      <label for="product">Product:</label>
      <select name="product" v-model="product_id">
        <option v-for="product in products" :value="product.id" :key="product.id">{{ product.name }}</option>
      </select>
      <br>
      <label for="quantity">Quantity:</label>
      <input type="number" name="quantity" v-model="quantity" required>
      <br>
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
      product_id: '',
      quantity: ''
    };
  },
  mounted() {
    this.getProducts();
  },
  methods: {
    getProducts() {
      fetch('http://localhost/api/getProducts.php')
        .then(response => response.json())
        .then(data => {
          this.products = data;
        });
    },
    addReplenishment() {
      fetch('http://localhost/api/addReplenishment.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: `product_id=${this.product_id}&quantity=${this.quantity}`
      })
        .then(response => response.text())
        .then(data => {
          console.log(data);
          // Refresh product list
          this.getProducts();
          // Reset form values
          this.product_id = '';
          this.quantity = '';
        });
    }
  }
};
</script>

4. Komponen bersepadu

pada akhir

kami perlu mengubah suai fail App.vue untuk menyepadukan komponen ProductList dan AddReplenishment:

<template>
  <div id="app">
    <ProductList />
    <AddReplenishment />
  </div>
</template>

<script>
import ProductList from './components/ProductList.vue';
import AddReplenishment from './components/AddReplenishment.vue';

export default {
  name: 'App',
  components: {
    ProductList,
    AddReplenishment
  }
};
</script>

Pada ketika ini, kami telah menyelesaikan pembangunan fungsi pengurusan penambahan sistem pengurusan gudang berdasarkan PHP dan Vue.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan penambahan sistem pengurusan gudang. Dengan memilih teknologi yang betul, kami boleh membangunkan sistem yang boleh dipercayai dan mudah diselenggara dengan cekap. Saya harap artikel ini dapat memberikan sedikit bantuan untuk anda dalam kerja pembangunan yang berkaitan.

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