PHPとVueを使って倉庫管理用のQRコード管理機能を開発する方法
- WBOYオリジナル
- 2023-09-25 16:01:07642ブラウズ
PHP と Vue を使って倉庫管理の QR コード管理機能を開発する方法
まえがき:
電子商取引の急速な発展に伴い、倉庫管理もますます重要になってきています。倉庫内の商品の位置とステータスを迅速かつ正確に追跡することは、サプライ チェーンを効率的に実行し続けるための鍵となります。 QRコードは、商品を識別する一般的な手段として、情報記憶容量が大きく読み取りやすいという特徴があり、倉庫管理などで広く利用されています。
この記事では、PHPとVueを使って倉庫管理のQRコード管理機能を開発する方法と、具体的なコード例を紹介します。
1. 技術的な準備
始める前に、まず次のソフトウェアとツールをインストールする必要があります:
- PHP 環境 (XAMPP、WAMP など)
- Vue .js
- IDE ツール (Visual Studio Code など)
2. データベース設計
開発を開始する前に、適切なデータベースを設計する必要があります。保管倉庫管理の仕組みとQRコード関連データ。
「inventory」という名前のデータベースを設計します。このデータベースには、商品情報を保存するために使用される「goods」テーブルと、QR コード情報を保存するために使用される「qrcodes」テーブルの 2 つのテーブルが含まれています。
商品テーブルには次のフィールドが含まれます:
- id: 商品 ID (主キー)
- name: 商品名
- price: 商品Price
- quantity: 商品の数量
qrcodes テーブルには次のフィールドが含まれます:
- id: QR コード ID (主キー)
- goods_id: 関連付け商品ID
- qrcode: QRコードの内容
3. バックエンド開発(PHPを使用)
- データベースに接続
PHP を使用してデータベースに接続します。mysqli や PDO などを使用できます。以下はサンプル コードです。
<?php
$host = "localhost";
$username = "root";
$password = "";
$database = "inventory";
$mysqli = new mysqli($host, $username, $password, $database);
if ($mysqli->connect_errno) {
die("连接数据库失败：" . $mysqli->connect_error);
}
?>- 商品情報のクエリ
商品テーブル内のすべての商品情報をクエリし、JSON 形式でデータを返す PHP コードを記述します。以下はサンプル コードです。
<?php
// 查询所有货物信息
$query = "SELECT * FROM goods";
$result = $mysqli->query($query);
// 将结果转换为JSON格式
$data = [];
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
echo json_encode($data);
// 释放资源
$result->free();
$mysqli->close();
?>- QR コードの追加
PHP コードを記述し、QR コード情報を qrcodes テーブルに追加し、生成された QR コード ID を返します。以下はサンプルコードです:
<?php
// 获取POST请求参数
$qrcode = $_POST['qrcode'];
$goods_id = $_POST['goods_id'];
// 插入二维码信息
$query = "INSERT INTO qrcodes (goods_id, qrcode) VALUES ('$goods_id', '$qrcode')";
$result = $mysqli->query($query);
// 返回生成的二维码ID
echo $mysqli->insert_id;
// 释放资源
$result->free();
$mysqli->close();
?>4. フロントエンド開発 (Vue.js を使用)
- Vue.js と axios
をプロジェクトにインストールしますディレクトリ、パス 次のコマンドは、Vue.js と axios をインストールします。
$ npm install vue $ npm install axios
- Vue コンポーネントの作成
倉庫管理と QR コード管理機能を表示するために、「Inventory」という名前の Vue コンポーネントを作成します。以下はサンプル コードです。
<template>
<div>
<h1>仓库管理</h1>
<h2>货物信息</h2>
<ul>
<li v-for="item in goods" :key="item.id">
{{ item.name }} - {{ item.price }} - {{ item.quantity }}
</li>
</ul>
<h2>添加二维码</h2>
<form @submit.prevent="addQrcode">
<label for="qrcode">二维码内容：</label>
<input type="text" v-model="qrcode" required>
<label for="goods_id">货物ID：</label>
<input type="text" v-model="goods_id" required>
<button type="submit">添加</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
goods: [],
qrcode: '',
goods_id: '',
};
},
methods: {
getGoods() {
axios.get('/api/goods.php')
.then(response => {
this.goods = response.data;
})
.catch(error => {
console.error(error);
});
},
addQrcode() {
axios.post('/api/qrcodes.php', {
qrcode: this.qrcode,
goods_id: this.goods_id,
})
.then(response => {
const qrcodeId = response.data;
console.log('生成的二维码ID：', qrcodeId);
})
.catch(error => {
console.error(error);
});
},
},
mounted() {
this.getGoods();
},
};
</script>- Vue インスタンスのマウント
プロジェクトのエントリ ファイルで、Vue インスタンスをマウントし、レンダリングする DOM 要素を指定します。以下はサンプル コードです:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>仓库管理</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/axios"></script>
<script>
import Inventory from './components/Inventory.vue'
new Vue({
el: '#app',
components: { Inventory },
template: '<Inventory />',
});
</script>
</body>
</html>5. 実行とテスト
- PHP 開発サーバーの起動
プロジェクト ディレクトリで次のコマンドを実行して、 PHP 開発サーバー:
$ php -S localhost:8000
- フロントエンド開発サーバーの起動
プロジェクト ディレクトリで次のコマンドを実行して、フロントエンド開発サーバーを起動します:
$ npm run serve
- ブラウザで
にアクセスし、ブラウザで「http://localhost:8080」にアクセスし、倉庫管理の QR コード管理機能を表示およびテストします。
概要:
この記事では、PHP と Vue を使用して倉庫管理の QR コード管理機能を開発する方法と、具体的なコード例を紹介します。これにより、貨物情報管理やQRコード生成・紐付け機能を倉庫内に迅速に実装でき、倉庫管理の効率化と精度が向上します。この記事が皆様の倉庫管理システム開発の参考になれば幸いです。
以上がPHPとVueを使って倉庫管理用のQRコード管理機能を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。