Node.js - Khung công tác Express

Xin chào các bạn học lập trình! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của Node.js và khung công tác Express. Là giáo viên khoa học máy tính gần gũi của bạn, tôi rất vui mừng được hướng dẫn bạn trong chuyến phiêu lưu này. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - chúng ta sẽ bắt đầu từ những điều cơ bản và cùng nhau tiến hóa.

Express là gì?

Trước khi chúng ta bắt đầu, hãy nói về Express thực sự là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Bạn có thể bắt đầu từ con số không, tự làm gạch và cắt gỗ. Hoặc, bạn có thể sử dụng các vật liệu预制 để công việc dễ dàng và nhanh chóng hơn. Express giống như những vật liệu预制 đó, nhưng cho các ứng dụng web. Nó là một khung công tác cung cấp một bộ tính năng mạnh mẽ cho các ứng dụng web và di động, giúp dễ dàng và nhanh chóng hơn trong việc xây dựng các ứng dụng web với Node.js.

Cài đặt Express

Hãy bắt đầu bằng cách cài đặt Express. Đầu tiên, đảm bảo bạn đã cài đặt Node.js trên máy tính của bạn. Nếu bạn chưa, hãy truy cập trang web chính thức của Node.js và tải xuống.

Khi Node.js đã được cài đặt, mở terminal (hoặc command prompt nếu bạn đang sử dụng Windows) và nhập lệnh sau:

npm install express

Lệnh này sử dụng npm (Node Package Manager) để cài đặt Express. Hãy tưởng tượng npm như một bộ công cụ ma thuật chứa đầy các công cụ hữu ích (gọi là các gói) mà chúng ta có thể sử dụng trong các dự án Node.js của mình.

Ví dụ Hello World

Bây giờ chúng ta đã cài đặt xong Express, hãy tạo ứng dụng Express đầu tiên của chúng ta. Chúng ta sẽ bắt đầu với ví dụ kinh điển "Hello, World!".

Tạo một tệp mới gọi là app.js và nhập mã sau:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});

Hãy phân tích mã này:

1. Chúng ta nhập mô-đun Express và tạo một ứng dụng Express.
2. Chúng ta xác định một số hiệu (port) (3000 trong trường hợp này).
3. Chúng ta thiết lập một route cho URL gốc ('/') để gửi "Hello, World!" như một phản hồi.
4. Chúng ta cho ứng dụng của mình lắng nghe trên số hiệu đã chỉ định.

Để chạy ứng dụng này, hãy đi tới terminal, điều hướng đến thư mục chứa app.js, và chạy lệnh:

node app.js

Bây giờ, mở trình duyệt web của bạn và truy cập http://localhost:3000. Bạn nên thấy "Hello, World!" hiển thị trên trang. Chúc mừng! Bạn đã tạo ra ứng dụng Express đầu tiên của mình!

Đối tượng Ứng dụng

Trong ví dụ trước, chúng ta đã tạo một đối tượng ứng dụng Express:

const app = express();

Đối tượng app này là trung tâm của cách chúng ta sử dụng Express. Nó có các phương thức để định tuyến các yêu cầu HTTP, cấu hình middleware, render HTML views, đăng ký một engine template, và nhiều hơn nữa.

Dưới đây là một số phương thức thường được sử dụng của đối tượng app:

Phương thức	Mô tả
app.get()	Định tuyến các yêu cầu HTTP GET đến đường dẫn đã chỉ định với các hàm回调 đã chỉ định
app.post()	Định tuyến các yêu cầu HTTP POST đến đường dẫn đã chỉ định với các hàm回调 đã chỉ định
app.use()	Gắn các hàm middleware hoặc các hàm middleware đã chỉ định vào đường dẫn đã chỉ định
app.listen()	Đính kèm và lắng nghe các kết nối trên máy chủ và số hiệu đã chỉ định

Định tuyến Cơ bản

Định tuyến là việc xác định cách ứng dụng phản hồi với một yêu cầu từ khách hàng đến một endpoint cụ thể, là một URI (hoặc đường dẫn) và một phương thức yêu cầu HTTP cụ thể (GET, POST, v.v.).

Hãy mở rộng ứng dụng của chúng ta để bao gồm nhiều route hơn:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.get('/about', (req, res) => {
res.send('This is the about page');
});

app.post('/submit', (req, res) => {
res.send('Got a POST request');
});

app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});

Trong ví dụ này, chúng ta đã thêm hai route mới:

• Một route GET cho '/about' trả về "This is the about page"
• Một route POST cho '/submit' trả về "Got a POST request"

Để kiểm tra route POST, bạn sẽ cần một công cụ như Postman, hoặc bạn có thể tạo một form HTML để gửi đến route này.

Phục vụ Tệp Tĩnh

Thường xuyên, bạn sẽ muốn phục vụ các tệp tĩnh như hình ảnh, tệp CSS và tệp JavaScript. Express cung cấp một hàm middleware内置 express.static cho mục đích này.

Hãy tạo một thư mục叫做 public trong thư mục dự án của chúng ta, và đặt một tệp hình ảnh (giả sử cat.jpg) vào đó. Sau đó, chỉnh sửa app.js như sau:

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

app.use(express.static('public'));

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.get('/cat', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'cat.jpg'));
});

app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});

Trong ví dụ này, chúng ta đã thực hiện hai việc:

1. Sử dụng app.use(express.static('public')) để phục vụ các tệp tĩnh từ thư mục 'public'.
2. Thêm một route '/cat' trả về tệp cat.jpg.

Bây giờ, bạn có thể truy cập tệp hình ảnh của bạn trực tiếp tại http://localhost:3000/cat.jpg, hoặc thông qua route '/cat' mà chúng ta đã xác định.

Và thế là xong! Chúng ta đã bao gồm các основы Express, từ cài đặt đến phục vụ các tệp tĩnh. Nhớ rằng, học lập trình giống như học một ngôn ngữ mới - nó đòi hỏi sự thực hành và kiên nhẫn. Đừng nản lòng nếu bạn không hiểu ngay lập tức mọi thứ. Hãy tiếp tục thử nghiệm, tiếp tục xây dựng, và quan trọng nhất, hãy vui vẻ!

Trong bài học tiếp theo, chúng ta sẽ đi sâu hơn vào middleware của Express và các kỹ thuật định tuyến nâng cao. Đến那时候, chúc các bạn lập trình vui vẻ!

Credits: Image by storyset