찾다

집  >  기사  >  백엔드 개발  >  PHP와 Vue를 사용하여 창고 관리를 위한 공급업체 관리 기능을 개발하는 방법

PHP와 Vue를 사용하여 창고 관리를 위한 공급업체 관리 기능을 개발하는 방법

WBOY
WBOY원래의
2023-09-26 16:51:11997검색

PHP와 Vue를 사용하여 창고 관리를 위한 공급업체 관리 기능을 개발하는 방법

제목: PHP와 Vue를 사용하여 창고 관리를 위한 공급업체 관리 기능 개발

머리말:
현대 기업에서 창고 관리와 공급업체 관리는 매우 중요한 연결 고리입니다. 창고 관리는 품목의 입출고, 재고 등의 작업을 포함하는 반면, 공급업체 관리는 추가, 편집, 삭제, 조회 등의 기능을 포함하여 공급업체 정보를 관리하는 것을 의미합니다. 이 기사에서는 PHP와 Vue를 사용하여 창고 관리의 공급자 관리 기능을 개발하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 환경 준비

  1. 필수 도구: PHP, Vue.js, MySQL 등
  2. 관련 PHP 확장(예: PDO 확장) 및 Vue.js 플러그인(예: axios) 설치 필요

2. 데이터베이스 설계
MySQL 데이터베이스에 창고와 공급업체라는 두 개의 테이블을 만듭니다.
창고 테이블은 창고 ID, 창고 이름, 창고 주소 및 기타 필드를 포함한 창고 정보를 저장하는 데 사용됩니다.
공급업체 테이블은 공급업체 ID, 공급업체 이름, 담당자, 연락처 번호 및 기타 필드를 포함한 공급업체 정보를 저장하는 데 사용됩니다.

3. 백엔드 개발

  1. 공급업체 관련 요청을 처리하려면 공급자.php라는 PHP 파일을 만듭니다.

  2. 공급업체 목록을 가져오는 코드를 작성하고, PDO를 사용하여 데이터베이스에 연결하고, SQL 문을 실행하여 공급업체 목록 정보를 가져옵니다. 결과를 JSON 형식으로 프런트 엔드에 반환합니다.
    샘플 코드는 다음과 같습니다. 

    <?php
// 获取供应商列表
$db = new PDO("mysql:host=localhost;dbname=test", "username", "password");
$stmt = $db->prepare("SELECT * FROM supplier");
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($result);
?>

  3. 공급업체를 추가하는 코드를 작성하면 프런트엔드는 POST 요청을 통해 공급업체 정보를 공급자.php로 보내고, 백엔드는 데이터베이스에 데이터를 삽입합니다.
    샘플 코드는 다음과 같습니다. 

    <?php
// 添加供应商
$db = new PDO("mysql:host=localhost;dbname=test", "username", "password");
$stmt = $db->prepare("INSERT INTO supplier (name, contact, phone) VALUES (?, ?, ?)");
$stmt->bindParam(1, $_POST['name']);
$stmt->bindParam(2, $_POST['contact']);
$stmt->bindParam(3, $_POST['phone']);
$stmt->execute();
?>

  4. 공급업체를 편집하는 코드를 작성합니다. 프런트엔드는 POST 요청을 통해 공급업체 정보를 공급자.php로 보내고, 백엔드는 이에 따라 데이터베이스의 해당 데이터를 업데이트합니다. 공급업체 ID에
    샘플 코드는 다음과 같습니다. 

    <?php
// 编辑供应商
$db = new PDO("mysql:host=localhost;dbname=test", "username", "password");
$stmt = $db->prepare("UPDATE supplier SET name=?, contact=?, phone=? WHERE id=?");
$stmt->bindParam(1, $_POST['name']);
$stmt->bindParam(2, $_POST['contact']);
$stmt->bindParam(3, $_POST['phone']);
$stmt->bindParam(4, $_POST['id']);
$stmt->execute();
?>

  5. 프런트엔드에서는 공급자 ID를 POST 요청을 통해supply.php로 보내고, 백엔드는 해당 데이터를 데이터베이스에서 삭제합니다. 공급업체 ID를 기준으로 합니다.
    샘플 코드는 다음과 같습니다. 

    <?php
