Comment implémenter la fonction de recherche de données en utilisant PHP et Vue-tutoriel php-php.cn

Comment implémenter la fonction de recherche de données en utilisant PHP et Vue

WBOY

Libérer： 2023-09-25 18:34:02

original

728 Les gens l'ont consulté

Comment implémenter la fonction de recherche de données en utilisant PHP et Vue

Comment utiliser PHP et Vue pour implémenter la fonction de recherche de données

Dans le développement Web moderne, la fonction de recherche de données est devenue une fonction très courante et essentielle. PHP et Vue sont deux technologies très populaires si vous combinez leurs puissantes capacités, vous pouvez rapidement mettre en œuvre une fonction de recherche de données efficace.

Cet article présentera comment utiliser PHP et Vue pour implémenter la fonction de recherche de données à travers des exemples de code spécifiques. Nous prendrons comme exemple un système simple de gestion des informations sur les étudiants. Il existe un tableau d'informations sur l'étudiant dans le système, qui contient des informations telles que le nom, l'âge et le sexe de l'étudiant. Nous devons mettre en œuvre un formulaire de recherche afin que les utilisateurs puissent rechercher des informations sur les étudiants en saisissant des mots-clés.

Tout d’abord, nous devons créer une interface backend PHP pour gérer la fonction de recherche. Nous pouvons utiliser les extensions d'opération de base de données PHP, telles que PDO ou mysqli, pour nous connecter à la base de données et effectuer des opérations de requête. Voici un exemple de code utilisant l'extension PDO :

<?php 
// 连接数据库
$dsn = "mysql:host=localhost;dbname=database";
$username = "username";
$password = "password";
$dbh = new PDO($dsn, $username, $password);

// 处理搜索请求
$keyword = $_GET["keyword"];

// 查询语句
$sql = "SELECT * FROM student WHERE name LIKE :keyword";

// 使用预处理语句防止 SQL 注入
$stmt = $dbh->prepare($sql);
$stmt->bindValue(':keyword', '%' . $keyword . '%');

// 执行查询
$stmt->execute();

// 获取结果集
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 返回 JSON 格式的结果
echo json_encode($results);
?>

Copier après la connexion

Dans le code ci-dessus, nous établissons d'abord une connexion avec la base de données, puis obtenons les mots-clés saisis par l'utilisateur depuis le front-end. Ensuite, nous utilisons des instructions préparées pour empêcher l'injection SQL et exécuter la requête, en renvoyant les résultats de la requête au front-end au format JSON.

Ensuite, nous devons utiliser Vue sur le front-end pour gérer la fonction de recherche. Voici un exemple de code utilisant Vue :

<!DOCTYPE html>
<html>
<head>
  <title>数据搜索功能示例</title>
  <!-- 引入 Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" v-model="keyword" placeholder="请输入关键字">
    <button @click="search">搜索</button>
    <ul>
      <li v-for="student in students" :key="student.id">{{ student.name }}</li>
    </ul>
  </div>

  <script>
  new Vue({
    el: "#app",
    data() {
      return {
        keyword: "",
        students: []
      }
    },
    methods: {
      search() {
        // 发送 Ajax 请求到后端接口
        fetch('search.php?keyword=' + this.keyword)
          .then(response => response.json())
          .then(data => {
            this.students = data;
          })
          .catch(error => {
            console.error(error);
          });
      }
    }
  });
  </script>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous avons d'abord introduit Vue.js et créé une instance Vue. data 中定义了 keyword 和 students 两个变量，分别用于保存用户输入的关键字和查询结果。在 search 方法中，我们使用 fetch 方法发送 Ajax 请求到后端接口，并将返回的数据赋值给 students variable dans l'instance.

Avec les exemples de code PHP et Vue ci-dessus, nous avons implémenté une fonction de recherche de données simple. Une fois que l'utilisateur a saisi le mot-clé dans la zone de saisie et cliqué sur le bouton de recherche, les informations correspondantes sur l'étudiant peuvent être obtenues à partir du backend et affichées sur la page.

Ce qui précède n'est qu'un exemple simple. Dans le développement réel, le code peut être encore optimisé et étendu en fonction de besoins spécifiques. J'espère que cet article pourra vous aider à comprendre comment utiliser PHP et Vue pour implémenter des fonctions de recherche de données !

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!