Gunakan React Query dan pangkalan data untuk pembersihan dan pengesahan data

Gunakan React Query dan pangkalan data untuk pembersihan dan pengesahan data

Dalam pembangunan aplikasi web moden, memproses dan mengurus data bahagian hadapan adalah sangat tugas penting. React Query ialah perpustakaan berkuasa yang boleh membantu kami dengan pengurusan data, dan pangkalan data ialah alat penting untuk menyimpan data aplikasi. Artikel ini akan memperkenalkan cara menggunakan React Query dan pangkalan data untuk pembersihan dan pengesahan data serta memberikan contoh kod khusus.

1. Latar Belakang
Sekarang andaikan kami mempunyai aplikasi pengurusan tugasan yang mudah di mana pengguna boleh membuat tugasan dan menyimpannya ke pangkalan data. Semasa proses penciptaan tugas, kami perlu membersihkan dan mengesahkan data yang dimasukkan oleh pengguna untuk memastikan kesahihan dan konsistensi data. Pada masa yang sama, kami juga perlu menyimpan data tugasan ke pangkalan data untuk pertanyaan dan penggunaan masa hadapan.

2. Pembersihan dan pengesahan data

1. Pasang React Query
   Pertama, kita perlu memasang React Query dalam projek. Ia boleh dipasang menggunakan arahan npm atau yarn.

npm：

npm install react-query

yarn：

yarn add react-query

2. Buat# React Query🎜#Buat Pertanyaan React🎜 aplikasi Dalam fail, kita perlu mencipta Pembekal Pertanyaan React dan membungkusnya di sekeliling komponen Apl. Pembekal akan menyuntik fungsi berkaitan React Query ke dalam keseluruhan aplikasi untuk kami gunakan kemudian.
   

import React from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用的其他组件 */}
    </QueryClientProvider>
  );
}

export default App;

Salin selepas log masuk

Gunakan React Query’s useMutation hook dalam komponen
3. Seterusnya, dalam komponen di mana kita perlu membersihkan dan mengesahkan data, dengan menggunakan React Query The useMutation hook mengendalikan penyerahan dan penyimpanan data. Cangkuk useMutation boleh membantu kami mengendalikan status permintaan (seperti pemuatan, kejayaan, ralat, dll.) dan menyediakan fungsi untuk mengendalikan logik penghantaran permintaan dan pemprosesan hasil.
   

import React from 'react';
import { useMutation } from 'react-query';

function CreateTaskForm() {
  const createTaskMutation = useMutation((newTask) => {
    // 执行任务创建的逻辑
    return fetch('/api/tasks', {
      method: 'POST',
      body: JSON.stringify(newTask),
    }).then((response) => response.json());
  });

  const handleSubmit = (event) => {
    event.preventDefault();

    const form = event.target;
    const formData = new FormData(form);

    const newTask = {
      title: formData.get('title'),
      description: formData.get('description'),
      // 其他字段
    };

    createTaskMutation.mutate(newTask);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="title" />
      <textarea name="description" />
      {/* 其他输入框 */}
      <button type="submit">创建任务</button>
    </form>
  );
}

Salin selepas log masuk

/api/tasks 来模拟任务的创建请求，并在请求成功后返回任务的详细信息。
4. 数据库连接与操作
   数据的清洗和校验完成后，我们需要将任务数据保存到数据库中。这里我们以 MongoDB 数据库为例，并使用 Mongoose 库连接和操作数据库。

首先，我们需要安装 Mongoose：

npm：

npm install mongoose

Salin selepas log masuk

yarn：

yarn add mongoose

Salin selepas log masuk

然后，在项目中创建 db.jsSambungan dan operasi pangkalan data

Selepas pembersihan dan pengesahan data selesai, kami perlu menyimpan data tugasan ke pangkalan data. Di sini kami mengambil pangkalan data MongoDB sebagai contoh dan menggunakan perpustakaan Mongoose untuk menyambung dan mengendalikan pangkalan data.
Mula-mula, kita perlu memasang Mongoose:
5. 
   npm:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/my-database', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const TaskSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
  // 其他字段
});

const TaskModel = mongoose.model('Task', TaskSchema);

module.exports = TaskModel;

Salin selepas log masuk
yarn:

reee Kemudian , cipta fail db.js dalam projek dan tambah kod berikut:

import React from 'react';
import { useMutation } from 'react-query';
import TaskModel from './db';

function CreateTaskForm() {
  const createTaskMutation = useMutation((newTask) => {
    // 执行任务创建的逻辑
    return TaskModel.create(newTask); // 使用 Mongoose 保存任务数据
  });

  // 其他代码

  return (
    {/* 表单代码 */}
  );
}

Salin selepas log masuk

Dalam kod di atas, kami mentakrifkan model tugas mudah dan mengeksport model , untuk gunakan di tempat lain dalam aplikasi.


#🎜🎜#Simpan data tugasan ke pangkalan data #🎜🎜#Seterusnya, dalam fungsi panggil balik tak segerak bagi React Query useMutation hook, kita boleh menggunakan Mongoose untuk menyimpan data tugasan ke pangkalan data. #🎜🎜##🎜🎜#rrreee#🎜🎜#Dalam contoh di atas, kami menggunakan kaedah TaskModel.create untuk menyimpan data tugasan ke pangkalan data. #🎜🎜##🎜🎜#3 Ringkasan#🎜🎜# Dengan menggunakan React Query dan pangkalan data, kami boleh membersihkan dan mengesahkan data bahagian hadapan dengan mudah dan menyimpannya ke pangkalan data. Ini memastikan kesahihan dan ketekalan data serta meningkatkan pengalaman pengguna dan kualiti data aplikasi. Kod sampel di atas hanyalah contoh mudah Dalam projek sebenar, ia boleh dikembangkan dan dioptimumkan mengikut keperluan untuk memenuhi keperluan perniagaan tertentu. #🎜🎜#

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