Hướng dẫn sử dụng Node.js và Express.js

Trong hướng dẫn này, chúng ta sẽ nghiên cứu framework Express. Framework này được xây dựng theo cách hoạt động như một framework ứng dụng web Node.js tối giản và linh hoạt, cung cấp một bộ tính năng mạnh mẽ để xây dựng các ứng dụng web một trang, nhiều trang và ứng dụng web lai.

Express.js là gì?

Express.js là một framework máy chủ ứng dụng web dựa trên Node.js, được thiết kế đặc biệt để xây dựng các ứng dụng web một trang, nhiều trang và ứng dụng lai.

Nó đã trở thành khung máy chủ tiêu chuẩn cho Node.js. Express là phần backend của một kiến ​​trúc được gọi là MEAN stack.

Express xử lý các lớp định tuyến và phần mềm trung gian trên nền tảng HTTP cốt lõi của Node.js. dòng và API sự kiện.

MEAN là một nguồn mở và miễn phí JavaScript phần mềm dùng để xây dựng các trang web động và các ứng dụng web có các thành phần sau;

1) MongoDB — Cơ sở dữ liệu NoSQL tiêu chuẩn

2) Express.js — Khung ứng dụng web mặc định

3) AngularJS - Các JavaScript MVC framework được sử dụng cho các ứng dụng web

4) Node.js — Khung phần mềm được sử dụng cho các ứng dụng máy chủ và mạng có khả năng mở rộng.

Khung Express.js giúp dễ dàng phát triển một ứng dụng có thể được sử dụng để xử lý nhiều loại yêu cầu như yêu cầu GET, PUT, POST và DELETE.

Cài đặt và sử dụng Express

Express được cài đặt thông qua Node Package Manager. Điều này có thể được thực hiện bằng cách thực hiện dòng lệnh sau

npm cài đặt nhanh

Lệnh trên yêu cầu Trình quản lý gói Node tải xuống gói express cần thiết. mô-đun và lắp đặt chúng cho phù hợp.

Ghi chú phiên bản: npm hiện cài đặt Express 5.2; nhiều dự án vẫn sử dụng Express 4. Cả hai đều chạy các ví dụ bên dưới trên một máy tính. phiên bản Node.js được hỗ trợ.

Hãy sử dụng khung Express mới được cài đặt của chúng tôi và tạo một ứng dụng “Hello World” đơn giản.

Ứng dụng của chúng tôi sẽ tạo ra một ứng dụng đơn giản. mô-đun máy chủ Nó sẽ lắng nghe trên cổng số 3000. Trong ví dụ của chúng ta, nếu một yêu cầu được gửi qua trình duyệt trên cổng này, thì ứng dụng máy chủ sẽ gửi phản hồi 'Hello World' cho máy khách.

var express=require('express');
var app=express();
app.get('/',function(req,res)
{
res.send('Hello World!');
});
var server=app.listen(3000,function() {});

Code Giải thích:

1. Trong dòng mã đầu tiên, chúng tôi đang sử dụng hàm yêu cầu để bao gồm “mô-đun tốc hành”.
2. Trước khi có thể bắt đầu sử dụng mô-đun express, chúng ta cần tạo một đối tượng của nó.
3. Ở đây, chúng ta tạo một hàm gọi lại (callback function). Hàm này sẽ được gọi bất cứ khi nào ai đó truy cập vào thư mục gốc của ứng dụng web của chúng ta, tức là http://localhost:3000. Hàm gọi lại sẽ được sử dụng để gửi chuỗi "Hello World" đến trang web.
4. Trong hàm gọi lại, chúng ta đang gửi lại chuỗi “Hello World” cho máy khách. Tham số 'res' được sử dụng để gửi nội dung trở lại trang web. Tham số 'res' này là thứ được cung cấp bởi mô-đun 'request' để cho phép một người gửi nội dung trở lại trang web.
5. Tiếp theo, chúng ta sử dụng hàm `listen` để ứng dụng máy chủ lắng nghe các yêu cầu từ máy khách trên cổng số 3000. Bạn có thể chỉ định bất kỳ cổng nào khả dụng ở đây.

Nếu lệnh được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Từ đầu ra,

• Bạn có thể thấy rõ điều đó nếu bạn truy cập vào... URL Khi truy cập localhost trên cổng 3000, bạn sẽ thấy chuỗi "Hello World" hiển thị trên trang.
• Vì trong mã nguồn chúng ta đã chỉ định cụ thể máy chủ lắng nghe trên cổng số 3000, nên chúng ta có thể xem được kết quả khi truy cập vào địa chỉ này. URL.

