PHP와 Vue를 사용하여 창고 관리의 판매 관리 기능을 구현하는 방법-PHP 튜토리얼-php.cn

PHP와 Vue를 사용하여 창고 관리의 판매 관리 기능을 구현하는 방법

PHPz

풀어 주다： 2023-09-24 11:58:01

원래의

1237명이 탐색했습니다.

PHP와 Vue를 사용하여 창고 관리의 판매 관리 기능을 구현하는 방법

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