Làm cách nào để in giá trị động trong html?
|
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 Show
mẫu là gì?
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. npm install [email protected] [email protected]7, npm install [email protected] [email protected]8, npm install [email protected] [email protected]9, v.v. Chúng tôi sẽ sử dụng npm install [email protected] --save-dev0 để xử lý định tuyến và npm install [email protected] [email protected]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 [email protected] [email protected]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 [email protected] --save-dev3, npm install [email protected] --save-dev4 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 [email protected] --save-dev5 và điều hướng đến thư mục đó từ thiết bị đầu cuối và khởi tạo npm install [email protected] --save-dev6 bằng cách chạy lệnh saunpm install [email protected] [email protected]0Cài đặt npm install [email protected] --save-dev7 và npm install [email protected] --save-dev8 bằng cách chạynpm install [email protected] [email protected]Cài đặt npm install [email protected] --save-dev9 dưới dạng phần phụ thuộc của nhà phát triển bằng cách chạynpm install [email protected] --save-devTạo một tệp mới npm install [email protected] [email protected]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 [email protected] --save-dev6npm install [email protected] [email protected]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 [email protected] [email protected]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 [email protected] [email protected]63 mới và thêm một tệp npm install [email protected] [email protected]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 [email protected] [email protected]60npm install [email protected] [email protected]3Và để kết xuất npm install [email protected] [email protected]64, chúng ta cần sử dụng phương thức npm install [email protected] [email protected]67 của đối tượng npm install [email protected] [email protected]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 [email protected] [email protected]63 mặc địnhnpm install [email protected] [email protected]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 [email protected] [email protected]64 được hiển thịThêm hỗ trợ CSS và JavaScriptBây giờ, chúng ta sẽ xem cách thêm npm install [email protected] [email protected]31 và npm install [email protected] [email protected]32 vào mẫu của chúng taTạo một thư mục mới với tên npm install [email protected] [email protected]33 và thêm một thư mục npm install [email protected] [email protected]31 bên trong nóThêm npm install [email protected] [email protected]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ờ Thêm một liên kết đến tệp npm install [email protected] [email protected]31 bên trong tệp npm install [email protected] [email protected]37npm install [email protected] --save-dev7Đồng thời thêm mã sau vào npm install [email protected] [email protected]60 để chúng tôi có thể tải tất cả các tệp npm install [email protected] [email protected]39,npm install [email protected] [email protected]31 và npm install [email protected] [email protected]81 từ thư mục npm install [email protected] [email protected]33npm install [email protected] [email protected]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 [email protected] [email protected]83 mới bên trong thư mục npm install [email protected] [email protected]33 và thêm npm install [email protected] [email protected]85 vào bên trong thư mục đó bằng một câu lệnh npm install [email protected] [email protected]86 đơn giảnnpm install [email protected] [email protected]8Bao gồm tệp npm install [email protected] [email protected]85 bên trong tệp npm install [email protected] [email protected]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 [email protected] --save-dev9 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 [email protected] [email protected]60 đến npm install [email protected] --save-dev9 trong npm install [email protected] --save-dev6Để khắc phục điều này, hãy mở npm install [email protected] --save-dev6 và thay đổi tập lệnh bắt đầu từnpm install [email protected] [email protected]6đến npm install [email protected] [email protected]0Tại đây, chúng tôi đã thông báo cho npm install [email protected] --save-dev9 để tải lại các thay đổi nếu có bất kỳ thay đổi nào trong tệp npm install [email protected] --save-dev75 hoặc npm install [email protected] --save-dev76 bằng cách chuyển cờ npm install [email protected] --save-dev77Bây giờ hãy khởi động lại tập lệnh npm install [email protected] --save-dev9 của bạn bằng cách chạy lại lệnh npm install [email protected] [email protected]62 từ thiết bị đầu cuối và bây giờ nếu bạn lưu tệp npm install [email protected] [email protected]37, bạn sẽ thấy rằng npm install [email protected] --save-dev9 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 [email protected] [email protected]85 được in trong bảng điều khiểnTổ chức tốt hơn các tập tinEJS 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 [email protected] [email protected]1Ở đây, dấu npm install [email protected] [email protected]33 và npm install [email protected] [email protected]34 được dùng để bao gồm tệpBây giờ chúng tôi sẽ chia mã npm install [email protected] [email protected]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 [email protected] [email protected]80 và npm install [email protected] [email protected]39 bên trong npm install [email protected] [email protected]36 vì chúng tôi đã thêm thẻ đó vào npm install [email protected] [email protected]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 [email protected] [email protected]84 hoặc npm install [email protected] [email protected]85 để mở bảng lệnh và gõ npm install [email protected] [email protected]86 rồi chọn tùy chọn “npm install [email protected] [email protected]87”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 [email protected] [email protected]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 [email protected] [email protected]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 [email protected] [email protected]60 được thêm vào npm install [email protected] [email protected]60 như được chỉ định trong thẻ biểu mẫunpm install [email protected] [email protected]2Tạo một tệp mới npm install [email protected] [email protected]62 bên trong thư mục npm install [email protected] [email protected]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 [email protected] --save-dev8, chúng tôi sử dụng tên biến giữa npm install [email protected] [email protected]65 và npm install [email protected] [email protected]66npm install [email protected] [email protected]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 [email protected] [email protected]68 bên trong thư mục npm install [email protected] [email protected]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 [email protected] [email protected]00 npm bằng cách chạy lệnh sau từ thiết bị đầu cuốinpm install [email protected] [email protected]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 [email protected] [email protected]60npm install [email protected] [email protected]4Bây giờ, dữ liệu biểu mẫu sẽ có sẵn trong đối tượng npm install [email protected] [email protected]02 bên trong tuyến đường npm install [email protected] [email protected]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 [email protected] [email protected]04 và npm install [email protected] [email protected]89 khớp nhau, thì chúng tôi hiển thị mẫu npm install [email protected] [email protected]06, nếu không thì hiển thị npm install [email protected] [email protected]07Lưu ý rằng để truyền dữ liệu vào mẫu npm install [email protected] [email protected]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 Xây dựng ứng dụng liệt kê kho lưu trữ Github bằng mẫu EJSBâ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 [email protected] [email protected]09 từ dòng lệnh bằng cách chạynpm install [email protected] [email protected]5Bên trong npm install [email protected] [email protected]60 thêm tuyến đường sauỞ đây, chúng ta đang lấy npm install [email protected] [email protected]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 [email protected] [email protected]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 [email protected] [email protected]13, chúng tôi đang lặp qua nó và hiển thị kết quảchỉ số cập nhật. jsTạo một tệp npm install [email protected] [email protected]14 mới bên trong thư mục npm install [email protected] [email protected]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 [email protected] [email protected]33 và npm install [email protected] [email protected]66. Trong trường hợp này, chúng tôi đã thêm một vòng lặp JavaScript npm install [email protected] [email protected]18 để lặp qua đối tượng repos được truyền từ npm install [email protected] [email protected]60Bây giờ bạn có thể xem kho lưu trữ của người dùng GitHub được cung cấp Tùy chỉnh thư mục mẫu mặc địnhTheo mặc định, EJS sẽ tìm các tệp npm install [email protected] --save-dev76 bên trong thư mục npm install [email protected] [email protected]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 [email protected] [email protected]63Vì vậy, nếu chúng tôi muốn lưu trữ một thư mục npm install [email protected] [email protected]63 bên trong thư mục npm install [email protected] [email protected]24, chúng tôi có thể chỉ định đường dẫn bằng cách đặt nó thành express appnpm install [email protected] [email protected]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
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 HTML có thể tạo đầu ra động không?HTML động có thể hoạt động với HTML, JavaScript, XML và CSS để tạo các trang web động và tương tác . HTML động cho phép các nhà phát triển tạo hiệu ứng trên một trang mà nếu không thì không thể. Ngoài ra, nó cho phép các lập trình viên sử dụng kết hợp các công nghệ tạo trang web và hoạt hình.
Làm cách nào để hiển thị dữ liệu động trong bảng HTML?Cách thêm dữ liệu động vào bảng trong HTML? . hàm addRow(tableID) { bảng var = tài liệu. getElementById(bảngID); var rowCount = bảng. hàng. chiều dài; hàng var = bảng. insertRow(rowCount); //Cột 1 var ô1 = hàng. chènCell(0); var phần tử1 = tài liệu. createElement(“đầu vào”); phần tử1. gõ = “nút”; Làm cách nào để in giá trị động trong JavaScript?JavaScript. . Nhận ID người dùng đã chọn Tải dữ liệu từ tập lệnh phía máy chủ ( getData. php ) và đặt nội dung động vào phần tử cụ thể bằng phương thức jQuery load() Mở Hộp thoại In để cho phép người dùng in nội dung động của div ẩn cụ thể bằng phương thức print() của cửa sổ Làm cách nào để thêm dữ liệu động trong HTML?Cách tiếp cận. Tạo một tệp HTML với bất kỳ tên nào (Ex-index. html), sau đó viết mẫu HTML bên ngoài và lấy một nút để khi ai đó nhấp vào nút, HTML sẽ được thêm động từng cái một ở định dạng danh sách |
