Rumah hujung hadapan web tutorial js Cara Membina dan Menerapkan Aplikasi MERN Timbunan Penuh

Cara Membina dan Menerapkan Aplikasi MERN Timbunan Penuh

Jan 07, 2025 pm 02:32 PM

How to Build and Deploy a Full-Stack MERN Application

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'));
Salin selepas log masuk
Salin selepas log masuk

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>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user._id}>{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;
Salin selepas log masuk

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"
Salin selepas log masuk

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'));
Salin selepas log masuk
Salin selepas log masuk
  • 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!

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)

Ganti aksara rentetan dalam javascript Ganti aksara rentetan dalam javascript Mar 11, 2025 am 12:07 AM

Ganti aksara rentetan dalam javascript

periksa jQuery jika tarikh sah periksa jQuery jika tarikh sah Mar 01, 2025 am 08:51 AM

periksa jQuery jika tarikh sah

jQuery mendapatkan padding/margin elemen jQuery mendapatkan padding/margin elemen Mar 01, 2025 am 08:53 AM

jQuery mendapatkan padding/margin elemen

Plugin JS Manipulasi 5 Tarikh Teratas Plugin JS Manipulasi 5 Tarikh Teratas Feb 28, 2025 am 12:34 AM

Plugin JS Manipulasi 5 Tarikh Teratas

10 patut diperiksa plugin jQuery 10 patut diperiksa plugin jQuery Mar 01, 2025 am 01:29 AM

10 patut diperiksa plugin jQuery

10 Tab Accordion JQuery 10 Tab Accordion JQuery Mar 01, 2025 am 01:34 AM

10 Tab Accordion JQuery

jQuery tambah bar scroll ke div jQuery tambah bar scroll ke div Mar 01, 2025 am 01:30 AM

jQuery tambah bar scroll ke div

10 Ajax/JQuery Autocomplete Tutorial/Plugin 10 Ajax/JQuery Autocomplete Tutorial/Plugin Feb 28, 2025 am 01:03 AM

10 Ajax/JQuery Autocomplete Tutorial/Plugin

See all articles