Node.js 模板引擎

最新推荐文章于 2024-09-10 09:46:43 发布
最新推荐文章于 2024-09-10 09:46:43 发布
阅读量510 收藏 1
点赞数 2
分类专栏： 笔记 文章标签： node.js
原文链接：https://www.bilibili.com/video/BV1KJ411b7FH?p=8&spm_id_from=pageDriver
版权

模板引擎

一、什么是模板引擎？
模板引擎是第三方模块，是一个将页面模板和要显示的数据结合生成HTML页面的工具让开发者以更友好的方式拼接字符串，使项目代码更加清晰，更加易于维护。
二、art-template模板引擎
1.使用：

  • 在命令行工具中使用npm install are-template安装
  • 使用const template = require(‘art-template’)引入模板引擎
  • 需要创建两个文件，一个js文件，一个art文件
  • 告诉模板引擎要拼接的数据和模板在哪const html = template(‘模板路径’,数据)
app.js文件
//导入模板引擎
const template = require('art-template')
const path = require('path')
//模板路径为绝对路径
const views = path.join(__dirname, 'views', 'index.art')
//template方法用来拼接字符串，返回值为字符串
const html = template(views, {
    name : '张三' ,
    age : 20
})
console.log(html)

index.art文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {{name}}
    {{age}}
</body>
</html>

运行结果：
在这里插入图片描述
2.模板语法

  • art-template同时支持两种模板语法：标准语法和原始语法。
  • 标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力。
    • 标准语法：{{数据}}
    • 原始语法：<%= 数据%>
01.js文件
const template = require('art-template')
const path = require('path')
const views = path.join(__dirname, 'views', '01.art')
const html = template(views, {
    name : '张三' ,
    age : 20 ,
})
console.log(html)

01.art文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--标准语法--!>
    <p>{{name}}</p>
    <p>{{1 + 1}}</p>
    <p>{{1 + 1 == 2 ? 'Y' : 'N'}}</p>
    <p>{{content}}</p>
    <!--原始语法--!>
    <p><%= name %></p>
    <p><%= 1 + 1 %></p>
    <p><%= 1 + 1 == 2 ? 'Y' : 'N' %></p>
    <p><%= content %></p>
</body>
</html>

运行结果：
在这里插入图片描述

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

    • 标准语法：{{@数据}}
    • 原始语法：<%-数据 %>
	02.js文件
	const template = require('art-template')
	const path = require('path')
	const views = path.join(__dirname, 'views', '02.art')
	const html = template(views, {
	    a : '<h1>我是标题标签<h1>',
	    b : '<div>我是盒子</div>'
	})
	console.log(html)

	02.art文件
	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Document</title>
	</head>
	<body>
	    <!--标准语法--!>
	    <p>{{a}}</p>
	    <p>{{b}}</p>
	    <p>{{@a}}</p>
	    <p>{{@b}}</p>
	    <!--原始语法--!>
	    <p><%= a %></p>
	    <p><%= b %></p>
	    <p><%- a %></p>
	    <p><%- b %></p>
	</body>
	</html>

 - 运行结果：

在这里插入图片描述

  • 2）条件判断
    • 在模板中可以根据条件来决定显示哪块HTML代码。
    • 标准语法：
      • {{if 条件}} … {{/if}}
      • {{if v1}} … {{else if v2}} … {{/if}}
    • 原始语法
      • <% if (value) { %> … <% } %>
      • <% if (v1) { %> … <% } %> else if (v2) { %> … <% } %>
	03.js
	const template = require('art-template')
	const path = require('path')
	const views = path.join(__dirname, 'views', '03.art')
	const html = template(views, {
	    name : '张三' ,
	    age : 20 ,
	})
	console.log(html)

	03.art
	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Document</title>
	</head>
	<body>
	    <!--标准语法--!>
	    {{if age > 18}}
	        年龄大于18
	    {{else if age < 15}}
	        年龄小于15
	    {{else}}
	    年龄不符合要求
	    {{/if}}
	    <!--原始语法--!>
	    <% if(age > 18) { %>
	        年龄大于18
	    <% } else if (age < 15) { %>
	        年龄小于15
	    <% } else { %>
	         年龄不符合要求
	    <% } %>
	</body>
	</html>

 - 运行结果

在这里插入图片描述

  • 3 循环
    在这里插入图片描述
	04.js
	const template = require('art-template')
	const path = require('path')
	const views = path.join(__dirname, 'views', '04.art')
	const html = template(views, {
	    users: [
	        {
	            name : 'aa' ,
	            age : 20 ,
	            sex : '男'
	        },
	        {
	            name : 'bb' ,
	            age : 18 ,
	            sex : '女'
	        },
	        {
	            name : 'cc' ,
	            age : 22 ,
	            sex : '男'
	        }
	    ]
	})
	console.log(html)


04.art
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--标准语法--!>
    <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>   
</body>
</html>

- 运行结果：

