PHP와 Vue를 사용하여 창고 관리의 판매 관리 기능을 구현하는 방법
- PHPz원래의
- 2023-09-24 11:19:411191검색
PHP 및 Vue를 사용하여 창고 관리의 영업 관리 기능을 구현하는 방법
소개:
창고 관리의 영업 관리 기능은 기업의 일상 운영에 없어서는 안될 부분입니다. 이 기사에서는 PHP와 Vue를 기반으로 이 두 기술을 사용하여 간단한 창고 관리 시스템에서 판매 관리 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.
1. 프로젝트 준비
코드 작성을 시작하기 전에 몇 가지 준비를 해야 합니다.
- PHP 개발 환경이 설치되어 있고 PHP 개발에 대한 기본 지식이 있는지 확인하세요.
- Vue 개발 환경이 설치되어 있고 기본 Vue 개발 지식이 있는지 확인하세요.
- 새 PHP 프로젝트를 만들고 폴더를 만드세요. 판매 관리 기능의 저장 위치로 프로젝트에서 "sales"라는 이름을 지정합니다.
- 판매 관리 요청을 처리하려면 "sales" 폴더 아래에 "index.php"라는 파일을 만듭니다. ;
- "app.js라는 파일을 만듭니다. " Vue의 프런트엔드 코드를 작성하기 위한 "sales" 폴더에 있습니다.
2. 백엔드 코드 작성
먼저 백엔드 로직을 처리할 PHP 코드를 작성해야 합니다.
-
"index.php" 파일에 다음 코드를 추가합니다.
<?php // 1. 连接数据库 $db_host = "localhost"; $db_username = "root"; $db_password = ""; $db_name = "sales_db"; $conn = mysqli_connect($db_host, $db_username, $db_password, $db_name); if (!$conn) { die("数据库连接失败：" . mysqli_connect_error()); } // 2. 处理获取销售列表的请求 if ($_SERVER["REQUEST_METHOD"] == "GET") { $sql = "SELECT * FROM sales"; $result = mysqli_query($conn, $sql); $sales = array(); if (mysqli_num_rows($result) > 0) { while ($row = mysqli_fetch_assoc($result)) { array_push($sales, $row); } } echo json_encode($sales); } // 3. 处理添加销售记录的请求 if ($_SERVER["REQUEST_METHOD"] == "POST") { $product_name = $_POST["product_name"]; $quantity = $_POST["quantity"]; $price = $_POST["price"]; $sql = "INSERT INTO sales (product_name, quantity, price) VALUES ('$product_name', $quantity, $price)"; if (mysqli_query($conn, $sql)) { echo "销售记录添加成功！"; } else { echo "销售记录添加失败：" . mysqli_error($conn); } } // 4. 关闭数据库连接 mysqli_close($conn); ?>
위 코드는 다음 기능을 구현합니다.
- 데이터베이스에 연결
- 판매 목록을 얻기 위해 요청을 처리합니다.
- 판매기록 추가 요청을 처리합니다.
3. 프런트엔드 코드 작성
다음으로 Vue용 프런트엔드 코드를 작성해야 합니다.
-
"app.js" 파일에 다음 코드를 추가하세요.
new Vue({ el: '#app', data: { sales: [], product_name: '', quantity: '', price: '' }, methods: { getSales: function() { axios.get('sales/index.php') .then(response => { this.sales = response.data; }) .catch(error => { console.log(error); }); }, addSale: function() { axios.post('sales/index.php', { product_name: this.product_name, quantity: this.quantity, price: this.price }) .then(response => { alert(response.data); this.getSales(); }) .catch(error => { console.log(error); }); } }, mounted: function() { this.getSales(); } });
위 코드는 다음 기능을 구현합니다.
- 판매 목록 가져오기
- 판매 기록 추가.
4. 페이지 표시
마지막으로 페이지에 판매관리 기능을 표시해야 합니다.
-
"index.php" 파일의 HTML 섹션에 다음 코드를 추가합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>销售管理</title> </head> <body> <div id="app"> <h1>销售管理</h1> <table> <thead> <tr> <th>产品名称</th> <th>数量</th> <th>价格</th> </tr> </thead> <tbody> <tr v-for="sale in sales" :key="sale.id"> <td>{{ sale.product_name }}</td> <td>{{ sale.quantity }}</td> <td>{{ sale.price }}</td> </tr> </tbody> </table> <form @submit.prevent="addSale"> <input type="text" v-model="product_name" placeholder="产品名称" required> <input type="number" v-model="quantity" placeholder="数量" required> <input type="number" v-model="price" placeholder="价格" required> <button type="submit">添加销售记录</button> </form> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="app.js"></script> </body> </html>
위 코드는 판매 기록을 표시하는 테이블과 판매 기록을 추가하는 양식을 포함한 간단한 판매 관리 페이지를 구현합니다. .
5. 요약
PHP와 Vue 기술을 이용하여 창고관리의 판매관리 기능을 성공적으로 구현했습니다. PHP는 백엔드 로직을 처리하고, 데이터베이스에 연결하고, 프런트엔드 호출을 위한 API를 제공하는 데 사용됩니다. Vue는 프런트엔드 페이지 표시 및 상호 작용 로직을 작성하는 데 사용됩니다. 이 간단한 예제 코드는 보다 복잡한 창고 관리 시스템을 작성하기 위한 참조 및 시작점 역할을 할 수 있습니다. 이 글이 여러분의 공부와 실천에 도움이 되기를 바랍니다!
위 내용은 PHP와 Vue를 사용하여 창고 관리의 판매 관리 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!