前后端交互-模板引擎artTemplate

2022-07-06  本文已影响0人  小边_leo

一. 模板引擎的基础概念

文档：http://aui.github.io/art-template/zh-cn/
Github: https://github.com/aui/art-template

1 - 模板引擎 (art-template)

模板引擎是腾讯公司开发的第三方模块，让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。

// 未使用模板引擎的写法
var ary = [{ name: '张三', 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>';


<!-- 使用模板引擎的写法 -->
<ul>
   {{each ary}}
       <li>{{$value.name}}</li>
       <li>{{$value.age}}</li>
   {{/each}}
</ul>

2 - 模板引擎的基本使用

  1. 在命令行工具中使用 npm install art-template 命令进行下载
  2. 使用const template = require('art-template')引入模板引擎
  3. 告诉模板引擎要拼接的数据和模板在哪 const html = template(‘模板路径’, 数据);
  4. 使用模板语法告诉模板引擎，模板与数据应该如何进行拼接

注意：模板路径推荐使用绝对路径，更安全，可以使用 __dirname 拼接

代码示例：

index.art 模板文件代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    {{ name }}
    {{ age }}
</body>
</html>

app.js 代码：

// 导入模板引擎
const template = require('art-template');
const path = require('path');

const views = path.join(__dirname, 'views', 'index.art');

// template方法是用来拼接字符串的
// 1\. 模板路径 绝对路径
// 2\. 要在模板中显示的数据 对象类型
// 返回拼接好的字符串
const html = template(views, {
    name: '张三',
    age: 20
})

console.log(html);
// 服务端返回拼接好的字符串给客户端
res.end(html);

使用 node app.js 命令执行上面代码，打印如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    张三
    20
</body>
</html>

可以发现，template方法把拼接好的字符串返回了。

二. 模板引擎的语法

1 - 标准语法和原始语法

art-template同时支持两种模板语法：标准语法和原始语法。
标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力。

标准语法： {{ 数据 }}
原始语法：<%= 数据  %>

2 - 输出

将某项数据输出在模板中，标准语法和原始语法如下：

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

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

3 - 原文输出

如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后输出，如果想要解析，可以使用如下语法。

标准语法：{{@ 数据 }}l
原始语法：<%- 数据 %>

比如在 js 文件中我们这样定义：

const html = template(views, {
    name: '张三',
    age: 20,
    content: '<h1>我是标题</h1>'
})

在.art文件中，想要解析就要如下这样写：

<!-- 标准语法 -->
<h2>{{@ content }}</h2>
<!-- 原始语法 -->
<h2><%- content %></h2>

最后打印结果为：

<h2> <h1>我是标题</h1> </h2>

4 - 条件判断

在模板中可以根据条件来决定显示哪块HTML代码，如果条件成立则会显...之内的数据。

<!-- 标准语法 -->
{{if 条件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
<!-- 原始语法 -->
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

注意：一个 <% 和一个 %> 是一对，他们总是成对出现的。

示例代码如下：

.art文件代码如下：

{{if age > 18}}
    年龄大于18
{{else if age < 15 }}
    年龄小于15
{{else}}
    年龄不符合要求
{{/if}}

<% if (age > 18) { %>
    年龄大于18
<% } else if (age < 15) { %>
    年龄小于15
<% } else { %>
    年龄不符合要求
<% } %>

5 - 循环

标准语法：{{each 数据}} {{/each}}
原始语法：<% for() { %> <% } %>


<!-- 标准语法 -->
{{each target}}
    {{$index}} {{$value}}
{{/each}}
 <!-- 原始语法 -->
<% for(var i = 0; i < target.length; i++){ %>
    <%= i %> <%= target[i] %>
<% } %>

示例代码如下：

.art文件代码：

<!-- 标准语法 -->
<ul>
    {{each users}}
        <li>
            {{$value.name}}
            {{$value.age}}
            {{$value.sex}}
        </li>
    {{/each}}
</ul>

<!-- 原始语法 -->
<ul>
    <% for (var i = 0; i < users.length; i++) { %>
        <li>
            <%=users[i].name %>
            <%=users[i].age %>
            <%=users[i].sex %>
        </li>
    <% } %>
</ul>

.js文件代码：

const template = require('art-template');
const path = require('path');

const views = path.join(__dirname, 'views', '03.art');

const html = template(views, {
    users: [{
        name: '张三',
        age: 20,
        sex: '男'
    },{
        name: '李四',
        age: 30,
        sex: '男'
    },{
        name: '玛丽',
        age: 15,
        sex: '女'
    }]
});

console.log(html);

执行js文件，打印如下：

<ul>
        <li>
            张三
            20
            男
        </li>

        <li>
            李四
            30
            男
        </li>

        <li>
            玛丽
            15
            女
        </li>
</ul>

6 - 子模版

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

标准语法：{{include '模板'}}
原始语法：<%include('模板') %>


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

7 - 模板继承

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

image

比如，首页页面模板，可以继承HTML骨架模板，然后再包含子模板，页面自己的一些东西就可以通过下面的坑来填充，如下：

image

8 - 模板继承示例

HTML骨架模板layout.art文件：

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

index.art 首页模板：

<!--index.art 首页模板-->
{{extend './layout.art'}} <!-- extend是继承layout.art模板的意思 -->
{{block 'head'}} <link rel="stylesheet" href="custom.css"> {{/block}} <!-- 填充head坑位 -->
{{block 'content'}} <p>This is just an awesome page.</p> {{/block}} <!-- 填充content坑位 -->

9 - 模板配置 & 导入变量

// 向模板中导入变量
template.defaults.imports.变量名 = 变量值;
// 设置模板根目录
template.defaults.root = 模板目录
// 设置模板默认后缀
template.defaults.extname = '.art'

如果我们想要在模板中使用dateformat方法，首先使用npm install dateformat下载第三方模块，其他详细代码如下：

.js文件代码：

const template = require('art-template');
const path = require('path');
// 引入dateformat模块
const dateFormat = require('dateformat');

// 设置模板的根目录
// 设置之后，在下面就可以直接写模板的名字了，就不用写绝对路径了,比如：template('06.art', {})
template.defaults.root = path.join(__dirname, 'views');

// 导入模板变量
// 导入之后在.art文件中就可以使用dateFormat方法了
template.defaults.imports.dateFormat = dateFormat;

// 配置模板的默认后缀
// 配置之后就可以直接写名字了，不用写后缀了，比如：template('06', {})
template.defaults.extname = '.art';

const html = template('06', {
    time: new Date()
});

console.log(html);

.art文件代码：

// 导入之后在.art文件中就可以使用dateFormat方法了
{{ dateFormat(time, 'yyyy-mm-dd')}}

三. 案例：学生档案管理

1 - 案例介绍

目标：模板引擎应用，强化 node.js 项目制作流程。
知识点：http请求响应、数据库、模板引擎、静态资源访问。

image

2 - 制作流程

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

3 - 第三方模块 router

功能：实现路由

使用步骤：

  1. 使用npm install router下载第三方模块 router
  2. 获取路由对象
  3. 调用路由对象提供的方法创建路由
  4. 启用路由，使路由生效
// 创建路由
const getRouter = require('router')
const router = getRouter();
router.get('/add', (req, res) => {
    res.end('Hello World!')
})

server.on('request', (req, res) => {
    // 启用路由功能 outer方法有三个参数,第三个参数是回调函数,请求完成之后会调用这个回调函数
    router(req, res, () => {})
})

4 - 第三方模块 serve-static

功能：实现静态资源访问服务，比如访问html里面链接的css文件

使用步骤：

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

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

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

6 - 学生信息列表页面分析

  1. 从数据库中将所有的学生信息查询出来
  2. 通过模板引擎将学生信息和HTML模板进行拼接
  3. 将拼接好的HTML模板响应给客户端

代码地址：https://github.com/iamkata/art-template_case

项目目录如下：

image

其中：

  1. app.js是项目的入口文件
  2. model里面是各种模块，connect.js是数据库连接模块，user.js是创建集合模块
  3. public里面是各种静态资源，比如css文件
  4. route里面是路由模块
  5. views里面是模板引擎文件

作者：Imkata
链接：https://www.jianshu.com/p/4e316a0811bd
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

上一篇下一篇

猜你喜欢

热点阅读