Công cụ mẫu nodejs

Mặc dù có thể hiển thị các trang web tĩnh từ máy chủ, nhưng có rất nhiều hạn chế với phương pháp này, bao gồm sao chép mã và thiếu tính linh hoạt — đặc biệt là khi đọc dữ liệu từ cơ sở dữ liệu. May mắn thay, Express. js cung cấp cho chúng tôi cách tạo các trang HTML động từ các ứng dụng phía máy chủ của chúng tôi thông qua một công cụ mẫu

Một công cụ mẫu hoạt động theo cách khá đơn giản. bạn tạo một mẫu và với cú pháp thích hợp, chuyển các biến vào đó. Sau đó, tại tuyến thích hợp để hiển thị mẫu, bạn gán giá trị cho các biến được khai báo trong tệp mẫu của mình. Chúng được biên dịch trong thời gian thực khi mẫu được hiển thị

Một tính năng thiết yếu của các công cụ mẫu là chúng cho phép chúng tôi tạo các thành phần có thể tái sử dụng được gọi là các phần, có thể được sử dụng lại trong các tệp khác. Điều này giúp ngăn chặn mã trùng lặp và thực hiện thay đổi dễ dàng hơn

Hiện nay có một số công cụ tạo mẫu và những công cụ phổ biến hơn bao gồm Pug (fka Jade), Tay lái, EJS, Bộ ria mép, Swig và các công cụ khác. Bài đăng này sẽ thảo luận về các công cụ mẫu sau cho Express

• chó pug
• EJS
• tay lái

Bắt đầu

Thiết lập dự án npm mới và cài đặt Express bằng cách nhập các lệnh sau vào thiết bị đầu cuối của bạn

npm init
npm i express

Tạo một thư mục

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

1. Đây là nơi chúng tôi sẽ viết tất cả mã của chúng tôi cho dự án này. Trong thư mục, tạo một tệp có tên

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

2 và một thư mục có tên

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

3 để giữ các chế độ xem mà chúng tôi sẽ hiển thị thông qua Express. Thêm thư mục con

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

4 vào thư mục

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

3 để giữ các phần. Cấu trúc thư mục của bạn sẽ trông như thế này

├──src
  ├───views
    ├───partials
  app.js

Thêm mã soạn sẵn Express này vào tệp

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

2

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

Tích hợp các công cụ mẫu Express

Việc tích hợp một công cụ mẫu vào ứng dụng Express của bạn chỉ cần một vài dòng mã. Ngay sau khi gán chức năng Express (trước khi tạo tuyến đường của bạn), hãy thêm các cài đặt ứng dụng sau

• const express = require('express');
  const path = require('path');
  const app = express();
  app.get('/', (request, response) => {
    return response.send('OK');
  });
  app.listen(5000, () => {
    console.log('App is listening on port 5000');
  });
  

  3, thư mục chứa các tệp mẫu (e. g. ,

  const express = require('express');
  const path = require('path');
  const app = express();
  app.get('/', (request, response) => {
    return response.send('OK');
  });
  app.listen(5000, () => {
    console.log('App is listening on port 5000');
  });
  

  8). Điều này mặc định cho thư mục

  const express = require('express');
  const path = require('path');
  const app = express();
  app.get('/', (request, response) => {
    return response.send('OK');
  });
  app.listen(5000, () => {
    console.log('App is listening on port 5000');
  });
  

  3 trong thư mục gốc của ứng dụng

• const express = require('express');
  const path = require('path');
  const app = express();
  app.get('/', (request, response) => {
    return response.send('OK');
  });
  app.listen(5000, () => {
    console.log('App is listening on port 5000');
  });
  

  20, công cụ mẫu của bạn. Ví dụ: để sử dụng công cụ mẫu Pug.

  const express = require('express');
  const path = require('path');
  const app = express();
  app.get('/', (request, response) => {
    return response.send('OK');
  });
  app.listen(5000, () => {
    console.log('App is listening on port 5000');
  });
  

  21

chó pug

Pug có một cú pháp rất khác biệt, ưu tiên thụt đầu dòng và khoảng trắng hơn các dấu ngoặc nhọn truyền thống trong các thẻ HTML. Một trang điển hình với các phân đoạn đầu và thân trông như thế này

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

2

Từ ví dụ trên, bạn có thể thấy không có thẻ mở hoặc thẻ đóng. Thay vào đó, thẻ kèm theo được khai báo và các thẻ con của nó được thụt vào ngay bên dưới, giống như trong Python. Nội dung của mỗi thẻ được khai báo bên cạnh thẻ, trong khi các thuộc tính được khai báo bên trong dấu ngoặc đơn. Các lớp được biểu thị bằng

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

22 và

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

23 bằng

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

24

Các biến có thể được định nghĩa theo hai cách

