模板引擎

1. 模板引擎的基础概念

1.1 模板引擎

模板引擎是第三方模块

让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护

清晰

1.2 模块：模板引擎 art-template

下载：npm install art-template

引入：const template = require('art-template')

使用：const html = template('模板路径', 数据);

告诉模板引擎要拼接的数据和模板在哪，应该如何进行拼接

const template = require('art-template'); // 模板引擎
const path = require('path'); // 路径拼接
const views = path.join(__dirname, 'views', '01.art');
const html = template(views, { age: 20 }); // 传入数据
console.log(html);

2. 模板引擎的语法

2.1 模板语法

art-template 同时支持两种模板语法：

  • 标准：{{ 数据 }} 可以让模板更容易读写

  • 原始：<%= 数据 %> 具有强大的逻辑处理能力

将某项数据输出在模板中如下：

<!-- 标准语法 -->
<h2>{{ value }}</h2>
<h2>{{ a ? b : c }}</h2>
<h2>{{ a + b }}</h2>

<!-- 原始语法 -->
<h2><%= value %></h2>
<h2><%= a ? b : c %></h2>
<h2><%= a + b %></h2>

2.2 原文输出

如果数据中携带 HTML 标签，默认模板引擎不会解析标签，会将其转义后输出

将 HTML 标签 输出：

  • 标准语法：{{@ 数据 }}
  • 原始语法：<%- 数据 %>
// js 传入数据
const html = template(views, { content: '<h1>标题</h1>' }); 
// art 文件可解析 HTML 标签
<p>{{@ content }}</p> // <h1>我是标题</h1>

2.3 条件判断

<!-- 标准语法 -->
{{if age>18 }}
年龄大于18
{{else if age < 15 }}
年龄小于15
{{else}}
年龄不符合要求
{{/if}}

<!-- 原始语法 -->
<% if (age > 18) { %>
年龄大于18
<% } else if (age < 15) { %>
年龄小于15
<% } else { %>
年龄不符合要求
<% } %>

2.4 循环

  • 标准：{{each 数据}} {{/each}}
  • 原始：<% for() { %> <% } %>
<!-- 标准语法 -->
{{each target}}
{{$index}} {{$value}}
{{/each}}

<!-- 原始语法 -->
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>

2.5 子模版

使用子模板可以将网站公共区块（头部、底部）抽离到单独的文件中

  • 标准语法：{{ include '模板' }}
  • 原始语法：<% include('模板') %>
<!-- 标准语法 -->
{{include './header.art'}}

<!-- 原始语法 -->
<% include('./header.art') %>

2.6 模板继承

使用模板继承可以将网站 HTML 骨架抽离到单独的文件中，其他页面模板可以继承骨架文件

在骨架文件中预留一些位置，可给位置起名，在其他页面中填入内容

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML骨架模板</title>
        {{block 'head'}}{{/block}} // 预留位置
    </head>
    <body>
        {{block 'content'}}{{/block}}
    </body>
</html>

<!--index.art 首页模板-->
{{extend './common/layout.art'}} // 继承

{{block 'content'}}
<p>{{ msg }}</p> // <p>首页模板</p>
{{/block}}

{{block 'link'}}
<link rel="stylesheet" type="text/css" href="./main.css">
{{/block}}

继承

2.8 模板配置

  • 向模板中导入变量：

    template.defaults.imports.变量名 = 变量值;

  • 设置模板根目录：

    template.defaults.root = 模板目录

  • 设置模板默认后缀：

    template.defaults.extname = '.art'

const template = require('art-template');
const path = require('path');
const dateFormat = require('dateformat'); // 格式化日期模块

// 设置模板根目录
template.defaults.root = path.join(__dirname, 'views');

// 导入模板变量
template.defaults.imports.dateFormat = dateFormat;

// 配置模板的默认后缀
template.defaults.extname = '.html';

const html = template('06.art', { time: new Date() });
console.log(html); // 2020-10-31

console.log(template('07', {})); // 默认识别 html

// art 文件
{{ dateFormat(time, 'yyyy-mm-dd')}} // 几位写几个

3. 案例：学生档案管理

3.1 案例介绍

目标：模板引擎应用，强化 node.js 项目制作流程

知识点：http 请求响应、数据库、模板引擎、静态资源访问

添加学生信息页面

学生信息列表页面

3.2 制作流程

  1. 建立项目文件夹并生成项目描述文件
  2. 创建网站服务器实现客户端和服务器端通信
  3. 连接数据库并根据需求设计学员信息表
  4. 创建路由并实现页面模板呈递
  5. 实现静态资源访问
  6. 实现学生信息添加功能
  7. 实现学生信息展示功能

3.3 模块：路由 router

  1. 获取路由对象
  2. 调用路由对象提供的方法创建路由
  3. 启用路由，使路由生效
const getRouter = require('router'); // 路由模块
const router = getRouter(); // 获取路由对象
router.get('/add', (req, res) => {res.end('Hello')});
router.post('/add', (req, res) => {
    let formData = '';
    req.on('data', param => { formData += param });
    req.on('end', async() => {})
});
server.on('request', (req, res) => {router(req, res)})

3.4 模块：静态资源访问服务

  1. 引入 serve-static 模块获取创建静态资源服务功能的方法
  2. 调用方法创建静态资源服务并指定静态资源服务目录
  3. 启用静态资源服务功能
const serveStatic = require('serve-static')
const serve = serveStatic('public')
server.on('request', () => { serve(req, res)})
server.listen(3000)

3.5 添加学生信息功能步骤分析

  1. 在模板的表单中指定请求地址与请求方式
  2. 为每一个表单项添加 name 属性
  3. 添加实现学生信息功能路由
  4. 接收客户端传递过来的学生信息
  5. 将学生信息添加到数据库中
  6. 将页面重定向到学生信息列表页面

3.6 学生信息列表页面分析

  1. 从数据库中将所有的学生信息查询出来
  2. 通过模板引擎将学生信息和 HTML 模板进行拼接
  3. 将拼接好的 HTML 模板响应给客户端
posted @ 2020-11-12 18:57  今夜星河漫漫  阅读(169)  评论(0)    收藏  举报