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

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

Avec le développement rapide du commerce électronique, les fonctions de gestion logistique de la gestion d'entrepôt deviennent de plus en plus importantes. Dans cet article, je vais vous présenter comment utiliser PHP et Vue pour développer un système de gestion d'entrepôt simple et pratique, et fournir des exemples de code spécifiques.

1. Préparation de l'environnement

Avant de commencer le développement, nous devons préparer un environnement de développement. Tout d’abord, assurez-vous que les environnements de développement PHP et Vue sont installés sur votre ordinateur. Vous pouvez configurer un environnement de développement PHP local en téléchargeant et en installant XAMPP, WAMP ou MAMP. Dans le même temps, vous devez également installer Node.js pour prendre en charge le développement de Vue. Vous pouvez vérifier si Node.js a été installé en exécutant la commande suivante dans la ligne de commande :

node -v

2. Conception de base de données

Un système de gestion d'entrepôt nécessite une base de données pour stocker les données liées à la gestion logistique. Dans cet exemple, nous devrons créer une base de données nommée « entrepôt » et créer les deux tables suivantes pour stocker les données :

Table Items (items) : utilisée pour stocker toutes les informations sur les articles entreposés.

CREATE TABLE items (
  id INT(11) AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255),
  quantity INT(11),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Table logistique (expéditions) : utilisée pour stocker toutes les informations logistiques, y compris les entreprises de logistique, les expéditeurs, les destinataires, etc.

CREATE TABLE shipments (
  id INT(11) AUTO_INCREMENT PRIMARY KEY,
  item_id INT(11),
  company VARCHAR(255),
  sender VARCHAR(255),
  receiver VARCHAR(255),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (item_id) REFERENCES items(id)
);

3. Développement Backend - PHP

Ensuite, nous allons construire l'interface API backend via PHP.

Tout d'abord, créez un dossier nommé "api" et créez un fichier nommé "index.php" à l'intérieur. Dans "index.php", nous allons créer les interfaces API suivantes :

Obtenir toutes les informations sur les articles :

<?php
header("Content-Type: application/json");
require_once 'config.php';

$query = "SELECT * FROM items";
$result = mysqli_query($conn, $query);
$items = [];

while ($row = mysqli_fetch_assoc($result)) {
  $items[] = $row;
}

echo json_encode($items);

Créer de nouveaux articles :

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

$name = $_POST['name'];
$quantity = $_POST['quantity'];

$query = "INSERT INTO items (name, quantity) VALUES ('$name', $quantity)";
$result = mysqli_query($conn, $query);

$response = [];
if ($result) {
  $response['message'] = 'Item created successfully';
} else {
  $response['message'] = 'Failed to create item';
}
echo json_encode($response);

Obtenir toutes les informations logistiques :

<?php
header("Content-Type: application/json");
require_once 'config.php';

$query = "SELECT shipments.id, items.name, shipments.company, shipments.sender, shipments.receiver, shipments.created_at
          FROM shipments
          INNER JOIN items
          ON shipments.item_id = items.id";
$result = mysqli_query($conn, $query);
$shipments = [];

while ($row = mysqli_fetch_assoc($result)) {
  $shipments[] = $row;
}

echo json_encode($shipments);

Créer de nouvelles informations logistiques :

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

$item_id = $_POST['item_id'];
$company = $_POST['company'];
$sender = $_POST['sender'];
$receiver = $_POST['receiver'];

$query = "INSERT INTO shipments (item_id, company, sender, receiver) VALUES ($item_id, '$company', '$sender', '$receiver')";
$result = mysqli_query($conn, $query);

$response = [];
if ($result) {
  $response['message'] = 'Shipment created successfully';
} else {
  $response['message'] = 'Failed to create shipment';
}
echo json_encode($response);

Vous aussi devez créer un fichier nommé "config.php" dans le dossier "api", qui est utilisé pour configurer les informations de connexion à la base de données :

<?php
$conn = mysqli_connect('localhost', 'root', '', 'warehouse');

if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}

4. Développement front-end - Vue

Maintenant, nous allons utiliser Vue pour développer le interface frontale.

Créez un dossier nommé "frontend" dans le répertoire racine du projet et entrez le dossier via la ligne de commande.
Tout d’abord, installez Vue CLI. Exécutez la commande suivante dans la ligne de commande :

npm install -g @vue/cli

Créez un nouveau projet Vue. Exécutez la commande suivante dans la ligne de commande et configurez en fonction des invites :

vue create warehouse-management

Entrez le répertoire du projet Vue nouvellement créé. Exécutez la commande suivante dans la ligne de commande :