Tuyến đường là gì?

Một tuyến đường gốc duy nhất chỉ là điểm khởi đầu.

Định tuyến xác định cách thức ứng dụng phản hồi yêu cầu của máy khách đến một điểm cuối cụ thể.

Ví dụ, một máy khách có thể thực hiện yêu cầu HTTP GET, POST, PUT hoặc DELETE cho nhiều mục đích khác nhau. URL chẳng hạn như những hình ảnh được hiển thị bên dưới;

http://localhost:3000/Books
http://localhost:3000/Students

Trong ví dụ trên,

• Nếu yêu cầu GET được thực hiện cho lần đầu tiên URLVậy thì câu trả lời lý tưởng nhất nên là một danh sách các cuốn sách.
• Nếu yêu cầu GET được thực hiện cho lần thứ hai URLVậy thì câu trả lời lý tưởng nhất nên là một danh sách sinh viên.
• Vì vậy, dựa trên URL Khi yêu cầu được truy cập, một chức năng khác trên máy chủ web sẽ được kích hoạt, và theo đó, phản hồi sẽ được gửi đến máy khách. Đây chính là khái niệm định tuyến.

Mỗi tuyến có thể có một hoặc nhiều hàm xử lý, được thực thi khi tuyến đó khớp.

Cú pháp chung cho một tuyến đường được hiển thị bên dưới

app.METHOD(PATH, HANDLER)

Trong đó,

1) ứng dụng là một phiên bản của mô-đun express

2) METHOD là phương thức yêu cầu HTTP (GET, POST, PUT hoặc DELETE)

3) PATH là đường dẫn trên máy chủ.

4) HANDLER là chức năng được thực thi khi tuyến đường được khớp.

