Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan kod QR pengurusan gudang
Kata Pengantar:
Dengan perkembangan pesat e-dagang, pengurusan gudang menjadi semakin penting. Mengesan lokasi dan status barangan di gudang dengan cepat dan tepat adalah kunci untuk memastikan rantaian bekalan berjalan dengan cekap. Sebagai cara biasa untuk mengenal pasti barangan, kod QR mempunyai ciri kapasiti penyimpanan maklumat yang besar dan bacaan mudah, dan digunakan secara meluas dalam pengurusan gudang.
Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan kod QR pengurusan gudang, dan memberikan contoh kod khusus.
1. Persediaan teknikal
Sebelum anda bermula, anda perlu memasang perisian dan alatan berikut terlebih dahulu:
II , Reka bentuk pangkalan data
Sebelum memulakan pembangunan, adalah perlu untuk mereka bentuk struktur pangkalan data yang sesuai untuk menyimpan pengurusan gudang dan data berkaitan kod QR.
Kami mereka bentuk pangkalan data bernama "inventori", yang mengandungi dua jadual: jadual "barangan" yang digunakan untuk menyimpan maklumat barangan dan jadual "qrcodes" yang digunakan untuk menyimpan maklumat kod QR.
jadual barang mengandungi medan berikut:
3. Pembangunan bahagian belakang (menggunakan PHP)
<?php
$host = "localhost";
$username = "root";
$password = "";
$database = "inventory";
$mysqli = new mysqli($host, $username, $password, $database);
if ($mysqli->connect_errno) {
die("连接数据库失败：" . $mysqli->connect_error);
}
?><?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();
?><?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();
?>$ npm install vue $ npm install axios
<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><!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>$ php -S localhost:8000
$ npm run serve
Ringkasan:
Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan kod QR untuk pengurusan gudang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
