찾다

집 >백엔드 개발 >PHP 튜토리얼 >PHP와 Vue를 사용하여 창고 관리를 위한 화물 추적 기능을 개발하는 방법

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

WBOY
WBOY원래의
2023-09-24 08:57:231403검색

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

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

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

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

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

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

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

3 백엔드 개발

  1. 데이터베이스 생성 연결
    먼저 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);
}
  2. API 인터페이스 생성
    프런트 엔드에서 보낸 요청을 처리하고 해당 데이터를 반환하려면 일련의 API 인터페이스를 생성해야 합니다. 다음은 일반적으로 사용되는 API 인터페이스 예입니다.

  3. 모든 창고 정보 가져오기: 

    $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. 프론트엔드 개발

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

  3. 모든 창고 정보 가져오기: 

    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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php JavaScript mysql html mysqli 接口 并发 数据库 apache
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：PHP 마이크로서비스를 사용하여 분산 서비스 모니터링 및 관리를 구현하는 방법다음 기사：PHP 마이크로서비스를 사용하여 분산 서비스 모니터링 및 관리를 구현하는 방법

관련 기사

더보기