如何使用PHP和Vue開發倉庫管理的快速搜尋功能-php教程-PHP中文網

如何使用PHP和Vue開發倉庫管理的快速搜尋功能

WBOY

發布： 2023-09-25 08:16:02

原創

1216 人瀏覽過

如何使用PHP和Vue開發倉庫管理的快速搜尋功能

在現代化的倉庫管理系統中，快速搜尋功能是至關重要的。它能夠幫助使用者快速找到所需的倉庫訊息，提高工作效率。本文將介紹如何使用PHP和Vue開發倉庫管理系統中的快速搜尋功能，並提供具體的程式碼範例。

開發環境準備

在開始之前，確保你已經安裝了以下軟體：

PHP 伺服器環境（如Apache或Nginx )
MySQL 資料庫
Vue.js 的開發環境

建立資料庫和資料表

首先，我們需要建立一個用於儲存倉庫資訊的資料表。在MySQL資料庫中執行以下SQL語句：

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

登入後複製

以上程式碼建立了一個名為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請求搜尋倉儲資料。