The template engine ejs

Template Engine is a tool that combines page templates with the data to be displayed to generate HTML pages. If the routing control method in express mentioned above is equivalent to the controller in MVC, then the template engine is equivalent to the view in MVC. The function of the template engine is to combine the page template with the data to be displayed to generate an HTML page. It can run on both the server and the client. Most of the time, it is parsed into HTML directly on the server. After the parsing is completed, it is transmitted to the client. Therefore, the client cannot even determine whether the page is generated by the template engine. . Sometimes the template engine can also run on the client, the browser. The typical representative is XSLT, which uses XML as input to generate HTML pages on the client. However, due to browser compatibility issues, XSLT is not very popular. The current mainstream is still running the template engine by the server.

In the MVC architecture, the template engine is included on the server side. After the controller gets the user's request, it gets the data from the model and calls the template engine. The template engine takes the data and page templates as input, generates an HTML page, and returns it to the controller, which is returned to the client by the controller.

注意: The current express defaults to the jade template. If you need to support ejs or other templates, you need to specify the

command line to create the ejs template project

express --view=ejs HelloWorld //Command line creation support Express web project of ejs template engine

This command adds ejs module under node_modules, index.ejs

under the views folder. Note: Which template engine is specified in the project is app.set('view Engine', 'ejs')

generated ejs file views/index.ejs

<!DOCTYPE html> <html>   <head>     <title><%= title %></title>     <link rel='stylesheet' href='/stylesheets/style.css' />   </head>   <body>     <h1><%= title %></h1>     <p>Welcome to <%= title %></p>   </body> </html>

Index.js bind data to the template

Run res.render('index', { title: 'Express' });, the template engine will replace <%= title %> with Express, and then display the replaced page to the user

Explanation: two parameters, the first is the name of the template, ie Template file name under the views directory, extension .ejs is optional. The second parameter is the data object passed to the template. The file generated after template translation


<!DOCTYPE html> <html>   <head>     <title>Express</title>     <link rel='stylesheet' href='/stylesheets/style.css' />   </head>   <body>     <h1>Express</h1>     <p>Welcome to Express</p>   </body> </html>

ejsLabel System:

● <% code %>: JavaScript code. ● <%= code %>: Shows content that has been replaced with HTML special characters. ● <%- code %>: Display the original HTML content.

When the code is such as <h1>hello</h1>, <%= code %> will output <h1>hello</h1> as it is, and <%- code %> will display H1 large hello string.

Extension example, the sample Post method does not really save the new data (you need to read and write the database or file in the background to persist):


var express = require('express'); Var router = express.Router(); Var items=[{title:'Article 1'}, {title:'Article 2'}]; /* GET home page. */ Router.get('/', function(req, res, next) { Res.render('index',{title:'article list', items:items}); }); Router.get('/form', function(req, res, next) { Res.render('form',{title:'Article list', message: 'fendo8888'}); });'/form', function(req, res, next) { Res.redirect('/'); }); Module.exports = router;

Add template form.ejs

<!DOCTYPE html> <html>   <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title><%= title %></title>     <link rel='stylesheet' href='/stylesheets/style.css' />   </head>   <body>     <form method="post" action="/form">         <label>new article</label><br>         <textarea name="text" cols="100" row="5"></textarea>         <input type="submit" value="pus"></input>     </form>     <div><%=message%></div>   </body> </html>


<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Article list page</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= title %></h1> <p><a href="/form">Publish a new article</a></p> <ul> <%items.forEach(function(item){%> <li><%=item.title%></li> <%})%> </ul> </body> </html>

Additional: Use the ejs template engine to change the suffix to

step1:Modify the engine settings file for app.js: .html 

app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');


Step2: Will view below All .ejs file extensions are changed to .html