Rumah > Artikel > pembangunan bahagian belakang > Cara menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan jualan pengurusan gudang

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan jualan pengurusan gudang

PHPzasal: 2023-09-24 11:19:411191semak imbas

Pengenalan:
Fungsi pengurusan jualan bagi pengurusan gudang ialah perusahaan Bahagian penting dalam operasi harian. Artikel ini akan berdasarkan PHP dan Vue, memperkenalkan cara menggunakan kedua-dua teknologi ini untuk melaksanakan fungsi pengurusan jualan dalam sistem pengurusan gudang mudah, dan menyediakan contoh kod khusus.

1. Penyediaan projek
Sebelum kita mula menulis kod, kita perlu melakukan beberapa kerja penyediaan.

Pastikan anda telah memasang persekitaran pembangunan PHP dan mempunyai pengetahuan asas pembangunan PHP;
Pastikan anda telah memasang persekitaran pembangunan Vue dan mempunyai pengetahuan asas Pengetahuan asas pembangunan Vue;
Buat projek PHP baharu dan cipta folder bernama "jualan" dalam projek sebagai lokasi storan untuk fungsi pengurusan jualan;
Buat fail bernama fail "app. js", digunakan untuk menulis kod bahagian hadapan Vue.

2. Penulisan kod belakang

Pertama, kita perlu menulis kod PHP untuk mengendalikan logik bahagian belakang.

Dalam fail "index.php", tambahkan kod berikut:

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

?>

Kod di atas dilaksanakan Fungsi berikut:

mengendalikan permintaan untuk mendapatkan senarai jualan; rekod jualan.
3 Penulisan kod bahagian hadapan

Dalam fail "app.js", tambah kod berikut:

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

Kod di atas dilaksanakan Fungsi berikut:

Dapatkan senarai jualan;

4. Paparan halaman

Dalam bahagian HTML fail "index.php", tambahkan kod berikut:

<!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. Ringkasan
Dengan menggunakan teknologi PHP dan Vue, kami berjaya melaksanakan fungsi pengurusan jualan pengurusan gudang. PHP digunakan untuk memproses logik bahagian belakang, menyambung ke pangkalan data, dan menyediakan API untuk panggilan bahagian hadapan Vue digunakan untuk menulis paparan halaman hadapan dan logik interaksi. Kod contoh mudah ini boleh menjadi rujukan dan titik permulaan untuk anda menulis sistem pengurusan gudang yang lebih kompleks. Saya harap artikel ini berguna untuk kajian dan latihan anda!

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan jualan pengurusan gudang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php html JS 数据库

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk melaksanakan sistem lelongan dalam talian yang mudah menggunakan PHPArtikel seterusnya：Bagaimana untuk melaksanakan sistem lelongan dalam talian yang mudah menggunakan PHP

Artikel berkaitan

Lihat lagi