Comment implémenter la fonction de filtrage des données à l'aide de PHP et Vue

Comment implémenter la fonction de filtrage des données à l'aide de PHP et Vue

Introduction :
Dans les applications Web modernes, le filtrage des données est une fonction très importante. Grâce au filtrage des données, nous pouvons filtrer et présenter les données selon différentes conditions et exigences, offrant ainsi une expérience utilisateur plus personnalisée et plus efficace. Dans cet article, nous apprendrons comment utiliser PHP et Vue pour implémenter des fonctions de filtrage de données et fournirons des exemples de code spécifiques.

1. Filtrage côté serveur

1. Travail de préparation
   Afin de mettre en œuvre le filtrage des données côté serveur, nous avons d'abord besoin d'une interface de données back-end pour obtenir les données de la base de données et les filtrer. Nous utilisons le langage PHP pour créer l'interface back-end.
2. Créer un fichier PHP
   Tout d'abord, nous créons un fichier PHP nommé "filterData.php". Dans ce fichier, nous définirons une fonction fetchData() pour récupérer des données. Le code spécifique est le suivant :

// Connectez-vous à la base de données et obtenez les données
function fetchData($filter) {

// 这里假设我们已经连接到数据库，并可以执行查询操作
// 在实际应用中，你需要根据自己的情况进行数据库连接和查询操作

// 这里仅作示例，返回一个假数据
$data = [
    ["id" => 1, "name" => "John Doe", "age" => 25],
    ["id" => 2, "name" => "Jane Smith", "age" => 30],
    ["id" => 3, "name" => "Mike Johnson", "age" => 35],
    ["id" => 4, "name" => "Lisa Brown", "age" => 28],
    ["id" => 5, "name" => "Tom Wilson", "age" => 32],
];

// 进行过滤操作
$filteredData = array_filter($data, function($item) use ($filter) {
    if ($filter === "") {
        // 如果没有传入过滤条件，则返回全部数据
        return true;
    } else {
        // 根据过滤条件返回满足条件的数据
        return strpos($item["name"], $filter) !== false;
    }
});

// 返回过滤后的数据
return array_values($filteredData);

}

// Recevez les paramètres de la requête, appelez la fonction pour obtenir le filtre data et renvoie la réponse JSON
$filter = isset($_GET["filter"]) ? $_GET["filter"] : "";
$data = fetchData($filter);
echo json_encode($data);
?>

3. Test de l'interface
   Nous pouvons utiliser des outils tels que postman pour tester notre interface. En envoyant une requête HTTP à l'adresse de l'interface, nous pouvons obtenir les données filtrées et les renvoyer au format JSON. L'exemple d'adresse d'interface est : http://yourdomain.com/filterData.php?filter=John

2. Filtrage frontal

1. Préparation
   Afin d'implémenter le filtrage des données front-end, nous avons besoin d'une instance Vue pour afficher la page et obtenir des données en appelant l'interface de données backend. Dans cet exemple, nous utilisons Vue-cli pour créer rapidement un projet Vue.
2. Créez une instance Vue
   Tout d'abord, entrez le répertoire du projet dans la ligne de commande et exécutez la commande suivante pour créer un projet Vue :

vue create filter-demo

Ensuite, créez un fichier nommé "App.vue dans le src directory " et écrivez le code suivant dans le fichier :

<script><br>export default {<br> data ( ) {</script>

return {
  keyword: "", // 用户输入的关键词
  items: [], // 从后端接口获取的数据
};

},
calculé : {

filteredItems() {
  return this.items.filter((item) => {
    if (this.keyword === "") {
      return true;
    } else {
      return item.name.includes(this.keyword);
    }
  });
},

},
Mounted() {

// 建议将接口地址根据实际情况配置到环境变量中，这里仅作示例
const API_URL = "http://yourdomain.com/filterData.php?filter=";
// 调用后端接口获取数据
fetch(API_URL + this.keyword)
  .then((response) => response.json())
  .then((data) => {
    this.items = data;
  });

},
};

3. Exécuter le projet
   Exécutez la commande suivante dans la commande ligne pour exécuter le projet Vue :

cd filter-demo
npm run serve

Ensuite, ouvrez le navigateur et visitez http://localhost:8080, vous verrez une zone de saisie et une liste de données. Lorsque vous saisissez des mots-clés dans la zone de saisie, les données de la liste seront filtrées en fonction des mots-clés.

Conclusion : 
Grâce à la combinaison de PHP et Vue, nous pouvons obtenir des fonctions de filtrage de données flexibles et efficaces. Avec le filtrage côté serveur, nous pouvons obtenir des données de la base de données et filtrer en fonction des conditions. Grâce au filtrage frontal, nous pouvons filtrer rapidement les données et les afficher sur la page en fonction des mots-clés saisis par l'utilisateur. Cette combinaison offre aux utilisateurs une expérience de navigation dans les données plus personnalisée et plus efficace et améliore les performances et la réactivité des applications.

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!