PHP と Vue を使用して倉庫管理のための倉庫セキュリティ管理機能を開発する方法

PHP と Vue を使用して倉庫管理用の倉庫セキュリティ管理機能を開発する方法

現在の競争が激化する市場環境では、倉庫管理は倉庫管理の運営にとって重要です。企業。倉庫の円滑な運営と安全な管理を確保するために、多くの企業は技術的な手段を用いて計画的な管理を行っています。この記事では、PHPとVueを使って倉庫セキュリティ管理機能を開発する具体的な方法とコード例を紹介します。

ステップ 1: 開発環境をセットアップする
PHP と Vue を使用して倉庫セキュリティ管理機能の開発を開始するには、まず対応する開発環境をセットアップする必要があります。 PHP サーバーと Vue 開発ツールをコンピューターにインストールする必要があります。PHP サーバーとして XAMPP を使用し、Vue 開発ツールとして Visual Studio Code を使用することをお勧めします。これらのソフトウェアが正しくインストールされており、PHP サーバーと Vue 開発ツールを正常に起動できることを確認してください。

ステップ 2: データベースとデータ テーブルを作成する
PHP と Vue でウェアハウス管理機能を開発する前に、関連データを保存するための対応するデータベースとデータ テーブルを作成する必要があります。 phpMyAdmin またはその他のデータベース管理ツールを開き、新しいデータベースを作成し、データベース内に「warehouses」という名前のデータ テーブルを作成します。

データ テーブル "warehouses" の構造は次のとおりです:

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`)
);

ステップ 3: PHP バックエンド コードを作成する
次に、処理する PHP バックエンド コードを作成します。倉庫管理関連業務プロジェクト ディレクトリに「api」という名前のフォルダーを作成し、そのフォルダー内に「warehouses.php」という名前の PHP ファイルを作成します。このファイルでは、ウェアハウスの追加、削除、変更、クエリ機能を実装します。

「warehouses.php」では、PHP の「mysqli」拡張ライブラリを使用してデータベースに接続し、関連する API を記述する必要があります。以下は、「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();
?>

ステップ 4: Vue フロントエンド コードを作成する
次に、バックエンドと対話し、関連する表示を行う Vue フロントエンド コードを作成します。倉庫に関する情報。プロジェクト ディレクトリに「src」という名前のフォルダーを作成し、このフォルダー内に「Warehouse.vue」という名前の Vue コンポーネント ファイルを作成します。

「Warehouse.vue」では、Vue の「axios」ライブラリを使用して HTTP リクエストを送信し、ウェアハウス リストをレンダリングします。以下は、「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>

ステップ 5: アプリケーションの実行
これで、PHP と Vue を使用してウェアハウスを開発するためのウェアハウス セキュリティ管理機能のコードの作成が完了しました。管理。コマンド ラインを使用してプロジェクト ディレクトリに入り、次のコマンドを実行してアプリケーションを起動できます。

npm run serve

次に、ブラウザを開いて「http://localhost:8080」にアクセスすると、ウェアハウス リストが表示されます。倉庫を追加するフォーム。リポジトリを追加または削除すると、ページはリアルタイムで更新されます。これにより、倉庫の安全な管理を実現できます。

以上がPHP と Vue を使用して倉庫管理のための倉庫セキュリティ管理機能を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。