The target

  • Ability to render data using a template engine
  • Ability to use template engine for text output
  • Ability to output data using a loop
  • Know how to refer to subtemplates
  • Can you know how to do template inheritance

directory

  • Basic concepts of template engines
  • Template engine syntax

1. Basic concepts of the template engine

1.1 Template Engine

The template engine is a third-party module. It allows developers to concatenate strings in a more user-friendly way, making project code clearer and easier to maintain.

Var ary = [{name: 'zhang ', age: 20}]; var str = '<ul>'; for (var i = 0; i < ary.length; i++) { str += '<li>\ <span>'+ ary[i].name +'</span>\ <span>'+ ary[i].age +'</span>\ </li>'; } str += '</ul>';Copy the code
<! - written using a template engine - > < ul > {{each ary}} < li > {{$value. The name}} < / li > < li > {{$value. The age}} < / li > {{/ each}} < / ul >Copy the code

1.2 Art-template Template engine

  1. Use the NPM install art-template command in the command line tool to download
  2. Introduce the template engine with const template = require(‘art-template’)
  3. Const HTML = template(‘ template path ‘, data);

1.3 Art-template code sample

// import template engine module const template = require('art-template'); Const HTML = template('./views/index.art',{data: {name: 'zhang 3 ', age: 20}});Copy the code

{{}} can replace template variables with real data

<div>
    <span>{{data.name}}</span>
    <span>{{data.age}}</span>
 </div>
Copy the code

2. Template engine syntax

2.1 Template Syntax

  • Art-template supports two template grammars simultaneously: standard and primitive
  • Standard syntax makes templates easier to read and write, and raw syntax has powerful logical processing power.

2.2 the output

To output some data in a template, the standard and primitive syntax looks like this:

  • Standard syntax: {{data}}
  • Original syntax: <%= data %>
<! --> <h2>{{value}}</h2> <h2>{{a? b : c}}</h2> <h2>{{a + b}}</h2> <! --> <h2><%= value %></h2> <h2><%= a? b : c %></h2> <h2><%= a + b %></h2>Copy the code

2.3 Output of original Text

If the data contains HTML tags, the default template engine will not parse the tags, but will escape them and output them

  • Standard syntax: {{@ data}}

2.4 Condition Judgment

In the template, you can decide which HTML code to display based on criteria

<! -- Standard syntax --> {{if condition}}... {{/if}} {{if v1}} ... {{else if v2}} ... {{/if}} <! --> <% if (value) {%>... <% } %> <% if (v1) { %> ... <% } else if (v2) { %> ... The < %} % >Copy the code

2.5 cycle

  • Standard syntax: {{each data}} {{/each}}
  • <% for() {%> <%} %>
<! - standard grammar - > {{each target}} {{$index}} {{$value}} {{/ each}} <! <% for(var I = 0; i < target.length; i++){ %> <%= i %> <%= target[i] %> <% } %>Copy the code

2.6 the child templates

Subtemplates can be used to separate the common sections of the site (header, bottom) into separate files.

  • {{include ‘template ‘}}
  • Original syntax: <%include(‘ template ‘) %>
<! {{include './header.art'}} <! <% include('./header.art') %>Copy the code

2.7 Template Inheritance

Using template inheritance, you can separate a site’s HTML skeleton into a separate file, and other page templates can inherit the skeleton file.

2.8 Template Inheritance Example

<! Doctype HTML > < HTML > <head> <meta charset=" UTF-8 "> <title>HTML skeleton </title> {{block 'head'}}{{/block}} </head> <body> {{block 'content'}}{{/block}} </body> </html>Copy the code
<!  {{extend './layout.art '}} {{block 'head'}} <link rel= "stylesheet" href= "custom.css" > {{/block}} {{block 'content'}a} <p>This is just an awesome page.</p> {{block}}Copy the code

2.9 Template Configuration

  1. To import variable template template. Defaults. Imports. Variable name = variable value;
  2. Set the template root directory template.defaults.root = the template directory
  3. Set the default suffix template template. Defaults. Extname = ‘art’

Case 3.

3.1 Case Introduction – Student archives management

Goal: Template engine application to enhance node.js project production process. Knowledge: HTTP request response, database, template engine, static resource access.

3.2 Production Process

  1. Create project folders and generate project description files
  2. Create a web server to achieve client-side and server-side communication
  3. Connect to database and design student information sheet according to requirements
  4. Create routes and implement page template rendering
  5. Implement static resource access
  6. Realize the function of adding student information
  7. Realize the function of student information display

3.3 Third-party Module Router

Function: To achieve the use of routing steps:

  1. Getting a routing object
  2. Create a route by calling the method provided by the route object
  3. Enable the route to take effect
const getRouter = require('router') const router = getRouter(); router.get('/add', (req, res) => { res.end('Hello World! ') }) server.on('request', (req, res) => { router(req, res) })Copy the code

3.4 Third-party serve-static Module

Function: Implement static resource access service steps:

  1. The serve-static module is introduced to obtain the method of creating static resource services
  2. Calls the method to create a static resource service and specify a static resource service directory
  3. Enable the static resource service function
const serveStatic = require('serve-static')
const serve = serveStatic('public')
server.on('request', () => { 
    serve(req, res)
})
server.listen(3000)
Copy the code

3.5 Step analysis of adding student Information Function

  1. Specify the request address and request mode in the form of the template
  2. Add a name attribute for each form entry
  3. Add route to implement student information function
  4. Receive student information from the client
  5. Add student information to the database
  6. Redirect the page to the student Information list page

3.6 Analysis of student information list page

  1. Query all student information from the database
  2. Stitching student information and HTML template through template engine
  3. The stitched HTML template responds to the client