Memahami Corak MVC dengan Node.js

Corak Model-View-Controller (MVC) ialah salah satu corak seni bina yang paling popular dalam pembangunan web. Dengan membahagikan aplikasi kepada tiga komponen yang saling berkaitan — Model, View dan Controller — MVC mempromosikan kod yang teratur, boleh diselenggara dan berskala. Node.js, dengan pemprosesan tak segerak dan ekosistemnya yang luas, ialah pilihan terbaik untuk membina aplikasi berasaskan MVC, terutamanya untuk pembangunan web dan API. Panduan ini meneroka corak MVC dengan Node.js, membawa anda melalui manfaatnya dan pelaksanaan praktikal.

Apakah Corak MVC?

Corak MVC membahagikan aplikasi kepada tiga bahagian yang berbeza:

1. Model: Mewakili data dan logik perniagaan aplikasi. Ia berinteraksi dengan pangkalan data dan memproses data secara bebas daripada antara muka pengguna.
2. Paparan: Mengendalikan lapisan pembentangan aplikasi. Ia memaparkan data kepada pengguna dan menghantar arahan pengguna kepada Pengawal.
3. Pengawal: Bertindak sebagai perantara antara Model dan View. Ia memerlukan input pengguna, berinteraksi dengan Model dan mengemas kini Paparan dengan sewajarnya.

Pengasingan kebimbangan ini membantu menyusun kod dengan cara yang mudah diurus, diuji dan dikembangkan.

Faedah Menggunakan MVC dalam Node.js

1. Kebolehselenggaraan: MVC menjadikannya lebih mudah untuk mengurus aplikasi kompleks dengan menyusun kod ke dalam lapisan.
2. Skalabiliti: Struktur membenarkan komponen individu diskalakan atau diubah suai secara bebas.
3. Kod Boleh Digunakan Semula: Dengan MVC, komponen selalunya boleh diguna semula merentas berbilang paparan atau bahagian aplikasi.
4. Kerjasama Pasukan yang Cekap: Pembangun bahagian hadapan dan bahagian belakang boleh berfungsi serentak dengan pertindihan yang minimum.

Menyediakan Projek MVC dengan Node.js

Di sini, kami akan membina aplikasi MVC ringkas menggunakan Node.js dan Express. Contoh kami ialah "Pengurus Tugas" asas yang membolehkan pengguna melihat, menambah dan memadamkan tugasan.

Langkah 1: Mulakan Projek

Mulakan dengan mencipta projek Node.js baharu dan memasang kebergantungan yang diperlukan.

# Create a project folder
mkdir mvc-task-manager
cd mvc-task-manager

# Initialize Node.js
npm init -y

# Install Express and other dependencies
npm install express ejs mongoose body-parser

• Express: Rangka kerja web minimalis untuk Node.js, sesuai untuk menyediakan pengawal dan laluan.
• EJS: Enjin templat yang membolehkan anda memaparkan paparan HTML dinamik.
• Mongoose: Perpustakaan popular untuk MongoDB untuk memodelkan data kami dalam pangkalan data.
• Penghuraikan badan: Perisian tengah untuk menghuraikan badan permintaan masuk dalam perisian tengah.

Langkah 2: Sediakan Struktur Projek

Susun aplikasi ke dalam model, paparan dan folder pengawal. Struktur ini penting untuk corak MVC.

mvc-task-manager/
│
├── models/
│   └── Task.js
│
├── views/
│   ├── index.ejs
│   └── tasks.ejs
│
├── controllers/
│   └── taskController.js
│
├── public/
│   └── css/
│       └── styles.css
│
├── app.js
└── package.json

Langkah 3: Konfigurasikan Model

Model mewakili struktur data dalam aplikasi anda. Untuk pengurus tugas ini, kami akan mentakrifkan model Tugas dalam MongoDB menggunakan Mongoose.

// models/Task.js

const mongoose = require('mongoose');

const taskSchema = new mongoose.Schema({
    title: { type: String, required: true },
    description: { type: String },
    completed: { type: Boolean, default: false }
});

