Rumah pembangunan bahagian belakang tutorial php Cara menggunakan PHP dan Vue untuk melaksanakan fungsi penyegerakan data

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi penyegerakan data

Sep 25, 2023 pm 04:05 PM
php vue Penyegerakan data

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi penyegerakan data

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi penyegerakan data

Kata Pengantar:
Dalam pembangunan aplikasi web moden, penyegerakan data adalah fungsi yang sangat penting. Penyegerakan data bermakna apabila data pada pelayan bahagian belakang berubah, halaman hujung hadapan boleh mendapatkan data terkini tepat pada masanya dan mengemas kini halaman dengan sewajarnya. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi penyegerakan data dan memberikan contoh kod khusus.

1. Pemerolehan dan kemas kini data bahagian belakang
Di bahagian belakang, kami boleh menggunakan PHP untuk mengendalikan pangkalan data dan mendapatkan serta mengemas kini data. Katakan kita mempunyai sistem pengurusan prestasi pelajar yang mengandungi nama pelajar dan maklumat prestasi. Di bawah ialah fail PHP mudah yang digunakan untuk mendapatkan data prestasi pelajar.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<?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();

?>

Salin selepas log masuk

Dalam kod di atas, kami mula-mula mewujudkan sambungan dengan pangkalan data dan menanyakan data prestasi pelajar. Kemudian, hasil pertanyaan ditukar kepada tatasusunan bersekutu, dan data ditukar kepada format JSON untuk output. Dengan cara ini, halaman hadapan boleh mendapatkan data prestasi pelajar terkini dengan menghantar permintaan Ajax.

2. Pelaksanaan halaman hadapan
Di bahagian hadapan, kami boleh menggunakan Vue.js untuk melaksanakan pengikatan dan pengemaskinian data. Katakan kita mempunyai halaman sistem pengurusan prestasi pelajar yang menggunakan Vue.js sebagai rangka kerja bahagian hadapan. Di bawah ialah komponen Vue mudah yang digunakan untuk memaparkan data prestasi pelajar.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<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>

Salin selepas log masuk

Dalam kod di atas, kami mentakrifkan komponen Vue untuk memaparkan data prestasi pelajar. Tatasusunan pelajar ditakrifkan dalam data komponen untuk menyimpan data prestasi pelajar yang diperolehi. Kaedah fetchStudents dipanggil dalam cangkuk komponen yang dipasang, yang menghantar permintaan Ajax untuk mendapatkan data prestasi pelajar terkini. Kemudian, berikan data yang diperoleh kepada tatasusunan pelajar untuk mengemas kini data pada halaman.

3. Realisasikan fungsi penyegerakan data
Kunci untuk merealisasikan fungsi penyegerakan data adalah dengan segera memberitahu halaman bahagian hadapan untuk mengemas kini apabila data bahagian belakang berubah. Ini boleh dicapai melalui teknologi WebSocket Artikel ini tidak memperkenalkan prinsip WebSocket secara terperinci, tetapi hanya menyediakan kod sampel mudah.

Berikut ialah fail PHP mudah yang digunakan untuk disiarkan ke muka hadapan melalui WebSocket selepas menerima data prestasi pelajar baharu.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<?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();

?>

Salin selepas log masuk

Dalam kod di atas, kami mula-mula mencipta pelayan WebSocket dan mendengar acara buka, mesej dan tutup. Apabila sambungan baru diwujudkan, ID sambungan akan dikeluarkan apabila mesej diterima, kandungan mesej akan dikeluarkan apabila sambungan ditutup, ID sambungan tertutup akan dikeluarkan;

Di halaman hadapan, kami boleh menggunakan teknologi WebSocket untuk berkomunikasi dengan bahagian belakang dan mengemas kini data pada halaman apabila data prestasi pelajar baharu diterima. Berikut ialah contoh komponen Vue mudah yang menunjukkan cara menggunakan WebSocket untuk melaksanakan fungsi penyegerakan data.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

<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>

Salin selepas log masuk

Dalam kod di atas, kami mewujudkan sambungan WebSocket dalam cangkuk yang dipasang dan memproses mesej yang dihantar oleh bahagian belakang dalam acara onmessage. Apabila data prestasi pelajar baharu diterima, ia ditentukan sama ada untuk menambah, mengemas kini atau memadam data pelajar dengan menilai atribut tindakan dalam mesej. Mengikut operasi yang berbeza, kemas kini tatasusunan pelajar pada halaman untuk menyegerakkan data.

Ringkasan:
Menggunakan PHP dan Vue untuk melaksanakan fungsi penyegerakan data memerlukan penyelarasan pemerolehan dan kemas kini data bahagian belakang, pengikatan dan kemas kini data halaman hadapan dan fungsi penyegerakan data. Dapatkan data terkini dengan menghantar permintaan Ajax, dan gunakan WebSocket untuk memantau perubahan dalam data hujung belakang dan mengemas kini data pada halaman hujung hadapan tepat pada masanya. Artikel ini menyediakan contoh kod khusus untuk membantu pembaca memahami dan melaksanakan fungsi penyegerakan data dengan lebih baik. Saya harap artikel ini akan membantu semua orang dalam amalan.

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk melaksanakan fungsi penyegerakan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Dec 24, 2024 pm 04:42 PM

Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian

Tarikh dan Masa CakePHP Tarikh dan Masa CakePHP Sep 10, 2024 pm 05:27 PM

Tarikh dan Masa CakePHP

Muat naik Fail CakePHP Muat naik Fail CakePHP Sep 10, 2024 pm 05:27 PM

Muat naik Fail CakePHP

Penghalaan CakePHP Penghalaan CakePHP Sep 10, 2024 pm 05:25 PM

Penghalaan CakePHP

Konfigurasi Projek CakePHP Konfigurasi Projek CakePHP Sep 10, 2024 pm 05:25 PM

Konfigurasi Projek CakePHP

Bincangkan CakePHP Bincangkan CakePHP Sep 10, 2024 pm 05:28 PM

Bincangkan CakePHP

Panduan Ringkas CakePHP Panduan Ringkas CakePHP Sep 10, 2024 pm 05:27 PM

Panduan Ringkas CakePHP

Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP Dec 20, 2024 am 11:31 AM

Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP

See all articles