PHPとVueを使って倉庫管理の販売管理機能を実装する方法-PHPチュートリアル-php.cn

PHPとVueを使って倉庫管理の販売管理機能を実装する方法

PHPz

リリース： 2023-09-24 11:58:01

オリジナル

1271 人が閲覧しました

PHPとVueを使って倉庫管理の販売管理機能を実装する方法

PHP と Vue を使用して倉庫管理の販売管理機能を実装する方法

はじめに:
倉庫管理の販売管理機能は、日常業務に不可欠です。エンタープライズ部分の操作。この記事では、PHP と Vue に基づいて、これら 2 つのテクノロジを使用して単純な倉庫管理システムに販売管理機能を実装する方法を紹介し、具体的なコード例を示します。

1. プロジェクトの準備
コードを書き始める前に、いくつかの準備作業を行う必要があります。

PHP 開発環境がインストールされていること、および PHP 開発の基本的な知識があることを確認してください;
Vue 開発環境がインストールされていること、および Vue 開発の基本的な知識があることを確認してください ;
新規 PHP プロジェクトを作成し、そのプロジェクト内に販売管理機能の格納場所として「sales」という名前のフォルダーを作成します;
「sales」フォルダーの下に「index.html」という名前のファイルを作成します。 php" は、販売管理リクエストを処理するために使用されます。
Vue フロントエンドコードを記述するために、"sales" フォルダーの下に "app.js" という名前のファイルを作成します。

2. バックエンドコードの作成
まず、バックエンドロジックを処理する PHP コードを作成する必要があります。

「index.php」ファイルに次のコードを追加します:

<?php

// 1. 连接数据库
$db_host = "localhost";
$db_username = "root";
$db_password = "";
$db_name = "sales_db";

$conn = mysqli_connect($db_host, $db_username, $db_password, $db_name);
if (!$conn) {
 die("数据库连接失败：" . mysqli_connect_error());
}

// 2. 处理获取销售列表的请求
if ($_SERVER["REQUEST_METHOD"] == "GET") {
 $sql = "SELECT * FROM sales";
 $result = mysqli_query($conn, $sql);
 $sales = array();
 if (mysqli_num_rows($result) > 0) {
     while ($row = mysqli_fetch_assoc($result)) {
         array_push($sales, $row);
     }
 }
 echo json_encode($sales);
}

// 3. 处理添加销售记录的请求
if ($_SERVER["REQUEST_METHOD"] == "POST") {
 $product_name = $_POST["product_name"];
 $quantity = $_POST["quantity"];
 $price = $_POST["price"];

 $sql = "INSERT INTO sales (product_name, quantity, price) VALUES ('$product_name', $quantity, $price)";
 if (mysqli_query($conn, $sql)) {
     echo "销售记录添加成功！";
 } else {
     echo "销售记录添加失败：" . mysqli_error($conn);
 }
}

// 4. 关闭数据库连接
mysqli_close($conn);

?>

ログイン後にコピー

上記のコードは次の関数を実装します:

データベースに接続します;
販売リストを取得するリクエストを処理します;
販売レコードを追加するリクエストを処理します。

3. フロントエンドコードの記述
次に、Vue のフロントエンドコードを記述する必要があります。

「app.js」ファイルに次のコードを追加します:

new Vue({
 el: '#app',
 data: {
     sales: [],
     product_name: '',
     quantity: '',
     price: ''
 },
 methods: {
     getSales: function() {
         axios.get('sales/index.php')
         .then(response => {
             this.sales = response.data;
         })
         .catch(error => {
             console.log(error);
         });
     },
     addSale: function() {
         axios.post('sales/index.php', {
             product_name: this.product_name,
             quantity: this.quantity,
             price: this.price
         })
         .then(response => {
             alert(response.data);
             this.getSales();
         })
         .catch(error => {
             console.log(error);
         });
     }
 },
 mounted: function() {
     this.getSales();
 }
});

ログイン後にコピー

上記のコードは次の関数を実装します:

販売リストを取得;
販売レコードを追加します。

4. ページ表示
最後に、販売管理機能をページに表示する必要があります。

「index.php」ファイルの HTML セクションに、次のコードを追加します。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>销售管理</title>
</head>
<body>
 <div id="app">
     <h1>销售管理</h1>
     <table>
         <thead>
             <tr>
                 <th>产品名称</th>
                 <th>数量</th>
                 <th>价格</th>
             </tr>
         </thead>
         <tbody>
             <tr v-for="sale in sales" :key="sale.id">
                 <td>{{ sale.product_name }}</td>
                 <td>{{ sale.quantity }}</td>
                 <td>{{ sale.price }}</td>
             </tr>
         </tbody>
     </table>
     <form @submit.prevent="addSale">
         <input type="text" v-model="product_name" placeholder="产品名称" required>
         <input type="number" v-model="quantity" placeholder="数量" required>
         <input type="number" v-model="price" placeholder="价格" required>
         <button type="submit">添加销售记录</button>
     </form>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script src="app.js"></script>
</body>
</html>

ログイン後にコピー

上記のコードは、単純な販売を実装します。販売記録を表示するためのテーブルと販売記録を追加するためのフォームを含む管理ページ。

5. まとめ
PHP と Vue テクノロジーを使用して、倉庫管理の販売管理機能を実装することに成功しました。 PHP はバックエンドロジックの処理、データベースへの接続、フロントエンド呼び出し用の API の提供に使用され、Vue はフロントエンドページ表示と対話ロジックの作成に使用されます。この簡単なサンプルコードは、より複雑な倉庫管理システムを作成するための参照および開始点として役立ちます。この記事があなたの学習や実践に役立つことを願っています。

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