Cara menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan lokasi pengurusan gudang-tutorial php-php.cn

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

Pengenalan:
Pengurusan gudang merujuk kepada pengurusan gudang Menjalankan pengurusan barangan yang standard dan cekap. Antaranya, pengurusan lokasi storan adalah bahagian penting dalam pengurusan gudang, yang melibatkan peruntukan, pertanyaan, pelarasan dan fungsi lain lokasi storan. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan lokasi pengurusan gudang dan menyediakan contoh kod khusus.

1. Pemilihan Teknologi
Untuk merealisasikan fungsi pengurusan lokasi pengurusan gudang, kami memilih PHP sebagai bahasa pembangunan bahagian belakang dan menggunakan Vue sebagai rangka kerja bahagian hadapan. PHP ialah bahasa skrip berorientasikan objek dengan perpustakaan dan sambungan yang kaya yang boleh berinteraksi dengan pangkalan data dengan mudah. Vue ialah rangka kerja progresif untuk membina antara muka pengguna. Ia mudah dipelajari dan digunakan, serta mempunyai ciri pengikatan data dan komponenisasi yang cekap.

2. Reka bentuk pangkalan data
Untuk menyokong fungsi pengurusan lokasi, kita perlu mereka bentuk struktur pangkalan data yang sesuai. Sistem pengurusan lokasi mudah boleh mengandungi dua jadual: jadual lokasi (lokasi) dan jadual item (item). Jadual lokasi storan menyimpan semua maklumat lokasi storan dalam gudang, termasuk nombor lokasi storan, jenis lokasi, gudang tempat ia berada dan medan lain. Jadual item menyimpan maklumat item yang disimpan di lokasi storan, termasuk medan seperti nombor item, nama item dan lokasi. Reka bentuk pangkalan data khusus boleh diselaraskan mengikut keperluan sebenar.

3. Pembangunan bahagian belakang

Buat sambungan pangkalan data
Pertama, kita perlu membuat sambungan ke pangkalan data dalam PHP. Anda boleh menggunakan sambungan seperti PDO atau mysqli untuk melaksanakan sambungan pangkalan data, dan berhati-hati untuk menetapkan alamat pangkalan data, nama pengguna dan kata laluan yang betul.

<?php
// 数据库连接配置
$host = "localhost";
$username = "root";
$password = "password";
$database = "warehouse";

// 创建数据库连接
$conn = new mysqli($host, $username, $password, $database);

// 检查连接是否成功
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}
?>

Salin selepas log masuk

Melaksanakan antara muka pengurusan gudang
Seterusnya, kami boleh menggunakan PHP untuk melaksanakan antara muka pengurusan gudang, termasuk menambah, menanya dan melaraskan lokasi gudang dan fungsi lain .

(1) Menambah lokasi gudang
Anda boleh menambah lokasi gudang dengan menulis skrip PHP. Langkah khusus termasuk menerima maklumat lokasi yang diluluskan oleh bahagian hadapan, melaksanakan pernyataan SQL untuk memasukkan maklumat lokasi ke dalam jadual lokasi dan mengembalikan keputusan kejayaan atau kegagalan ke bahagian hadapan.

<?php
// 接收前端传递的库位信息
$locationNumber = $_POST['locationNumber'];
$locationType = $_POST['locationType'];
$warehouse = $_POST['warehouse'];

// 执行SQL语句将库位信息插入到库位表中
$sql = "INSERT INTO location (locationNumber, locationType, warehouse) VALUES ('$locationNumber', '$locationType', '$warehouse')";
$result = $conn->query($sql);

// 返回结果给前端
if ($result) {
    echo "库位添加成功";
} else {
    echo "库位添加失败: " . $conn->error;
}
?>

Salin selepas log masuk

(2) Pertanyaan lokasi storan
Anda boleh menulis skrip PHP untuk merealisasikan fungsi pertanyaan lokasi storan. Langkah khusus termasuk melaksanakan pernyataan SQL untuk menanyakan maklumat lokasi dalam jadual lokasi dan mengembalikan hasil pertanyaan ke bahagian hadapan.

<?php
// 执行SQL语句查询库位表中的库位信息
$sql = "SELECT * FROM location";
$result = $conn->query($sql);

// 返回结果给前端
if ($result->num_rows > 0) {
    $locations = array();
    while ($row = $result->fetch_assoc()) {
        $locations[] = $row;
    }
    echo json_encode($locations);
} else {
    echo "没有查询到库位信息";
}
?>

