How to use PHP and Vue to develop logistics management functions for warehouse management

How to use PHP and Vue to develop the logistics management function of warehouse management

With the rapid development of e-commerce, the logistics management function of warehouse management has become more and more important. . In this article, I will introduce how to use PHP and Vue to develop a simple and practical warehouse management system, and provide specific code examples.

1. Environment preparation

Before starting development, we need to prepare some development environment. First, make sure you have the PHP and Vue development environments installed on your computer. You can set up a local PHP development environment by downloading and installing XAMPP, WAMP or MAMP. At the same time, you also need to install Node.js to support Vue development. You can check whether Node.js has been installed by running the following command in the command line:

node -v

2. Database Design

The warehouse management system requires a database to store logistics Management related data. In this example, we will need to create a database named "warehouse" and create the following two tables to store data:

Item table (items): used to store all warehoused item information.

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

Logistics table (shipments): used to store all logistics information, including logistics companies, senders, recipients, 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. Back-end development - PHP

Next, we will build the back-end API interface through PHP.

First, create a folder named "api" and create a file named "index.php" in it. In "index.php", we will create the following API interfaces:

Get all item information:

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

Create new items:

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

Get all logistics information ：

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

Create new logistics information:

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

You also need to create a file named "config.php" in the "api" folder, which is used to configure database connection information:

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

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

4. Front-end development - Vue

Now, we will use Vue to develop the front-end interface.

Create a folder named "frontend" in the root directory of the project and enter the folder through the command line.
First, install Vue CLI. Run the following command in the command line:

npm install -g @vue/cli

Create a new Vue project. Run the following command in the command line and configure according to the prompts:

vue create warehouse-management

Enter the directory of the newly created Vue project. Run the following command on the command line:

cd warehouse-management

Install the required dependencies. Run the following command in the command line:

npm install

Create a folder named "components" in the "src" folder and create the following components in it:

Item list Component (ItemList.vue):

<template>
  <div>
    <h2 id="物品列表">物品列表</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 id="添加新物品">添加新物品</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>

Shipment List Component (ShipmentList.vue):

<template>
  <div>
    <h2 id="物流列表">物流列表</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 id="添加新物流">添加新物流</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>

Open the "App.vue" file in the "src" folder and add the following code to Corresponding location of the file:

<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>

So far, we have completed the sample code for developing logistics management functions of warehouse management using PHP and Vue. You can start the front-end development server by running the "npm run serve" command, and visit "http://localhost:8080" in the browser to view the project effect. At the same time, you also need to run the PHP development server to make the API interface effective.

Hope the above examples can help you understand how to use PHP and Vue to develop logistics management functions for warehouse management. Of course, this is just a simple example, and you can expand and optimize the function according to actual needs. Good luck with your development!

The above is the detailed content of How to use PHP and Vue to develop logistics management functions for warehouse management. For more information, please follow other related articles on the PHP Chinese website!