Express code analysis using html template

不言
Release: 2018-06-11 17:20:06
Original
1605 people have browsed it

This article mainly introduces the detailed code of Express using html template. The content is quite good. Now I share it with you and give it as a reference. Let’s follow the editor and take a look.

Express uses the jade template by default and can be configured to support the use of ejs or html templates.

1. Install ejs

Install ejs in the project root directory.

npm install ejs
Copy after login

2.Introduce ejs

var ejs = require('ejs'); //我是新引入的ejs插件
Copy after login

3. Set the html engine

app.engine('html', ejs.__express);
Copy after login

Set the view engine

app.set('view engine', 'html');
Copy after login

After saving, restart the service to access the html file.

Note: In the server built by express, the html engine is not configured, just add it directly; the view engine is configured, just modify the configuration.

-------------------------------------------------- ----------------------------------------

What did you do with these modified settings?

Why do I need to add settings to the html engine after modifying the view engine?

Let’s take a look at the .engine() method first.

app.engine(ext, callback);
Copy after login

Express uses the jade template by default. If you try to load the "foo.jade" file, Express will internally call the following operations.

app.engine('jade', require('jade').__express);
Copy after login

If you want to use other template engines, such as mapping EJS templates to ".html" files:

app.engine('html', require('ejs').__express);
Copy after login

In this line of code, the .renderFile() method of EJS is actually called. ejs.__express is another name for this method inside EJS.

Because the loaded template engine calls the same method .__express, so if you are using an ejs template, you do not need to configure this item.

Summary: To use html template, you need to add app.engine('html', require('ejs').__express);

When using EJS template, there is no need to configure this item.

At this time, if you create an index.html file or an index.ejs file in the views folder, the default index.jade file will still be accessed. Why is this? What I want to talk about here is the second setting mentioned above app.set('view engine', 'html');

app.set(name, value);

Among the parameters of the .set() method, one item is 'view engine', which indicates the engine plug-in used by default when the file template format is not specified. If this is set to an html file, when setting the route to specify the file, you only need to write the file name and the corresponding html file will be found. At this point, my imagination opened up and I tried to create three files test.jade, test.ejs, and test.html in views. The routing settings are as follows. Access is normal! Each route points to the corresponding file. Of course, this way of writing is not recommended at all and is not consistent with reality.

router.get('/test/',function(req, res, next){
 res.render('test', {title: 'HTML'});
});

router.get('/test1/',function(req, res, next){
 res.render('test.ejs', {title: 'EJS'});
});

router.get('/test2/',function(req, res, next){
 res.render('test.jade', {title: 'jade});
});
Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Using Requirejs in Html for modular development analysis

The above is the detailed content of Express code analysis using html template. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template