// 删除供应商
$db = new PDO("mysql:host=localhost;dbname=test", "username", "password");
$stmt = $db->prepare("DELETE FROM supplier WHERE id=?");
$stmt->bindParam(1, $_POST['id']);
$stmt->execute();
?>

4. 프론트엔드 개발

  1. Vue.js 프로젝트에서 공급자 관리 컴포넌트를 생성하고 이름을 ManufacturerManagement.vue로 지정합니다.

  2. 이 구성 요소에서는 axios를 사용하여 공급자 목록을 가져오는 요청을 보내고 변수 공급자에 데이터를 저장합니다.
    샘플 코드는 다음과 같습니다. 

    <template>
  <div>
    <table>
      <tr v-for="supplier in suppliers" :key="supplier.id">
        <td>{{ supplier.name }}</td>
        <td>{{ supplier.contact }}</td>
        <td>{{ supplier.phone }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      suppliers: []
    };
  },
  mounted() {
    axios.get('supplier.php').then(response => {
      this.suppliers = response.data;
    });
  }
};
</script>

  3. 컴포넌트에 공급자 추가, 편집, 삭제 기능을 추가합니다. axios를 통해 POST 요청을 보내면 해당 데이터가 공급자.php로 전송됩니다.
    샘플 코드는 다음과 같습니다. 

    <template>
  <div>
    <!-- 添加供应商 -->
    <input type="text" v-model="name" placeholder="供应商名称">
    <input type="text" v-model="contact" placeholder="联系人">
    <input type="text" v-model="phone" placeholder="联系电话">
    <button @click="addSupplier">添加供应商</button>
    <!-- 编辑供应商 -->
    <input type="text" v-model="editName" placeholder="供应商名称">
    <input type="text" v-model="editContact" placeholder="联系人">
    <input type="text" v-model="editPhone" placeholder="联系电话">
    <button @click="editSupplier">编辑供应商</button>
    <!-- 删除供应商 -->
    <input type="text" v-model="deleteId" placeholder="供应商ID">
    <button @click="deleteSupplier">删除供应商</button>
    <!-- 展示供应商列表 -->
    <table>
      <tr v-for="supplier in suppliers" :key="supplier.id">
        <td>{{ supplier.name }}</td>
        <td>{{ supplier.contact }}</td>
        <td>{{ supplier.phone }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      name: '',
      contact: '',
      phone: '',
      editName: '',
      editContact: '',
      editPhone: '',
      deleteId: '',
      suppliers: []
    };
  },
  mounted() {
    this.getSuppliers();
  },
  methods: {
    getSuppliers() {
      axios.get('supplier.php').then(response => {
        this.suppliers = response.data;
      });
    },
    addSupplier() {
      axios.post('supplier.php', {
        name: this.name,
        contact: this.contact,
        phone: this.phone
      }).then(response => {
        this.getSuppliers();
      });
    },
    editSupplier() {
      axios.post('supplier.php', {
        id: this.editId,
        name: this.editName,
        contact: this.editContact,
        phone: this.editPhone
      }).then(response => {
        this.getSuppliers();
      });
    },
    deleteSupplier() {
      axios.post('supplier.php', {
        id: this.deleteId
      }).then(response => {
        this.getSuppliers();
      });
    }
  }
};
</script>

    위는 창고 관리의 공급자 관리 기능을 개발하기 위해 PHP와 Vue를 사용하는 구체적인 코드 예제입니다. 이러한 샘플 코드를 통해 공급업체 추가, 편집, 삭제, 조회 등의 기능을 구현하고 창고 관리의 효율성과 정확성을 높일 수 있습니다. 물론 이는 단순한 예시일 뿐 실제 개발에서는 일부 기능이나 개선 사항이 추가될 필요가 있을 수 있다. 이 기사가 도움이 되기를 바랍니다!

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

php sql mysql json pdo JS 数据库 axios
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：PHP와 Vue를 사용하여 창고 관리의 창고 레이아웃 관리 기능을 구현하는 방법다음 기사：PHP와 Vue를 사용하여 창고 관리의 창고 레이아웃 관리 기능을 구현하는 방법

관련 기사

더보기