Hỏi đáp

Middleware Trong Expressjs Là Gì? Tất Tần Tật Về Khái Niệm Express Js Là Gì

Hai nội dung nội dung bài viết trước mình đã cùng nhau tìm hiểu những ưu thế của Nodejs là gì rồi. Chúng ta sở hữu cảm thấy hưng phấn để chính thức bước đi vào toàn thị trường quốc tế Nodejs chưa? Để mở màn cho “vũ trụ” lập trình NodeJS, chúng ta sẽ bắt tay vào xây dựng một ứng dụng web với NodeJS + ExpressJS giản dị và giản dị nhé.

Chúng ta đang xem: Expressjs là gì? tất tần tật về quan niệm express

Lưu ý: Nội dung nội dung bài viết này sẽ quan trọng hữu ích nếu như quý khách hàng sở hữu kiển thức cơ các bạn dạng về Front-end như Javascript, HTML, CSS. Nếu chưa tồn tại thì cũng ko sao, từ từ sẽ quen thôi.

*

Trước lúc bắt tay vào viết code, mình sẽ điểm qua những thư viện, dụng cụ được sử dụng trong nội dung nội dung bài viết đã nhé.

Nội dung chính của nội dung nội dung bài viết

#Để tạo ứng dụng web với NodeJS mong muốn những gì?#Reviews ứng dụng web với NodeJS sẽ xây dựng trong nội dung nội dung bài viết#Xây dựng giao diện và logic của ứng dụng webLàm việc với JSON data trong NodeJS

#Express js là gì?

ExpressJS là một web framework được xây dựng trên nền tảng NodeJs. Expressjs hỗ trợ những hàm HTTP và midleware để tạo ra API giản dị và giản dị và dễ sử dụng.

ExpressJS được phát hành theo giấy phép mã nguồn mở, sở hữu xã hội hỗ trợ to, được phép sử dụng cho ứng dụng sở hữu mục đích thương mại. Do vậy chúng ta trọn vẹn mà thậm chí yên tâm sử dụng framework này cho dự án công trình công trình xây dựng của tớ, từ dự án công trình công trình xây dựng nhỏ tới to.

Cấu trúc thư mục dự án công trình công trình xây dựng lúc sử dụng ExpressJS được chia là 3 phần: routes, Views và Public. ExpressJS xây dựng ứng dụng web tuân theo quy mô MVC (Model – View – Controller).

*

Một trong những tác dụng chính của ExpressJS:

Hỗ trợ middleware để trả về những HTTP requestĐịnh nghĩa route dựa trên những action của HTTP (CRUD)Cho phép trả về những trang html sử dụng những template engine (jade, pug…)

#Để tạo ứng dụng web với NodeJS mong muốn những gì?

Nếu như các bạn đã biết Javascript nhưng toàn bộ lại chỉ gói gọn trong số ứng dụng front-end, thì nội dung nội dung bài viết này sinh ra là dành dụm cho mình.

Trong số ngôn từ lập trình, cá thể mình thấy Javascript là một ngôn từ đa năng nhất cho tới thời điểm hiện tại. Nó mà thậm chí giúp cho chính mình xây dựng ứng dụng từ front-end tới back-end, từ mobile tới web…

Trước lúc chính thức, các bạn phải setup Nodejs và NPM. Nếu như các bạn chưa cài thì tuân theo hướng dẫn ở nội dung nội dung bài viết này: Hướng dẫn ví dụ setup Node.js

Hãy chắc khỏe chúng ta đã setup thành công Node.js và NPM bằng phương pháp kiểm tra vesion của chúng bằng terminal:

node -vnpm -vMình tin là với những phiên các bạn dạng Node.js và NPM cũ hơn thì chúng ta vẫn mà thậm chí code tốt được. Tuy nhiên, nếu như mang bất kì lỗi xảy lúc tuân theo nội dung nội dung bài viết của tớ việc trước nhất chúng ta nghĩ tới là tăng cấp version của Nodejs và NPM nhé!

