Express page

Template jade

Jade, error. Jade, layout. Jade. You are unfamiliar with an extended name file like Jade. In order to use the familiar HTML structure, you usually replace it with a template engine that is easy to understand, such as Art-Template, during the actual development of a project

Jade syntax will not be explained too much, please refer to the document for details

jade-lang.com/api

Replace the template engine art-template

grammar

Express’s default template engine is Jade, which was replaced with the more efficient Art-Template for new users

Installation art – tempate

npm install -s art-template

npm install -s express-art-template
Copy the code

After the installation is complete, modify the app.js file in the root directory of the item

app.set('view engine', 'html');
Copy the code

to

app.engine('.html',require('express-art-template')) app.set('view engine', 'html'); // Page template engineCopy the code

Next, go to the views section to create the index. HTML file. After writing the file in HTML format, preview it in the access

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 13px! Important;"Copy the code

Render the data to the page

In the development of a web page, the internal growth of the web page is generally based on the data returned in the background dynamic changes, which requires the data to be rendered to the page

The method that renders the data to the page in Express is the second parameter to the Render method of the Response object

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
Copy the code

When the page is rendered, this code passes a title field with the value Express to the index. HTML page. This field can be used to replace the original content

<h1>{{title}}</h1>
Copy the code

See if it is a bit like vUE page data presentation

In addition, there can be more parameters such as

res.render('index', { title: 'Express',name:'iwhao',age:18 });
Copy the code

Conditions apply colours to a drawing

The conditions for rendering Is nothing but if judgment, and the vue syntax is different Here can’t write tags, or the need to write within {{if}} and {{/ if}} and the corresponding tag end points, similar to HTML tags to the following

< h1 > {{title}} < / h1 > 30}} {{if age < < p > I'm a little fresh < / p > {{/ if}} {{if age > 30}} < p > I'm old driver < / p > {{/ if}}Copy the code

Nested condition rendering

Sometimes business conditions need to be nested inside the condition judgment, here also support multi-layer nested rendering if nested inside the if

< h1 > {{title}} < / h1 > 30}} {{if age < < p > I'm a little fresh < / p > {{if age = = 18}} < p > 😍 the somebody else is youth 😍 😍 😍 😍 😍 < / p > {{/ if}} {{/ if}}Copy the code

Render loop

In addition to the condition rendering above, loop rendering is also a common method, such as list and so on to change the route parameter condition here with each as statement as follows

Res. Render (' index '{title:' Express 'name:' iwhao, age: 18, list: [1, 2, 3, 4]});Copy the code

Writing in the index.html

< h1 > title < / h1 > {{as each list item}} < p > the Numbers: {{item}} < / p > {{/ each}}Copy the code

Loop rendering combined with conditional rendering

Usually in the real business, when rendering a list, according to the different state of each piece of data in the list to show different content, this is used to determine the render conditions in recycling

< h1 > title < / h1 > {{as each list item}} {{if item > 2}} < p > the number of larger than 2: < / p > {{item}} {{/ if}} {{/ each}}Copy the code

More about the art-template syntax

Art-template supports both standard and raw syntax. The standard syntax makes the template easy to read and write, while the original syntax has powerful logical expression.

The standard syntax supports basic template syntax and basic JavaScript expressions. The original syntax supports arbitrary JavaScript statements, just like EJS.

The output

Standard grammar

{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
Copy the code

The original grammar

<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>
Copy the code

$data = $data; $data = $data;

{{$data['user list']}}
Copy the code

The original output

Standard grammar

{{@ value }} 
Copy the code

The original grammar

<%- value %>
Copy the code

The original output statement does not escape the HTML content, which may cause security risks. Exercise caution when using this statement.

conditions

Standard grammar

{{if value}} ... {{/if}} {{if v1}} ... {{else if v2}} ... {{/if}} 
Copy the code

The original grammar

<% if (value) { %> ... <% } %> <% if (v1) { %> ... <% } else if (v2) { %> ... The < %} % >Copy the code

cycle

Standard grammar

{{each target}}     {{$index}} {{$value}} {{/each}} 
Copy the code

The original grammar

<% for(var i = 0; i < target.length; i++){ %>     <%= i %> <%= target[i] %> <% } %> 
Copy the code
  1. targetsupportarray 与 objectThe default value is$data.
  2. $value 与 $indexCan be customized:{{each target val key}}.

variable

Standard grammar

{{set temp = data.sub.content}} 
Copy the code

The original grammar

<% var temp = data.sub.content; % >Copy the code

Template inheritance

Standard grammar

{{extend './layout.art'}} {{block 'head'}} ... {{/block}} 
Copy the code

The original grammar

<% extend('./layout.art') %> <% block('head', function(){ %> ... The < %}) % >Copy the code

Template inheritance allows you to build a basic template “skeleton” that contains the common elements of your site. Example:

<! --layout.art--> <! doctype html> <html> <head> <meta charset="utf-8"> <title>{{block 'title'}}My Site{{/block}}</title> {{block 'head'}} <link rel="stylesheet" href="main.css"> {{/block}} </head> <body> {{block 'content'}}{{/block}} </body> </html>Copy the code
<! --index.art--> {{extend './layout.art'}} {{block 'title'}}{{title}}{{/block}} {{block 'head'}} <link rel="stylesheet" href="custom.css"> {{/block}} {{block 'content'}} <p>This is just an awesome page.</p> {{/block}}Copy the code

After rendering index.art, the layout skeleton is automatically applied.

The child templates

Standard grammar

{{include './header.art'}} {{include './header.art' data}} 
Copy the code

The original grammar

<% include('./header.art') %> <% include('./header.art', data) %> 
Copy the code
  1. dataThe default value is$data; The standard syntax does not support declarationsobject 与 array, only reference variables are supported, and the original syntax is unrestricted.
  2. Art-template is a built-in HTML compressor. Please avoid writing subtemplates whose HTML is abnormally closed. Otherwise, the tags may be accidentally optimized after compression is enabled.

The filter

Register filter

template.defaults.imports.dateFormat = function(date, format){/*[code..] * /}; template.defaults.imports.timestamp = function(value){return value * 1000};Copy the code

The filter function accepts the target value as its first argument.

Standard grammar

{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}} 
Copy the code

{{value | filter}} filter syntax similar to pipeline operators, it’s an output as an input.

The original grammar

<%= $imports.dateFormat($imports.timestamp(date), 'yyyy-MM-dd hh:mm
Copy the code

The above is all the content of view, thank you very much for seeing here, if this article is good or a little help to you, please like, follow, share, of course, any questions can be discussed in the comments, I will actively answer, thanks again 😁