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

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

Avant-propos :
Dans le développement d'applications Web modernes, la synchronisation des données est une fonction très importante. La synchronisation des données signifie que lorsque les données sur le serveur principal changent, la page frontale peut obtenir les dernières données en temps opportun et mettre à jour la page en conséquence. Cet article expliquera comment utiliser PHP et Vue pour implémenter la fonction de synchronisation des données et fournira des exemples de code spécifiques.

1. Acquisition et mise à jour des données back-end
Dans le back-end, nous pouvons utiliser PHP pour faire fonctionner la base de données et obtenir et mettre à jour les données. Supposons que nous ayons un système de gestion des performances des étudiants qui contient les noms des étudiants et des informations sur leurs performances. Vous trouverez ci-dessous un simple fichier PHP utilisé pour obtenir des données sur les performances des étudiants.

<?php
// 获取数据库连接
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 查询学生成绩数据
$sql = "SELECT * FROM students";
$result = $conn->query($sql);

// 将查询结果转换为关联数组
$data = array();
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

// 将数据转换为JSON格式并输出
echo json_encode($data);

$conn->close();
?>

Dans le code ci-dessus, nous avons d'abord établi une connexion avec la base de données et interrogé les données de performance de l'élève. Ensuite, les résultats de la requête sont convertis en un tableau associatif et les données sont converties au format JSON pour la sortie. De cette façon, la page frontale peut obtenir les dernières données sur les performances des étudiants en envoyant une requête Ajax.

2. Implémentation de la page front-end
Dans le front-end, nous pouvons utiliser Vue.js pour implémenter la liaison et la mise à jour des données. Supposons que nous ayons une page de système de gestion des performances des étudiants qui utilise Vue.js comme framework frontal. Vous trouverez ci-dessous un simple composant Vue utilisé pour afficher les données de performance des étudiants.

<template>
  <div>
    <table>
      <tr>
        <th>姓名</th>
        <th>成绩</th>
      </tr>
      <tr v-for="student in students" :key="student.id">
        <td>{{ student.name }}</td>
        <td>{{ student.grade }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: []
    };
  },
  mounted() {
    this.fetchStudents();
  },
  methods: {
    fetchStudents() {
      // 发送Ajax请求获取学生成绩数据
      // 这里假设后端数据接口为 /api/getStudents.php
      fetch('/api/getStudents.php')
        .then(response => response.json())
        .then(data => {
          this.students = data;
        });
    }
  }
};
</script>

Dans le code ci-dessus, nous définissons un composant Vue pour afficher les données de performance des étudiants. Un tableau d'étudiants est défini dans les données du composant pour stocker les données de performance des étudiants obtenues. La méthode fetchStudents est appelée dans le hook monté du composant, qui envoie une requête Ajax pour obtenir les dernières données de performances des étudiants. Ensuite, attribuez les données obtenues au tableau des étudiants pour mettre à jour les données sur la page.

3. Réaliser la fonction de synchronisation des données
La clé pour réaliser la fonction de synchronisation des données est d'avertir rapidement la page frontale pour qu'elle se mette à jour lorsque les données back-end changent. Ceci peut être réalisé grâce à la technologie WebSocket. Cet article ne présente pas les principes de WebSocket en détail, mais fournit uniquement un simple exemple de code.

Ce qui suit est un simple fichier PHP utilisé pour diffuser sur la page frontale via WebSocket après avoir reçu de nouvelles données de performances des étudiants.

<?php
// 获取WebSocket连接
$server = new SwooleWebSocketServer('0.0.0.0', 9501);

// 监听WebSocket连接事件
$server->on('open', function ($server, $request) {
    echo "新的连接建立：" . $request->fd . "
";
});

// 监听WebSocket消息事件
$server->on('message', function ($server, $frame) {
    echo "收到消息：" . $frame->data . "
";
});

// 监听WebSocket关闭事件
$server->on('close', function ($server, $fd) {
    echo "连接关闭：" . $fd . "
";
});

// 启动WebSocket服务
$server->start();
?>

Dans le code ci-dessus, nous avons d'abord créé un serveur WebSocket et écouté les événements d'ouverture, de message et de fermeture. Lorsqu'une nouvelle connexion est établie, l'ID de connexion sera affiché ; lorsqu'un message est reçu, le contenu du message sera affiché lorsque la connexion est fermée, l'ID de connexion fermée sera affiché.

Dans la page front-end, nous pouvons utiliser la technologie WebSocket pour communiquer avec le back-end et mettre à jour les données sur la page lorsque de nouvelles données sur les performances des étudiants sont reçues. Ce qui suit est un exemple simple de composant Vue qui montre comment utiliser WebSocket pour implémenter la fonction de synchronisation des données.

<template>
  <div>
    <table>
      <tr>
        <th>姓名</th>
        <th>成绩</th>
      </tr>
      <tr v-for="student in students" :key="student.id">
        <td>{{ student.name }}</td>
        <td>{{ student.grade }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: []
    };
  },
  mounted() {
    this.fetchStudents();

    // 建立WebSocket连接
    this.socket = new WebSocket('ws://localhost:9501');

    // 监听WebSocket消息事件
    this.socket.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (data.action === 'addStudent' || data.action === 'updateStudent') {
        // 新增或更新学生数据
        this.students.push(data.student);
      } else if (data.action === 'deleteStudent') {
        // 删除学生数据
        this.students = this.students.filter(student => student.id !== data.student.id);
      }
    };
  },
  methods: {
    fetchStudents() {
      // 发送Ajax请求获取学生成绩数据
      // 这里假设后端数据接口为 /api/getStudents.php
      fetch('/api/getStudents.php')
        .then(response => response.json())
        .then(data => {
          this.students = data;
        });
    }
  },
  beforeDestroy() {
    // 关闭WebSocket连接
    this.socket.close();
  }
};
</script>

Dans le code ci-dessus, nous avons établi la connexion WebSocket dans le hook monté et traité le message envoyé par le backend dans l'événement onmessage. Lorsque de nouvelles données de performance d'élève sont reçues, il est déterminé s'il faut ajouter, mettre à jour ou supprimer des données d'élève en évaluant l'attribut d'action dans le message. Selon différentes opérations, mettez à jour le tableau des étudiants sur la page pour synchroniser les données.

Résumé :
L'utilisation de PHP et Vue pour implémenter la fonction de synchronisation des données nécessite de coordonner l'acquisition et la mise à jour des données back-end, la liaison des données et la mise à jour de la page front-end, ainsi que la fonction de synchronisation des données. Obtenez les dernières données en envoyant des requêtes Ajax et utilisez WebSocket pour surveiller les modifications des données back-end et mettre à jour les données sur la page front-end en temps opportun. Cet article fournit des exemples de code spécifiques pour aider les lecteurs à mieux comprendre et implémenter la fonction de synchronisation des données. J'espère que cet article sera utile à tout le monde dans la pratique.

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!