Trong bài tập trong bài học trước,
chúng tôi đã xây dựng một máy chủ HTTP đơn giản có thể phục vụ nội dung tĩnh,
điều này được xây dựng hoàn toàn bằng cách sử dụng Node.js.
Bây giờ chúng ta đã học được về Express,
khung tối giản hỗ trợ phát triển của máy chủ trên đầu trang của Node.js,
bây giờ chúng ta hãy xem xét làm thế nào chúng ta có thể sử dụng Express để xây dựng cùng một máy chủ trong bài tập này.
Để bắt đầu, hãy vào thư mục Node.js mà chúng tôi đã sử dụng để lưu trữ
tất cả các mã cho khóa học này và sau đó, tạo một thư mục mới có tên là node-express,
và sau đó di chuyển vào thư mục này.
Bây giờ, chúng tôi sẽ tạo ra
một thư mục công cộng ở đây trong thư mục node express.
Sau đó, chúng tôi sẽ đi đến nút HTTP thư mục công cộng và sau đó sao chép hai tập tin này,
index.HTML và aboutus.html vào thư mục công cộng node-express.
Chúng tôi sẽ phục vụ lên hai tệp này bằng cách sử dụng
máy chủ Express mà chúng tôi sẽ xây dựng trong bài tập này.
Bây giờ, đi đến các thiết bị đầu cuối.
Di chuyển vào thư mục node-express trong thiết bị đầu cuối và sau đó tại dấu nhắc nhập npm init,
để khởi tạo một ứng dụng nút.
Sau đó, cho tên gói chúng ta hãy chỉ sử dụng node-express,
và cho mô tả chúng ta sẽ nói Node Express Ví dụ,
và điểm nhập là index.js,
và tất cả phần còn lại của cùng như trước,
và chúng ta hãy tạo tập tin package.json.
Bây giờ, hãy để tôi mở
dự án bằng cách sử dụng trình soạn thảo Visual Studio Code trong trường hợp của tôi và sau đó,
trong tập tin package.json chúng ta hãy đi vào và thêm vào kịch bản mới được gọi là start,
đó là nút chỉ mục và lưu các thay đổi.
Bây giờ, chúng tôi đã khởi tạo module node, chúng ta
hãy đi trước và cài đặt các Express framework
trong dự án để sử dụng nó để xây dựng máy chủ express của chúng tôi.
Vì vậy, tại dấu nhắc,
gõ npm install express.
Vì vậy, đây là cách bạn sẽ cài đặt
một mô-đun nút của bên thứ ba nếu bạn đang tham gia khóa học này
lần đầu tiên và chưa thực hiện các khóa học trước
đó thì đây là điều quan trọng cần lưu ý.
Đây là cách bạn sẽ cài đặt một mô-đun nút bằng cách thêm trừ đi lưu,
chúng tôi cũng lưu thông tin rằng
mô-đun nút bên thứ ba này là một phụ thuộc
cho dự án của chúng tôi và thông tin này sẽ được lưu trong tập tin package.json.
Nếu bạn đã thực hiện các khóa học trước đó của chuyên môn hóa,
thì bạn đã biết về thông tin này.
Vì vậy, chúng ta hãy đi trước và cài đặt mô-đun Express.
Như bạn có thể nhận thấy,
chúng tôi đang sử dụng Express phiên bản 4.16.3 trong khóa học này.
Vì vậy, bây giờ chúng ta hãy quay trở lại mã của chúng tôi.
Nhìn vào tập tin package.json,
bạn thấy rằng trong tập tin package.json bằng cách cài đặt Express chúng ta đã thấy
một thuộc tính khác được bao gồm trong tập tin package.json gọi là phụ thuộc. Sự
phụ thuộc này theo dõi tất cả các gói
mà dự án hiện tại này sẽ phụ thuộc vào.
Ở đây bạn thấy Express đang được cài đặt ở
đó và phiên bản tương ứng của Express đang được cài đặt ở đây,
vì vậy điều này tuyên bố rằng dự án cụ thể này
phụ thuộc vào phiên bản Express ít nhất 4.16.3.
Ngoài ra, bạn cũng thấy thư mục này được gọi là module nút được tạo ra ở đây.
Vì vậy, đây là nơi mà tất cả các mô-đun nút của bên thứ ba được cài đặt bởi
ứng dụng của bạn sẽ được lưu trữ.
Bây giờ, khi chúng tôi thực hiện một Git cam kết,
chúng tôi không muốn cam kết này thư mục module node.
Vì vậy, để bỏ qua điều đó,
cho phép tạo một tập tin có
tên là .gitignore và trong tệp.gitignore,
hãy gõ vào các module node_.
Vì vậy, điều này là cho Git biết rằng chúng tôi không muốn
cam kết thư mục module node vào kho Git.
Vì vậy, với điều này chúng ta hãy lưu các thay đổi.
Vì vậy, bây giờ khi bạn tạo một kho lưu trữ Git,
thư mục module node sẽ bị bỏ qua.
Nó không phải là bắt buộc bởi vì bạn luôn có thể tạo lại thư mục module node bất cứ khi nào
bạn sao chép dự án này từ kho Git của bạn bằng cách chỉ cần gõ npm install.
Điều này sẽ xem xét các tập tin package.json,
và nhìn vào tất cả các phụ thuộc,
và các phụ thuộc phát triển trong
tập tin package.json và được tự động cài đặt tất cả các gói cho bạn.
Bây giờ, rằng chúng tôi đã hoàn thành điều này,
chúng ta hãy tạo ra dự án Express đầu tiên của chúng tôi,
do đó, để làm điều đó chúng tôi sẽ tạo ra một tập tin có tên index.js và trong index.js
chúng tôi sẽ khai báo một const express yêu cầu express.
Bây giờ, bạn sẽ lưu ý rằng express là một mô-đun nút của bên thứ ba và nó đã được
cài đặt trong thư mục module nút của chúng tôi trong thư mục chính xác.
Vì vậy, khi chúng tôi tuyên bố này ở đây nói rằng mô-đun Express này là cần thiết,
sau đó nó sẽ được tự động bao gồm từ thư mục module nút vào ứng dụng của chúng tôi.
Bây giờ, cũng cài đặt HTTP
mô-đun lõi ở đây.
Bây giờ, rằng chúng tôi đã cài đặt này, chúng ta
hãy tạo tên khóa học như
máy chủ địa phương và số cổng như 3000.
Vì vậy, bạn thấy rằng chúng tôi đang sử dụng chính xác cùng một cách làm
bài tập này như chúng tôi đã làm cho bài tập HTTP trước đó.
Bây giờ, tại thời điểm này,
chúng tôi sẽ khai báo const này gọi là ứng dụng như express.
Vì vậy, theo cách này, chúng tôi đang nói rằng ứng dụng của chúng tôi sẽ sử dụng mô-đun nút Express.
Vì vậy, một khi chúng tôi làm điều đó,
sau đó Express cung cấp một loạt các phương pháp mà chúng tôi có thể sử dụng để xây dựng máy chủ web của chúng tôi.
Vì vậy, sau này, chúng ta sẽ nói app.use () và bên trong đây,
chúng tôi sẽ khai báo một chức năng sẽ được gọi để thiết lập máy chủ của chúng tôi.
Vì vậy, chức năng này có ba tham số req,
đó là yêu cầu; res,
đó là phản ứng, và tiếp theo.
Bây giờ, như chúng ta đã thấy Express sử dụng phần mềm trung gian bổ sung.
Vì vậy, tiếp theo được sử dụng khi bạn cần
gọi thêm middleware để chăm sóc công việc thay mặt cho bạn.
Chúng ta sẽ thấy việc sử dụng tiếp theo trong một số bài tập sau này,
nhưng chức năng ở đây sẽ mất ba tham số req, res, và tiếp theo.
Tiếp theo là một tham số tùy chọn có
thể không được bao gồm nếu bạn sẽ không sử dụng nó trong mã của bạn.
Vì vậy, bên trong đây chúng ta sẽ nói,
đăng nhập giao diện điều khiển và sau đó,
chúng tôi sẽ đăng nhập tiêu đề đó,
và chúng tôi sẽ đáp ứng với mã trạng thái thiết lập để 200.
Đặt kiểu nội dung tiêu đề
là HTML văn bản.
Vì vậy, bạn nhận thấy rằng phần lớn mã này trông rất giống
với cách chúng tôi thiết lập ứng dụng nút của chúng tôi.
Vì vậy, chúng ta sẽ nói res.end và
ở đây HTML cơ thể h1.
Chúng tôi sẽ chỉ nói rằng đây là một máy chủ Express và đóng
các xe tăng ở đó, và đó là nó.
Từ sự hiểu biết của bạn về nút HTTP,
bạn đã hiểu những gì ba đang làm
và điều tương tự cũng được thực hiện trong máy chủ Express.
Bây giờ chúng tôi đã thiết lập các máy chủ bằng cách sử dụng các ứng dụng,
chúng tôi sẽ thiết lập các máy chủ,
và sau đó đây là nơi chúng tôi sẽ sử dụng HTTP CreateServer,
và do đó CreateServer bây giờ sẽ mất ứng dụng như nó là tham số chức năng ở đó,
và sau đó, chúng tôi sẽ chỉ đơn giản là nói server.listen cổng,
hostname và
chức năng mũi tên ở đây trong đó tôi sẽ in ra,
giao diện điều khiển, đăng nhập lại áo máy chủ chạy tại HTTP: //hostname:port,
đó là nó. Vì vậy, bạn sẽ thấy rằng phần này là rất nhiều tương tự như
những gì bạn đã làm cho các bài tập HTTP,
ngoại trừ việc CreateServer bây giờ mất ứng dụng này,
mà chúng tôi đã tuyên bố trước đó Express.
Vì vậy, Express được thêm vào chức năng bổ sung mà sẽ được
sử dụng bởi các máy chủ HTTP mà chúng tôi tạo ra bằng cách sử dụng lưu ý.
Một khi chúng tôi đã thực hiện với điều này, chúng ta
hãy lưu các thay đổi,
và sau đó chúng tôi sẽ đi trước và bắt đầu máy chủ,
và có một cái nhìn vào những gì máy chủ sẽ phục vụ lên.
Đi vào thiết bị đầu cuối, thêm thiết bị đầu cuối,
gõ NPM start và bạn sẽ thấy rằng máy chủ của bạn đang hoạt động và chạy.
Bây giờ khi chúng tôi truy cập điều này từ một trong hai trình duyệt hoặc từ người đưa thư,
bạn sẽ thấy những gì nó phục vụ lên.
Vì vậy, ở đây tôi có Postman lên và tiền bạc.
Hãy để tôi gửi yêu cầu GET đến localhost 3.000 giống như trước đây
và bạn sẽ thấy rằng đây là phục vụ lên mã HTML mà chúng tôi bao gồm trong đó,
và do đó đây là một máy chủ Express.
Nhấp vào bản xem trước,
điều này sẽ cho bạn thấy nó sẽ trông như thế nào trong một trình duyệt,
và điều này cho thấy phiên bản thô của mã đã được gửi trở lại từ phía máy chủ,
và bạn có thể thấy rằng mã trạng thái là 200, được chứ?
Và vector thông tin tiêu đề khác đã được gửi từ trang web máy chủ.
Thông báo đặc biệt nó nói x cung cấp bởi Express trong tiêu đề.
Với điều này, chúng tôi hoàn thành phần đầu của bài tập này, nơi chúng tôi đã thấy
làm thế nào chúng tôi có thể sử dụng Express để thiết lập một máy chủ web đơn giản.
Bây giờ hãy để tôi dừng máy chủ và sau đó khởi tạo kho Git,
vì vậy tại dấu nhắc tôi sẽ gõ “git init” và
sau đó “git status” và bạn sẽ thấy rằng các tập tin đã được untracked,
vì vậy tôi sẽ nói “get and dropped” và các tập tin này bây giờ được thêm vào kho Git,
và vì vậy khi bạn nói trạng thái git,
bạn sẽ thấy các tập tin đã được thêm vào.
Lưu ý đặc biệt là thư mục module node
chưa được thêm vào kho Git bởi vì trong
tệp.gitignore chúng tôi đã tuyên bố rõ ràng rằng
thư mục module node không nên được đưa vào kho Git.
Vì vậy, bây giờ, chúng ta hãy kiểm tra trong trao đổi cam kết của chúng tôi bằng cách nói git
cam kết trừ m Express ví dụ,
và chúng tôi đã cam kết này vào kho lưu trữ Git của chúng tôi.
Trong phần thứ hai của bài tập này,
chúng ta sẽ xem xét việc sử dụng phần mềm trung gian Express được gọi là Morgan.
Morgan được sử dụng để đăng nhập thông tin vào màn hình,
vì vậy nó sẽ ghi lại thông tin về các yêu cầu đến màn hình để chúng ta
có thể thấy một số thông tin được in trong bảng điều khiển của chúng tôi ở đây.
Ngoài ra, chúng ta sẽ thấy làm thế nào chúng ta có thể thiết lập máy chủ Express của chúng tôi để phục vụ lên các tập tin HTML tĩnh.
Để bắt đầu, tại dấu nhắc nhập npm
cài đặt Morgan trừ, trừ lưu.
Bây giờ, Morgan sẽ là một phụ thuộc mà chúng tôi sẽ được sử dụng trong ứng dụng của chúng tôi.
Vì vậy, đó là lý do tại sao nó là trừ,
trừ lưu và điều này sẽ nhận được Cài đặt,
và bạn có thể thấy rằng tôi đang sử dụng Morgan phiên bản 1.9.0 trong khóa học này.
Bây giờ chúng tôi đã cài đặt Morgan, chúng ta
hãy xem làm thế nào chúng ta có thể sử dụng nó trong Ứng dụng của chúng tôi.
Vì vậy, đi đến ứng dụng
của chúng tôi, cách để làm cho sử dụng của Morgan là để khai báo ở đây
const Morgan yêu cầu Morgan,
và sau đó chúng tôi sẽ nói,
“Ứng dụng sử dụng Morgan với sự phát triển”.
Vì vậy, đây là phiên bản phát triển.
Vì vậy, nó sẽ in ra thông tin bổ sung cho màn hình theo yêu cầu.
Bây giờ, đi vào ứng dụng của chúng tôi.
Trong ứng dụng của chúng tôi, tôi sẽ không đăng nhập toàn bộ tiêu đề.
Thay vào đó, hãy để tôi loại bỏ điều này bởi vì Morgan sẽ
đăng nhập đủ thông tin để chúng tôi xem xét,
và tôi sẽ thiết lập máy chủ của tôi để phục vụ lên các tập tin HTML từ thư mục công cộng.
Vì vậy, để làm điều này,
tôi sẽ tuyên bố sử dụng và thể hiện tĩnh.
Điều này nói với Express để phục vụ lên các tập tin tĩnh từ hai gạch dưới dirname.
Vì vậy, điều này nói là gốc của
dự án này và họ sẽ tìm thấy những tập tin
trong double_dirname, plus/ public.
Vì vậy, nhớ lại rằng chúng tôi đã tạo thư mục công cộng trong thư mục nút Express.
Vì vậy, điều này là thông báo cho Express rằng bạn sẽ nhìn vào
thư mục cụ thể này trong thư mục gốc của dự án này và bên trong thư mục công cộng.
Vì vậy, đây sẽ là thư mục mà từ đó các
tập tin HTML tĩnh sẽ được phục vụ bởi máy chủ Express của tôi.
Sau khi thực hiện những thay đổi này,
hãy lưu các thay đổi,
và sau đó khởi động lại máy chủ của chúng tôi,
và sau đó xem nó hoạt động như thế nào.
Đi đến dấu nhắc đó,
hãy gõ npm bắt đầu,
để khởi động máy chủ của chúng tôi,
và một khi máy chủ đang hoạt động và chạy,
hãy kiểm tra những gì nó sẽ phục vụ lên khi chúng tôi gửi yêu cầu khác nhau đến máy chủ này.
Sử dụng Postman, trước tiên chúng ta hãy gửi một yêu cầu get đến máy chủ địa phương: 3,000
và bạn sẽ nhận thấy rằng nó đang phục vụ lên các tập tin index.html.
Chúng tôi đã thiết lập máy chủ của chúng tôi để phục vụ các tập tin tĩnh từ thư mục công cộng,
và nếu chúng ta chỉ nói localhost:3000 theo mặc định,
nó sẽ phục vụ lên các tập tin index.html.
Vì vậy, đây là cách máy chủ Web điển hình của bạn hoạt động.
Vì vậy, đó là những gì chúng tôi đã kết thúc thiết lập máy chủ nhanh của chúng tôi để làm.
Bây giờ, chúng ta hãy gõ vào localhost:3000 about.html và gửi yêu cầu,
và nói đây là về chiến lược của chúng tôi HTML,
và cũng về chúng tôi tập tin HTML đã được lưu ở đây.
Vì vậy, trong bản xem trước,
bạn có thể thấy các tập tin kết quả đã được phục vụ từ trang web máy chủ của chúng tôi.
Hãy cố gắng truy cập vào một tập tin không tồn tại
và bạn sẽ thấy rằng khi bạn cố gắng truy cập vào một tập tin không tồn tại,
sau đó nó sẽ mặc định để thiết lập thứ hai mà chúng tôi đã thực hiện trong mã của chúng tôi,
mà nói rằng đây là một máy chủ Express.
Chúng tôi chưa chỉ định cho máy chủ Express của chúng tôi cách xử lý các
tình huống mà nó gặp phải một tập tin không tồn tại.
Vì vậy, đó là lý do tại sao nó đang sử dụng mặc định đã thiết lập ngay dưới Express tĩnh,
đó là để phục vụ lên giá trị mặc định, và tất nhiên,
đây không phải là hành vi lý tưởng nhất
nhưng đó là những gì chúng tôi có trong máy chủ Express tại thời điểm này.
Sau đó, chúng tôi sẽ sửa đổi máy chủ Express để xử lý
lỗi chi tiết hơn, trong các bài tập sau này.
Đây cũng là thời điểm tốt để bạn thực hiện một cam kết Git của các thay đổi.
Vì vậy, chúng ta hãy kiểm tra trạng thái Git sau khi dừng máy chủ,
và chúng tôi sẽ thêm các tập tin sửa đổi,
và sau đó làm Git cam kết
trừ đi m Express,
phục vụ các tập tin tĩnh.
Đó là nó. Với điều này,
chúng tôi hoàn thành bài tập này.
Trong bài tập này, chúng ta đã thấy cách chúng ta có thể thiết lập
một máy chủ web đơn giản để phục vụ nội dung thay mặt chúng ta.