Rumah > Artikel > pembangunan bahagian belakang > Cara menggunakan PHP dan Vue untuk membangunkan fungsi carian pantas untuk pengurusan gudang

Cara menggunakan PHP dan Vue untuk membangunkan fungsi carian pantas untuk pengurusan gudang

WBOYasal: 2023-09-25 08:12:431159semak imbas

Dalam sistem pengurusan gudang moden, fungsi carian pantas adalah penting. Ia boleh membantu pengguna mencari maklumat gudang yang diperlukan dengan cepat dan meningkatkan kecekapan kerja. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi carian pantas dalam sistem pengurusan gudang, dan menyediakan contoh kod khusus.

Persediaan persekitaran pembangunan

Sebelum anda mula, pastikan anda telah memasang perisian berikut:

Persekitaran pelayan PHP (seperti Apache atau Nginx)
Pangkalan data MySQL

Vue Penciptaan Pangkalan Data dan Jadual Data

Pertama, kita perlu mencipta jadual data untuk menyimpan maklumat gudang. Laksanakan pernyataan SQL berikut dalam pangkalan data MySQL:

CREATE DATABASE IF NOT EXISTS `repository_management`;
USE `repository_management`;

CREATE TABLE `repositories` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(255) NOT NULL,
  `description` TEXT,
  `location` VARCHAR(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `repositories` (`name`, `description`, `location`) VALUES
  ('仓库A', '这是仓库A的描述', '地点A'),
  ('仓库B', '这是仓库B的描述', '地点B'),
  ('仓库C', '这是仓库C的描述', '地点C');

Kod di atas mencipta pangkalan data bernama repository_management, dan mencipta jadual data bernama repositori di dalamnya, dan memasukkan beberapa sampel data. repository_management的数据库，并在其中创建了一个名为repositories的数据表，并插入了一些示例数据。

后端开发

接下来，我们将使用PHP来开发后端API，用于提供仓库数据和搜索功能。创建一个名为api.php的文件，将其放在服务器的Web根目录下。

<?php

header('Content-Type: application/json');

// 连接数据库
$servername = 'localhost';
$username = '数据库用户名';
$password = '数据库密码';
$dbname = 'repository_management';

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die('连接失败: ' . $conn->connect_error);
}

// 获取仓库列表
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
    $sql = 'SELECT * FROM `repositories`';
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        $repositories = array();
        while ($row = $result->fetch_assoc()) {
            $repositories[] = $row;
        }
        echo json_encode($repositories);
    } else {
        echo '[]';
    }
}

// 搜索仓库
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $searchTerm = $_POST['term'];
    $sql = "SELECT * FROM `repositories` WHERE `name` LIKE '%$searchTerm%'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        $repositories = array();
        while ($row = $result->fetch_assoc()) {
            $repositories[] = $row;
        }
        echo json_encode($repositories);
    } else {
        echo '[]';
    }
}

$conn->close();

在上述代码中，我们首先建立与数据库的连接，然后定义两个接口：获取仓库列表和搜索仓库。获取仓库列表接口通过执行SQL语句SELECT * FROM repositories从数据库中获取所有仓库数据，并将结果返回为JSON格式的数据。搜索仓库接口则是通过获取从前端传递过来的搜索关键字，执行SQL语句`SELECT * FROM `repositories` WHERE `name` LIKE '%$searchTerm%'来进行模糊搜索，并将结果返回为JSON格式的数据。

请记得将代码中的数据库用户名和数据库密码替换为你自己的实际数据库用户名和密码。

前端开发

接下来，我们将使用Vue.js来开发前端页面，用于展示仓库信息和搜索功能。创建一个名为index.html的文件，并将其放在服务器的Web根目录下。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>仓库管理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <h1>仓库管理系统</h1>
        <input type="text" v-model="searchTerm" placeholder="输入关键字搜索仓库">
        <ul>
            <li v-for="repository in repositories">{{ repository.name }}（{{ repository.location }}）</li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                repositories: [],
                searchTerm: ''
            },
            mounted: function () {
                this.getRepositories();
            },
            methods: {
                getRepositories: function () {
                    fetch('api.php')
                        .then(function(response) {
                            return response.json();
                        })
                        .then(function(repositories) {
                            this.repositories = repositories;
                        }.bind(this))
                        .catch(function(error) {
                            console.log(error);
                        });
                },
                searchRepositories: function () {
                    fetch('api.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        body: 'term=' + this.searchTerm
                    })
                        .then(function(response) {
                            return response.json();
                        })
                        .then(function(repositories) {
                            this.repositories = repositories;
                        }.bind(this))
                        .catch(function(error) {
                            console.log(error);
                        });
                }
            },
            watch: {
                searchTerm: function () {
                    this.searchRepositories();
                }
            }
        });
    </script>
</body>
</html>

在上述代码中，我们创建了一个Vue实例，并在data属性中定义了两个变量：repositories（用于存储仓库数据）和searchTerm（用于存储搜索关键字）。在mounted生命周期钩子中，我们调用getRepositories方法来从后端获取仓库数据，并将其赋值给repositories变量。getRepositories方法使用了fetch函数来发送GET请求。

在模板中，我们使用了v-for指令来遍历repositories变量，并将每个仓库的名称和位置显示在页面上。输入框中使用了v-model指令将输入的内容和searchTerm变量进行了双向绑定。在输入框内容发生变化时，watch属性中的searchTerm监听到变化后，自动调用searchRepositories方法来发送POST请求搜索仓库数据。

运行和测试

将上述代码保存后，启动你的Web服务器，并在浏览器中打开index.html

api.php

SELECT * FROM

 dan mengembalikan hasilnya sebagai data dalam format JSON. Antara muka gudang carian melakukan carian kabur dengan mendapatkan kata kunci carian yang diluluskan dari bahagian hadapan, melaksanakan pernyataan SQL `PILIH * DARI `repositori` DI MANA `nama` SEPERTI '%$searchTerm%'

Nama Pengguna Pangkalan Data

Kata Laluan Pangkalan Data

index.html

data

repositori

searchTerm (digunakan untuk menyimpan kata kunci carian). Dalam cangkuk kitaran hayat <code>dipasang

getRepositories

repositori

getRepositories

fetch

v-for

repositori

v-model

searchTerm

watch

searchRepositories

index.html

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

php sql mysql nginx json html for select 接口 JS 数据库 apache

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：Cara menggunakan PHP untuk membangunkan fungsi halaman data yang mudahArtikel seterusnya：Cara menggunakan PHP untuk membangunkan fungsi halaman data yang mudah

Artikel berkaitan

Lihat lagi