Gunakan React Query dan pangkalan data untuk sandaran data dan pemulihan bencana

Menggunakan React Query dan pangkalan data untuk sandaran data dan pemulihan bencana, contoh kod khusus diperlukan

Dalam pembangunan web moden, sandaran data dan pemulihan bencana adalah bahagian yang penting. Sama ada untuk melindungi data pengguna daripada pemadaman tidak sengaja atau kegagalan sistem atau untuk dapat memulihkan data dengan cepat untuk mengekalkan kesinambungan perniagaan, membuat sandaran dan memulihkan data adalah penting.

React Query ialah perpustakaan pengurusan data yang sangat baik yang menyediakan pertanyaan data yang berkuasa, caching dan keupayaan kemas kini. Menggabungkan React Query dan pangkalan data, kami boleh melaksanakan fungsi sandaran data dan pemulihan bencana dengan mudah.

Yang berikut akan memperkenalkan cara menggunakan React Query dan pangkalan data untuk sandaran data dan pemulihan bencana, dan memberikan contoh kod khusus.

1. Sandaran data

1. Mengkonfigurasi pangkalan data

Pertama, kita perlu mengkonfigurasi pangkalan data untuk menyimpan data sandaran. Pilihan biasa termasuk MySQL, MongoDB, dll. Di sini kami mengambil MySQL sebagai contoh untuk menggambarkan.

Mula-mula, pasang MySQL dan buat pangkalan data dan jadual sandaran. Anda boleh menggunakan pernyataan SQL berikut:

CREATE DATABASE IF NOT EXISTS backupdb;
USE backupdb;

CREATE TABLE IF NOT EXISTS backup_table (
  id INT PRIMARY KEY AUTO_INCREMENT,
  data TEXT,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. Buat cangkuk pertanyaan React Query

Seterusnya, buat cangkuk pertanyaan React Query dalam aplikasi React untuk mendapatkan data sandaran daripada pangkalan data. Anda boleh menggunakan kod berikut:

import { useQuery } from 'react-query';

const fetchBackupData = async () => {
  const response = await fetch('/api/backupdata');
  const data = await response.json();
  return data;
};

const useBackupData = () => {
  return useQuery('backupData', fetchBackupData);
};

Dalam kod di atas, kami menggunakan cangkuk useQuery untuk memulakan permintaan tak segerak dan melaksanakan antara muka API / dalam <code>fetchBackupData fungsi kod> Logik untuk mendapatkan data sandaran dalam api/data sandaran. useQuery 钩子来发起异步请求，并在 fetchBackupData 函数中实现了从 API 接口 /api/backupdata 中获取备份数据的逻辑。

3. 展示备份数据

最后，我们可以在组件中使用 useBackupData 钩子来展示备份数据。具体代码如下：

import React from 'react';
import { useBackupData } from './hooks/useBackupData';

const BackupData = () => {
  const { isLoading, error, data } = useBackupData();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h1>Backup Data</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.data}</li>
        ))}
      </ul>
    </div>
  );
};

export default BackupData;

上述代码中，我们在组件中使用 useBackupData 钩子来获取备份数据，并根据请求的状态展示相应的 UI。当数据正在加载时，显示 "Loading..."，当请求发生错误时，显示错误消息；当请求成功时，展示备份数据。

二、数据灾备

1. 创建灾备服务

为了实现数据灾备功能，我们需要创建一个灾备服务，该服务通过监听数据库的变化并实时备份数据。

可以使用如下代码来创建一个 Node.js 的灾备服务：

const mysql = require('mysql');
const backupdb = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'backupdb',
});

const createBackup = async () => {
  return new Promise((resolve, reject) => {
    backupdb.query('INSERT INTO backup_table (data) SELECT data FROM main_table', (error, results, fields) => {
      if (error) {
        reject(error);
      } else {
        resolve(results);
      }
    });
  });
};

const backupOnChange = () => {
  const maindb = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'maindb',
    multipleStatements: true,
  });

  maindb.query('SELECT @dummy := 0;');

  maindb.on('change', () => {
    createBackup()
      .then(() => {
        console.log('Backup created successfully');
      })
      .catch((error) => {
        console.error('Failed to create backup:', error);
      });
  });
};

backupOnChange();

上述代码中，我们首先创建了一个连接到 backupdb 的 MySQL 连接，然后定义了一个 createBackup 函数，用于将 main_table 中的数据插入到 backup_table 中。接着我们创建了一个连接到 maindb 的 MySQL 连接，并使用 change 事件监听数据库中数据的变化，当数据发生变化时，触发 createBackup 函数。

2. 前端通知灾备服务

最后一步是在前端代码中实现数据灾备的通知机制，以便在数据发生变化时，能够及时通知并触发数据备份。

