EJS template engine

1. Introduction

EJS is an efficient JavaScript template engine.

The template engine was created to separate the user interface from the business data (content).

In simple terms, you can render data dynamically using the EJS template engine.

2. The use of EJS

Download and install

npm i ejs

Configuring the Template Engine

app.set(“view engine” , “ejs”);

Directory for storing the configuration template

app.set(“views”,”./views”)

Create a template file in the views directory

xxx.ejs

Using the template, render the template with Response

Response.render (‘ template name ‘, data object)

1. Variable concatenation

/ / 1. Install the ejs
/ / 2. Introduce the ejs
const ejs = require("ejs");
const fs = require("fs");

/** * STR The string to compile * data data object */

let html = fs.readFileSync("./views/index.html").toString();
let data = {
    msg: "Live for glory and die for glory.".title: "Title"};//3. Call the method
const result = ejs.render(html, data);
Copy the code

// index.html
<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= msg %></h1>
  </body>
</html>
Copy the code

2. Traversal of data

const ejs = require("ejs");
const fs = require("fs");
let str = fs.readFileSync('./views/songs.html').toString();
let data = {
    songs: [
        'Honey'.'Stupid kid'.'Come home often'.'Not to Forget tonight'.'Good luck']};let result = ejs.render(str, data);
Copy the code

// songs.html
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The song list</title>
    <style>
        body{
            background:#ace;
        }
    </style>
</head>
<body>
    <h2>The song list</h2>
    <ul><% for(let i=0; i<songs.length; i++){ %><li><%= songs[i] %></li>The < %} % ></ul>
</body>
</html>
Copy the code

Use with Express

const express = require("express");
const app = express();
const ejs = require("ejs");
const fs = require("fs");
// Static resource services
app.use(express.static("./public"));
// Displays a list of songs
app.get("/songs".(request, response) = > {
  // String arguments
  let str = fs.readFileSync("./views/ Tracklist.html").toString();
  // Data object
  let data = {
    songs: ["Honey"."Stupid kid."."Come home often."."Not to forget tonight."."Good luck."]};// Compile the content
  let result = ejs.render(str, data);
  / / response
  response.send(result);
});

app.listen(80);
Copy the code

3. The judge

