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 4 trong một thư mục mới
$ 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 expressChú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 5, $ npm install --save express 6 và $ npm install --save express 7) và chúng tôi muốn cung cấp các tệp này cho người dùng
Giả sử rằng người dùng truy cập đường dẫn gốc ($ npm install --save express 8). Trong trường hợp đó, chúng tôi muốn cung cấp tệp $ npm install --save express 5. Tương tự, nếu người dùng truy cập các đường dẫn const express = require('express'); 0 hoặc const express = require('express'); 1, chúng tôi muốn cung cấp các tệp $ npm install --save express 6 và $ npm install --save express 7 tương ứng
Để thực hiện điều này, hãy tạo một tệp const express = require('express'); 4 và nhập thư viện Express
________số 8Sau đó, chúng ta sẽ tạo ứng dụng Express
$ npm init 4Sau đó, 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 5Vì 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 6liên hệ. html
$ npm init 7xung quanh. html
$ npm init 8Bây giờ chúng ta hãy quay lại và chỉnh sửa tệp const express = require('express'); 4 của chúng ta để gửi các tệp tương ứng với các đường dẫn mà người dùng truy cập, chẳng hạn như gửi tệp $ npm install --save express 5 khi người dùng truy cập vào đường dẫn gốc
Chúng ta có thể sử dụng phương pháp const express = require('express'); 7 để phục vụ một tệp trong một phản hồi
$ npm install --save express 2Hã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'); 7, như minh họa ở trên. Nếu bạn đã từng lấy đầu vào của người dùng ảnh hưởng đến đường dẫn tệp, hãy hết sức cẩn thận để ngăn người dùng không thể thao tác với đường dẫn tệp và do đó cho phép họ truy xuất các tệp riêng tư
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'); 9 cho phương thức. Lưu ý rằng, chúng tôi đã vượt qua $ npm init 40, là một Nút. js biến toàn cục thành đường dẫn của tệp hiện đang chạy
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 6 và $ npm install --save express 7
$ npm install --save express 8Bâ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 0Và chạy ứng dụng của chúng tôi bằng cách thực thi
$ npm install --save express 1Mở 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 43 và đặt thư mục chứa ba tài liệu HTML của chúng tôi thành thư mục chung
Công khai một thư mục dễ dàng như sử dụng các phương thức $ npm init 44 và $ npm init 45
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 2Mở 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 5, mà là tệp $ npm init 47
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 3Bây giờ, các tệp nằm trên một đường dẫn khác. Ví dụ: $ npm install --save express 5 hiện được đặt tại $ npm init 49
Không giống như phương pháp đầu tiên mà bạn nhấn const express = require('express'); 1 và $ npm install --save express 7 sẽ được phục vụ, lưu ý rằng bạn phải sử dụng tên tệp đầy đủ để truy xuất tệp ở đây - ví dụ: $ npm init 52
Đ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 53, máy chủ sẽ phục vụ nó trên $ npm init 54 tùy thuộc vào cấu hình của bạn và bạn có thể dễ dàng gọi nó qua trang HTML và hiển thị nó
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