在这里插入图片描述

  • 3 .子模板
    • 使用子模版可以将网站公共区块（头部、底部）抽离到单独的文件中。
    • 标准语法：{{include ‘模板’}} include为关键字
    • 原始语法：<%include(‘模板’) %> include为方法 在这里插入图片描述
05.js
const template = require('art-template')
const path = require('path')
const views = path.join(__dirname, 'views', '05.art')
const html = template(views, {
    msg : '我是首页'
})
console.log(html)

./common/header.art
我是头部

./common/footer.art
我是底部

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

- 运行结果：

在这里插入图片描述

  • 4.模板继承
    • 使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他网页可以继承骨架文件。
      在这里插入图片描述
06.js
const template = require('art-template')
const path = require('path')
const views = path.join(__dirname, 'views', '06.art')
const html = template(views, {
    msg : '首页模板'
})
console.log(html)

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

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

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

./common/layout.art
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    {{block 'link'}} {{/block}}
</head>
<body>
    {{block 'content'}} {{/block}}
</body>
</html>

- 运行结果：

在这里插入图片描述

  • 5.模板配置
    • 向模板中导入变量template.defaults.imports.变量名 = 变量值
07.js
const template = require('art-template')
const path = require('path')
const dateFormat = require('dateformat')
const views = path.join(__dirname, 'views', '07.art')
//导入模板变量
template.defaults.imports.dateFormat = dateFormat
const html = template(views, {
    time : new Date()
})
console.log(html)

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

 - 运行结果：

在这里插入图片描述

  • 设置模板根目录 template.defaults.root = 模板目录
  • 设置模板默认后缀template.defaults.extname = ‘.art’
08.js
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 = '.art'
const html = template('08', {
    time : new Date()
})
console.log(html)

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

- 运行结果：

在这里插入图片描述