Salin selepas log masuk

(3) Pelarasan lokasi storan
Anda boleh merealisasikan fungsi pelarasan lokasi storan dengan menulis skrip PHP. Langkah khusus termasuk menerima nombor lokasi dan gudang sasaran yang diluluskan oleh bahagian hadapan, melaksanakan penyata SQL untuk mengemas kini maklumat lokasi dalam jadual lokasi dan mengembalikan hasil kejayaan atau kegagalan ke bahagian hadapan.

<?php
// 接收前端传递的库位编号和目标仓库
$locationNumber = $_POST['locationNumber'];
$targetWarehouse = $_POST['targetWarehouse'];

// 执行SQL语句更新库位表中的库位信息
$sql = "UPDATE location SET warehouse = '$targetWarehouse' WHERE locationNumber = '$locationNumber'";
$result = $conn->query($sql);

// 返回结果给前端
if ($result) {
    echo "库位调整成功";
} else {
    echo "库位调整失败: " . $conn->error;
}
?>

Salin selepas log masuk

4. Pembangunan bahagian hadapan
Apabila menggunakan Vue untuk melaksanakan fungsi pengurusan lokasi pengurusan gudang, kita perlu menulis templat HTML dan komponen Vue untuk melaksanakan fungsi seperti menambah, membuat pertanyaan dan menyesuaikan lokasi.

Templat HTML
Dalam templat HTML, kita boleh menggunakan sintaks templat Vue untuk mengikat data dan acara untuk melaksanakan fungsi seperti menambah, menanya dan melaraskan lokasi storan.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>仓库管理</title>
</head>
<body>
    <div id="app">
        <h2>库位管理</h2>
        <form>
            <input type="text" v-model="locationNumber" placeholder="库位编号">
            <input type="text" v-model="locationType" placeholder="库位类型">
            <input type="text" v-model="warehouse" placeholder="所属仓库">
            <button @click="addLocation">添加库位</button>
        </form>
        <ul>
            <li v-for="location in locations">
                {{ location.locationNumber }} - {{ location.locationType }} - {{ location.warehouse }}
                <input type="text" v-model="targetWarehouse">
                <button @click="adjustLocation(location.locationNumber)">调整库位</button>
            </li>
        </ul>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>

Salin selepas log masuk

Komponen Vue
Dalam komponen Vue, kita perlu menentukan data, kaedah dan cangkuk kitaran hayat untuk melaksanakan fungsi berinteraksi dengan bahagian belakang dan mengemas kini halaman tersebut.

// app.js
new Vue({
    el: '#app',
    data: {
        locationNumber: '',
        locationType: '',
        warehouse: '',
        locations: [],
        targetWarehouse: ''
    },
    methods: {
        addLocation() {
            // 发送POST请求添加库位
            axios.post('addLocation.php', {
                locationNumber: this.locationNumber,
                locationType: this.locationType,
                warehouse: this.warehouse
            }).then(response => {
                alert(response.data);
                this.locationNumber = '';
                this.locationType = '';
                this.warehouse = '';
            }).catch(error => {
                console.error(error);
            });
        },
        adjustLocation(locationNumber) {
            // 发送POST请求调整库位
            axios.post('adjustLocation.php', {
                locationNumber: locationNumber,
                targetWarehouse: this.targetWarehouse
            }).then(response => {
                alert(response.data);
            }).catch(error => {
                console.error(error);
            });
        },
        loadLocations() {
            // 发送GET请求查询库位
            axios.get('getLocations.php').then(response => {
                this.locations = response.data;
            }).catch(error => {
                console.error(error);
            });
        }
    },
    mounted() {
        // 获取并显示库位信息
        this.loadLocations();
    }
});

Salin selepas log masuk

Di atas adalah contoh kod yang berkaitan tentang cara menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan lokasi pengurusan gudang. Antara muka bahagian belakang dilaksanakan melalui PHP untuk melaksanakan fungsi seperti menambah, menanya dan melaraskan lokasi storan, antara muka bahagian hadapan dilaksanakan melalui Vue untuk melaksanakan pengikatan dan interaksi data. Pembaca boleh terus mengoptimumkan dan mengembangkan kod mengikut keperluan sebenar untuk mencapai sistem pengurusan gudang yang lebih lengkap.

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