cd warehouse-management

Installez les dépendances requises. Exécutez la commande suivante dans la ligne de commande :

npm install

Créez un dossier nommé "components" dans le dossier "src" et créez-y les composants suivants :

Composant liste d'articles (ItemList.vue) :

<template>
  <div>
    <h2>物品列表</h2>
    <table>
      <thead>
        <tr>
          <th>物品名称</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.quantity }}</td>
          <td>
            <button @click="deleteItem(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <h3>添加新物品</h3>
    <input type="text" v-model="newItemName" placeholder="物品名称">
    <input type="number" v-model="newItemQuantity" placeholder="数量">
    <button @click="createItem">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      newItemName: '',
      newItemQuantity: 0
    };
  },
  mounted() {
    this.getItems();
  },
  methods: {
    getItems() {
      axios.get('/api/get_items.php').then(response => {
        this.items = response.data;
      });
    },
    createItem() {
      axios.post('/api/create_item.php', {
        name: this.newItemName,
        quantity: this.newItemQuantity
      }).then(response => {
        this.getItems();
        this.newItemName = '';
        this.newItemQuantity = 0;
      });
    },
    deleteItem(id) {
      axios.post('/api/delete_item.php', {
        id: id
      }).then(response => {
        this.getItems();
      });
    }
  }
};
</script>

Composant liste d'expédition (ShipmentList.vue) :

<template>
  <div>
    <h2>物流列表</h2>
    <table>
      <thead>
        <tr>
          <th>物品名称</th>
          <th>物流公司</th>
          <th>寄件人</th>
          <th>收件人</th>
          <th>创建时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="shipment in shipments" :key="shipment.id">
          <td>{{ shipment.name }}</td>
          <td>{{ shipment.company }}</td>
          <td>{{ shipment.sender }}</td>
          <td>{{ shipment.receiver }}</td>
          <td>{{ shipment.created_at }}</td>
        </tr>
      </tbody>
    </table>
    <h3>添加新物流</h3>
    <select v-model="selectedItem">
      <option v-for="item in items" :value="item.id">{{ item.name }}</option>
    </select>
    <input type="text" v-model="newShipmentCompany" placeholder="物流公司">
    <input type="text" v-model="newShipmentSender" placeholder="寄件人">
    <input type="text" v-model="newShipmentReceiver" placeholder="收件人">
    <button @click="createShipment">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      selectedItem: '',
      shipments: [],
      newShipmentCompany: '',
      newShipmentSender: '',
      newShipmentReceiver: ''
    };
  },
  mounted() {
    this.getItems();
    this.getShipments();
  },
  methods: {
    getItems() {
      axios.get('/api/get_items.php').then(response => {
        this.items = response.data;
      });
    },
    getShipments() {
      axios.get('/api/get_shipments.php').then(response => {
        this.shipments = response.data;
      });
    },
    createShipment() {
      axios.post('/api/create_shipment.php', {
        item_id: this.selectedItem,
        company: this.newShipmentCompany,
        sender: this.newShipmentSender,
        receiver: this.newShipmentReceiver
      }).then(response => {
        this.getShipments();
        this.newShipmentCompany = '';
        this.newShipmentSender = '';
        this.newShipmentReceiver = '';
      });
    }
  }
};
</script>

Ouvrez le fichier « App.vue » dans le dossier « src » et ajoutez le code suivant à l'emplacement correspondant du fichier :

<template>
  <div id="app">
    <item-list></item-list>
    <shipment-list></shipment-list>
  </div>
</template>

<script>
import ItemList from './components/ItemList.vue';
import ShipmentList from './components/ShipmentList.vue';

export default {
  components: {
    ItemList,
    ShipmentList
  }
};
</script>

À ce stade, nous avons terminé d'utiliser l'exemple de code PHP pour développer des fonctions de gestion logistique pour la gestion d'entrepôt avec Vue. Vous pouvez démarrer le serveur de développement frontal en exécutant la commande « npm run serve » et visiter « http://localhost:8080 » dans le navigateur pour afficher l'effet du projet. Dans le même temps, vous devez également exécuter le serveur de développement PHP pour rendre l'interface API efficace.

J'espère que les exemples ci-dessus pourront vous aider à comprendre comment utiliser PHP et Vue pour développer des fonctions de gestion logistique pour la gestion des entrepôts. Bien entendu, il ne s’agit que d’un exemple simple, et vous pouvez étendre et optimiser la fonction en fonction des besoins réels. Bonne chance dans votre développement !

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!