Cara membina aplikasi pangkalan data berskala dengan React dan MongoDB

Cara menggunakan React dan MongoDB untuk membina aplikasi pangkalan data berskala

Dalam pembangunan perisian moden, membina aplikasi pangkalan data berskala perubahan telah menjadi semakin meningkat penting. React, sebagai perpustakaan JavaScript yang popular, terkenal dengan kaedah pembangunan berasaskan komponen yang cekap dan fleksibel. MongoDB ialah pangkalan data bukan perhubungan dengan kebolehskalaan dan prestasi tinggi. Artikel ini akan memperkenalkan cara menggabungkan React dan MongoDB untuk membina aplikasi pangkalan data berskala, dan menyediakan contoh kod yang sepadan.

1. Pasang dan konfigurasikan persekitaran pembangunan
Pertama, kita perlu memasang dan mengkonfigurasi persekitaran pembangunan yang sepadan. Pastikan Node.js dan npm (Pengurus pakej Node) dipasang. Anda boleh menyemak sama ada ia dipasang dengan menjalankan arahan berikut:

node -v
npm -v

Seterusnya, cipta projek React baharu menggunakan npm untuk memasang aplikasi create-react. Jalankan arahan berikut:

npx create-react-app my-app
cd my-app
npm start

Selepas operasi berjaya, pelayan pembangunan akan dimulakan secara setempat dan aplikasi React akan dibuka dalam penyemak imbas.

2 Sambung ke pangkalan data MongoDB
Sebelum menggunakan pangkalan data dalam aplikasi React, kita perlu menyambung ke MongoDB. Mula-mula, pastikan MongoDB dipasang dan perkhidmatan MongoDB dimulakan.

Seterusnya, kami akan menggunakan Mongoose sebagai pemacu Node.js untuk MongoDB, yang menyediakan API yang mudah untuk mengendalikan pangkalan data. Gunakan arahan berikut untuk memasang Mongoose:

npm install mongoose

Buat fail bernama db.js dalam direktori src aplikasi React dan tambah kod berikut:

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/my_database', { useNewUrlParser: true });

const db = mongoose.connection;

db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
  console.log('Database connected!');
});

3. Cipta Model data
Selepas menyambung ke pangkalan data, kita perlu menentukan model data. Cipta folder bernama model dalam direktori src aplikasi React anda dan buat fail bernama user.js di dalamnya. Tambahkan kod berikut pada fail user.js:

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String,
  age: Number,
  email: String,
});

const User = mongoose.model('User', userSchema);

module.exports = User;

4. Tulis komponen React
Seterusnya, kami akan menulis komponen React untuk memaparkan dan memanipulasi data dalam pangkalan data. Cipta folder bernama komponen dalam direktori src aplikasi React anda, buat fail bernama UserList.js di dalamnya dan tambah kod berikut:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('/users').then((response) => {
      setUsers(response.data);
    });
  }, []);

  return (
    <div>
      <h1 id="User-List">User List</h1>
      {users.map((user) => (
        <div key={user._id}>
          <p>Name: {user.name}</p>
          <p>Age: {user.age}</p>
          <p>Email: {user.email}</p>
        </div>
      ))}
    </div>
  );
};

export default UserList;

Dalam kod di atas, kami menggunakan Perpustakaan axios menghantar permintaan GET dan mendapatkan data pengguna dalam pangkalan data, dan kemudian menggunakan useState dan useEffect untuk mengurus dan mengemas kini keadaan data pengguna.

Seterusnya, gunakan komponen UserList dalam fail App.js:

import React from 'react';
import UserList from './components/UserList';

const App = () => {
  return (
    <div>
      <UserList />
    </div>
  );
};

export default App;

5#Sekarang, kami telah menyambung ke pangkalan data dan menulis paparan pengguna komponen React untuk data. Jalankan arahan berikut untuk memulakan aplikasi React:

npm start

Buka penyemak imbas, dan anda boleh melihat di alamat http://localhost:3000 bahawa aplikasi telah berjaya dimulakan dan data pengguna dalam pangkalan data dipaparkan.

6. Fungsi aplikasi lanjutan

Berdasarkan aplikasi asas di atas, kami juga boleh menambah dan mengedit pengguna dengan menambah borang. Tambahkan kod berikut dalam komponen UserList.js:

const [name, setName] = useState('');
const [age, setAge] = useState('');
const [email, setEmail] = useState('');

const addUser = () => {
  axios.post('/users', { name, age, email }).then((response) => {
    setUsers([...users, response.data]);
  });
};

Dalam kaedah render, tambahkan borang untuk memasukkan maklumat pengguna dan memanggil kaedah addUser untuk menambah pengguna baharu.

Dengan menambahkan kod yang serupa, kami juga boleh melaksanakan fungsi mengedit dan memadam pengguna.

7. Ringkasan

Artikel ini memperkenalkan cara menggunakan React dan MongoDB untuk membina aplikasi pangkalan data boleh skala. Mula-mula kami menyambung ke MongoDB melalui Mongoose, kemudian menentukan model data dan menggunakan React untuk menulis komponen untuk memaparkan dan mengendalikan data. Melalui contoh kod yang ditunjukkan, anda boleh memperoleh pemahaman yang mendalam tentang cara menggunakan MongoDB dalam aplikasi React. Saya harap artikel ini akan membantu anda membina aplikasi pangkalan data boleh skala.

Atas ialah kandungan terperinci Cara membina aplikasi pangkalan data berskala dengan React dan MongoDB. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!