집 > 기사 > 백엔드 개발 > PHP와 Vue를 사용하여 창고 관리를 위한 빠른 검색 기능을 개발하는 방법

PHP와 Vue를 사용하여 창고 관리를 위한 빠른 검색 기능을 개발하는 방법

WBOY원래의: 2023-09-25 08:12:431158검색

현대 창고 관리 시스템에서는 빠른 검색 기능이 매우 중요합니다. 이를 통해 사용자는 필요한 창고 정보를 신속하게 찾고 업무 효율성을 높일 수 있습니다. 이 기사에서는 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라는 데이터 테이블을 생성하고 몇 가지 샘플을 삽입합니다. 데이터. 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

를 실행하여 데이터베이스에서 모든 웨어하우스 데이터를 얻고 결과를 JSON 형식의 데이터로 반환합니다. 검색 웨어하우스 인터페이스는 프런트 엔드에서 전달된 검색 키워드를 얻고, SQL 문 `SELECT * FROM `repositories` WHERE `name` LIKE '%$searchTerm%'

데이터베이스 사용자 이름

데이터베이스 비밀번호

index.html

data

repositories

마운트된

getRepositories

repositories

getRepositories

fetch

v-for

repositories

v-model

searchTerm

watch

searchTerm

searchRepositories

index.html

위 내용은 PHP와 Vue를 사용하여 창고 관리를 위한 빠른 검색 기능을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

성명：

이전 기사：PHP를 사용하여 간단한 데이터 페이징 기능을 개발하는 방법다음 기사：PHP를 사용하여 간단한 데이터 페이징 기능을 개발하는 방법