Cara menggunakan PHP dan Vue untuk membangunkan fungsi penjejakan kargo untuk pengurusan gudang-tutorial php-php.cn

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

WBOY

Lepaskan： 2023-09-24 09:12:01

asal

1350 orang telah melayarinya

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

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "warehouse_management";

// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
 die("连接数据库失败: " . $conn->connect_error);
}

Salin selepas log masuk

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:

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

Hantar permintaan API

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

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

#🎜🎜 🎜#Kemas kini barangan Kuantiti:

5. Ringkasan

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!