前后端交互-模板引擎artTemplate

一. 模板引擎的基础概念

文档: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 = '
    '; for (var i = 0; i < ary.length; i++) { str += '
  • \ '+ ary[i].name +'\ '+ ary[i].age +'\
  • '; } str += '
';

    {{each ary}}
  • {{$value.name}}
  • {{$value.age}}
  • {{/each}}

2 - 模板引擎的基本使用

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

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

代码示例:

index.art 模板文件代码:




    
    Document


    {{ name }}
    {{ age }}



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 命令执行上面代码,打印如下:




    
    Document


    张三
    20



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

二. 模板引擎的语法

1 - 标准语法和原始语法

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

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

2 - 输出

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


{{value}}

{{a ? b : c}}

{{a + b}}

<%= value %>

<%= a ? b : c %>

<%= a + b %>

3 - 原文输出

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

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

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

const html = template(views, {
    name: '张三',
    age: 20,
    content: '

我是标题

' })

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


{{@ content }}

<%- content %>

最后打印结果为:

我是标题

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文件代码:


    {{each users}}
  • {{$value.name}} {{$value.age}} {{$value.sex}}
  • {{/each}}
    <% for (var i = 0; i < users.length; i++) { %>
  • <%=users[i].name %> <%=users[i].age %> <%=users[i].sex %>
  • <% } %>

.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文件,打印如下:

  • 张三 20 男
  • 李四 30 男
  • 玛丽 15 女

6 - 子模版

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

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


{{include './header.art'}}

<% include('./header.art') %>

7 - 模板继承

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

image

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

image

8 - 模板继承示例

HTML骨架模板layout.art文件:



    
        
        HTML骨架模板
        {{block 'head'}}{{/block}}
    
    
        {{block 'content'}}{{/block}}
    


index.art 首页模板:


{{extend './layout.art'}} 
{{block 'head'}}  {{/block}} 
{{block 'content'}} 

This is just an awesome page.

{{/block}}

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
来源:
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

你可能感兴趣的:(前后端交互-模板引擎artTemplate)