• Sử dụng dấu bằng (

  const express = require('express');
  const path = require('path');
  const app = express();
  app.get('/', (request, response) => {
    return response.send('OK');
  });
  app.listen(5000, () => {
    console.log('App is listening on port 5000');
  });
  

  25) – Điều này thường được sử dụng khi biến được khai báo là nội dung duy nhất của thẻ hoặc thuộc tính tương ứng, như đã thấy trong các thẻ

  const express = require('express');
  const path = require('path');
  const app = express();
  app.get('/', (request, response) => {
    return response.send('OK');
  });
  app.listen(5000, () => {
    console.log('App is listening on port 5000');
  });
  

  26 và

  const express = require('express');
  const path = require('path');
  const app = express();
  app.get('/', (request, response) => {
    return response.send('OK');
  });
  app.listen(5000, () => {
    console.log('App is listening on port 5000');
  });
  

  27 của chúng tôi
• Sử dụng cú pháp

  const express = require('express');
  const path = require('path');
  const app = express();
  app.get('/', (request, response) => {
    return response.send('OK');
  });
  app.listen(5000, () => {
    console.log('App is listening on port 5000');
  });
  

  28 – Phương pháp này có thể được sử dụng cả khi biến là nội dung duy nhất của thẻ/thuộc tính và khi nó là một phần của chuỗi dài hơn

Để kết xuất nội dung trên trong Express, trước tiên hãy cài đặt gói Pug từ npm

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

2

Tiếp theo, sao chép mã ở trên vào tệp

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

29 bên trong thư mục

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

3 và trong

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

2, đăng ký Pug làm công cụ mẫu ưa thích

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

6

Trong cùng một tệp, hãy tạo một tuyến đường hiển thị tệp theo cách này

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

7

Phương thức kết xuất lấy tên của tệp (không có phần mở rộng) và sau đó là giá trị của các biến trong tệp mẫu

Sử dụng partials trong Pug

Hãy tạo một tệp điều hướng có thể tái sử dụng có tên là

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

22 trong thư mục con partials; . Điều này sẽ chứa menu điều hướng của chúng tôi với đoạn mã sau

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

0

Sau đó, chúng tôi có thể bao gồm một phần trong tệp

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

29 của mình bằng cách sử dụng từ khóa

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

25 ngay bên trong thẻ

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

26

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

4

Truy cập

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

27 và bạn sẽ nhận được một cái gì đó như thế này

Đây là phần giới thiệu đơn giản về mẫu Pug. Bạn có thể tìm hiểu thêm từ trang web pug chính thức

EJS

EJS giống với HTML hơn nhiều so với Pug, vẫn giữ nguyên phương pháp mở và đóng thẻ thông thường cũng như chỉ định các thuộc tính. Các biến được khai báo bằng cách sử dụng dấu ngoặc nhọn và dấu phần trăm theo cách này.

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

28

Thẻ EJS có thể được sử dụng theo nhiều cách khác nhau

• const express = require('express');
  const path = require('path');
  const app = express();
  app.get('/', (request, response) => {
    return response.send('OK');
  });
  app.listen(5000, () => {
    console.log('App is listening on port 5000');
  });
  

  29 – Thoát khỏi giá trị được cung cấp và xuất giá trị đó sang mẫu

• const express = require('express');
  const path = require('path');
  const app = express();
  app.get('/', (request, response) => {
    return response.send('OK');
  });
  app.listen(5000, () => {
    console.log('App is listening on port 5000');
  });
  

  60 – Xuất giá trị được cung cấp mà không thoát. Bạn nên thoát khỏi tất cả các biến HTML trước khi kết xuất để ngăn chặn các cuộc tấn công kịch bản chéo trang (XSS)

• const express = require('express');
  const path = require('path');
  const app = express();
  app.get('/', (request, response) => {
    return response.send('OK');
  });
  app.listen(5000, () => {
    console.log('App is listening on port 5000');
  });
  

  61 – Thực hiện các thao tác điều khiển như sử dụng điều kiện hoặc vòng lặp

Tích hợp EJS vào Express

Đầu tiên, cài đặt gói

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

62 từ npm

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

1

Tiếp theo, chuyển cài đặt ứng dụng

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

20 từ Pug sang EJS

├──src
  ├───views
    ├───partials
  app.js

0

Bây giờ, để viết lại mã Pug của chúng tôi ở trên trong EJS, hãy tạo tệp

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

64 trong thư mục

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

3 của bạn và thêm mã sau

├──src
  ├───views
    ├───partials
  app.js

1

Sử dụng partials trong EJS

Bên trong thư mục con

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

4, tạo tệp

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

67 và thêm mã này

├──src
  ├───views
    ├───partials
  app.js

2

Bạn có thể thêm phần điều hướng vào tệp chỉ mục của mình bằng cách thêm đường dẫn tương đối của tệp partials vào từ khóa

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