//
let str = ' > <% if(! vip){ %> 
<%= ad %>
 <% } %> `;
const result = ejs.render(str, {
    vip: 0.ad: "Not every drop of milk is called Terensus."});console.log(result);
Copy the code

Ejs is used in Express

// Player data
const player = [
  { id: 1.name: "xiaoming" },
  { id: 2.name: "xiaoning" },
  { id: 3.name: "xiaotian" },
  { id: 4.name: "knight"},];// Import the Express package
const express = require("express");
// Create an application object
const app = express();
//1. Set the ejS template engine for Express
app.set("view engine"."ejs"); // pug
// Set the location of the template used by ejS. The template is the file where the HTML code is stored
app.set("views"."./template");

// Route Settings
app.get("/player".(request, response) = > {
  //2. Create a template file in the specified folder
  Ejs./template/player.ejs file
  response.render("player", { player: player });
});
// Listen on the port to start the service
app.listen(80.() = > {
  console.log("Service has started.. Port 80 listening....");
});
Copy the code

// template/player.ejs <! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> collapse; } td{ padding:10px 20px; } < / style > < / head > < body > < h2 > pro < / h2 > < table border = "1" > < tr > < td > ID < / td > < td > name < / td > < / tr > < % for (let I = 0; i<player.length; i++){ %> <tr><td><%= player[i].id %></td><td><%= player[i].name %></td></tr> <% } %> </table> </body> </html>Copy the code

art-template

1. Introduction

Art-template is a minimalist, ultra-fast templating engine.

It uses scoped pre-declaration techniques to optimize template rendering speed for performance close to JavaScript limits, and supports both NodeJS and browsers.

Aui.github. IO /art-templat…

2. Use

Manual stitching is required if no template engine is available

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Template engine --art-template</title>
  </head>
  <body>
    <p>Student Information Sheet</p>
    <ul id="list"></ul>

    <script>
      // Student data
      const students = [
        {
          name: "Alex".age: 18.sex: "male"}, {name: "Zhang".age: 28.sex: "male"}, {name: "Bill".age: 20.sex: "female",},];// 1. Use template strings
        const list = document.getElementById('list');

        let html = ' ';

        for (const student of students) {
            html += `<li>${student.name} ${student.sex} ${student.age}</li>`;
        }

        list.innerHTML = html;
    </script>
  </body>
</html>

Copy the code

Using a template engine

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Template engine --art-template</title>
  </head>
  <body>
    <p>Student Information Sheet</p>
    <ul id="list"></ul>

    <script src="https://unpkg.com/[email protected]/lib/template-web.js"></script>

    <script id="tpl-students" type="text/html">
      {{each students}}
      <li>{{$value.name}} {{$value.age}} {{$value.sex}}</li>
      {{/each}}
    </script>

    <script>
      // Student data
      const students = [
        {
          name: "Alex".age: 18.sex: "male"}, {name: "Zhang".age: 28.sex: "male"}, {name: "Bill".age: 20.sex: "female",},];// list.innerHTML = html;

      // 1. Use the art-template engine
      // 1.1. introduce art-template

      // 1.2. Prepare the template

      // 1.3. Get the template
      // console.log(
      // template('tpl-students', {
      // students
      / /})
      // );
      const list = document.getElementById("list");

      // The template engine outputs a string, which is a string filled with data
      list.innerHTML = template("tpl-students", {
        students,
      });
    </script>
  </body>
</html>
Copy the code

Output 1.

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Art - the template syntax</title>
  </head>
  <body>
    <div id="content"></div>

    <script src="https://unpkg.com/[email protected]/lib/template-web.js"></script>

    <! -- 1. Output
    <script id="tpl-1" type="text/html">
      {{value}}<br />
      {{data}}<br />
      {{data.key}}<br />
      {{data['key']}}<br />operation{{a+b}}<br />$data is the entire object passed{{$data}}<br />
      {{$data.value}}<br />
      {{$data.data}}<br />@text Parses HTML tags{{text}}
      {{@ text}}
    </script>

   

      <script>
          / / 1. Output
          // Use standard grammar first. If standard grammar cannot solve the problem, use original grammar
          const content = document.getElementById("content");

          // Arguments are placed in objects, even if there are no arguments, empty objects are passed
          content.innerHTML = template("tpl-1", {
              value: 1.data: {
                  key: 2,},a: 3.b: 4.// The original output statement does not escape HTML content
              text:  });</script>
  </body>
</html>
Copy the code

Condition of 2.

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Art - the template syntax</title>
  </head>
  <body>
    <div id="content"></div>

    <script src="https://unpkg.com/[email protected]/lib/template-web.js"></script>

 <! -- 2. Conditions -->
    <script id="tpl-2" type="text/html">
      {{if sex === 'male'}}male{{else if sex === 'female'}}female{{else}}other{{/if}}
    </script>


      <script>
          / / 2. Conditions
          const content = document.getElementById('content');
          content.innerHTML = template('tpl-2', {
              // sex: 'male'
              // sex: 'female'
              sex: 'other'
          });

      </script>
  </body>
</html>
Copy the code

3. The cycle

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Art - the template syntax</title>
  </head>
  <body>
      <ul id="list"></ul>
    <script src="https://unpkg.com/[email protected]/lib/template-web.js"></script>

 <! -- 3. Loop -->
      <script id="tpl-2" type="text/html">
     {{each students}}$value = value,$index = index, and $data = data<li>{{$value.name}} {{$value.age}} {{$value.sex}} {{$index}} {{$data}}</li>
      {{/each}}
      </script>


      <script>
          / / 3. The cycle
          const students = [
              {
                  name: 'Alex'.age: 18.sex: 'male'
              },
              {
                  name: 'Joe'.age: 28.sex: 'male'
              },
              {
                  name: 'bill'.age: 20.sex: 'female'}];const list = document.getElementById('list');
          list.innerHTML = template('tpl-3', {
              // students: students
              students
          });
      </script>
  </body>
</html>
Copy the code

4. Subtemplate syntax

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Art - the template syntax</title>
    </head>
    <body>
        <div id="content"></div>
        <br />
        <div id="otherContent"></div>

     

        <script src="https://unpkg.com/[email protected]/lib/template-web.js"></script>

        <! -- 4. Subtemplate -->
    <script id="tpl-4" type="text/html">
      {{include 'tpl-4-header'}}

      <p>Home page</p>

      {{include 'tpl-4-footer'}}
    </script>

    <script id="tpl-4-header" type="text/html">
      <header>I'm a public head</header>
    </script>
    <script id="tpl-4-footer" type="text/html">
      <footer>I'm public bottom</footer>
    </script>
	
     <! Pass parameter to child template -->
    <script id="tpl-4-2-header" type="text/html">
      <header>I am a{{page}}Public head</header>
    </script>
    <script id="tpl-4-2-footer" type="text/html">
      <footer>I am a{{page}}At the bottom of the public</footer>
    </script>

    <script id="tpl-4-2-index" type="text/html">
      <% include('tpl-4-2-header', {page:'home'}) % ><p>Home page</p>

      <% include('tpl-4-2-footer', {page:'home'}) % ></script>

    <script id="tpl-4-2-list" type="text/html">
      <% include('tpl-4-2-header', {page:'List page'}) % ><p>List of pp.</p>

      <% include('tpl-4-2-footer', {page:'List page'}) % ></script>

      <script>
         // 4. Subtemplate
          const content = document.getElementById("content");
          // Empty objects are passed even if there are no arguments
          content.innerHTML = template("tpl-4"{});// Pass parameters to the child template
          // If you need to pass parameters to child templates, use raw syntax
          const content = document.getElementById("content");
          content.innerHTML = template("tpl-4-2-index"{});const otherContent = document.getElementById("otherContent");
          otherContent.innerHTML = template("tpl-4-2-list"{});</script>
  </body>
</html>
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Ejs and art-Template template engines

EJS template engine

1. Introduction

2. The use of EJS

1. Variable concatenation

2. Traversal of data

3. The judge

> <% if(! vip){ %>

art-template

1. Introduction

2. Use

Output 1.

Condition of 2.

3. The cycle

4. Subtemplate syntax

Ejs and art-Template template engines

EJS template engine

1. Introduction

2. The use of EJS

1. Variable concatenation

2. Traversal of data

3. The judge

> <% if(! vip){ %>

art-template

1. Introduction

2. Use

Output 1.

Condition of 2.

3. The cycle

4. Subtemplate syntax

Related Posts

Element Table changes the style of the specified row, column, or cell

TS Study Notes (I) : Basic type

How to implement a Babel plugin that detects if a Render template has legacy merge conflicts