Comment utiliser PHP et Vue pour développer des fonctions de gestion de code QR pour la gestion d'entrepôt

Comment utiliser PHP et Vue pour développer la fonction de gestion des codes QR de la gestion d'entrepôt

Avant-propos :
Avec le développement rapide du commerce électronique, la gestion d'entrepôt est devenue de plus en plus importante. Un suivi rapide et précis de l'emplacement et de l'état des marchandises dans l'entrepôt est essentiel au fonctionnement efficace des chaînes d'approvisionnement. En tant que moyen courant d'identification des marchandises, les codes QR présentent les caractéristiques d'une grande capacité de stockage d'informations et d'une lecture facile, et sont largement utilisés dans la gestion des entrepôts.

Cet article expliquera comment utiliser PHP et Vue pour développer la fonction de gestion de code QR de la gestion d'entrepôt et donnera des exemples de code spécifiques.

1. Préparation technique
Avant de commencer, vous devez d'abord installer les logiciels et outils suivants :

1. Environnement PHP (tels que XAMPP, WAMP, etc.)
2. Vue.js
3. Outils IDE (tels que Visual Studio Code)

II , Conception de la base de données
Avant de commencer le développement, il est nécessaire de concevoir une structure de base de données adaptée pour stocker les données de gestion de l'entrepôt et les données liées au code QR.

Nous concevons une base de données nommée « inventaire », qui contient deux tables : une table « marchandises » utilisée pour stocker les informations sur les marchandises, et une table « qrcodes » utilisée pour stocker les informations du code QR.

la table des marchandises contient les champs suivants :

• id : ID des marchandises (clé primaire)
• nom : nom des marchandises
• prix : prix des marchandises
• quantité : quantité des marchandises

la table qrcodes contient les champs suivants :

• id : ID du code QR (clé primaire)
• goods_id : ID des marchandises associées
• qrcode : Contenu du code QR

3. Développement back-end (en utilisant PHP)

1. Connectez-vous à la base de données
   Utilisez PHP pour vous connecter la base de données, vous pouvez utiliser mysqli ou PDO et d'autres méthodes. Voici un exemple de code :

<?php
$host = "localhost";
$username = "root";
$password = "";
$database = "inventory";

$mysqli = new mysqli($host, $username, $password, $database);
if ($mysqli->connect_errno) {
    die("连接数据库失败：" . $mysqli->connect_error);
}
?>

2. Requête d'informations sur les marchandises
   Écrivez du code PHP pour interroger toutes les informations sur les marchandises dans la table des marchandises et renvoyer les données au format JSON. Voici un exemple de code :

<?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();
?>

3. Ajouter un code QR
   Écrivez un code PHP pour ajouter des informations sur le code QR à la table des qrcodes et renvoyer l'ID de code QR généré. Voici un exemple de code :

<?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. Développement front-end (à l'aide de Vue.js)

1. Installez Vue.js et axios
   Dans le répertoire du projet, installez Vue.js et axios via les commandes suivantes :

$ npm install vue
$ npm install axios

2. Créer un composant Vue
   Créez un composant Vue nommé "Inventaire" pour afficher les fonctions de gestion d'entrepôt et de gestion de code QR. Voici un exemple de code :

<template>
  <div>
    <h1 id="仓库管理">仓库管理</h1>
    <h2 id="货物信息">货物信息</h2>
    <ul>
      <li v-for="item in goods" :key="item.id">
        {{ item.name }} - {{ item.price }} - {{ item.quantity }}
      </li>
    </ul>
    <h2 id="添加二维码">添加二维码</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>

3. Montez l'instance Vue
   Dans le fichier d'entrée du projet, montez l'instance Vue et spécifiez l'élément DOM à rendre. Voici un exemple de code :

<!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. Exécutez et testez

1. Démarrez le serveur de développement PHP
   Exécutez la commande suivante dans le répertoire du projet pour démarrer le serveur de développement PHP :

$ php -S localhost:8000

2. Démarrez le front-end serveur de développement
   Dans le répertoire du projet Exécutez la commande suivante pour démarrer le serveur de développement front-end :

$ npm run serve

3. Accès dans le navigateur
   Accédez "http://localhost:8080" dans le navigateur pour afficher et tester le code QR fonction de gestion de la gestion des entrepôts.

Résumé :
Cet article explique comment utiliser PHP et Vue pour développer la fonction de gestion de code QR de la gestion d'entrepôt et donne des exemples de code spécifiques. De cette manière, nous pouvons rapidement mettre en œuvre les fonctions de gestion des informations sur le fret et de génération et d'association de codes QR dans l'entrepôt, améliorant ainsi l'efficacité et la précision de la gestion de l'entrepôt. J'espère que cet article sera utile à tout le monde lors du développement d'un système de gestion d'entrepôt.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!