balance~~
关注
专栏目录
Node.js开发常用的模板引擎及编程实践
TechRoar的博客
10-02 457
在Node.js开发中，模板引擎是一种重要的工具，它可以帮助我们将动态数据渲染到静态的HTML页面中。本文将介绍一些常用的Node.js模板引擎，并提供相应的代码示例，帮助您更好地理解和使用它们。通过模板引擎，您可以更方便地将动态数据渲染到静态的HTML页面中，提高开发效率和代码可维护性。EJS模板引擎的语法简单易懂，与HTML紧密结合，使得页面的渲染更加方便。Handlebars是另一个受欢迎的模板引擎，它与EJS类似，也是使用JavaScript语法。对象传递给模板，模板中的。在上述代码中，我们使用。
详解Node.js模板引擎Jade入门
10-18
Node.js中的Jade模板引擎是一种用于服务器端模板渲染的工具。它允许开发者以一种更简洁和美观的方式编写HTML代码。Jade模板引擎继承了Haml模板语言的设计哲学，因此它的语法也与Haml类似，注重于使用缩进而非花括号...
nodejs模板引擎使用(详细)
weixin_68658847的博客
01-07 1397
nodejs模板引擎使用(详细)
NodeJs之模板引擎及综合案例
十三阿哥的博客
06-01 1136
【代码】NodeJs之模板引擎及综合案例。
推荐使用：template.js —— 简洁高效的JavaScript模板引擎
最新发布
gitblog_00183的博客
09-10 416
推荐使用：template.js —— 简洁高效的JavaScript模板引擎 template.jsA javascript template engine, simple, easy & extras, support webpack, rspack, vite, rollup, esbuild, parcel, browserify, fis and gulp.项目地址:https://g...
node.js里面的ejs模板引擎
m0_64846104的博客
01-11 1123
模板引擎需要被express渲染后才能使用。在node中存在有很多个模板引擎，都各具特色，ejs。2.配置express的模板引擎为ejs。不会自动跟随服务器中数据的变化而变化。这个东西在node中被称为 模板。下面是index.js代码。
nodejs模板引擎(一)
svygh123的专栏
07-12 986
这只是使用 EJS 的一个简单示例。不同的模板引擎可能有不同的语法和特性，但它们大多数都遵循类似的工作流程。您可以根据具体需求选择合适的模板引擎，如 Pug（旧称 Jade）、Handlebars、Mustache、Dust.js 等。在 Node.js 中使用模板引擎可以让您更轻松地生成动态 HTML 页面，通过将静态模板与动态数据结合，您可以创建可维护且易于扩展的 Web 应用程序。如果您需要更复杂的逻辑或者特定的功能，您应该查阅所选模板引擎的。，您应该看到动态生成的页面。运行您的应用，然后访问。
Node.js-Pug–健壮的优雅的功能丰富的node.js模板引擎
08-10
Pug – 健壮的、优雅的、功能丰富的node.js模板引擎
优势：带有新鲜空气的Node.js模板引擎
02-16
**优势：带有新鲜空气的Node.js模板引擎** 在Node.js开发中，模板引擎扮演着至关重要的角色，它们允许开发者将静态HTML与动态数据相结合，生成动态网页内容。本篇文章将聚焦于一个名为“Edge”的模板引擎，它为Node...
node-template-benchmarks:各种Node.js模板引擎的性能比较
05-03
节点模板基准各种Node.js模板引擎的性能比较设置npm install npm start 比较页面将在localhost上运行注意：该项目需要io.js或Node.js（4.0或更高版本）才能运行。分析将这个小项目放在一起是为了评估在服务器上使用...
node.js 什么是模板引擎？（具体介绍underscore）
2301_76669854的博客
04-15 708
模板引擎是一种将数据和模板结合起来生成最终结果的工具。3-1》如上述的安装underscore后面要接 —save，意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。3-3》-save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。3-2》-g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。注意 _是模板引擎的对象，data是模板文件内容。
Node模版引擎(ejs, art-template)
MiMeng的博客
03-16 2227
模版引擎 1 ejs模版引擎 安装ejs模版引擎 $ npm i ejs -s 使用模版引擎 const express = require('express'); const app = express(); // 设置视图模版引擎 'ejs' app.set('view engine', 'ejs'); // 配置模版目录 让程序直到模版引擎的位置 app.set('view', './views'); app.get('/show', (request, response) =>
nodejs模板引擎的使用
weixin_68658847的博客
12-08 642
nodejs模板引擎的使用
node.js 模版引擎
qq_42550235的博客
04-15 668
模版引擎 一、什么是模版引擎： 模版引擎是为了使用户界面与业务逻辑（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模版引擎就会生成一个标准的文档就是将模版文件和数据通过模版引擎生成一个htmlwen文档。 常见的模版引擎： art-template art-template不仅在能在浏览器使用也可以在node中使用。 二，art-template使用 2.1、安装 npm install art-template // 该命令在那执行就会把包下载到哪里，默认会下载到node_model目录
Node.js模板引擎：简化你的Web开发
ByteKnight的博客
10-03 79
在Web开发中，动态生成HTML是一项常见的任务，而使用模板引擎可以大大简化这个过程。在本文中，我们将探讨什么是Node.js模板引擎以及如何在你的项目中使用它。Node.js模板引擎是Web开发中的重要工具，它可以帮助你简化动态生成HTML的过程。在本文中，我们介绍了什么是模板引擎以及如何在Node.js中使用EJS模板引擎来生成动态内容。希望这个简介能够帮助你更好地理解和使用模板引擎在你的项目中。这些模板引擎都有各自的特点和语法，但它们的目标都是相同的：简化Web开发过程并提高代码的可读性和可维护性。
Nodejs基础之Express框架和art-template引擎(四)，2024年最新
2401_84094868的博客
04-04 934
cookie 是存储于访问者的计算机中的变量。可以让我们用同一个浏览器访问同一个域名的时候共享数据。HTTP 是无状态协议。简单地说，当你浏览了一个页面，然后转到同一个网站的另一个页面，服务器无法认识到这是同一个浏览器在访问同一个网站。每一次的访问，都是没有任何关系的。Cookie 是一个简单到爆的想法：当访问一个页面的时候，服务器在下行HTTP 报文中，命令浏览器存储一个字符串;浏览器再访问同一个域的时候，将把这个字符串携带到上行HTTP 请求中。第一次访问一个服务器，不可能携带cookie。
NodeJs 模板引擎
SillyBoy的博客
05-14 473
文章目录模板引擎1 art-template模板引擎2 模板引擎语法3 模板引擎条件判断4 循环5 子模板6 模板配置 模板引擎 1 art-template模板引擎 art-template模板引擎，用来拼接字符串。 npm install art-template const template = require('art-template'); const html = template('模板路径',数据); const template = require('art-template'); c
JavaScript模板引擎详解
m0_75198698的博客
04-25 1565
JavaScript模板引擎是一种用于生成HTML、XML和其他文本格式的工具，它将特定的模板语法转换为相应的文本输出，通常用于前端开发中动态生成页面内容。Handlebars支持条件语句、循环语句、分部模板等功能，具有易用性和扩展性，是最受欢迎的JavaScript模板引擎之一。Mustache是一个轻量级的JavaScript模板引擎，它具有良好的可读性和可扩展性，支持逻辑语句、部分模板和自定义分隔符等功能。其中，templateString表示模板文件的字符串内容，data是一个包含模板数据的对象。
Javascript --- 模板引擎
FOR 的博客
07-20 4433
模板引擎 什么是模板引擎 官方解释：“模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。” 看不懂 简单来说就是将业务逻辑层和显示层分开，通过引擎将数据与模板结合，再将结果显示出来。 举个栗子 你要写一个文章回复的页面，回复块的代码有很多地方需要填充数据（如：回复的人的信息，回复人的ID，回复内容，回复被点赞数…) 一般情况下实现的方法可能是通过字符串拼接将代码与数据拼接起来，然后添加到某一
node.js模板引擎
09-03
其中，art-template是一种简约、超快的模板引擎，它支持Node.js和浏览器两种环境，并且采用了作用域预声明的技术来优化模板渲染速度，获得接近JavaScript的极限运行性能。要使用art-template，首先需要在项目中安装...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值