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

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

Dans le développement Web, le filtrage des données est une exigence courante. Cet article expliquera comment utiliser le framework PHP et Vue pour implémenter une fonction simple de filtrage de données et fournira des exemples de code spécifiques.

1. Structure HTML

Tout d'abord, nous devons créer un formulaire HTML pour saisir les conditions de filtre. Supposons que nous ayons un tableau contenant des informations sur les étudiants, notamment leur nom, leur âge et leurs notes. Nous pouvons créer la structure HTML suivante :

<div id="app">
  <form>
    <label>姓名:</label>
    <input type="text" v-model="filter.name">
    <br>
    <label>年龄:</label>
    <input type="number" v-model.number="filter.age">
    <br>
    <label>成绩:</label>
    <input type="number" v-model.number="filter.score">
    <br>
    <button type="button" @click="filterStudents">筛选</button>
  </form>
  
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>成绩</th>
    </tr>
    <tr v-for="student in filteredStudents">
      <td>{{ student.name }}</td>
      <td>{{ student.age }}</td>
      <td>{{ student.score }}</td>
    </tr>
  </table>
</div>

Dans le code ci-dessus, nous utilisons la fonction de liaison bidirectionnelle de Vue (v-model) pour lier la valeur d'entrée à l'objet filtre dans l'instance Vue. Lorsque vous cliquez sur le bouton, la méthode filterStudents sera appelée pour filtrer et les résultats du filtre seront affichés dans le tableau. Notez que l'instruction v-for est utilisée dans la balise tr pour parcourir le tableau filteredStudents et restituer les informations de chaque élève.

2. Instance Vue

Ensuite, nous devons créer une instance Vue, obtenir des informations sur les étudiants via des requêtes Ajax et implémenter la fonction de filtrage. Nous pouvons coder l'instance Vue comme suit :

new Vue({
  el: '#app',
  data: {
    students: [], // 学生信息数组
    filter: { // 筛选条件
      name: '',
      age: null,
      score: null
    }
  },
  computed: {
    filteredStudents() { // 根据筛选条件过滤学生信息
      return this.students.filter(student => {
        let nameMatch = student.name.toLowerCase().includes(this.filter.name.toLowerCase());
        let ageMatch = this.filter.age ? student.age === parseInt(this.filter.age) : true;
        let scoreMatch = this.filter.score ? student.score === parseFloat(this.filter.score) : true;
        return nameMatch && ageMatch && scoreMatch;
      });
    }
  },
  methods: {
    filterStudents() { // 筛选学生信息
      // 发送Ajax请求获取学生信息，这里假设数据已经存在
      axios.get('/api/students')
        .then(response => {
          this.students = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  },
  mounted() { // 初始化时获取学生信息
    this.filterStudents();
  }
});

Dans le code ci-dessus, nous utilisons la propriété calculée de Vue pour filtrer dynamiquement les informations sur les étudiants lorsque l'objet filtre change. L'attribut calculé filteredStudents filtrera en fonction des conditions de l'objet filtre et affichera uniquement les informations sur les étudiants qui remplissent les conditions.

La méthode filterStudents dans l'attribut méthodes utilise la bibliothèque axios pour envoyer des requêtes Ajax afin d'obtenir des informations sur les étudiants. Cela suppose que les données existent déjà et sont affichées dans le tableau des étudiants.

Dans la fonction montée, nous appelons la méthode filterStudents pour obtenir les informations sur les étudiants lors de l'initialisation.

3. Backend PHP

Enfin, nous devons traiter la requête Ajax dans le backend PHP et renvoyer les informations sur les étudiants. Ce qui suit est un exemple de code PHP simple :

<?php

// 假设我们已有学生信息的数组
$students = [
  ['name' => '张三', 'age' => 18, 'score' => 90],
  ['name' => '李四', 'age' => 20, 'score' => 85],
  ['name' => '王五', 'age' => 19, 'score' => 95]
];

// 处理Ajax请求
if ($_SERVER['REQUEST_METHOD'] === 'GET' && $_SERVER['REQUEST_URI'] === '/api/students') {
  header('Content-Type: application/json');
  echo json_encode($students);
  exit;
}

?>

Dans le code PHP ci-dessus, nous supposons qu'il existe déjà un tableau $students d'informations sur les étudiants. Lorsqu'une requête GET est reçue et que l'URI de la requête est /api/students, nous renvoyons les données au format JSON des informations sur l'étudiant.

Jusqu'à présent, nous avons implémenté la fonction de filtrage des données à l'aide de PHP et Vue. En utilisant une instance Vue sur le front-end pour définir les conditions de filtrage et en traitant les requêtes Ajax sur le back-end pour renvoyer des informations qualifiées sur les étudiants, nous pouvons simplement implémenter la fonction de filtrage des données.

Résumé

Cet article explique comment utiliser le framework PHP et Vue pour implémenter la fonction de filtrage des données et fournit des exemples de code spécifiques. Au cours du processus d'implémentation, vous devez comprendre les concepts de liaison bidirectionnelle et de propriétés calculées de Vue, ainsi que la manière dont les données sont traitées sur le backend PHP via les requêtes Ajax. Cette méthode peut être appliquée à divers scénarios de développement Web et j'espère qu'elle pourra aider les lecteurs à mieux comprendre et appliquer les technologies de filtrage de données front-end et back-end.

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!