PHP와 Vue를 사용하여 창고 관리를 위한 화물 추적 기능을 개발하는 방법-PHP 튜토리얼-php.cn

PHP와 Vue를 사용하여 창고 관리를 위한 화물 추적 기능을 개발하는 방법

WBOY

풀어 주다： 2023-09-24 09:12:01

원래의

1409명이 탐색했습니다.

PHP와 Vue를 사용하여 창고 관리를 위한 화물 추적 기능을 개발하는 방법

PHP와 Vue를 사용하여 창고 관리의 화물 추적 기능을 개발하는 방법

소개:
전자 상거래의 급속한 발전으로 창고 관리는 매우 중요한 연결 고리가 되었습니다. 창고관리의 효율성과 정확성을 높이기 위해서는 화물추적시스템의 개발이 필요하다. 이 기사에서는 PHP와 Vue를 사용하여 창고 관리의 화물 추적 기능을 개발하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 기술적 준비
개발을 시작하기 전에 다음 기술과 도구를 준비해야 합니다.

PHP: 서버 측 프로그래밍 언어
Vue: 사용자 인터페이스 구축을 위한 JavaScript 프레임워크
MySQL: 데이터 저장을 위한 관계형 데이터베이스
XAMPP: Apache, MySQL, PHP를 통합한 개발 환경

2. 데이터베이스 설계
코드 작성을 시작하기 전에 데이터베이스 구조를 설계해야 합니다. 창고 관리의 필요성을 고려하여 다음 테이블을 생성해야 합니다.

Cargo 테이블: 상품 ID, 이름, 설명 및 기타 필드를 포함하여 상품에 대한 정보를 저장합니다.
Warehouse 테이블: 창고 ID를 포함하여 창고에 대한 정보를 저장합니다. 이름, 주소 및 기타 필드
상품 창고 연관 테이블: 상품과 창고 간의 연관 설정, 각 창고의 상품 수량, 보관 시간 및 기타 정보 저장

3 백엔드 개발

데이터베이스 생성 연결
먼저 PHP에서 데이터베이스에 대한 연결을 만들어야 합니다. 이는 mysqli 확장 라이브러리에서 제공하는 기능을 사용하여 달성할 수 있습니다:

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

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

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

로그인 후 복사

API 인터페이스 생성
프런트 엔드에서 보낸 요청을 처리하고 해당 데이터를 반환하려면 일련의 API 인터페이스를 생성해야 합니다. 다음은 일반적으로 사용되는 API 인터페이스 예입니다.

모든 창고 정보 가져오기:

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

로그인 후 복사

지정된 창고의 화물 정보 가져오기:

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

로그인 후 복사

지정된 창고에 새 상품 추가:

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

로그인 후 복사

4. 프론트엔드 개발

Vue 애플리케이션 생성
사용자 인터페이스를 구축하려면 Vue를 사용해야 합니다. 먼저 HTML로 Vue 라이브러리를 도입하고 Vue 인스턴스를 생성해야 합니다.

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

로그인 후 복사

Send API request
Vue 인스턴스에서 API 요청을 보내고 반환된 데이터를 처리해야 합니다. 다음은 일반적으로 사용되는 몇 가지 코드 예입니다.

모든 창고 정보 가져오기:

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

로그인 후 복사

지정된 창고의 상품 정보 가져오기:

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

로그인 후 복사

지정된 창고에 새 상품 추가:

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

로그인 후 복사

상품 수량 업데이트:

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

로그인 후 복사

5. 요약
PHP 및 Vue 개발을 사용하여 창고 관리의 화물 추적 기능을 쉽게 구현할 수 있습니다. PHP는 데이터베이스와 상호 작용하는 기능을 제공하며 Vue는 사용자 인터페이스를 구축하고 API 요청을 보내는 데 도움을 줄 수 있습니다. 이 문서에서는 개발 작업에 도움이 되기를 바라는 몇 가지 구체적인 코드 예제를 제공합니다. 행복한 개발!

위 내용은 PHP와 Vue를 사용하여 창고 관리를 위한 화물 추적 기능을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!