PHP と Vue を使用して倉庫管理のための補充管理機能を開発する方法

<?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();
}
?>

<?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();
}
?>

<?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();
}
?>

npm install -g @vue/cli

vue create warehouse-management

<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>

<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>

<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>