module.exports = mongoose.model('Task', taskSchema);

Di sini, taskSchema mentakrifkan model Tugas kami dengan medan untuk tajuk, penerangan dan dilengkapkan.

Langkah 4: Buat Pengawal

Pengawal mengendalikan logik aplikasi, memproses input pengguna, berinteraksi dengan Model dan mengarahkan Paparan untuk memaparkan data.

// controllers/taskController.js

const Task = require('../models/Task');

exports.getTasks = async (req, res) => {
    const tasks = await Task.find();
    res.render('tasks', { tasks });
};

exports.createTask = async (req, res) => {
    const { title, description } = req.body;
    await Task.create({ title, description });
    res.redirect('/tasks');
};

exports.deleteTask = async (req, res) => {
    await Task.findByIdAndDelete(req.params.id);
    res.redirect('/tasks');
};

Pengawal ini mentakrifkan tiga tindakan utama:

• getTasks: Mengambil semua tugasan daripada pangkalan data.
• createTask: Menambah tugas baharu pada pangkalan data.
• deleteTask: Memadamkan tugas dengan IDnya.

Langkah 5: Sediakan Paparan

Dalam contoh ini, kami menggunakan EJS untuk memaparkan paparan HTML. Ini akan membolehkan kami memaparkan data tugasan secara dinamik dalam penyemak imbas.

Buat fail index.ejs untuk halaman utama dan fail tasks.ejs untuk memaparkan tugasan.

<!-- views/index.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Manager</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <h1>Welcome to Task Manager</h1>
    <a href="/tasks">View Tasks</a>
</body>
</html>

Fail tasks.ejs akan memaparkan senarai tugasan dan menyediakan borang untuk menambah atau memadam tugas.

<!-- views/tasks.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task List</title>
</head>
<body>
    <h1>Tasks</h1>

    <ul>
        <% tasks.forEach(task => { %>
            <li><%= task.title %> - <a href="/delete/<%= task._id %>">Delete</a></li>
        <% }) %>
    </ul>

    <form action="/add" method="POST">
        <input type="text" name="title" placeholder="Task Title" required>
        <input type="text" name="description" placeholder="Description">
        <button type="submit">Add Task</button>
    </form>
</body>
</html>

Langkah 6: Sediakan Laluan

Tentukan laluan dalam fail app.js utama untuk menyambungkan setiap titik akhir URL ke fungsi pengawal yang berkaitan.

// app.js

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const taskController = require('./controllers/taskController');

const app = express();
app.set('view engine', 'ejs');

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

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));

// Routes
app.get('/', (req, res) => res.render('index'));
app.get('/tasks', taskController.getTasks);
app.post('/add', taskController.createTask);
app.get('/delete/:id', taskController.deleteTask);

const PORT = 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Langkah 7: Menggayakan dengan CSS

Untuk menambah sedikit penggayaan, buat fail styles.css dalam folder awam/css/. Anda boleh menambah penggayaan asas untuk menjadikan aplikasi anda menarik secara visual.

Langkah 8: Jalankan dan Uji Aplikasi

Mulakan aplikasi menggunakan:

node app.js

Lawati http://localhost:3000 dalam penyemak imbas anda. Anda akan dapat menavigasi antara paparan, menambah tugasan baharu dan memadamkan tugasan menggunakan seni bina MVC.

Amalan Terbaik untuk Seni Bina MVC dalam Node.js

1. Pastikan Pengawal Nipis: Logik perniagaan harus terletak terutamanya dalam Model.
2. Gunakan Middleware untuk Kod Boleh Digunakan Semula: Contohnya, gunakan middleware untuk pengesahan atau permintaan pengelogan.
3. Asingkan Laluan daripada Pengawal: Untuk memastikan pengawal bersih dan fokus, pertimbangkan untuk menentukan laluan dalam fail berasingan.
4. Modularkan Kod Anda: Simpan model, paparan dan pengawal dalam fail dan folder yang berasingan untuk mengekalkan struktur.

Atas ialah kandungan terperinci Memahami Corak MVC dengan Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!