Cara menggunakan PHP dan Vue untuk membangunkan fungsi penjejakan kargo untuk pengurusan gudang

Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengesanan kargo pengurusan gudang

Pengenalan:
Dengan perkembangan pesat e-dagang, pengurusan Gudang telah menjadi pautan yang sangat penting. Untuk meningkatkan kecekapan dan ketepatan pengurusan gudang, adalah perlu untuk membangunkan sistem pengesanan kargo. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi penjejakan kargo pengurusan gudang dan memberikan contoh kod khusus.

1. Persediaan teknikal
Sebelum memulakan pembangunan, kita perlu menyediakan teknologi dan alatan berikut:

• PHP: Bahasa pengaturcaraan sebelah pelayan# 🎜 🎜#
Vue: Rangka kerja JavaScript untuk membina antara muka pengguna
• MySQL: Pangkalan data perhubungan untuk menyimpan data
• XAMPP: Bersepadu dengan persekitaran pembangunan Apache, MySQL dan PHP 🎜🎜#
• 2. Reka bentuk pangkalan data

Sebelum mula menulis kod, kita perlu mereka bentuk struktur pangkalan data. Memandangkan keperluan pengurusan gudang, kita perlu membuat jadual berikut:

Jadual kargo: menyimpan maklumat tentang barangan, termasuk ID barang, nama, keterangan dan medan lain

# 🎜 🎜#Jadual gudang: menyimpan maklumat gudang, termasuk ID gudang, nama, alamat dan medan lain
• Jadual persatuan gudang barang: mewujudkan perkaitan antara barang dan gudang, menyimpan kuantiti barang di setiap gudang, Maklumat seperti masa penyimpanan
• 3. Pembangunan bahagian belakang

Buat sambungan pangkalan data

Kita perlu terlebih dahulu buat sambungan pangkalan data dalam PHP Buat sambungan ke pangkalan data. Ini boleh dicapai menggunakan fungsi yang disediakan oleh perpustakaan sambungan mysqli:

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

   
   Cipta antara muka API

   Kita perlu mencipta satu siri antara muka API untuk memproses permintaan yang dihantar oleh bahagian hadapan tamat dan kembalikan data respons yang sepadan. Berikut ialah beberapa contoh antara muka API yang biasa digunakan:
2. 
   Dapatkan semua maklumat gudang:

$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);
});

3. #🎜🎜🎜🎜 🎜 #Dapatkan maklumat barang dari gudang yang ditetapkan:

$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);
});

• Tambahkan barang baharu ke gudang yang ditetapkan:

  $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);
  });

  $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);
  });

  #🎜🎜🎜##🎜 🎜🎜#Kemas kini Kuantiti barangan:

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

• 4. Pembangunan bahagian hadapan
• #🎜🎜🎜#

  🎜🎜#🎜

  Kami memerlukan Gunakan Vue untuk membina antara muka pengguna. Mula-mula, anda perlu memperkenalkan perpustakaan Vue dalam HTML dan mencipta contoh Vue:

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

Hantar permintaan API

Kami perlu menghantar permintaan API dalam contoh Vue dan memproses data yang dikembalikan. Berikut ialah beberapa contoh kod yang biasa digunakan:

1. Dapatkan semua maklumat gudang:
   

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

2. #🎜🎜🎜##🎜🎜 # Dapatkan maklumat barang dari gudang yang ditetapkan:
   

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

3. Tambah barang baharu ke gudang yang ditetapkan:

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

#🎜🎜 🎜#Kemas kini barangan Kuantiti:

rrreee

• 5. Ringkasan
Dengan menggunakan pembangunan PHP dan Vue, kami boleh melaksanakan fungsi pengesanan kargo pengurusan gudang dengan mudah. PHP menyediakan keupayaan untuk berinteraksi dengan pangkalan data, dan Vue boleh membantu kami membina antara muka pengguna dan menghantar permintaan API. Artikel ini memberikan beberapa contoh kod khusus, dengan harapan dapat membantu kerja pembangunan anda. Perkembangan yang menggembirakan!

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membangunkan fungsi penjejakan kargo untuk pengurusan gudang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!