#Reviews ứng dụng web với NodeJS sẽ xây dựng trong nội dung nội dung bài viết

Để chúng ta đỡ bị choáng ngợp lúc mới chính thức làm quen với Nodejs và ExpressJS. Mình sẽ cùng nhau xây dựng một ứng dụng web rất cơ các bạn dạng sở hữu trang chủ page và một vài sub page với Nodejs.

Ứng dụng này sẽ sử dụng Express.js framework, và render HTML bằng thư viện PUG( trước kia thư viện mang tên là Jade).

Phía trên là giao diện ứng dụng web sau lúc hoàn thành nội dung nội dung bài viết.

#Khởi tạo ứng dụng

Chúng ta mà thậm chí sử dụng lệnh của NPM để tạo một dự án công trình công trình xây dựng mới tinh. Đơn giản và giản dị và giản dị là gõ lệnh sau và tuân theo hướng dẫn:

npm initNếu lười, chúng ta mà thậm chí tải về dự án công trình công trình xây dựng mình tạo sẵn tại phía trên:

Sau lúc tải về, chúng ta Open sổ terminal và chuyển tới thư mục dự án công trình công trình xây dựng, gõ lệnh sau để setup toàn bộ thư viện( dependencies) quan trọng:

npm installCác chúng ta mở file server.js lên và import và khởi tạo express.js như dưới:

const express = require(“express”);const app = express();Hàm express() là hàm tối đa được exported bởi express module

Tiếp theo, chúng ta sẽ tạo một server để chạy website. Như của tớ thì server sẽ chạy trên port 7000, chúng ta mà thậm chí đổi port lịch sự và trang nhã bất kì port nào cũng tương đối được.

const server = app.listen(7000, () => { console.log(`Express running → PORT ${server.address().port}`);});Chúng ta thử start server lên xem thế nào. Từ terminal, chúng ta gõ lệnh sau:

Để định nghĩa một router GET bằng expressJS, chúng ta sử dụng đoạn code sau:

app.get(“/”, (req, res) => { res.send(“Hello World!”);});Đoạn code trên tức là, lúc chúng ta truy vấn vào trang chủ( địa chỉ “/”) qua phương thức GET, server sẽ trả về một message là “” Hello World”.

Lưu ý: Tuy nhiên chúng ta mà thậm chí tạo router cho bất kì loại request nào của HTTP như POST, PUT, DELETE. Tuy nhiên, nội dung nội dung bài viết này mình chỉ sử dụng phương phức GET cho giản dị và giản dị.

OK, sau lúc thiết lập router xong, chúng ta khởi động lại server để thay đổi code sở hữu hiệu lực hiện hành thực thi. Thành tựu thu được như sau:

*

#Sử dụng pm2 để tự khởi động server lúc thay đổi code

Như chúng ta cũng thấy ở trên, mỗi lần chúng ta thay đổi code thì đều phải khởi động lại server để đoạn code thay sở hữu hiệu lực hiện hành thực thi.

Để tiết kiệm ngân sách và chi phí kinh tế thời hạn phát triển ứng dụng, chúng ta mà thậm chí sử dụng dụng cụ giúp tự khởi động lại server mỗi lúc thay đổi code. Sở hữu rất nhiều dụng cụ như vậy, mà thậm chí nói đến việc như: nodemon, forever, PM2…Cá thể mình thì thích sử dụng PM2 vì thế thế tính hiệu suất cao của nó.

Xem thêm: Ham Học Tiếng Anh Là Gì ? Những Câu Ví Dụ Những Cụm Từ Đắt Giá Miêu Tả Phiên phiên bản

Nếu như các bạn để ý trong file package.json, những các bạn sẽ thấy mình để sẵn PM2 trong devDependencies, nên chúng ta mà thậm chí sử dụng PM2 luôn luôn luôn luôn được.

Chúng ta tạo một script trong package.json như sau:

