How to use PHP and Vue to develop cargo tracking functions for warehouse management

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

Introduction:
With the rapid development of e-commerce, warehouse management has become a very important link. In order to improve the efficiency and accuracy of warehouse management, it is necessary to develop a cargo tracking system. This article will introduce how to use PHP and Vue to develop the cargo tracking function of warehouse management, and give specific code examples.

1. Technical preparation
Before starting development, we need to prepare the following technologies and tools:

• PHP: Server-side programming language
• Vue: JavaScript framework for building user interfaces
• MySQL: Relational database for saving data
• XAMPP: Development environment integrating Apache, MySQL and PHP

2. Database design
Before starting to write code, we need to design the database structure. Considering the needs of warehouse management, we need to create the following tables:

• Goods table: stores information about goods, including goods ID, name, description and other fields
• Warehouse table: Store warehouse information, including warehouse ID, name, address and other fields
• Goods warehouse association table: establish the association between goods and warehouses, store the quantity of goods in each warehouse, storage time and other information

3. Back-end development

1. Create database connection
   We first need to create a connection to the database in PHP. You can use the functions provided by the mysqli extension library to achieve this:

   $servername = "localhost";
   $username = "root";
   $password = "";
   $dbname = "warehouse_management";
   
   // 创建数据库连接
   $conn = new mysqli($servername, $username, $password, $dbname);
   
   // 检查连接是否成功
   if ($conn->connect_error) {
    die("连接数据库失败: " . $conn->connect_error);
   }

   Copy after login
2. Create API interface
   We need to create a series of API interfaces to process requests sent by the front end and return corresponding data. The following are some common API interface examples:

3. Get all warehouse information:

   $app->get('/warehouses', function () use ($app, $conn) {
    $sql = "SELECT * FROM warehouses";
    $result = $conn->query($sql);
   
    $warehouses = array();
   
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            $warehouses[] = $row;
        }
    }
   
    $app->response->headers->set('Content-Type', 'application/json');
    echo json_encode($warehouses);
   });

   Copy after login

• Get the goods information of the specified warehouse:

  $app->get('/warehouses/:id/goods', function ($id) use ($app, $conn) {
    $sql = "SELECT * FROM goods_warehouses WHERE warehouse_id = $id";
    $result = $conn->query($sql);
  
    $goods = array();
  
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            $goods[] = $row;
        }
    }
  
    $app->response->headers->set('Content-Type', 'application/json');
    echo json_encode($goods);
  });

  Copy after login

• Add new goods to the specified warehouse:

  $app->post('/warehouses/:id/goods', function ($id) use ($app, $conn) {
    $request = json_decode($app->request->getBody());
  
    $name = $request->name;
    $description = $request->description;
    $quantity = $request->quantity;
    $date = date('Y-m-d H:i:s');
  
    $sql = "INSERT INTO goods_warehouses (warehouse_id, name, description, quantity, date) VALUES ($id, '$name', '$description', $quantity, '$date')";
  
    if ($conn->query($sql) === TRUE) {
        $response = array('status' => 'success');
    } else {
        $response = array('status' => 'error', 'message' => $conn->error);
    }
  
    $app->response->headers->set('Content-Type', 'application/json');
    echo json_encode($response);
  });

  Copy after login

• Update the quantity of goods:

  $app->put('/goods/:id/quantity', function ($id) use ($app, $conn) {
    $quantity = json_decode($app->request->getBody());
  
    $sql = "UPDATE goods_warehouses SET quantity = $quantity WHERE id = $id";
  
    if ($conn->query($sql) === TRUE) {
        $response = array('status' => 'success');
    } else {
        $response = array('status' => 'error', 'message' => $conn->error);
    }
  
    $app->response->headers->set('Content-Type', 'application/json');
    echo json_encode($response);
  });

  Copy after login

4. Front-end development

1. Create Vue application
   We need to use Vue to build the user interface. First, you need to introduce the Vue library in HTML and create a Vue instance:

   <!DOCTYPE html>
   <html lang="en">
   <head>
    <meta charset="UTF-8">
    <title>仓库管理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>
    <div id="app">
        <!-- 在这里编写Vue模板代码 -->
    </div>
    
    <script src="js/app.js"></script>
   </body>
   </html>

   Copy after login
2. Send API request
   We need to send an API request in the Vue instance and process the returned data. The following are some commonly used code examples:

3. Get all warehouse information:

   var app = new Vue({
    el: '#app',
    data: {
        warehouses: []
    },
    mounted() {
        axios.get('/api/warehouses')
            .then(response => {
                this.warehouses = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    }
   });

   Copy after login

• Get the goods information of the specified warehouse:

  var app = new Vue({
    el: '#app',
    data: {
        goods: []
    },
    mounted() {
        var id = 1; // 仓库ID
  
        axios.get('/api/warehouses/' + id + '/goods')
            .then(response => {
                this.goods = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    }
  });

  Copy after login

• Add new goods to the specified warehouse:

  var app = new Vue({
    el: '#app',
    data: {
        name: '',
        description: '',
        quantity: ''
    },
    methods: {
        addGoods() {
            var id = 1; // 仓库ID
  
            axios.post('/api/warehouses/' + id + '/goods', {
                name: this.name,
                description: this.description,
                quantity: this.quantity
            })
            .then(response => {
                console.log(response.data);
            })
            .catch(error => {
                console.log(error);
            });
        }
    }
  });

  Copy after login

• Update the quantity of goods:

  var app = new Vue({
    el: '#app',
    data: {
        goodsId: '',
        quantity: ''
    },
    methods: {
        updateQuantity() {
            axios.put('/api/goods/' + this.goodsId + '/quantity', this.quantity)
                .then(response => {
                    console.log(response.data);
                })
                .catch(error => {
                    console.log(error);
                });
        }
    }
  });

  Copy after login

五, Summary
By using PHP and Vue development, we can easily implement the cargo tracking function of warehouse management. PHP provides the ability to interact with the database, and Vue can help us build user interfaces and send API requests. This article gives some specific code examples, hoping to be helpful to your development work. Happy development!

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