可以使用如下代码来实现通知机制：

import { useMutation, useQueryClient } from 'react-query';

const notifyBackupService = async () => {
  const response = await fetch('/api/notifybackup', { method: 'POST' });
  const data = await response.json();
  return data;
};

const BackupData = () => {
  const queryClient = useQueryClient();
  const { mutate } = useMutation(notifyBackupService, {
    onSuccess: () => {
      queryClient.invalidateQueries('backupData');
      console.log('Backup service notified');
    },
    onError: (error) => {
      console.error('Failed to notify backup service:', error);
    },
  });

  return (
    <div>
      <h1>Backup Data</h1>
      <button onClick={() => mutate()}>Notify Backup Service</button>
    </div>
  );
};

上述代码中，我们使用了 useMutation 钩子来定义一个 notifyBackupService 函数，用于通知灾备服务。在 useMutation 钩子的选项参数中，我们通过 onSuccess 回调函数来刷新备份数据的查询，并打印通知成功的消息；通过 onError 回调函数来处理通知失败的情况，并打印错误消息。同时，我们在组件中添加了一个按钮，点击该按钮将触发 notifyBackupService

Paparkan data sandaran

Akhir sekali, kita boleh menggunakan cangkuk useBackupData dalam komponen untuk memaparkan data sandaran. Kod khusus adalah seperti berikut:

rrreee🎜Dalam kod di atas, kami menggunakan cangkuk useBackupData dalam komponen untuk mendapatkan data sandaran dan memaparkan UI yang sepadan mengikut status yang diminta. Apabila data sedang dimuatkan, "Memuatkan..." dipaparkan Apabila ralat berlaku dalam permintaan, mesej ralat dipaparkan Apabila permintaan berjaya, data sandaran dipaparkan. 🎜🎜2. Pemulihan bencana data🎜🎜🎜Buat perkhidmatan pemulihan bencana🎜🎜🎜Untuk melaksanakan fungsi pemulihan bencana data, kami perlu mencipta perkhidmatan pemulihan bencana yang memantau perubahan pangkalan data dan menyandarkan data dalam masa nyata. 🎜🎜Anda boleh menggunakan kod berikut untuk mencipta perkhidmatan pemulihan bencana Node.js: 🎜rrreee🎜Dalam kod di atas, kami mula-mula mencipta sambungan MySQL ke backupdb, dan kemudian menentukan createBackup Fungsi , digunakan untuk memasukkan data dalam main_table ke dalam backup_table. Kemudian kami membuat sambungan MySQL ke maindb dan menggunakan acara change untuk memantau perubahan dalam data dalam pangkalan data Apabila data berubah, pencetus createBackup code> fungsi. 🎜🎜🎜Perkhidmatan pemulihan bencana pemberitahuan bahagian hadapan🎜🎜🎜Langkah terakhir ialah melaksanakan mekanisme pemberitahuan pemulihan bencana data dalam kod bahagian hadapan supaya apabila data berubah, ia boleh dimaklumkan dan mencetuskan sandaran data tepat pada masanya. 🎜🎜Anda boleh menggunakan kod berikut untuk melaksanakan mekanisme pemberitahuan: 🎜rrreee🎜Dalam kod di atas, kami menggunakan cangkuk <code>useMutation untuk mentakrifkan fungsi notifyBackupService untuk memberitahu bencana perkhidmatan pemulihan. Dalam parameter pilihan cangkuk useMutation, kami menggunakan fungsi panggil balik onSuccess untuk memuat semula pertanyaan data sandaran dan mencetak mesej kejayaan melalui onError; > Fungsi panggil balik untuk mengendalikan kegagalan pemberitahuan dan mencetak mesej ralat. Pada masa yang sama, kami menambah butang pada komponen Mengklik butang akan mencetuskan fungsi notifyBackupService untuk memberitahu perkhidmatan pemulihan bencana. 🎜🎜Ringkasan: 🎜🎜Dengan menggunakan React Query dan pangkalan data, kami boleh melaksanakan fungsi sandaran data dan pemulihan bencana dengan mudah. Dalam artikel ini, kami memperkenalkan cara menggunakan cangkuk pertanyaan React Query untuk mendapatkan data sandaran dan menunjukkan contoh kod khusus. Pada masa yang sama, kami juga menunjukkan cara mencipta perkhidmatan pemulihan bencana dan melaksanakan mekanisme pemberitahuan untuk pemulihan bencana data. Saya harap artikel ini membantu anda memahami cara menggunakan React Query dan pangkalan data untuk sandaran data dan pemulihan bencana. 🎜

Atas ialah kandungan terperinci Gunakan React Query dan pangkalan data untuk sandaran data dan pemulihan bencana. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!