⚠️ Express 5 ghi chú: Các chữ ký này không thay đổi, nhưng app.del() đã trở thành app.delete(), res.sendfile() đã trở thành res.sendFile(), và các ký tự đại diện giờ cần có tên như /*splat.

Hãy xem một ví dụ về cách chúng ta có thể triển khai các tuyến đường trong Express. Ví dụ của chúng ta sẽ tạo ra 3 tuyến đường như sau:

1. Tuyến A /Node sẽ hiển thị chuỗi “Hướng dẫn về Node” nếu tuyến này được truy cập
2. A /Tuyến đường góc sẽ hiển thị chuỗi “Hướng dẫn về góc” nếu tuyến đường này được truy cập
3. Một tuyến đường mặc định / sẽ hiển thị chuỗi "Chào mừng đến với Guru99 bài hướng dẫn.”

Mã cơ bản của chúng tôi sẽ giữ nguyên như các ví dụ trước. Đoạn mã dưới đây là một tiện ích bổ sung để giới thiệu cách triển khai định tuyến.

var express = require('express');
var app = express();
app.route('/Node').get(function(req,res)
{
    res.send("Tutorial on Node");
});
app.route('/Angular').get(function(req,res)
{
    res.send("Tutorial on Angular");
});
app.get('/',function(req,res){
    res.send('Welcome to Guru99 Tutorials');
});

Code Giải thích:

1. Ở đây chúng ta đang định nghĩa một tuyến đường nếu... URL http://localhost:3000/Node is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Node URLHàm này có 2 tham số.
   • Tham số chính mà chúng ta sẽ sử dụng là tham số 'res', tham số này có thể được sử dụng để gửi thông tin trở lại máy khách.
   • Tham số 'req' có thông tin về yêu cầu được thực hiện. Đôi khi các tham số bổ sung có thể được gửi như một phần của yêu cầu được thực hiện và do đó tham số 'req' có thể được sử dụng để tìm các tham số bổ sung được gửi.
2. Chúng tôi đang sử dụng chức năng gửi để gửi chuỗi “Hướng dẫn về Nút” trở lại máy khách nếu tuyến Nút được chọn.
3. Ở đây chúng ta đang định nghĩa một tuyến đường nếu... URL http://localhost:3000/Angular is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Angular URL.
4. Chúng tôi đang sử dụng chức năng gửi để gửi chuỗi “Hướng dẫn về Angular” trở lại máy khách nếu tuyến Angular được chọn.
5. Đây là tuyến đường mặc định được chọn khi bạn truy cập vào thư mục gốc của ứng dụng — http://localhost:3000. Khi tuyến đường mặc định được chọn, thông báo “Chào mừng đến với” sẽ hiển thị. Guru“99 bài hướng dẫn” sẽ được gửi đến khách hàng.

Nếu lệnh được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Từ đầu ra,

• Bạn có thể thấy rõ điều đó nếu bạn truy cập vào... URL Trên máy chủ cục bộ ở cổng 3000, bạn sẽ thấy dòng chữ 'Chào mừng đến với Guru99 bài hướng dẫn được hiển thị trên trang.
• Vì trong mã của chúng tôi, chúng tôi đã đề cập rằng giá trị mặc định của chúng tôi là URL Sẽ hiển thị thông báo này.

Tiếp theo, hãy truy cập vào /Node.

Từ đầu ra,

• Bạn có thể thấy rằng nếu URL đã được thay đổi thành /Node, tuyến đường Node tương ứng sẽ được chọn và chuỗi "Hướng dẫn về Node" sẽ được hiển thị.

Sau đó truy cập vào /Angular.

Từ đầu ra,

• Bạn có thể thấy rằng nếu URL đã được thay đổi thành /Angular, tuyến đường Node tương ứng sẽ được chọn và chuỗi "Hướng dẫn về Angular" sẽ được hiển thị.

Máy chủ Web mẫu sử dụng express.js

Từ ví dụ trên, chúng ta đã thấy cách quyết định hiển thị kết quả dựa trên định tuyến. Loại định tuyến này được sử dụng trong hầu hết các ứng dụng web hiện đại. Phần còn lại của máy chủ web là sử dụng các mẫu (template) trong Node.js.

Khi tạo các ứng dụng Node.js nhanh chóng, một cách dễ dàng và hiệu quả là sử dụng các template cho ứng dụng. Có rất nhiều framework trên thị trường để tạo template. Trong trường hợp này, chúng ta sẽ lấy ví dụ về framework Jade để tạo template.

Jade được cài đặt thông qua Trình quản lý gói Node.js. Việc này có thể được thực hiện bằng cách chạy dòng lệnh sau trong dòng lệnh:

npm cài đặt ngọc

Lệnh trên yêu cầu Trình quản lý gói Node tải xuống các mô-đun Jade cần thiết và cài đặt chúng một cách phù hợp.

LƯU Ý: Trong phiên bản mới nhất của Node Jade đã không còn được dùng nữa. Thay vào đó hãy sử dụng pug.

⚠️ Tương đương hiện đại: cài đặt, dựng lên PugĐổi tên index.jade thành index.pug và thiết lập app.set('view engine','pug'). Gói jade không nhận được bản cập nhật nào; các bước bên dưới vẫn chạy.

Hãy sử dụng framework Jade vừa được cài đặt và tạo một số mẫu cơ bản.

Bước 1) Bước đầu tiên là tạo một mẫu Jade. Tạo một tệp có tên index.jade và chèn đoạn mã bên dưới. Đảm bảo tạo tệp trong thư mục “views”.

1. Ở đây chúng tôi chỉ định rằng tiêu đề của trang sẽ được thay đổi thành bất kỳ giá trị nào được truyền khi mẫu này được gọi.
2. Chúng tôi cũng chỉ rõ rằng văn bản trong thẻ tiêu đề sẽ được thay thế bằng bất kỳ nội dung nào được truyền vào mẫu Jade.

Đoạn mã ứng dụng hiển thị nó được trình bày bên dưới.

var express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function(req,res)
{
res.render('index',
{title:'Guru99',message:'Welcome'})
});
var server=app.listen(3000,function() {});

Code Giải thích:

1. Điều đầu tiên cần chỉ định trong ứng dụng là "công cụ hiển thị" sẽ được sử dụng để hiển thị các mẫu. Vì chúng ta sẽ sử dụng Jade để hiển thị các mẫu, nên chúng ta chỉ định điều này cho phù hợp.
2. Chức năng kết xuất được sử dụng để hiển thị một trang web. Trong ví dụ của chúng tôi, chúng tôi đang hiển thị mẫu (index.jade) đã được tạo trước đó.
3. Chúng tôi đang truyền tải các giá trị của “Guru99” và “Chào mừng” sẽ được thay thế bằng các tham số “title” và “message” tương ứng. Các giá trị này sẽ được thay thế bằng các tham số 'title' và 'message' được khai báo trong mẫu index.jade.

Nếu lệnh được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Từ đầu ra,

• Chúng ta có thể thấy rằng tiêu đề của trang được đặt thành “Guru99” và tiêu đề của trang được đặt thành “Chào mừng.”
• Điều này là do mẫu Jade được gọi trong ứng dụng Node.js của chúng ta.

Câu Hỏi Thường Gặp