Express.js là gì và tại sao bạn nên sử dụng nó?
Express.js (hoặc “Express”) là một khung công tác web NodeJS được sử dụng ở phía sau (hoặc phía máy chủ) của các trang web và ứng dụng web. Express rất linh hoạt và tối giản, có nghĩa là nó không có một bộ sưu tập phong phú các thư viện và gói không cần thiết, cũng như không chỉ định cách bạn nên xây dựng ứng dụng của mình.
Khung Express xây dựng các API hỗ trợ giao tiếp thông qua các yêu cầu và phản hồi HTTP. Một trong những điều đáng chú ý về Express là nó cung cấp cho các nhà phát triển quyền kiểm soát hoàn toàn đối với các yêu cầu và phản hồi được liên kết với mỗi phương thức của ứng dụng.
Trong hướng dẫn này, bạn sẽ tìm hiểu cách thức và lý do tại sao bạn nên sử dụng Express trong các dự án của riêng mình.
Mục Lục
Cài đặt Express trong dự án của bạn
Trước khi có thể sử dụng khung Express, bạn cần cài đặt nó trong thư mục dự án của mình. Đây là một quá trình đơn giản yêu cầu NodeJS và npm.
Điều đầu tiên bạn cần làm là tạo package.json tệp (trong thư mục / thư mục dự án của bạn) bằng lệnh sau:
npm init
Việc thực thi lệnh trên sẽ bắt đầu một quá trình sẽ nhắc bạn nhập các đầu vào sau:
- Tên gói hàng
- Phiên bản
- Sự miêu tả
- Điểm đầu vào
- Lệnh kiểm tra
- Từ khóa
- Tác giả
- Giấy phép
Các trường tên gói, phiên bản, điểm nhập và giấy phép đều có giá trị mặc định mà bạn có thể dễ dàng ghi đè bằng cách cung cấp các giá trị của mình. Tuy nhiên, nếu bạn muốn giữ các giá trị mặc định, bạn có thể chỉ cần sử dụng lệnh sau để thay thế:
npm init -y
Thực hiện lệnh trên sẽ tạo ra package.json tệp trong thư mục dự án của bạn:
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
}
Bây giờ bạn có thể cài đặt Express bằng lệnh sau:
npm install express --save
Cài đặt Express sẽ tạo ra một package-lock.json tệp cũng như một node_modules thư mục.
Hiểu về tệp package.json
Lý do bạn cần tạo package.json trước khi cài đặt Express là package.json tệp hoạt động như một kho lưu trữ, lưu trữ siêu dữ liệu quan trọng về các dự án NodeJS của bạn. Sự phụ thuộc là tên của một trong những trường siêu dữ liệu này và Express là sự phụ thuộc.
Cài đặt Express trong thư mục dự án của bạn sẽ tự động cập nhật package.json tập tin.
Tệp package.json đã cập nhật
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1"
}
}
Bây giờ bạn có một trường “phụ thuộc” có một phụ thuộc — Express. Và sự phụ thuộc object lưu trữ phần mềm mà dự án của bạn phụ thuộc vào để hoạt động chính xác, trong trường hợp này là Express framework.
Tạo máy chủ với Express
Có một API xử lý việc lưu trữ và di chuyển dữ liệu là yêu cầu đối với bất kỳ ứng dụng full-stack nào và Express giúp quá trình tạo máy chủ nhanh chóng và dễ dàng.
Nhìn lại package.json ở trên và bạn sẽ thấy trường “chính”. Trường này lưu trữ điểm vào ứng dụng của bạn, là “index.js” trong ví dụ trên. Khi bạn muốn thực thi ứng dụng của mình (hoặc trong trường hợp này là máy chủ mà bạn sắp xây dựng), bạn sẽ phải thực thi index.js tệp bằng cách sử dụng lệnh sau:
node index.js
Tuy nhiên, trước khi đến giai đoạn thực thi, bạn cần tạo index.js (hoặc ứng dụng máy chủ) trong thư mục dự án của bạn.
Tạo tệp index.js
const express = require('express');const app = express();
const port = 5000;
app.get('/', (req, res) => {
res.send('Your server is operational')
})
app.listen(port, () => {
console.log(`Server is running at: http://localhost:${port}`);
})
Tệp ở trên nhập Express sau đó sử dụng nó để tạo ứng dụng Express. Sau đó, ứng dụng Express cung cấp quyền truy cập vào đến và nghe các phương thức là một phần của mô-đun Express. Các app.listen () là phương thức đầu tiên bạn cần thiết lập. Mục đích của nó là liệt kê các kết nối trên một cổng cụ thể của máy tính chủ, đó là cổng 5000 trong ví dụ trên.
Mục đích của app.get () phương pháp là lấy dữ liệu từ một tài nguyên cụ thể. Phương thức này có hai đối số: một đường dẫn và một hàm gọi lại. Đối số đường dẫn trong ví dụ trên có một dấu gạch chéo thể hiện vị trí gốc. Do đó, điều hướng đến URL http: // localhost: 5000 (là thư mục gốc của ứng dụng của bạn), trong khi ứng dụng index.js của bạn ở trên đang chạy, sẽ tạo ra kết quả sau trong trình duyệt của bạn:
Các app.get () hàm gọi lại phương thức tạo ra kết quả ở trên. Hàm gọi lại này có hai đối số – yêu cầu và phản hồi. Câu trả lời (đó là res trong ví dụ trên) là đối tượng HTTP mà ứng dụng Express gửi sau một yêu cầu HTTP (đó là những gì bạn thực hiện bằng cách nhập URL ở trên vào trình duyệt của mình).
Phục vụ một trang web tĩnh với máy chủ Express của bạn
Máy chủ đóng một vai trò quan trọng trong sự phát triển của các API giúp lưu trữ và truyền dữ liệu động và đó là nơi bạn rất có thể sẽ sử dụng máy chủ Express trong các dự án của riêng mình.
Tuy nhiên, máy chủ Express cũng có thể phục vụ các tệp tĩnh. Ví dụ: nếu bạn muốn tạo một trang web tĩnh (chẳng hạn như một trang web dành cho huấn luyện viên cá nhân, huấn luyện viên cuộc sống hoặc nhà tạo mẫu), thì bạn có thể sử dụng máy chủ Express của mình để lưu trữ trang web.
Ví dụ về trang web HTML tĩnh
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato|Staatliches" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Personal Stylist Website</title>
</head>
<body>
<nav id="navbar">
<div class="container">
<div>
<h1><i class="fas fa-vest"></i> Personal Stylist</h1>
</div>
<div class="social">
<a href="http://facebook.com" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="http://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="http://instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="http://youtube.com" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
<ul>
<li><a class="current" href="#home">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav><!-- home -->
<header id="home">
<div class="container">
<div class="showcase-container">
<div class="showcase-content">
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus rerum officia quibusdam mollitia deserunt animi soluta laudantium. Quam sapiente a dolorum magnam necessitatibus quis tempore facere totam. Dolor, sequi distinctio!</p>
<a href="#articles" class="btn ">View Services</a>
</div>
</div>
</div>
</header>
</body>
</html>
Mã HTML ở trên tạo một trang chủ tĩnh dễ chịu của trang web tạo mẫu cá nhân bằng cách liên kết đến tệp style.css sau:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
font-family: 'Lato', sans-serif;
line-height: 1.5;
}
a {
color: #333;
text-decoration: none;
}
ul {
list-style: none;
}
p {
margin: .5rem 0;
}
h1{
margin-left: 2rem;
}
/* Utility */
.container {
max-width: 1100px;
margin: auto;
padding: 0 2rem;
overflow: hidden;
}
.btn {
display: inline-block;
border: none;
background: #910505;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
}
.btn:hover {
opacity: 0.9;
}
/* Navbar */
#navbar {
background: #fff;
position: sticky;
top: 0;
z-index: 2;
}
#navbar .container {
display: grid;
grid-template-columns: 6fr 3fr 2fr;
padding: 1rem;
align-items: center;
}
#navbar h1 {
color: #b30707;
}
#navbar ul {
justify-self: end;
display: flex;
margin-right: 3.5rem;
}
#navbar ul li a {
padding: 0.5rem;
font-weight: bold;
}
#navbar ul li a.current {
background: #b30707;
color: #fff;
}
#navbar ul li a:hover {
background: #f3f3f3;
color: #333;
}
#navbar .social {
justify-self: center;
}
#navbar .social i {
color: #777;
margin-right: .5rem;
}
/* home */
#home {
color: #fff;
background: #333;
padding: 2rem;
position: relative;
}
#home:before {
content: '';
background: url(https://source.unsplash.com/random) no-repeat center center/cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.4;
}
#home .showcase-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
align-items: center;
height: 100vh;
}
#home .showcase-content {
z-index: 1;
}
#home .showcase-content p {
margin-bottom: 1rem;
}
Phục vụ trang web bằng máy chủ Express
const express = require('express');const app = express();
const port = 5000;
app.use(express.static('public'));
app.get('/', (req, res) => {
res.sendFile('index.html')
})
app.listen(port, () => {
console.log(`Server is running at: http://localhost:${port}`);
})
Các tệp HTML và CSS ở trên nằm trong một thư mục chung trong thư mục chính của dự án. Vị trí của tệp HTML giúp nó có thể truy cập được vào máy chủ Express và các chức năng của nó.
Một trong những chức năng mới trong máy chủ Express ở trên là app.use () phương pháp. Nó gắn kết express.static () phần mềm trung gian, phục vụ các tệp tĩnh. Điều này làm cho nó có thể sử dụng res.sendFile () chức năng phục vụ tĩnh index.html tệp ở trên.
Điều hướng đến vị trí http: // localhost: 5000 trong trình duyệt của bạn sẽ hiển thị một cái gì đó tương tự như kết quả sau:
Khám phá Phát triển phụ trợ
Khung Express cho phép bạn thực hiện các yêu cầu HTTP cụ thể và nhận các phản hồi thích hợp bằng cách sử dụng một tập hợp các phương pháp được xác định trước. Nó cũng là một trong những khung phụ trợ phổ biến nhất hiện nay.
Học cách sử dụng Express framework là một động thái tuyệt vời. Nhưng nếu bạn thực sự muốn trở thành một nhà phát triển phụ trợ chuyên nghiệp, bạn cần phải học hỏi thêm rất nhiều điều.
Đọc tiếp
Giới thiệu về tác giả
