Trong bài viết này, chúng ta sẽ xem cách chúng ta có thể kết xuất giao diện người dùng bằng Node. js rất hữu ích để hiển thị nội dung tĩnh hoặc động
mẫu là gì?
Các mẫu cho phép chúng tôi hiển thị nội dung động bên trong html cho phép chúng tôi sử dụng các vòng lặp, nếu điều kiện và các tính năng khác. Nó cho phép chúng tôi đưa dữ liệu động vào thời gian chạy
Chúng ta có thể xây dựng toàn bộ giao diện người dùng chỉ bằng cách tạo khuôn mẫu trong Node. js mà không cần sử dụng thư viện front-end
Chúng tôi có thể tạo html động và lưu nội dung được tạo động trong một tệp. Có nhiều thư viện mẫu.
Một số tùy chọn phổ biến là
npm install express@4.17.1 ejs@3.1.2
7, npm install express@4.17.1 ejs@3.1.2
8, npm install express@4.17.1 ejs@3.1.2
9, v.v. Chúng tôi sẽ sử dụng
npm install nodemon@2.0.3 --save-dev
0 để xử lý định tuyến và npm install express@4.17.1 ejs@3.1.2
9[Mẫu JavaScript nhúng] là một thư viện rất phổ biến với khoảng 6 triệu lượt tải xuống hàng tuầnMột trong những lý do khiến
npm install express@4.17.1 ejs@3.1.2
9 trở nên phổ biến là vì nó cho phép viết mã JavaScript trực tiếp bên trong mẫu để chúng ta có thể sử dụng npm install nodemon@2.0.3 --save-dev
3, npm install nodemon@2.0.3 --save-dev
4 và tất cả những thứ do JavaScript cung cấp. Các thư viện mẫu khác sử dụng cú pháp riêng của chúng và không trực tiếp viết JavaScriptTạo một thư mục mới có tên
npm install nodemon@2.0.3 --save-dev
5 và điều hướng đến thư mục đó từ thiết bị đầu cuối và khởi tạo npm install nodemon@2.0.3 --save-dev
6 bằng cách chạy lệnh saunpm install express@4.17.1 ejs@3.1.2
0Cài đặt
npm install nodemon@2.0.3 --save-dev
7 và npm install nodemon@2.0.3 --save-dev
8 bằng cách chạynpm install express@4.17.1 ejs@3.1.2
Cài đặt
npm install nodemon@2.0.3 --save-dev
9 dưới dạng phần phụ thuộc của nhà phát triển bằng cách chạynpm install nodemon@2.0.3 --save-dev
Tạo một tệp mới
npm install express@4.17.1 ejs@3.1.2
60 và thêm đoạn mã sau vào bên trong nóThêm tập lệnh bắt đầu bên trong
npm install nodemon@2.0.3 --save-dev
6npm install express@4.17.1 ejs@3.1.2
6Bây giờ hãy khởi động máy chủ cấp tốc bằng cách thực hiện lệnh
npm install express@4.17.1 ejs@3.1.2
62 từ dòng lệnhBạn có thể truy cập ứng dụng ngay bây giờ bằng cách điều hướng đến http. //máy chủ cục bộ. 3000/
Bây giờ hãy thêm chức năng ejs vào ứng dụng
Tạo một thư mục
npm install express@4.17.1 ejs@3.1.2
63 mới và thêm một tệp npm install express@4.17.1 ejs@3.1.2
64 bên trong nó với nội dung saumục lục. ejsĐể hiển thị tệp này, chúng tôi cần thêm một số mã trong ứng dụng cấp tốc của mình
Chỉ định công cụ kết xuất bằng cách thêm đoạn mã sau vào tệp
npm install express@4.17.1 ejs@3.1.2
60npm install express@4.17.1 ejs@3.1.2
3Và để kết xuất
npm install express@4.17.1 ejs@3.1.2
64, chúng ta cần sử dụng phương thức npm install express@4.17.1 ejs@3.1.2
67 của đối tượng npm install express@4.17.1 ejs@3.1.2
68 và chuyển tên của tệp ejs mà không cần cung cấp. tiện ích mở rộng ejsExpress sẽ tự động tìm kiếm tệp với. phần mở rộng ejs bên trong thư mục
npm install express@4.17.1 ejs@3.1.2
63 mặc địnhnpm install express@4.17.1 ejs@3.1.2
8Vì vậy, bây giờ nếu bạn điều hướng đến http. //máy chủ cục bộ. 3000/, bạn sẽ thấy nội dung từ
npm install express@4.17.1 ejs@3.1.2
64 được hiển thịThêm hỗ trợ CSS và JavaScript
Bây giờ, chúng ta sẽ xem cách thêm
npm install express@4.17.1 ejs@3.1.2
31 và npm install express@4.17.1 ejs@3.1.2
32 vào mẫu của chúng taTạo một thư mục mới với tên
npm install express@4.17.1 ejs@3.1.2
33 và thêm một thư mục npm install express@4.17.1 ejs@3.1.2
31 bên trong nóThêm
npm install express@4.17.1 ejs@3.1.2
35 bên trong nó với nội dung sauCấu trúc thư mục của bạn sẽ trông như thế này bây giờ
cấu trúc thư mục
Thêm một liên kết đến tệp
npm install express@4.17.1 ejs@3.1.2
31 bên trong tệp npm install express@4.17.1 ejs@3.1.2
37npm install nodemon@2.0.3 --save-dev
7mục lục. ejs
Đồng thời thêm mã sau vào
npm install express@4.17.1 ejs@3.1.2
60 để chúng tôi có thể tải tất cả các tệp npm install express@4.17.1 ejs@3.1.2
39,npm install express@4.17.1 ejs@3.1.2
31 và npm install express@4.17.1 ejs@3.1.2
81 từ thư mục npm install express@4.17.1 ejs@3.1.2
33npm install express@4.17.1 ejs@3.1.2
3Nếu bạn kiểm tra ứng dụng ngay bây giờ, bạn sẽ thấy rằng CSS đang được áp dụng
Để thêm các tệp JavaScript, hãy tạo một thư mục
npm install express@4.17.1 ejs@3.1.2
83 mới bên trong thư mục npm install express@4.17.1 ejs@3.1.2
33 và thêm npm install express@4.17.1 ejs@3.1.2
85 vào bên trong thư mục đó bằng một câu lệnh npm install express@4.17.1 ejs@3.1.2
86 đơn giảnnpm install express@4.17.1 ejs@3.1.2
8Bao gồm tệp
npm install express@4.17.1 ejs@3.1.2
85 bên trong tệp npm install express@4.17.1 ejs@3.1.2
37 trước thẻ kết thúc nội dungNếu bạn lưu tệp, bạn sẽ thấy rằng
npm install nodemon@2.0.3 --save-dev
9 không tự động khởi động lại, vì vậy những thay đổi của chúng tôi không được phản ánh trong ứng dụngĐiều này là do chúng tôi đã chỉ định chỉ xem
npm install express@4.17.1 ejs@3.1.2
60 đến npm install nodemon@2.0.3 --save-dev
9 trong npm install nodemon@2.0.3 --save-dev
6Để khắc phục điều này, hãy mở
npm install nodemon@2.0.3 --save-dev
6 và thay đổi tập lệnh bắt đầu từnpm install express@4.17.1 ejs@3.1.2
6đến
npm install express@4.17.1 ejs@3.1.2
0Tại đây, chúng tôi đã thông báo cho
npm install nodemon@2.0.3 --save-dev
9 để tải lại các thay đổi nếu có bất kỳ thay đổi nào trong tệp npm install nodemon@2.0.3 --save-dev
75 hoặc npm install nodemon@2.0.3 --save-dev
76 bằng cách chuyển cờ npm install nodemon@2.0.3 --save-dev
77Bây giờ hãy khởi động lại tập lệnh
npm install nodemon@2.0.3 --save-dev
9 của bạn bằng cách chạy lại lệnh npm install express@4.17.1 ejs@3.1.2
62 từ thiết bị đầu cuối và bây giờ nếu bạn lưu tệp npm install express@4.17.1 ejs@3.1.2
37, bạn sẽ thấy rằng npm install nodemon@2.0.3 --save-dev
9 tự động khởi động lại khi lưuBây giờ, điều hướng đến http. //máy chủ cục bộ. 3000/ và làm mới trang. Bạn sẽ thấy nhật ký từ
npm install express@4.17.1 ejs@3.1.2
85 được in trong bảng điều khiểnTổ chức tốt hơn các tập tin
EJS cũng cho phép chúng tôi chia một tệp thành các tệp riêng biệt để chúng tôi có thể có đầu trang và chân trang chung mà chúng tôi có thể hiển thị trên tất cả các trang
Để bao gồm một tệp bên trong một tệp khác, chúng tôi sử dụng cú pháp sau
npm install express@4.17.1 ejs@3.1.2
1Ở đây, dấu
npm install express@4.17.1 ejs@3.1.2
33 và npm install express@4.17.1 ejs@3.1.2
34 được dùng để bao gồm tệpBây giờ chúng tôi sẽ chia mã
npm install express@4.17.1 ejs@3.1.2
60 của chúng tôi thành ________ 436, ________ 437 và ________ 438 và đưa chúng vào ________ 164 của chúng tôiNội dung. ejstiêu đề. ejscuối trang. ejsmục lục. ejsLưu ý rằng chúng tôi không có thẻ đóng
npm install express@4.17.1 ejs@3.1.2
80 và npm install express@4.17.1 ejs@3.1.2
39 bên trong npm install express@4.17.1 ejs@3.1.2
36 vì chúng tôi đã thêm thẻ đó vào npm install express@4.17.1 ejs@3.1.2
37Nếu bạn đã cài đặt một số trình định dạng trong Mã VS và nó tự động thêm thẻ bị thiếu khi lưu, bạn có thể xóa thẻ đóng đó và lưu tệp mà không cần định dạng như hình bên dưới
Nhấn
npm install express@4.17.1 ejs@3.1.2
84 hoặc npm install express@4.17.1 ejs@3.1.2
85 để mở bảng lệnh và gõ npm install express@4.17.1 ejs@3.1.2
86 rồi chọn tùy chọn “npm install express@4.17.1 ejs@3.1.2
87”Vô hiệu hóa định dạng tự động
Bây giờ chúng tôi sẽ tạo một ứng dụng đăng nhập đơn giản bằng cách sử dụng khuôn mẫu ejs nơi chúng tôi sẽ hiển thị thông báo thành công khi đăng nhập và thông báo lỗi khi đăng nhập thất bại
Mở
npm install express@4.17.1 ejs@3.1.2
38 và thêm đoạn mã sau vào bên trong nóNội dung. ejsTại đây, chúng tôi cho phép người dùng nhập tên và
npm install express@4.17.1 ejs@3.1.2
89 và sau khi người dùng gửi biểu mẫu, chúng tôi sẽ gọi tuyến đường npm install express@4.17.1 ejs@3.1.2
60 được thêm vào trong npm install express@4.17.1 ejs@3.1.2
60 như được chỉ định trong thẻ biểu mẫunpm install express@4.17.1 ejs@3.1.2
2Tạo một tệp mới
npm install express@4.17.1 ejs@3.1.2
62 bên trong thư mục npm install express@4.17.1 ejs@3.1.2
63 và thêm nội dung sauthành công. ejsỞ đây, chúng tôi đang hiển thị tên người dùng đã đăng nhập và thông báo thành công
Để hiển thị bất kỳ giá trị nào trong tệp
npm install nodemon@2.0.3 --save-dev
8, chúng tôi sử dụng tên biến giữa npm install express@4.17.1 ejs@3.1.2
65 và npm install express@4.17.1 ejs@3.1.2
66npm install express@4.17.1 ejs@3.1.2
65 được sử dụng để hiển thị bất kỳ giá trị nào bằng cách chuyển đổi nó thành một chuỗiTạo một tệp mới
npm install express@4.17.1 ejs@3.1.2
68 bên trong thư mục npm install express@4.17.1 ejs@3.1.2
63 và thêm nội dung sauthất bại. ejsphong cách cập nhật. cssĐể phân tích cú pháp đầu vào từ biểu mẫu, hãy cài đặt gói
npm install express@4.17.1 ejs@3.1.2
00 npm bằng cách chạy lệnh sau từ thiết bị đầu cuốinpm install express@4.17.1 ejs@3.1.2
3và để thông báo cho express để phân tích cú pháp đầu vào dưới dạng nhập đối tượng JSON trong
npm install express@4.17.1 ejs@3.1.2
60npm install express@4.17.1 ejs@3.1.2
4Bây giờ, dữ liệu biểu mẫu sẽ có sẵn trong đối tượng
npm install express@4.17.1 ejs@3.1.2
02 bên trong tuyến đường npm install express@4.17.1 ejs@3.1.2
60lộ trình đăng nhập bên trong chỉ mục. jsTại đây, chúng tôi kiểm tra dữ liệu đăng nhập. Nếu
npm install express@4.17.1 ejs@3.1.2
04 và npm install express@4.17.1 ejs@3.1.2
89 khớp nhau, thì chúng tôi hiển thị mẫu npm install express@4.17.1 ejs@3.1.2
06, nếu không thì hiển thị npm install express@4.17.1 ejs@3.1.2
07Lưu ý rằng để truyền dữ liệu vào mẫu
npm install express@4.17.1 ejs@3.1.2
06, chúng ta sẽ chuyển dưới dạng một đối tượng trong đối số thứ hai cho phương thức kết xuất để nó có sẵn bên trong mẫu đócập nhật chỉ số. jsBây giờ ứng dụng của bạn sẽ hoạt động như hình bên dưới
Ứng dụng đăng nhập
Xây dựng ứng dụng liệt kê kho lưu trữ Github bằng mẫu EJS
Bây giờ chúng ta sẽ xây dựng một ứng dụng hiển thị kho lưu trữ của bất kỳ người dùng nào được chuyển dưới dạng chuỗi truy vấn trong URL
Cài đặt
npm install express@4.17.1 ejs@3.1.2
09 từ dòng lệnh bằng cách chạynpm install express@4.17.1 ejs@3.1.2
5Bên trong
npm install express@4.17.1 ejs@3.1.2
60 thêm tuyến đường sauỞ đây, chúng ta đang lấy
npm install express@4.17.1 ejs@3.1.2
11 từ chuỗi truy vấn nên URL sẽ giống như thế này http. //máy chủ cục bộ. 3000/repos?username=your_github_usernameNếu không có
npm install express@4.17.1 ejs@3.1.2
11 nào được chỉ định, nó sẽ lấy giá trị mặc định được cung cấp trong routeSau đó, chúng tôi đang lấy dữ liệu kho lưu trữ và gửi nó đến mẫu
npm install express@4.17.1 ejs@3.1.2
13, chúng tôi đang lặp qua nó và hiển thị kết quảcập nhật chỉ số. jsTạo một tệp
npm install express@4.17.1 ejs@3.1.2
14 mới bên trong thư mục npm install express@4.17.1 ejs@3.1.2
63 với mã saurepo. ejsNhư bạn có thể thấy ở đây, chúng tôi đã viết mã JavaScript ở giữa
npm install express@4.17.1 ejs@3.1.2
33 và npm install express@4.17.1 ejs@3.1.2
66. Trong trường hợp này, chúng tôi đã thêm một vòng lặp JavaScript npm install express@4.17.1 ejs@3.1.2
18 để lặp qua đối tượng repos được truyền từ npm install express@4.17.1 ejs@3.1.2
60Bây giờ bạn có thể xem kho lưu trữ của người dùng GitHub được cung cấp
Ứng dụng danh sách kho lưu trữ
Tùy chỉnh thư mục mẫu mặc định
Theo mặc định, EJS sẽ tìm các tệp
npm install nodemon@2.0.3 --save-dev
76 bên trong thư mục npm install express@4.17.1 ejs@3.1.2
63 trong dự án của bạn và nếu không tìm thấy, nó sẽ báo lỗi. Chúng tôi cũng có thể cung cấp đường dẫn tùy chỉnh cho thư mục npm install express@4.17.1 ejs@3.1.2
63Vì vậy, nếu chúng tôi muốn lưu trữ một thư mục
npm install express@4.17.1 ejs@3.1.2
63 bên trong thư mục npm install express@4.17.1 ejs@3.1.2
24, chúng tôi có thể chỉ định đường dẫn bằng cách đặt nó thành express appnpm install express@4.17.1 ejs@3.1.2
6Bạn có thể tìm thấy mã nguồn hoàn chỉnh cho ứng dụng này TẠI ĐÂY và bản demo trực tiếp TẠI ĐÂY
Kiểm tra khóa học Mastering Redux được xuất bản gần đây của tôi
Trong khóa học này, bạn sẽ xây dựng 3 ứng dụng cùng với một ứng dụng đặt đồ ăn và bạn sẽ học
- Redux cơ bản và nâng cao
- Cách quản lý trạng thái phức tạp của mảng và đối tượng
- Cách sử dụng nhiều bộ giảm tốc để quản lý trạng thái chuyển hướng phức tạp
- Cách gỡ lỗi ứng dụng Redux
- Cách sử dụng Redux trong React bằng thư viện Reac-redux để làm cho ứng dụng của bạn hoạt động trở lại
- Cách sử dụng thư viện redux-thunk để xử lý lệnh gọi API không đồng bộ và hơn thế nữa
và cuối cùng, chúng tôi sẽ xây dựng một ứng dụng đặt hàng thực phẩm hoàn chỉnh từ đầu với tích hợp sọc để chấp nhận thanh toán và triển khai nó vào sản xuất
Đừng quên đăng ký để nhận bản tin hàng tuần của tôi với các mẹo, thủ thuật và bài viết tuyệt vời trực tiếp trong hộp thư đến của bạn tại đây