{ // … “scripts”: { “start”: “npx pm2 start server.js –watch” } // …}Sau cùng, chúng ta chạy lại server bằng lệnh:

npm startTừ lúc này trở đi, chúng ta cứ thay đổi code thoải mái là mà thậm chí test được ngay mà ko quan trọng phải khởi động lại server nữa. Quá tiện phải ko?

#Rendering HTML sử dụng Pug

Thường thì, lúc người tiêu dùng kết nối vào một trong những trong những URL của website, server sẽ trả về là một trang HTML. Thay vì thế thế chúng ta sẽ không còn sử dụng trả về một file HTML sẵn thì chúng ta sẽ sử dụng dụng những template engine để hỗ trợ render những file HTML.

Một template engine cho phép chúng ta tạo một trang HTML và thay thế những biến với giá trị thật trong template lúc trả về cho toàn bộ những người tiêu dùng. Nếu như các bạn đã từng sử dụng data binding trong lập trình Android thì template engine cũng sinh hoạt tương tự.

Sở hữu một trong những template engine mà thậm chí thao tác với ExpressJS như: Pug(Jade), EJS, Mustache…

Trong nội dung nội dung bài viết này, mình sẽ sử dụng Pug, giản dị và giản dị vì thế thế mình đã quen cách sử dụng của nó. Chúng ta sau này mà thậm chí tùy ý lựa sắm cho dự án công trình công trình xây dựng của tớ.

Để sử dụng Pug, chúng ta cần khai báo trong package.json

“dependencies”: { “pug”: “^2.0.3”},Và khai báo trong server.js

app.set(“view engine”, “pug”);Trong ExpressJS, những template HTML sẽ được đặt trong thư mục Views. Trong ví dụ này, mình thử tạo một file template mang tên là: index.pug sở hữu nội dung như sau:

p Hello Pug!Để render ra file template này lúc người tiêu dùng vào trang chủ, ta sửa đoạn thiết lập router ở trên thành:

app.get(“/”, (req, res) => { res.render(“index”)});Và thành tựu thu được như sau:

*

Note: Để sử dụng PUG, chúng ta cần phải ghi nhận một vài syntax của nó. Tuy nhiên, do nội dung nội dung bài viết này tương đối dài nên mình sẽ hướng dẫn chúng ta cách sử dụng PUG ở một nội dung nội dung bài viết khác nhé. Chúng ta nhớ đón đọc nhé!

#Xây dựng giao diện và logic của ứng dụng web

Đọc tới phía trên thì các bạn đã sở hữu một trong những kiến thức và kỹ năng và kỹ năng cơ các bạn dạng về ExpressJS, template engine. Chúng ta sẽ bắt tay vào xây dựng website như ở đầu nội dung nội dung bài viết đã trình diễn.

Trước hết, chúng ta sẽ tạo giao diện trang chủ, đặt tên là default.pug, code sẽ như sau:

Còn phía trên là file index.pug

extends defaultblock nội dung div.containerChúng ta lại sửa lại đoạn code thiết lập router ở trên thành như sau:

app.get(“/”, (req, res) => { res.render(“index”, { title: “Homepage”});});Như ở phía trên, toàn bộ biến #{title} trong file default.pug sẽ được thay thế bằng text: “Homepage” rồi trả về cho trình duyệt. Thành tựu như sau:

*

Thao tác thao tác làm việc với static nội dung

Trên phía trên, chúng ta mới chỉ trả về mỗi HTML cho trình duyệt. Để website quý phái trọng hơn, chúng ta nhu yếu đuối CSS.

Để sử dụng được CSS trong ExpressJS, chúng ta thêm đoạn code sau:

// …app.set(“view engine”, “pug”);// serve static files from the `public` folderapp.use(express.static(__dirname + “/public”));// …Xong, chúng ta thử refesh lại trình duyệt và tận thưởng thành tựu:

*

Thao tác thao tác làm việc với JSON data trong NodeJS

Những website lúc này nhiều phần là web động, tức là server sẽ lưu dữ liệu trong database, rồi lại lấy ra đưa lên những template engine.

Vì như thế thế chúng ta ko sử dụng database trong nội dung nội dung bài viết này, nên mình sẽ tạo một file JSON vậy.

Mình sẽ tạo file people.json sở hữu cấu trúc như sau:

{ “profiles”: < { “firstname”: “Duong”, “lastname”: “Anh Sơn”, “bio”: “Anh Sơn là một lập trình Android và giờ đang hướng dẫn về NodeJS.”, “tagline”: “Developer, Writer and Speaker”, “twitter”: “https://twitter.com/ngotuannghia”, “imgSrc”: “tom-jagger.jpg”, “id”: “tom” }, >}Đại khái như vậy, chúng ta tự đổi nội dung theo ý mình nhé!

Chúng ta khai báo file JSON trong server.js. Và thành tựu server.js sẽ như sau:

const express = require(“express”);const people = require(“./people.json”);const app = express();app.set(“view engine”, “pug”);app.use(express.static(__dirname + “/public”));app.get(“/”, (req, res) => { res.render(“index”, { title: “Homepage”, people: people.profiles });});const server = app.listen(7000, () => { console.log(`Express running → PORT ${server.address().port}`);});Như đoạn code trên, chúng ta reference file JSON vào biến people. Sau đó pass mảng profiles vào template engine trải qua people.

Giờ phía trên, chúng ta đổi một chút ở index.pug như sau:

extends defaultblock nội dung div.container each person in people div.person div.person-image(style=`background: url(“/images/${person.imgSrc}”) top center no-repeat; background-size: cover;`) h2.person-name | #{person.firstname} #{person.lastname} a(href=`/profile?id=${person.id}`) | View ProfileKết quả thu được:

*

Lúc chúng ta thử nhấp chuột vào link: “View Profile” ngay lập tức những các bạn sẽ bị lỗi “cannot GET /profile“.

Lỗi này tương tự như trước chúng ta đã phát hiện. Đơn giản và giản dị và giản dị là server chưa tồn tại thiết lập cho router “/profile”.

Tương tự như phần thiết lập router cho trang chủ, chúng ta tiếp đến vào router cho phần này như sau:

app.get(“/profile”, (req, res) => { const person = people.profiles.find(p => p.id === req.query.id); res.render(“profile”, { title: `About ${person.firstname} ${person.lastname}`, person, });});và template engine thì tạo một file mới: profile.pug

extends defaultblock headerblock nội dung div.profile div.profile-image(style=`background: url(“/images/${person.imgSrc}”) top center no-repeat; background-size: cover;`) div.profile-details h1.profile-name | #{person.firstname} #{person.lastname} h2.profile-tagline | #{person.tagline} p.profile-bio | #{person.bio} a.button.button-twitter(href=`${person.twitter}`) | Follow me on TwitterThế là xong. Giờ chúng ta thử refesh trình duyệt và nhấp chuột vào ví dụ từng profile xem thành tựu nhé

#Tạm kết

Như vậy, qua nội dung nội dung bài viết này mình đã hướng dẫn chúng ta cách tạo ứng dụng web với NodeJS + ExpressJS giản dị và giản dị.

Mới đầu tiếp cận với Nodejs, những những các bạn sẽ thấy khá bơ ngỡ. Như lúc đã quen rồi thì những các bạn sẽ thấy nó thực sự tuyệt vời.

Xem thêm: Nghĩa Của Từ : Nông Sản Tiếng Anh Chuyên Ngành Nông Nghiệp, Nông Sản Tiếng Anh Là Gì

Mình hy vọng những những các bạn sẽ thấy sở hữu ích lúc đọc nội dung nội dung bài viết này. Nếu chúng ta ủng hộ, mình sẽ tiếp đến viết về Nodejs để chúng ta cùng học hỏi.

Phân mục: Tổng hợp

Về Viettingame.com

Viettingame.com - Chuyên trang web tổng hợp những thông tin hữu ích trên internet như thông tin về game, tin tổng hợp
Xem tất cả các bài viết của Viettingame.com →

Trả lời

Email của bạn sẽ không được hiển thị công khai.