PHP と Vue を使用して倉庫管理用の価格管理機能を開発する方法-PHPチュートリアル-php.cn

PHP と Vue を使用して倉庫管理用の価格管理機能を開発する方法

王林

リリース： 2023-09-24 13:02:01

オリジナル

1188 人が閲覧しました

PHP と Vue を使用して倉庫管理用の価格管理機能を開発する方法

PHP と Vue を使用して倉庫管理の価格管理機能を開発する方法

現代の物流倉庫管理では、価格管理は重要な機能です。倉庫管理者や物流担当者が在庫品目の価格情報を正確に管理し、商品の適正な価格設定と利益管理を行うのに役立ちます。この記事では、PHP と Vue を使用して倉庫管理システムの価格管理機能を開発する方法と、具体的なコード例を紹介します。

1. 準備

始める前に、PHP と Vue の開発環境がインストールされていることを確認してください。任意のコードエディターを使用してコードを作成できます。

2. データベーステーブルを作成するまず、価格情報を保存するデータベーステーブルを作成する必要があります。テーブルの名前が prices

で、次のフィールドが含まれているとします。

id
product_name
#price
created_at
updated_at

次の SQL ステートメントを使用して、データベーステーブルを作成できます。

CREATE TABLE `prices` (
  `id` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT,
  `product_name` VARCHAR(255) NOT NULL,
  `price` FLOAT NOT NULL,
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=INNODB;

ログイン後にコピー

3. バックエンドインターフェイスの作成

次に、PHP を使用して、価格管理機能を処理するバックエンド インターフェイスを作成する必要があります。 PHP ファイル

price.php

を作成し、次のコードを追加します。

<?php
header('Content-Type: application/json');

// 连接数据库
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "your_database_name";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// 获取所有价格记录
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
    $sql = "SELECT * FROM `prices`";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        $prices = [];
        while ($row = $result->fetch_assoc()) {
            $prices[] = $row;
        }
        echo json_encode($prices);
    } else {
        echo "[]";
    }
}

// 添加价格记录
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $product_name = $_POST['product_name'];
    $price = $_POST['price'];

    $sql = "INSERT INTO `prices` (`product_name`, `price`) VALUES ('$product_name', '$price')";
    if ($conn->query($sql) === TRUE) {
        echo "Price record created successfully";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
}

// 更新价格记录
if ($_SERVER['REQUEST_METHOD'] === 'PUT') {
    parse_str(file_get_contents("php://input"), $put_vars);

    $id = $put_vars['id'];
    $product_name = $put_vars['product_name'];
    $price = $put_vars['price'];

    $sql = "UPDATE `prices` SET `product_name`='$product_name', `price`='$price', `updated_at`=CURRENT_TIMESTAMP WHERE `id`='$id'";
    if ($conn->query($sql) === TRUE) {
        echo "Price record updated successfully";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
}

// 删除价格记录
if ($_SERVER['REQUEST_METHOD'] === 'DELETE') {
    parse_str(file_get_contents("php://input"), $delete_vars);

    $id = $delete_vars['id'];

    $sql = "DELETE FROM `prices` WHERE `id`='$id'";
    if ($conn->query($sql) === TRUE) {
        echo "Price record deleted successfully";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
}

$conn->close();
?>

ログイン後にコピー

your_database_name

をデータベース名に置き換え、必要に応じてデータベース接続情報を変更してください。

4. フロントエンドページの作成Vue を使用してフロントエンドページを作成します。 HTML ファイル index.html

を作成し、次のコードを追加します。

<!DOCTYPE html>
<html>
<head>
    <title>价格管理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>价格管理</h1>
        <form @submit.prevent="addPrice">
            <input type="text" placeholder="产品名称" v-model="newPrice.product_name" required>
            <input type="number" step="0.01" placeholder="价格" v-model="newPrice.price" required>
            <button type="submit">添加</button>
        </form>
        <table>
            <thead>
                <tr>
                    <th>产品名称</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="price in prices" :key="price.id">
                    <td>{{ price.product_name }}</td>
                    <td>{{ price.price }}</td>
                    <td>
                        <button @click="editPrice(price)">编辑</button>
                        <button @click="deletePrice(price)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                prices: [],
                newPrice: {
                    product_name: '',
                    price: ''
                },
                editPrice: {
                    id: '',
                    product_name: '',
                    price: ''
                }
            },
            created: function() {
                this.getPrices();
            },
            methods: {
                getPrices: function() {
                    axios.get('price.php')
                        .then(function(response) {
                            this.prices = response.data;
                        }.bind(this))
                        .catch(function(error) {
                            console.log(error);
                        });
                },
                addPrice: function() {
                    axios.post('price.php', this.newPrice)
                        .then(function(response) {
                            console.log(response.data);
                            this.getPrices();
                            this.newPrice.product_name = '';
                            this.newPrice.price = '';
                        }.bind(this))
                        .catch(function(error) {
                            console.log(error);
                        });
                },
                editPrice: function(price) {
                    this.editPrice.id = price.id;
                    this.editPrice.product_name = price.product_name;
                    this.editPrice.price = price.price;
                },
                updatePrice: function() {
                    axios.put('price.php', this.editPrice)
                        .then(function(response) {
                            console.log(response.data);
                            this.getPrices();
                            this.editPrice.id = '';
                            this.editPrice.product_name = '';
                            this.editPrice.price = '';
                        }.bind(this))
                        .catch(function(error) {
                            console.log(error);
                        });
                },
                deletePrice: function(price) {
                    axios.delete('price.php', { data: price })
                        .then(function(response) {
                            console.log(response.data);
                            this.getPrices();
                        }.bind(this))
                        .catch(function(error) {
                            console.log(error);
                        });
                }
            }
        });
    </script>
</body>
</html>

ログイン後にコピー

5. プロジェクト を実行し、price.php と index を変更します。 .html

ファイルをサーバーの Web サイト ディレクトリに置き、サーバーを起動します。次に、ブラウザを開いて

index.html

にアクセスすると、シンプルな価格管理ページが表示されます。

このページでは、製品名と価格を入力し、[追加] ボタンをクリックして新しい価格レコードを追加できます。価格レコード情報を変更するには、「編集」ボタンをクリックします。価格レコードを削除するには、「削除」ボタンをクリックします。

6. まとめ

この記事では、PHP と Vue を使用して、シンプルな倉庫管理システムの価格管理機能を開発しました。この機能により、倉庫管理者は商品の価格情報を簡単に管理し、適正な価格設定と利益管理を実現できます。バックエンドインターフェイスとフロントエンドページを作成することで、PHP と Vue を使用してこの関数を実装する方法を示し、詳細なコード例を示します。この記事がお役に立てば幸いです! ###

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