模板引擎art-template知识分享

day04

day04-ppt 模板引擎art-template

模板引擎的基础概念

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

art-template

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

art-template代码示例

• 见PPT

模板引擎的语法

模板语法

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

输出

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

原文输出

• 如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后输出。
  • 标准语法：{ {@ 数据 }}
  • 原始语法：<%-数据 %>

条件判断

• 见PPT

循环

• 标准语法：{ {each 数据}} { {/each}}
• 原始语法：<% for() { %> <% } %>
• 例子 见PPT

子模板

• 使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。
• 标准语法：{ {include ‘模板’}}
• 原始语法：<%include(‘模板’) %>
• 例子见PPT

模板继承

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

模板继承示例

• 见PPT

模板配置

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

day04-code

template

• 01.js 01.art
  • 模板的基本引用
  • art模板 输出 原文输出演示

    const template = require('art-template');
    const path = require('path');
    const views = path.join(__dirname, 'views', '01.art');
    const html = template(views, {
        name: '张三',
        age: 20,
        content: '
我是标题
'
    })
    console.log(html);

	
	
{
    { name }}
	
{
    { 1 + 1 }}
	
{
    { 1 + 1 == 2 ? '相等' : '不相等' }}
	
{
    { content }}
	
{
    {@ content }}
	
	
<%= name %>
	
<%= 1 + 2%>
	
<%= 1 + 1 == 2 ? '相等' : '不相等' %>
	
<%= content%>
	
<%- content%>

• 02.js 02.art
  • 模板的基本引用
  • art模板 条件判断

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

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

• 03.js 03.art
  • 模板的基本引用
  • art模板 for循环

	{
    {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 %>
		
	<% } %>

• 04.js 04.art
  • 模板的基本引用
  • art模板 子模板

    {
    { include './common/header.art' }}
    <% include('./common/header.art') %>
    
 {
    { msg }} 
    {
    { include './common/footer.art' }}
    <% include('./common/footer.art') %>

• 05.js 05.art layout.art
  • 模板的基本引用
  • art模板 模板继承

{
    {extend './common/layout.art'}}

{
    {block 'content'}}
{
    { msg }}
{
    {/block}}

{
    {block 'link'}}

{
    {/block}}

• 06.js 06.art
  • 模板配置
  • art模板 时间格式

    {
    { dateFormat(time, 'yyyy-mm-dd')}}

student

• app.js
  • 模板引擎 网站服务器的基本配置
• 学生信息表案例

    // 引入http模块
    const http = require('http');
    // 引入模板引擎
    const template = require('art-template');
    // 引入path模块
    const path = require('path');
    // 引入静态资源访问模块
    const serveStatic = require('serve-static');
    // 引入处理日期的第三方模块
    const dateformat = require('dateformat');
    const router = require('./route/index');
    // 实现静态资源访问服务
    const serve = serveStatic(path.join(__dirname, 'public'))
    // 配置模板的根目录
    template.defaults.root = path.join(__dirname, 'views');
    // 处理日期格式的方法
    template.defaults.imports.dateformat = dateformat;
    // 数据库连接
    require('./model/connect');
    // 创建网站服务器
    const app = http.createServer();
    // 当客户端访问服务器端的时候
    app.on('request', (req, res) => {
        // 启用路由功能
        router(req, res, () => {})
        // 启用静态资源访问服务功能
        serve(req, res, () => {})
    });
    // 端口监听
    app.listen(80);
    console.log('服务器启动成功');