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

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

Dalam persekitaran pasaran semasa yang semakin kompetitif, pengurusan gudang adalah penting untuk operasi perusahaan. Bagi memastikan kelancaran operasi dan pengurusan gudang yang selamat, banyak syarikat menggunakan cara teknikal untuk menjalankan pengurusan yang sistematik. Artikel ini akan memperkenalkan kaedah khusus menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan keselamatan gudang, dan menyediakan contoh kod.

Langkah 1: Sediakan persekitaran pembangunan
Untuk mula menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan keselamatan gudang, anda perlu menyediakan persekitaran pembangunan yang sepadan terlebih dahulu. Anda perlu memasang pelayan PHP dan alat pembangunan Vue pada komputer anda Adalah disyorkan untuk menggunakan XAMPP sebagai pelayan PHP dan Kod Visual Studio sebagai alat pembangunan Vue. Pastikan anda telah memasang perisian ini dengan betul dan boleh berjaya memulakan pelayan PHP dan alat pembangunan Vue.

Langkah 2: Cipta pangkalan data dan jadual data
Sebelum membangunkan fungsi pengurusan gudang dalam PHP dan Vue, kita perlu mencipta pangkalan data dan jadual data yang sepadan untuk menyimpan data yang berkaitan. Buka phpMyAdmin atau alat pengurusan pangkalan data lain, cipta pangkalan data baharu dan buat jadual data bernama "gudang" dalam pangkalan data.

Struktur jadual data "gudang" adalah seperti berikut:

CREATE TABLE `warehouses` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `location` varchar(255) NOT NULL,
  `security_level` int(11) NOT NULL,
  PRIMARY KEY (`id`)
);

Langkah 3: Tulis kod backend PHP
Seterusnya, kami akan menulis kod backend PHP untuk mengendalikan operasi berkaitan pengurusan gudang. Cipta folder bernama "api" dalam direktori projek anda dan buat fail PHP bernama "warehouses.php" dalam folder itu. Dalam fail ini, kami akan melaksanakan fungsi tambah, padam, ubah suai dan pertanyaan gudang.

Dalam "warehouses.php", kita perlu menggunakan perpustakaan sambungan "mysqli" PHP untuk menyambung ke pangkalan data dan menulis API yang berkaitan. Berikut ialah contoh kod "warehouses.php":

<?php
  $db_host = "localhost";  // 数据库主机名
  $db_user = "root";       // 数据库用户名
  $db_password = "";       // 数据库密码
  $db_name = "your_database_name";  // 数据库名称

  // 连接数据库
  $conn = new mysqli($db_host, $db_user, $db_password, $db_name);

  // 检查连接是否成功
  if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
  }

  // 处理GET请求，获取仓库列表
  if ($_SERVER["REQUEST_METHOD"] === "GET") {
    $result = $conn->query("SELECT * FROM warehouses");
    $warehouses = [];
    while ($row = $result->fetch_assoc()) {
      $warehouses[] = $row;
    }
    echo json_encode($warehouses);
  }

  // 处理POST请求，添加新的仓库
  if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $name = $_POST["name"];
    $location = $_POST["location"];
    $security_level = $_POST["security_level"];
    $sql = "INSERT INTO warehouses (name, location, security_level) VALUES ('$name', '$location', '$security_level')";
    if ($conn->query($sql) === TRUE) {
      echo "New warehouse added successfully";
    } else {
      echo "Error: " . $sql . "<br>" . $conn->error;
    }
  }

  // 处理DELETE请求，删除仓库
  if ($_SERVER["REQUEST_METHOD"] === "DELETE") {
    $id = $_GET["id"];
    $sql = "DELETE FROM warehouses WHERE id=$id";
    if ($conn->query($sql) === TRUE) {
      echo "Warehouse deleted successfully";
    } else {
      echo "Error: " . $sql . "<br>" . $conn->error;
    }
  }

  // 关闭数据库连接
  $conn->close();
?>

Langkah 4: Tulis kod bahagian hadapan Vue
Sekarang, kami akan menulis kod bahagian hadapan Vue untuk berinteraksi dengan bahagian belakang dan memaparkan maklumat gudang yang berkaitan. Cipta folder bernama "src" dalam direktori projek anda dan buat fail komponen Vue bernama "Warehouse.vue" dalam folder ini.

Dalam "Warehouse.vue", kami akan menggunakan perpustakaan "axios" Vue untuk menghantar permintaan HTTP dan memaparkan senarai gudang. Berikut ialah contoh kod "Warehouse.vue":

<template>
  <div>
    <h2>Warehouse List</h2>
    <ul>
      <li v-for="warehouse in warehouses" :key="warehouse.id">
        <span>{{ warehouse.name }}</span>
        <span>{{ warehouse.location }}</span>
        <span>{{ warehouse.security_level }}</span>
        <button @click="deleteWarehouse(warehouse.id)">Delete</button>
      </li>
    </ul>
    <h2>Add New Warehouse</h2>
    <form @submit.prevent="addWarehouse">
      <input type="text" v-model="name" placeholder="Name" required>
      <input type="text" v-model="location" placeholder="Location" required>
      <input type="number" v-model="security_level" placeholder="Security Level" required>
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        warehouses: [],
        name: '',
        location: '',
        security_level: 0
      };
    },
    methods: {
      fetchWarehouses() {
        axios.get('api/warehouses.php')
          .then(response => {
            this.warehouses = response.data;
          })
          .catch(error => {
            console.log(error);
          });
      },
      addWarehouse() {
        axios.post('api/warehouses.php', {
          name: this.name,
          location: this.location,
          security_level: this.security_level
        })
          .then(response => {
            console.log(response.data);
            this.fetchWarehouses();
          })
          .catch(error => {
            console.log(error);
          });
      },
      deleteWarehouse(id) {
        axios.delete(`api/warehouses.php?id=${id}`)
          .then(response => {
            console.log(response.data);
            this.fetchWarehouses();
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    mounted() {
      this.fetchWarehouses();
    }
  }
</script>

Langkah lima: Jalankan aplikasi
Kini, kami telah menyelesaikan pengekodan fungsi pengurusan keselamatan gudang untuk membangunkan pengurusan gudang menggunakan PHP dan Vue. Anda boleh menggunakan baris arahan untuk memasuki direktori projek anda dan menjalankan arahan berikut untuk memulakan aplikasi:

npm run serve

Seterusnya, buka penyemak imbas anda dan lawati "http://localhost:8080", anda akan melihat senarai repositori dan tambah Gudang bentuk. Semasa anda menambah atau mengalih keluar repositori, halaman akan dikemas kini dalam masa nyata. Dengan cara ini, anda boleh mencapai pengurusan gudang anda yang selamat.

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