Trong hướng dẫn này, chúng ta sẽ nghiên cứu về Express framework. Khung này được xây dựng theo cách mà nó hoạt động như một khung ứng dụng web Node.js tối thiểu và linh hoạt, cung cấp một tập hợp các tính năng mạnh mẽ để xây dựng ứng dụng web đơn và đa trang và ứng dụng web kết hợp.
Trong hướng dẫn này, bạn sẽ học-
- Express.js là gì?
- Cài đặt và sử dụng Express
- Các tuyến đường là gì?
- Máy chủ web mẫu sử dụng express.js
Express.js là gì?
Express.js là một khung máy chủ ứng dụng web 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à kết hợp.
Nó đã trở thành khung máy chủ tiêu chuẩn cho node.js. Express là phần phụ trợ của thứ được gọi là ngăn xếp MEAN.
MEAN là một ngăn xếp phần mềm JavaScript mã nguồn mở và miễn phí để xây dựng các trang web động và ứ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) Angular.js - Khung JavaScript MVC được sử dụng cho các ứng dụng web
4) Node.js - Khung được sử dụng cho các ứng dụng mạng và phía máy chủ có thể mở rộng.
Khung công tác Express.js giúp bạn rất 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 Trình quản lý gói Node. Điều này có thể được thực hiện bằng cách thực hiện dòng sau trong dòng lệnh
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 các mô-đun express cần thiết và cài đặt chúng cho phù hợp.
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 một mô-đun máy chủ đơn giản sẽ lắng nghe trên số cổng 3000. Trong ví dụ của chúng tôi, nếu một yêu cầu được thực hiện thông qua trình duyệt trên số cổng này, thì ứng dụng máy chủ sẽ gửi phản hồi 'Xin chào' Thế giới 'đến 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() {});
Giải thích mã:
- Trong dòng mã đầu tiên của chúng tôi, chúng tôi đang sử dụng hàm request để bao gồm "mô-đun nhanh".
- 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ó.
- Ở đây chúng tôi đang tạo một hàm gọi lại. Hàm này sẽ được gọi bất cứ khi nào có người duyệt đến thư mục gốc của ứng dụng web của chúng tôi là http: // localhost: 3000 . Hàm gọi lại sẽ được sử dụng để gửi chuỗi 'Hello World' đến trang web.
- Trong hàm gọi lại, chúng tôi đang gửi chuỗi "Hello World" trở lại 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.
- Sau đó, chúng tôi đang sử dụng chức năng lắng nghe để làm cho ứng dụng máy chủ của chúng tôi lắng nghe các yêu cầu của khách hàng trên cổng số 3000. Bạn có thể chỉ định bất kỳ cổng nào có sẵn tại đây.
Nếu lệnh được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Từ đầu ra,
- Bạn có thể thấy rõ rằng chúng tôi nếu duyệt đến URL của localhost trên cổng 3000, bạn sẽ thấy chuỗi 'Hello World' được hiển thị trên trang.
- Bởi vì trong mã của chúng tôi, chúng tôi đã đề cập cụ thể cho máy chủ lắng nghe trên cổng số 3000, chúng tôi có thể xem đầu ra khi duyệt đến URL này.
Các tuyến đường là gì?
Định tuyến xác định cách ứng dụng phản hồi yêu cầu của khách hàng tới một điểm cuối cụ thể.
Ví dụ: khách hàng có thể thực hiện yêu cầu GET, POST, PUT hoặc DELETE http cho các URL khác nhau, chẳng hạn như các URL được hiển thị bên dưới;
http://localhost:3000/Bookshttp://localhost:3000/Students
Trong ví dụ trên,
- Nếu một yêu cầu GET được thực hiện cho URL đầu tiên, thì phản hồi lý tưởng phải là một danh sách sách.
- Nếu yêu cầu GET được thực hiện cho URL thứ hai, thì phản hồi lý tưởng phải là danh sách Học sinh.
- Vì vậy, dựa trên URL được truy cập, một chức năng khác trên máy chủ web sẽ được gọi và theo đó, phản hồi sẽ được gửi đến máy khách. Đây là khái niệm về đị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 được 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à một phương thức yêu cầu HTTP (GET, POST, PUT hoặc DELETE)
3) PATH là một đường dẫn trên máy chủ.
4) HANDLER là hàm được thực thi khi tuyến được khớp.
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 tôi sẽ tạo ra 3 tuyến đường như
- A / Node route sẽ hiển thị chuỗi "Hướng dẫn trên Node" nếu đường này được truy cập
- A / Angular route sẽ hiển thị chuỗi "Hướng dẫn trên Angular" nếu đường này được truy cập
- Một tuyến đường mặc định / sẽ hiển thị chuỗi "Chào mừng bạn đến với Hướng dẫn Guru99."
Mã cơ bản của chúng tôi sẽ vẫn giống 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');}));
Giải thích mã:
- Ở đây chúng tôi đang xác định một tuyến đường nếu URL http: // localhost: 3000 / Node được chọn trong trình duyệt. Đối với tuyến đường, chúng tôi đang đính kèm một hàm gọi lại sẽ được gọi khi chúng tôi duyệt đến URL nút.
Hàm có 2 tham số.
- Tham số chính mà chúng tôi sẽ sử dụng là tham số 'res', 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 đang đượ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 đang được thực hiện và do đó, tham số 'req' có thể được sử dụng để tìm các tham số bổ sung đang được gửi.
- Chúng tôi đang sử dụng hàm gửi để gửi chuỗi "Hướng dẫn trên Node" trở lại máy khách nếu tuyến Node được chọn.
- Ở đây chúng tôi đang xác định một tuyến đường nếu URL http: // localhost: 3000 / Angular được chọn trong trình duyệt. Đối với tuyến đường, chúng tôi đang đính kèm một hàm gọi lại sẽ được gọi khi chúng tôi duyệt đến URL Angular.
- Chúng tôi đang sử dụng hàm gửi để gửi chuỗi "Hướng dẫn trên Angular" trở lại máy khách nếu tuyến Angular được chọn.
- Đây là tuyến mặc định được chọn khi một người duyệt đến tuyến 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 bạn đến với Hướng dẫn Guru99" sẽ được gửi đến khách hàng.
Nếu lệnh được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Từ đầu ra,
- Bạn có thể thấy rõ rằng chúng tôi nếu duyệt đến URL của localhost trên cổng 3000, bạn sẽ thấy chuỗi 'Chào mừng đến với Hướng dẫn Guru99' được hiển thị trên trang.
- Bởi vì trong mã của chúng tôi, chúng tôi đã đề cập rằng URL mặc định của chúng tôi sẽ hiển thị thông báo này.
Từ đầu ra,
- Bạn có thể thấy rằng nếu URL đã được thay đổi thành / Node, thì tuyến Node tương ứng sẽ được chọn và chuỗi "Tutorial On Node" được hiển thị.
Từ đầu ra,
- Bạn có thể thấy rằng nếu URL đã được thay đổi thành / Angular, thì tuyến Node tương ứng sẽ được chọn và chuỗi "Tutorial On Angular" đượ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 chúng ta có thể quyết định xem đầu ra nào sẽ hiển thị 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 khác của máy chủ web là sử dụng các mẫu trong Node js.
Khi tạo các ứng dụng Node nhanh chóng, một cách dễ dàng và nhanh chóng là sử dụng các mẫu cho ứng dụng. Có rất nhiều khuôn khổ có sẵn trên thị trường để tạo mẫu. Trong trường hợp của chúng tôi, chúng tôi sẽ lấy ví dụ về khung ngọc bích để luyện mẫu.
Jade được cài đặt thông qua trình quản lý gói Node. Điều này có thể được thực hiện bằng cách thực hiện dòng 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 ngọc bích cần thiết và cài đặt chúng cho phù hợp.
LƯU Ý: Trong phiên bản mới nhất của Node, ngọc bích đã không còn được dùng nữa. Thay vào đó, hãy sử dụng pug.
Hãy sử dụng khung ngọc bích mới được cài đặt của chúng tôi 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 ngọc bích. Tạo một tệp có tên là index.jade và chèn đoạn mã bên dưới. Đảm bảo tạo tệp trong thư mục "chế độ xem"
- Ở đâ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 chuyển khi mẫu này được gọi.
- Chúng tôi cũng chỉ định rằng văn bản trong thẻ tiêu đề sẽ được thay thế bằng bất cứ thứ gì được chuyển qua trong mẫu ngọc bích.
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() {});
Giải thích mã:
- Điều đầu tiên cần chỉ định trong ứng dụng là "công cụ xem" sẽ được sử dụng để hiển thị các mẫu. Vì chúng tôi sẽ sử dụng ngọc bích để hiển thị các mẫu của mình, chúng tôi chỉ định điều này cho phù hợp.
- Chức năng kết xuất được sử dụng để kết xuất 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 đó.
- Chúng tôi đang chuyển các giá trị của "Guru99" và "Chào mừng" đến các tham số "tiêu đề" và "thông báo" 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, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong 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 ngọc bích được gọi trong ứng dụng nút js của chúng tôi.
Tóm lược
- Khung thể hiện là khung phổ biến nhất được sử dụng để phát triển các ứng dụng Node js. Khung express được xây dựng dựa trên khung node.js và giúp theo dõi nhanh sự phát triển của các ứng dụng dựa trên máy chủ.
- Các tuyến được sử dụng để chuyển hướng người dùng đến các phần khác nhau của ứng dụng web dựa trên yêu cầu được đưa ra. Phản hồi cho mỗi tuyến đường có thể khác nhau tùy thuộc vào những gì cần được hiển thị cho người dùng.
- Mẫu có thể được sử dụng để đưa nội dung vào một cách hiệu quả. Jade là một trong những công cụ tạo khuôn mẫu phổ biến nhất được sử dụng trong các ứng dụng Node.js.