25, sửa đổi dòng ngay bên dưới thẻ

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

26

├──src
  ├───views
    ├───partials
  app.js

3

Thêm tuyến đường sau vào tệp

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

2

├──src
  ├───views
    ├───partials
  app.js

4

Bây giờ, khi bạn khởi động máy chủ của mình và truy cập tuyến đường

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

71, trang sẽ được hiển thị với nội dung tương tự với mẫu Pug

tay lái

Tay lái, giống như EJS, cố gắng trung thành với phong cách HTML thông thường bằng cách chèn biến đơn giản bằng hai dấu ngoặc nhọn — e. g. ,

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

72 — hoặc ba dấu ngoặc nhọn cho các ký tự không thoát HTML. Nó được xây dựng trên công cụ tạo khuôn ria mép, vì vậy chúng có một số điểm tương đồng

Có một số gói npm có sẵn để biên dịch và hiển thị Tay lái trong Express, nhưng tôi sẽ sử dụng gói

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

73. Điều này được cài đặt thông qua lệnh

├──src
  ├───views
    ├───partials
  app.js

5

Sau đó, chúng tôi đặt công cụ xem của mình thành

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

73 với

├──src
  ├───views
    ├───partials
  app.js

6

Một bản viết lại

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

75 của các trang chỉ mục trước đây của chúng tôi sẽ trông như thế này

├──src
  ├───views
    ├───partials
  app.js

7

Sử dụng partials trong Handlebars

Sử dụng cấu trúc tệp giống như trước đó, tạo tệp

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

76 bên trong thư mục

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

4. Chúng tôi sẽ sử dụng cùng mã trong tệp

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

67 ở trên vì đây là cú pháp HTML thông thường không có bất kỳ biến nào được xác định trong đó

Không giống như các công cụ mẫu khác, bạn phải đăng ký các bộ phận của mình trong Tay cầm trước khi có thể sử dụng chúng. Nhập mô-đun

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

73 vào tệp

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

2 của bạn và sử dụng phương pháp

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

01

├──src
  ├───views
    ├───partials
  app.js

8

Sau khi đăng ký, bạn chỉ cần sử dụng tên tệp của một phần thay vì đường dẫn tương đối khi đưa nó vào tệp

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

73. Cú pháp để đưa một phần vào một tệp

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

73 khác là

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

04. Bạn có thể đưa phần điều hướng vào tệp chỉ mục của mình bằng cách thêm sửa đổi dòng ngay bên dưới thẻ mở đầu

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

26

├──src
  ├───views
    ├───partials
  app.js

9

Thêm tuyến đường sau vào

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

2 để hiển thị tệp chỉ mục

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

0

Truy cập tuyến đường

const express = require('express');
const path = require('path');
const app = express();
app.get('/', (request, response) => {
  return response.send('OK');
});
app.listen(5000, () => {
  console.log('App is listening on port 5000');
});

71 sẽ hiển thị một trang tương tự tuyến đường tương tự trong ứng dụng Pug

Phần kết luận

Các công cụ mẫu khá dễ cài đặt và yêu cầu ít hoặc không cần bản soạn sẵn, đồng thời bạn có thể tạo các ứng dụng lớn với chúng mà không phải mất quá nhiều thời gian để học cú pháp. Bạn có thể tìm hiểu thêm về họ bằng cách truy cập tài liệu của họ để bắt đầu tạo các trang web động được hiển thị từ máy chủ

Mã nguồn của ứng dụng này có trên GitHub với mỗi công cụ mẫu ở một nhánh khác, được đặt tên cùng tên

Chỉ dành cho 200 Theo dõi các yêu cầu mạng chậm và không thành công trong sản xuất

Triển khai trang web hoặc ứng dụng web dựa trên Node là phần dễ dàng. Đảm bảo phiên bản Node của bạn tiếp tục cung cấp tài nguyên cho ứng dụng của bạn là lúc mọi thứ trở nên khó khăn hơn. Nếu bạn quan tâm đến việc đảm bảo các yêu cầu đối với dịch vụ phụ trợ hoặc bên thứ ba thành công, hãy thử LogRocket. https. // tên lửa. com/đăng ký/

LogRocket giống như một DVR dành cho ứng dụng web và thiết bị di động, ghi lại mọi thứ diễn ra trong khi người dùng tương tác với ứng dụng của bạn theo đúng nghĩa đen. Thay vì đoán xem tại sao lại xảy ra sự cố, bạn có thể tổng hợp và báo cáo về các yêu cầu mạng có vấn đề để nhanh chóng hiểu nguyên nhân gốc rễ

Công cụ mẫu trong Nodejs là gì?

Công cụ mẫu nào tốt nhất cho nút JS?

Tại sao công cụ mẫu được sử dụng?

Công cụ mẫu nào sau đây có thể được sử dụng trong nút JS?