développement back-end
tutoriel php
Comment utiliser PHP et Vue pour développer une fonction de recherche rapide pour la gestion d'entrepôt
Comment utiliser PHP et Vue pour développer une fonction de recherche rapide pour la gestion d'entrepôt
Comment utiliser PHP et Vue pour développer une fonction de recherche rapide pour la gestion d'entrepôt
Dans un système de gestion d'entrepôt moderne, la fonction de recherche rapide est cruciale. Il peut aider les utilisateurs à trouver rapidement les informations d'entrepôt requises et à améliorer l'efficacité du travail. Cet article expliquera comment utiliser PHP et Vue pour développer la fonction de recherche rapide dans le système de gestion d'entrepôt et fournira des exemples de code spécifiques.
- Préparation de l'environnement de développement
Avant de commencer, assurez-vous d'avoir installé les logiciels suivants :
- Environnement de serveur PHP (tel qu'Apache ou Nginx)
- Base de données MySQL
- Environnement de développement Vue.js
- Création d'une base de données et de tables de données
Tout d'abord, nous devons créer une table de données pour stocker les informations de l'entrepôt. Exécutez l'instruction SQL suivante dans la base de données 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');Le code ci-dessus crée une base de données nommée repository_management, crée une table de données nommée repositories et y insère un échantillon. données. 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 id="仓库管理系统">仓库管理系统</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
- Développement backend🎜Ensuite, nous utiliserons PHP pour développer l'API backend afin de fournir des données d'entrepôt et des fonctions de recherche. Créez un fichier appelé
api.php et placez-le dans le répertoire racine Web du serveur. 🎜rrreee🎜Dans le code ci-dessus, nous établissons d'abord une connexion avec la base de données, puis définissons deux interfaces : obtenir la liste des entrepôts et rechercher l'entrepôt. L'interface Get Warehouse List obtient toutes les données d'entrepôt de la base de données en exécutant l'instruction SQL SELECT * FROM repositories et renvoie le résultat sous forme de données au format JSON. L'interface de l'entrepôt de recherche effectue une recherche floue en obtenant les mots-clés de recherche transmis depuis le front-end, en exécutant l'instruction SQL `SELECT * FROM `repositories` WHERE `name` LIKE '%$searchTerm%' et en renvoyant les résultats. Les données sont au format JSON. 🎜🎜N'oubliez pas de remplacer Nom d'utilisateur de la base de données et Mot de passe de la base de données dans le code par votre propre nom d'utilisateur et mot de passe de la base de données. 🎜- 🎜Développement front-end🎜🎜🎜Ensuite, nous utiliserons Vue.js pour développer des pages frontales afin d'afficher les informations de l'entrepôt et les fonctions de recherche. Créez un fichier appelé
index.html et placez-le dans le répertoire racine Web du serveur. 🎜rrreee🎜Dans le code ci-dessus, nous créons une instance Vue et définissons deux variables dans l'attribut data : repositories (utilisé pour stocker les données de l'entrepôt) et searchTerm (utilisé pour stocker les mots-clés de recherche). Dans le hook de cycle de vie monté, nous appelons la méthode getRepositories pour obtenir les données de l'entrepôt du backend et les affecter à la variable repositories. La méthode getRepositories utilise la fonction fetch pour envoyer une requête GET. 🎜🎜Dans le modèle, nous utilisons la directive v-for pour parcourir les variables repositories et afficher le nom et l'emplacement de chaque référentiel sur la page. La directive v-model est utilisée dans la zone de saisie pour lier de manière bidirectionnelle le contenu d'entrée à la variable searchTerm. Lorsque le contenu de la zone de saisie change, le searchTerm dans l'attribut watch détecte le changement et appelle automatiquement la méthode searchRepositories pour envoyer une requête POST. pour rechercher des données d'entrepôt. 🎜- 🎜Exécuter et tester🎜🎜🎜Après avoir enregistré le code ci-dessus, démarrez votre serveur Web et ouvrez l'adresse du fichier
index.html dans le navigateur. Vous verrez une page avec des zones de saisie et une liste de référentiels. Après avoir saisi le mot-clé dans la zone de saisie, la page affichera les informations de l'entrepôt liées au mot-clé en temps réel. 🎜🎜Ce qui précède représente l'ensemble du processus d'utilisation de PHP et Vue pour développer la fonction de recherche rapide de la gestion d'entrepôt. En réalisant la coopération entre l'API back-end et la page front-end, nous pouvons rechercher rapidement l'entrepôt et clarifier son emplacement et ses informations de description. Une telle fonction est très pratique et facile à mettre en œuvre, et peut grandement améliorer l’efficacité de la gestion des entrepôts. 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment ajouter des fonctions aux boutons pour Vue
Apr 08, 2025 am 08:51 AM
Vous pouvez ajouter une fonction au bouton VUE en liant le bouton dans le modèle HTML à une méthode. Définissez la logique de la fonction de méthode et d'écriture dans l'instance Vue.
Comment pouvez-vous empêcher une classe d'être prolongée ou une méthode d'être remplacée en PHP? (mot-clé final)
Apr 08, 2025 am 12:03 AM
Dans PHP, le mot-clé final est utilisé pour empêcher les classes d'être héritées et les méthodes écrasées. 1) Lors du marquage de la classe comme final, la classe ne peut pas être héritée. 2) Lors du marquage de la méthode comme final, la méthode ne peut pas être réécrite par la sous-classe. L'utilisation de mots clés finaux garantit la stabilité et la sécurité de votre code.
Comment utiliser la pagination Vue
Apr 08, 2025 am 06:45 AM
La pagination est une technologie qui divise de grands ensembles de données en petites pages pour améliorer les performances et l'expérience utilisateur. Dans Vue, vous pouvez utiliser la méthode intégrée suivante pour la pagination: Calculez le nombre total de pages: TotalPages () Numéro de page de traversée: Directive V-FOR pour définir la page actuelle: CurrentPage Obtenez les données de la page actuelle: CurrentPagedata ()
L'avenir de PHP: adaptations et innovations
Apr 11, 2025 am 12:01 AM
L'avenir de PHP sera réalisé en s'adaptant aux nouvelles tendances technologiques et en introduisant des fonctionnalités innovantes: 1) s'adapter aux architectures de cloud computing, de conteneurisation et de microservice, en prenant en charge Docker et Kubernetes; 2) introduire des compilateurs JIT et des types d'énumération pour améliorer l'efficacité des performances et du traitement des données; 3) Optimiser en continu les performances et promouvoir les meilleures pratiques.
Que signifie le développement de plusieurs pages Vue?
Apr 07, 2025 pm 11:57 PM
Le développement multi-pages VUE est un moyen de créer des applications à l'aide du cadre Vue.js, où l'application est divisée en pages distinctes: Maintenance du code: La division de l'application en plusieurs pages peut rendre le code plus facile à gérer et à maintenir. Modularité: chaque page peut être utilisée comme module séparé pour une réutilisation et un remplacement faciles. Routage simple: la navigation entre les pages peut être gérée par une configuration de routage simple. Optimisation du référencement: chaque page a sa propre URL, ce qui aide le référencement.
Comment utiliser la fonction interception vue
Apr 08, 2025 am 06:51 AM
L'interception de la fonction dans Vue est une technique utilisée pour limiter le nombre de fois qu'une fonction est appelée dans une période de temps spécifiée et prévenir les problèmes de performance. La méthode d'implémentation est: Importer la bibliothèque Lodash: import {Debounce} de 'Lodash'; Utilisez la fonction Debounce pour créer une fonction d'interception: const debouncedFunction = Debounce (() = & gt; {/ logical /}, 500); Appelez la fonction d'interception et la fonction de contrôle est appelée au plus une fois en 500 millisecondes.
PHP vs Python: comprendre les différences
Apr 11, 2025 am 12:15 AM
PHP et Python ont chacun leurs propres avantages, et le choix doit être basé sur les exigences du projet. 1.Php convient au développement Web, avec une syntaxe simple et une efficacité d'exécution élevée. 2. Python convient à la science des données et à l'apprentissage automatique, avec une syntaxe concise et des bibliothèques riches.
Comment utiliser ForEach Loop à Vue
Apr 08, 2025 am 06:33 AM
La boucle Foreach dans Vue.js utilise la directive V-FOR, qui permet aux développeurs d'itérer à travers chaque élément dans un tableau ou un objet et effectuer des opérations spécifiques sur chaque élément. La syntaxe est la suivante: & lt; modèle & gt; & lt; ul & gt; & lt; li v-for = & quot; item in items & gt; & gt; {{item}} & lt; / li & gt; & lt; / ul & gt; & lt; / template & gt; & am
