close

გამოყენებაში Template Engine _ Express.js

ვებ დეველოპმენტში სერვერიდან მონაცემების ჩვენება ვებ გვერდებზე გადამწყვეტია მომხმარებლის ინტერაქტიული და დინამიური გამოცდილების შესაქმნელად. სწორედ აქ Template Engine მოვიდა Express.js სამაშველოში. A Template Engine არის ინსტრუმენტი, რომელიც საშუალებას გაძლევთ შექმნათ დინამიური HTML შაბლონები სერვერიდან მონაცემების HTML კოდში შეყვანით.

რატომ გამოვიყენოთ Template Engine ?

Template Engine დაეხმარეთ HTML მარკირების განცალკევებას სერვერიდან მიღებული მონაცემებისგან. ეს საშუალებას გაძლევთ მართოთ HTML კოდი უფრო მარტივად, კოდის თითოეულ სტრიქონში მონაცემების ჩასმის გარეშე. ამის ნაცვლად, თქვენ შექმნით "placeholders" ან "tags" HTML კოდის ფარგლებში, რომელსაც Template Engine მოგვიანებით შეავსებთ სერვერის მხარის მონაცემებით.

გამოყენებაში Template Engine _ Express.js

Express.js მხარს უჭერს სხვადასხვა template engine, როგორიცაა Pug(ადრე ცნობილი როგორც Jade) და EJS(Embedded JavaScript). ქვემოთ მოცემულია Pug-ისა და EJS-ის გამოყენების მაგალითები Express.js:

Pug-ის გამოყენება Template Engine

დააინსტალირეთ Pug: თქვენ უნდა დააინსტალიროთ pug პაკეტი npm-ის საშუალებით.

npm install pug --save

კონფიგურაცია Template Engine: თქვენი აპლიკაციის კონფიგურაციის ფაილში(მაგ. app.js), განსაზღვრეთ Pug როგორც template engine.

app.set('view engine', 'pug');

შექმენით Pug შაბლონი: შექმენით Pug ფაილები დირექტორიაში views. მაგალითად, შექმენით index.pug ფაილი:

doctype html  
html  
  head  
    title My Express App  
  body  
    h1 Welcome to My Express App  
    p #{message}

მარშრუტის დამუშავება და მონაცემთა გადაცემა: მარშრუტის დამუშავებისას შეგიძლიათ გადასცეთ მონაცემები template engine გამოყენებით res.render().

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

EJS-ის გამოყენება Template Engine

დააინსტალირეთ EJS: დააინსტალირეთ ejs პაკეტი npm-ის საშუალებით.

npm install ejs --save

კონფიგურაცია Template Engine: განსაზღვრეთ EJS, როგორც template engine თქვენი აპლიკაციის კონფიგურაციაში.

app.set('view engine', 'ejs');

შექმენით EJS შაბლონი: შექმენით EJS ფაილები დირექტორიაში views. მაგალითად, შექმენით index.ejs ფაილი:

<!DOCTYPE html>  
<html>  
<head>  
  <title>My Express App</title>  
</head>  
<body>  
  <h1>Welcome to My Express App</h1>  
  <p><%= message %></p>  
</body>  
</html>

მარშრუტის დამუშავება და მონაცემთა გადაცემა: მარშრუტის დამუშავებისას გადასცეთ მონაცემები template engine გამოყენებით res.render().

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

 

დასკვნა

Template Engine in-ის გამოყენება Express.js საშუალებას გაძლევთ შექმნათ დინამიური ვებ გვერდები და აჩვენოთ ინფორმაცია სერვერიდან მომხმარებლის ბრაუზერში. Pug-ის, EJS-ის ან სხვა ვერსიების გამოყენებით template engine, შეგიძლიათ შექმნათ ინტერაქტიული და მოქნილი ვებ გვერდები, რომლებიც უზრუნველყოფენ მომხმარებლის უკეთეს გამოცდილებას და ოპტიმიზაციას უკეთებს HTML კოდის და მონაცემთა მართვას.