Nodejs tốc độ tĩnh

Trong bài viết này, chúng ta sẽ xây dựng một ứng dụng đơn giản để phục vụ các tệp tĩnh như tệp HTML, tệp CSS và hình ảnh bằng Node. js và Express

Định cấu hình Dự án và Cài đặt Express

Để bắt đầu, hãy tạo một Nút mới. js bằng cách chạy lệnh

$ npm install --save express

$ npm init

Điền thông tin được yêu cầu theo yêu cầu của bạn hoặc chỉ đặt giá trị mặc định bằng cách để trống từng dòng

Bây giờ chúng ta có thể cài đặt Express framework bằng cách chạy

$ npm install --save express

Chúng ta đã sẵn sàng, hãy bắt đầu viết mã

Phục vụ tệp với Express

Có hai cách để phục vụ các tệp tĩnh bằng Express

• Cung cấp một tệp duy nhất bằng cách định cấu hình đường dẫn đến tài nguyên
• Đặt thư mục chung trong đó tất cả các tệp đều có thể truy cập được

Chúng ta sẽ xem xét từng phương pháp này trong hai phần tiếp theo

Phục vụ một tệp duy nhất

Hãy xem xét một tình huống khi chúng tôi muốn tạo một trang đích đơn giản bao gồm 3 tài liệu HTML (

$ npm install --save express

$ npm install --save express

$ npm install --save express

Giả sử rằng người dùng truy cập đường dẫn gốc (

$ npm install --save express

$ npm install --save express

const express = require('express');

const express = require('express');

$ npm install --save express

$ npm install --save express

Để thực hiện điều này, hãy tạo một tệp

const express = require('express');

Sau đó, chúng ta sẽ tạo ứng dụng Express

$ npm init

Sau đó, hãy xác định cổng mà máy chủ của chúng ta sẽ chạy trên đó, cổng mà chúng ta sẽ sử dụng sau này khi chúng ta thực sự chạy máy chủ

$ npm init

Vì chúng tôi đang gửi một tệp duy nhất nên chúng tôi sẽ không bao gồm các liên kết đến bất kỳ tệp CSS hoặc tập lệnh nào trong các tệp HTML đó trừ khi chúng được lưu trữ ở một vị trí khác, chẳng hạn như CDN

Chúng ta sẽ xử lý việc cung cấp các tệp này cùng nhau trong phần tiếp theo, vì vậy, bây giờ, hãy gắn bó với ba tệp HTML cơ bản, rất đơn giản

Trang Chủ. html

$ npm init

liên hệ. html

$ npm init

xung quanh. html

$ npm init

Bây giờ chúng ta hãy quay lại và chỉnh sửa tệp

const express = require('express');

$ npm install --save express

Chúng ta có thể sử dụng phương pháp

const express = require('express');

$ npm install --save express

Hãy xem hướng dẫn thực hành, thực tế của chúng tôi để học Git, với các phương pháp hay nhất, tiêu chuẩn được ngành chấp nhận và bao gồm bảng gian lận. Dừng các lệnh Git trên Google và thực sự tìm hiểu nó

Vì lý do bảo mật, tốt nhất nên sử dụng đường dẫn tĩnh cho

const express = require('express');

Trong trường hợp của chúng tôi, chúng tôi đang đặt gốc cho vị trí của đường dẫn tương đối bằng cách chuyển tham số

const express = require('express');

$ npm init

Chúng tôi cũng có thể sử dụng phương pháp tương tự để phục vụ các tệp khác của mình,

$ npm install --save express

$ npm install --save express

$ npm install --save express

Bây giờ ứng dụng của chúng ta đã sẵn sàng hoạt động, hãy khởi động máy chủ và lắng nghe cổng mà chúng ta đã đặt trước đó

$ npm install --save express

Và chạy ứng dụng của chúng tôi bằng cách thực thi

$ npm install --save express

Mở trình duyệt của bạn và truy cập vào bất kỳ đường dẫn được ánh xạ nào và bạn sẽ được chào đón bằng (các) tệp HTML

Thiết lập một thư mục công cộng

Phương pháp thứ hai để phục vụ các tệp tĩnh là thiết lập một thư mục chung. Không giống như gửi tệp qua phản hồi HTTP, nơi chỉ có thể phân phối một tệp duy nhất, tất cả các tệp trong thư mục được chỉ định của chúng tôi sẽ có sẵn cho người dùng

Hãy tạo một tệp khác, được gọi là

$ npm init

Công khai một thư mục dễ dàng như sử dụng các phương thức

$ npm init

$ npm init

Hãy chạy lại ứng dụng của chúng tôi và xác minh rằng nó đang hoạt động

$ npm install --save express

Mở trình duyệt của bạn và truy cập bất kỳ đường dẫn nào được ánh xạ và bạn sẽ được chào đón với các tệp HTML, giống như lần trước. Hãy nhớ rằng lần này, đường dẫn gốc không được ánh xạ tới tệp

$ npm install --save express

$ npm init

Ngoài ra, bạn có thể đặt tiền tố cho đường dẫn để truy cập thư mục chung của mình bằng cách chuyển tiền tố làm tham số đầu tiên

$ npm install --save express

Bây giờ, các tệp nằm trên một đường dẫn khác. Ví dụ:

$ npm install --save express

$ npm init

Không giống như phương pháp đầu tiên mà bạn nhấn

const express = require('express');

$ npm install --save express

$ npm init

Điều này cho phép chúng tôi lưu trữ các tệp khác như tệp CSS, tệp JavaScript và hình ảnh

Ví dụ: nếu có một hình ảnh con mèo trên thư mục chung của bạn có tên là

$ npm init

$ npm init

Nếu bạn dự định lưu trữ một trang đích như thế này, rất có thể đó là sự kết hợp của cả hai phương pháp mà chúng tôi đã thảo luận ở trên. Bạn có thể sử dụng phản hồi để gửi một tệp HTML và một thư mục chung để lưu trữ các nội dung tĩnh khác như tệp CSS, tập lệnh JS và hình ảnh

Phần kết luận

Mã nguồn của dự án này có sẵn trên GitHub như thường lệ. Sử dụng mã này để so sánh mã của bạn nếu bạn gặp khó khăn trong hướng dẫn

Express tĩnh trong Express JS là gì?

Express có thể phục vụ các tệp tĩnh không?

Tại sao sử dụng tĩnh trong Express?

Express static() trả về cái gì?