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: '<h1>我是标题</h1>'
    })
    console.log(html);
<body>
	<!-- 标准语法 -->
	<p>{{ name }}</p>
	<p>{{ 1 + 1 }}</p>
	<p>{{ 1 + 1 == 2 ? '相等' : '不相等' }}</p>
	<p>{{ content }}</p>
	<p>{{@ content }}</p>
	<!-- 原始语法 -->
	<p><%= name %></p>
	<p><%= 1 + 2%></p>
	<p><%= 1 + 1 == 2 ? '相等' : '不相等' %></p>
	<p><%= content%></p>
	<p><%- content%></p>
</body>
  • 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循环
<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>
  • 04.js 04.art
  • 模板的基本引用
  • art模板 子模板
{{ include './common/header.art' }}
    <% include('./common/header.art') %>
    <div> {{ msg }} </div>
    {{ include './common/footer.art' }}
    <% include('./common/footer.art') %>
  • 05.js 05.art layout.art
  • 模板的基本引用
  • art模板 模板继承
{{extend './common/layout.art'}}

{{block 'content'}}
<p>{{ msg }}</p>
{{/block}}

{{block 'link'}}
<link rel="stylesheet" type="text/css" href="./main.css">
{{/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('服务器启动成功');