Cara Membina dan Menerapkan Aplikasi MERN Timbunan Penuh

Timbunan MERN ialah tindanan teknologi yang popular untuk membina aplikasi web tindanan penuh. Ia terdiri daripada MongoDB, Express, React dan Node.js, setiap satunya memainkan peranan penting dalam mencipta apl web moden. Dalam artikel ini, kami akan melalui proses membina aplikasi MERN tindanan penuh dan mengaturnya ke pelayan langsung.

Apakah Tindanan MERN?

• MongoDB: Pangkalan data NoSQL yang digunakan untuk menyimpan data dalam format yang fleksibel seperti JSON.
• Express: Rangka kerja aplikasi web yang ringan untuk Node.js, yang membantu mengurus logik bahagian pelayan.
• React: Pustaka JavaScript bahagian hadapan yang digunakan untuk membina antara muka pengguna dengan komponen boleh guna semula.
• Node.js: Masa jalan JavaScript yang digunakan untuk membina logik dan API bahagian pelayan bahagian belakang.

Langkah Membina Aplikasi MERN Timbunan Penuh

1. Menyediakan Bahagian Belakang (Node.js Express MongoDB):

• Mulakan projek Node.js dan pasang kebergantungan yang diperlukan seperti ekspres, mongoose dan cors.
• Sediakan laluan dalam Express untuk mengendalikan permintaan API (cth., GET, POST, PUT, DELETE).
• Gunakan Mongoose untuk menyambung ke MongoDB dan tentukan model data.
• Sediakan pelayan dengan Express dan konfigurasikannya untuk mengendalikan permintaan.
• Laksanakan operasi CRUD (Buat, Baca, Kemas Kini, Padam) untuk berinteraksi dengan MongoDB. Contoh kod bahagian belakang:

const express = require('express');
const mongoose = require('mongoose');
const app = express();

// Middleware
app.use(express.json());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/mernApp', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.log(err));

// Define a simple model
const User = mongoose.model('User', { name: String, email: String });

// API route to get all users
app.get('/api/users', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

app.listen(5000, () => console.log('Server running on port 5000'));

2. Membina Bahagian Hadapan (React):

• Sediakan projek React menggunakan create-react-app atau alat pilihan anda.
• Buat komponen React yang sepadan dengan paparan berbeza dalam apl anda (cth., Laman Utama, Senarai Pengguna, Borang Pengguna).
• Gunakan aksios atau ambil untuk membuat permintaan API ke pelayan Express dan paparkan data dalam komponen anda.
• Urus keadaan menggunakan useState atau useContext React untuk pengurusan keadaan global. Contoh kod bahagian hadapan:

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

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/api/users')
      .then(response => {
        setUsers(response.data);
      })
      .catch(err => {
        console.error(err);
      });
  }, []);

  return (
    <div>
      <h1 id="Users">Users</h1>
      <ul>
        {users.map(user => (
          <li key="{user._id}">{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

3. Menyambung Bahagian Hadapan dan Bahagian Belakang:

• Pastikan bahagian belakang berjalan pada port yang berbeza (cth., 5000) dan bahagian hadapan (React) berjalan pada port 3000.
• Gunakan CORS (Perkongsian Sumber Silang Asal) untuk membenarkan bahagian hadapan berkomunikasi dengan bahagian belakang.
• Konfigurasikan tetapan proksi dalam package.json React untuk memudahkan permintaan API semasa pembangunan.

Contoh:

"proxy": "http://localhost:5000"

4. Menggunakan Aplikasi MERN:

• Gunakan pelayan bahagian belakang ke platform seperti Heroku atau DigitalOcean.
• Untuk bahagian hadapan, anda boleh menggunakan perkhidmatan seperti Netlify atau Vercel untuk menggunakan apl React anda.
• Selepas penggunaan, kemas kini URL API untuk menghala ke pelayan langsung dan bukannya localhost.

Contoh langkah penggunaan:

• Untuk penggunaan bahagian belakang, anda boleh menggunakan Heroku CLI:

const express = require('express');
const mongoose = require('mongoose');
const app = express();

// Middleware
app.use(express.json());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/mernApp', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.log(err));

// Define a simple model
const User = mongoose.model('User', { name: String, email: String });

// API route to get all users
app.get('/api/users', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

app.listen(5000, () => console.log('Server running on port 5000'));

• Untuk penggunaan bahagian hadapan pada Netlify, hanya tolak apl React anda ke GitHub dan sambungkannya ke Netlify.

Kesimpulan
Membina dan menggunakan aplikasi MERN tindanan penuh melibatkan penyediaan bahagian belakang dengan Node.js, Express dan MongoDB dan bahagian hadapan menggunakan React. Dengan mengikuti langkah-langkah ini, anda boleh mencipta aplikasi web lengkap yang mengendalikan kedua-dua bahagian klien dan logik sisi pelayan. Setelah dibangunkan, menggunakan apl pada platform seperti Heroku dan Netlify memastikan aplikasi anda disiarkan secara langsung dan boleh diakses oleh pengguna.

Atas ialah kandungan terperinci Cara Membina dan Menerapkan Aplikasi MERN Timbunan Penuh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!