Cách sử dụng EJS để tạo mẫu ứng dụng node của bạn
Khi tạo các ứng dụng Node nhanh và nhanh chóng, đôi khi cần thiết một cách dễ dàng và nhanh chóng để tạo mẫu ứng dụng của ta .Jade mặc định là công cụ xem cho Express nhưng cú pháp của Jade có thể quá phức tạp đối với nhiều trường hợp sử dụng. EJS là một giải pháp thay thế thực hiện tốt công việc đó và rất dễ cài đặt . Hãy xem cách ta có thể tạo một ứng dụng đơn giản và sử dụng EJS để bao gồm các phần có thể lặp lại trên trang web của ta (các phần tử) và chuyển dữ liệu đến các chế độ xem của ta .
Cài đặt ứng dụng Demo
Ta sẽ tạo hai trang cho ứng dụng của bạn với một trang có chiều rộng đầy đủ và trang còn lại có thanh bên .
Nhận mã: Bạn có thể tìm thấy git repo của mã demo hoàn chỉnh trên GitHub tại đây
Cấu trúc file
Đây là các file ta cần cho ứng dụng của bạn . Ta sẽ tạo khuôn mẫu bên trong folder views và phần còn lại là các phương pháp Node khá chuẩn.
- views ----- partials ---------- footer.ejs ---------- head.ejs ---------- header.ejs ----- pages ---------- index.ejs ---------- about.ejs - package.json - server.js package.json sẽ giữ thông tin ứng dụng Node của ta và các phụ thuộc mà ta cần ( express và EJS ). server.js sẽ giữ cấu hình, cài đặt server Express của ta . Ta sẽ xác định các tuyến đường đến các trang của ta tại đây.
Cài đặt nút
Hãy vào file package.json của ta và cài đặt dự án của ta ở đó.
{ "name": "node-ejs", "main": "server.js", "dependencies": { "ejs": "^3.1.5", "express": "^4.17.1" } } Tất cả những gì ta cần là Express và EJS. Bây giờ ta phải cài đặt các phụ thuộc mà ta vừa xác định. Hãy tiếp tục và chạy:
- npm install
Với tất cả các phần phụ thuộc của ta đã được cài đặt, hãy cấu hình ứng dụng của ta để sử dụng EJS và cài đặt các tuyến của ta cho hai trang ta cần: trang index (chiều rộng đầy đủ) và trang giới thiệu (thanh bên). Ta sẽ thực hiện tất cả những điều này bên trong file server.js của ta .
// load the things we need var express = require('express'); var app = express(); // set the view engine to ejs app.set('view engine', 'ejs'); // use res.render to load up an ejs view file // index page app.get('/', function(req, res) { res.render('pages/index'); }); // about page app.get('/about', function(req, res) { res.render('pages/about'); }); app.listen(8080); console.log('8080 is the magic port'); Ở đây, ta xác định ứng dụng của bạn và đặt nó hiển thị trên cổng 8080. Ta cũng phải đặt EJS làm công cụ xem cho ứng dụng Express của ta bằng app.set('view engine', 'ejs'); . Lưu ý cách ta gửi một chế độ xem cho user bằng cách sử dụng res.render() . Điều quan trọng cần lưu ý là res.render () sẽ tìm trong một folder khung nhìn cho chế độ xem. Vì vậy, ta chỉ phải xác định pages/index vì đường dẫn đầy đủ là views/pages/index .
Khởi động server của ta
Tiếp tục và khởi động server bằng:
- node server.js
Bây giờ ta có thể thấy ứng dụng của bạn trong trình duyệt tại http://localhost:8080 và http://localhost:8080/about . Ứng dụng của ta đã được cài đặt và ta phải xác định các file chế độ xem của bạn và xem cách hoạt động của EJS ở đó.
Tạo các phân vùng EJS
Giống như rất nhiều ứng dụng ta xây dựng, sẽ có rất nhiều mã được sử dụng lại. Ta sẽ gọi các thành phần đó và xác định ba file mà ta sẽ sử dụng trên tất cả trang web của bạn : head.ejs , header.ejs và footer.ejs . Hãy tạo các file đó ngay bây giờ.
<meta charset="UTF-8"> <title>EJS Is Fun</title> <!-- CSS (load bootstrap from a CDN) --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css"> <style> body { padding-top:50px; } </style> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="/">EJS Is Fun</a> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="/">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="/about">About</a> </li> </ul> </nav> <p class="text-center text-muted">© Copyright 2020 The Awesome People</p> Thêm các phần EJS vào Chế độ xem
Ta đã xác định các bên Tất cả những gì ta phải làm là đưa chúng vào quan điểm của ta . Hãy đi vào index.ejs và about.ejs và sử dụng cú pháp include để thêm các thành phần.
Cú pháp để bao gồm một Phần EJS
Sử dụng <% - include( 'RELATIVE/PATH/TO/FILE' ) %> để nhúng một phần EJS vào một file khác.
- Dấu gạch nối
<%-thay vì chỉ<%để yêu cầu EJS hiển thị HTML thô. - Đường dẫn đến một phần có liên quan đến file hiện tại.
<!DOCTYPE html> <html lang="en"> <head> <%- include('../partials/head'); %> </head> <body class="container"> <header> <%- include('../partials/header'); %> </header> <main> <div class="jumbotron"> <h1>This is great</h1> <p>Welcome to templating using EJS</p> </div> </main> <footer> <%- include('../partials/footer'); %> </footer> </body> </html> Bây giờ ta có thể thấy chế độ xem đã xác định của bạn trong trình duyệt tại http://localhost:8080 .
Đối với trang giới thiệu, ta cũng thêm một thanh bên bootstrap để chứng minh cách các phần tử có thể được cấu trúc để sử dụng lại trên các mẫu và trang khác nhau.
<!DOCTYPE html> <html lang="en"> <head> <%- include('../partials/head'); %> </head> <body class="container"> <header> <%- include('../partials/header'); %> </header> <main> <div class="row"> <div class="col-sm-8"> <div class="jumbotron"> <h1>This is great</h1> <p>Welcome to templating using EJS</p> </div> </div> <div class="col-sm-4"> <div class="well"> <h3>Look I'm A Sidebar!</h3> </div> </div> </div> </main> <footer> <%- include('../partials/footer'); %> </footer> </body> </html> Nếu ta truy cập http://localhost:8080/about , ta có thể thấy trang about của bạn bằng một thanh bên!
Bây giờ ta có thể bắt đầu sử dụng EJS để truyền dữ liệu từ ứng dụng Node sang dạng xem của ta .
Chuyển dữ liệu cho các chế độ xem và các phần
Hãy xác định một số biến cơ bản và danh sách để chuyển đến trang chủ của ta . Quay trở lại vào bạn server.js file và thêm những điều sau đây bên trong của bạn app.get('/') tuyến đường.
// index page app.get('/', function(req, res) { var mascots = [ { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012}, { name: 'Tux', organization: "Linux", birth_year: 1996}, { name: 'Moby Dock', organization: "Docker", birth_year: 2013} ]; var tagline = "No programming concept is complete without a cute animal mascot."; res.render('pages/index', { mascots: mascots, tagline: tagline }); }); Ta đã tạo một danh sách gọi là mascots và một chuỗi đơn giản được gọi là tagline . Hãy vào file index.ejs của ta và sử dụng chúng.
Hiển thị một biến duy nhất trong EJS
Để lặp lại một biến duy nhất, ta chỉ sử dụng <%= tagline %> . Hãy thêm cái này vào file index.ejs của ta :
... <h2>Variable</h2> <p><%= tagline %></p> ... Lặp lại dữ liệu trong EJS
Để lặp lại dữ liệu của ta , ta sẽ sử dụng .forEach . Hãy thêm cái này vào file chế độ xem của ta :
... <ul> <% mascots.forEach(function(mascot) { %> <li> <strong><%= mascot.name %></strong> representing <%= mascot.organization %>, born <%= mascot.birth_year %> </li> <% }); %> </ul> ... Bây giờ ta có thể thấy trong trình duyệt của bạn thông tin mới mà ta đã thêm vào!
Chuyển dữ liệu đến một phần trong EJS
Phần EJS có quyền truy cập vào tất cả các dữ liệu giống như chế độ xem root . Nhưng hãy cẩn thận: Nếu bạn đang tham chiếu đến một biến một phần, nó cần được xác định trong mọi chế độ xem sử dụng một phần nếu không nó sẽ gây ra lỗi.
Bạn cũng có thể xác định và chuyển các biến cho một phần EJS trong cú pháp bao gồm như sau:
... <header> <%- include('../partials/header', {variant:'compact'}); %> </header> ... Nhưng bạn cần phải cẩn thận về việc giả sử một biến đã được xác định.
Nếu bạn muốn tham chiếu đến một biến trong một phần có thể không phải lúc nào cũng được xác định và đặt cho nó một giá trị mặc định, bạn có thể làm như sau:
... <em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em> ... Trong dòng trên, mã EJS đang hiển thị giá trị của variant nếu nó được xác định và default nếu không.
Kết luận
EJS cho phép ta tạo các ứng dụng nhanh chóng khi ta không cần bất cứ thứ gì quá phức tạp. Bằng cách sử dụng các thành phần và có khả năng dễ dàng chuyển các biến đến dạng xem của bạn , ta có thể xây dựng một số ứng dụng tuyệt vời một cách nhanh chóng.
Để tham khảo thêm về EJS, hãy xem tài liệu chính thức tại đây.
Các tin liên quan
