art-template模板引擎语法和模板继承和第三方模块dateformat和serve-static和router

最新推荐文章于 2024-08-10 07:30:06 发布
最新推荐文章于 2024-08-10 07:30:06 发布
阅读量876 收藏 22
点赞数 20
分类专栏： 2024年前端程序员 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54513862/article/details/136817630
版权

标准语法: {{each 数据}} {{/each}}

原始语法: <% for() {%> <% } %>

{{each target}}

{{KaTeX parse error: Expected 'EOF', got '}' at position 6: index}̲} {{value}}

{{/each}}

<% for(var i = 0; i < target.length; i++){ %>

<%= i %> <%= target[i] %>

<% } %>

2.5子模板

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

标准语法: {{ include ‘模板’}}

原始语法: <%include (‘模板’)%>

{{include ‘./header.art’}}

<% include(‘./header.art’) %>

2.6 模板继承

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

<!doctype html>

HTML骨架模板

{{block ‘head’}}{{/block}}

{{block ‘content’}}{{/block}}

{{extend ‘./layout.art’}}

{{block ‘head’}} {{/block}}

{{block ‘content’}}

This is just an awesome page.

{{/block}}
2.7 时间插件dateformat

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 = ‘.html’;

const html = template(‘06.art’,{

time:new Date()

});

console.log(template(‘07’,{}));

console.log(html);

art文件

{{ dateFormat(time,‘yyyy-mm-dd’)}}

时间模块下载 和时间格式

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.8.第三方模块serve-static

功能：实现静态资源访问服务

步骤：

1.引入serve-static模块获取创建静态资源服务功能的方法

2.调用方法创建静态资源服务并指定静态资源服务目录

3.启用静态资源服务功能

//导入静态资源访问模块,该模块有一个返回值,返回值是一个方法,调用这个方法就可以实现静态资源访问功能

const serveStatic = require(‘serve-static’);

//实现静态资源访问服务,调用方法serveStatic 第一个参数是静态资源根目录

//serveStatic也有一个返回值,返回值也是一个方法,用变量接收这个方法,调用这个方法才可以实现静态资源访问功能

const serve = serveStatic(path.join(__dirname,‘public’));

app.on(‘request’, () => {

serve(req, res)

})

app.listen(3000)

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

img
img
img
img

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
img

计算机网络

  • HTTP 缓存

  • 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

  • HTTP 常用的请求方式，区别和用途？

  • HTTPS 是什么？具体流程

  • 三次握手和四次挥手

  • 你对 TCP 滑动窗口有了解嘛？

  • WebSocket与Ajax的区别

  • 了解 WebSocket 嘛？

  • HTTP 如何实现长连接？在什么时候会超时？

  • TCP 如何保证有效传输及拥塞控制原理。

  • TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

  • 链表

  • 字符串

  • 数组问题

  • 二叉树

  • 排序算法

  • 二分查找

  • 动态规划

  • BFS

  • 栈

  • DFS

  • 回溯算法


    c66a0fec7a3e33c2c7e1fa878.png)

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

  • 链表

  • 字符串

  • 数组问题

  • 二叉树

  • 排序算法

  • 二分查找

  • 动态规划

  • BFS

  • 栈

  • DFS

  • 回溯算法

谷口仙三
关注
专栏目录
art-template模板引擎的语法和基本使用
webchang的博客
12-26 3444
art-template模板引擎的语法以及基本使用
104node-第三方模块art-template模板引擎+原生、标准模板语法+继承+配置dateformat
Gy_9543的博客
07-29 286
模板引擎是第三方模块—让开发者更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护 下载 1、npm install art-template 命令进行下载 2、使用const template=require(‘art-template’)引入模板引擎 3、告诉模板引擎要拼接的模板在哪 const html =template(‘模板路径’，数据) 返回值就是拼接好的字符串 // 导入模板引擎模块 const template = require('art-template'); // 将特定模板与
artTemplate 简洁语法版
杨辉勇码代码
01-30 5814
使用 引用简洁语法的引擎版本，例如： 下载----->https://raw.githubusercontent.com/aui/artTemplate/master/dist/template.js 表达式 {{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。 输出表达式 对内容编码输出： {{content}} 不编码输出： {{#co
artTemplate基本语法
汉堡请不要欺负面条
11-21 1万+
这边是以标准语法来操作的。javascript引擎的实质就是帮我们把带有JavaScript代码的伪THTML语句编译为HTML。 一.artTemplate基本语法结构 1.表达式 {{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。 2.输出表达式 2.1对内容编码输出：{{content}} 2.2不编码输出：{{#content}} 编码可以防止数据中含有 HTML
Express.js 中的 serve-static 使用指南
最新发布
gitblog_00380的博客
08-10 344
Express.js 中的 serve-static 使用指南 serve-staticServe static files项目地址:https://gitcode.com/gh_mirrors/se/serve-static 项目介绍 serve-static 是一个由 Express.js 社区维护的 NPM 模块，它用于在您的Node.js应用程序中轻松地提供静态文件服务。此中间件通过解析...
artTemplate的简单用法
10-15 6389
在实际开发中，我们会使用模板引擎来提高开发效率。而众多的模板引擎中，artTemplate无论就速度，兼容性还是使用人数上，都占绝对优势。这里我将简单地介绍下artTemplate的常见用法。 对于这其中涉及到的语法，我们只需要记住并且会用即可，不需要知道为什么这样用 用法一：使用渲染模板 需要先使用一个type="text/html"的script标签存放模板 1.简单的json数据
artTemplate的基本语法
a3060858469的博客
06-28 894
javascript引擎的实质就是帮我们把带有JavaScript代码的伪THTML语句编译为HTML。 一：artTemplate基本语法结构 1：表达式 {{与}}包裹起来的语句则为面板的逻辑表达式 2：输出表达式 对内容编码输出：{{content}} 不编码输出：{{#content}} 编码可以防止数据中含有HTML字符串，避免引起XSS攻击 3：变量 {{set temp=dat...
art-template标准语法
m0_63400611的博客
03-22 447
什么是标准语法 art-template提供了"{{}}"这种语法格式,在{{}}内可以及进行变量输出,或循环数组等操作,这种{{}}语法在art-template中被称为标准语法 标准语法 - 输出 {{value}} {{obj.key}} {{obj['key']}} {{a ? b : c}} {{a || b}} {{a + b}} 在{{}}语法中,可以进行变量的输出,对象属性的输出,三元表达式输出,逻辑或输出,加减乘除等表达式输出 标准语法 - 原文输出 {{@ value}
模板引擎的基本概念和art-template
酷爱前端的小陈博客
04-08 757
1 渲染UI结构时遇到的问题 var rows = [] $.each(res.data, function (i, item) { // 循环拼接字符串 rows.push('<li class="list-group-item">'+ item.content +'<span class="badge cmt-date">评论时间：'+ item.time +'</span><span class="badge cmt-person">评论人：
art-template 不转义html,前端模版引擎 - art-template 【下】
weixin_42137032的博客
06-26 732
新版本的 art-template 据作者所说有以下的改变：调试增强支持运行时错误调试，编译错误调试。断点使用 Webpack Loader 后可以输出 SourceMap，支持在浏览器中对模板进行断点调试。混合式语法art-template 从 v3.0 开始默认采用的是简洁语法，相对于 ejs 式的语法，简洁语法优点是利于读写，弊端是逻辑控制非常有限，比如循环控制等。v4.0 同时支持两种语法...
认识 模板引擎 art-template
qq_56588657的博客
05-09 481
常用模板引擎 art-template 作用： 使用 模板引擎 提供的模板语法，可以将 数据 和 HTML 拼接起来 安装 npm install art-template --save art-template 模板引擎的官网地址： https://aui.github.io/art-template/zh-cn/index.html 标准语法 art-template 提供了 {{}} 这种语法格式，在 {{}} 内可以进行 变量输出 或 循环数组 等操作，这种语法在 art-template 中被称
serve-static：服务静态文件
02-04
静态服务 安装 这是通过提供的模块。 使用完成 ： $ npm install serve-static API var serveStatic = require ( 'serve-static' ) serveStatic（root，选项） 创建一个新的中间件功能，以从给定的根目录中提供文件。 通过将req.url与提供的根目录结合起来确定要提供的文件。 当找不到文件时，此模块将不调用404响应，而是调用next()移至下一个中间件，从而进行堆栈和回退。 选件 acceptRanges 启用或禁用接受远程请求，默认为true。 禁用此选项将不会发送Accept-Ranges并忽略R
模板引擎artTemplate简单语法
weixin_43003949的博客
05-25 557
模板引擎 模板引擎是第三方模块。 让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。 art-template模板引擎 在命令行工具中使用 npm install art-template 命令进行下载 使用const template = require(‘art-template’)引入模板引擎 告诉模板引擎要拼接的数据和模板在哪 const html = template(‘模板路径’, 数据); 使用模板语法告诉模板引擎，模板与数据应该如何进行拼接 const template
artTemplate
qq_42610806的博客
08-13 555
这是数据。 做成的效果 &lt;script type="text/html" id="tHead"&gt; &lt;tr&gt; &lt;th&gt;站名&lt;/th&gt; {{each}} &lt;td&gt;{{$value.stationName}}&lt;/td&a
artTemplate基本用法
怪只怪满眼尽是人间烟火
04-18 733
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>artTemplate基本用法</title> <script src="js/jquery-1.10.1.min.js"></script> <!...
模板引擎art-template的基本使用方法
2401_84094868的博客
04-17 795
模板引擎是第三方模块，它的主要功能是让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。通过概念性描述可能不太清除它的含义，我们通过两端代码来直观感受一下// 未使用模板引擎let arr = [{ name:‘张三’, age:20, }];i++) {str += ‘str += ‘’// 使用模板引擎{{/each}}我们可以从两段代码看出，使用模板引擎拼接字符串的方法更加清晰，更加简洁。
第三方模块 serve-static - 静态资源服务
qq_44277696的博客
04-04 831
功能：实现静态资源访问服务 使用步骤： 1、引入serve-static模块获取静态资源服务功能的方法 2、调用方法创建静态资源服务并指定静态资源服务目录 3、启用静态资源服务功能 const serveStatic = require("serve-static"); const serve = serveStatic("public"); server.on("request",(req,res) => { serve(req,res,()=>{}) }) server.listen(3
模板引擎art-template的基本使用方法，最全知识总结
2401_84092809的博客
04-06 1336
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载05)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载。
art-template----介绍、安装、语法、模板继承、压缩页面、选项、在express中使用
热门推荐
m0_63348818的博客
05-01 2万+
文章目录1 介绍：1.2 核心方法：2 安装2.1 安装方法:3.语法3.1 输出3.2 原文输出3.3 条件输出3.4 循环输出3.5 定义变量4. 模板继承5.压缩页面开启6.选项7.在express中使用7.1、安装7.2、 配置7.3、 使用7.4、 修改默认的 views 视图渲染存储目录。 1 介绍： art-template 是一个简约、超快的模板引擎。 它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。 1.
SimpleDateFormat和DateFormat
05-20
SimpleDateFormat和DateFormat都是Java中用于日期格式化的类。它们的主要区别在于SimpleDateFormat是DateFormat的一个子类，它提供了一种更简单的方式来格式化日期和时间。 SimpleDateFormat可以通过设置特定的格式化字符串来格式化日期和时间。例如，"yyyy-MM-dd"表示以年-月-日的格式输出日期，"HH:mm:ss"表示以小时:分钟:秒的格式输出时间。SimpleDateFormat还可以解析一个字符串并将其转换成日期对象。 DateFormat是一个抽象类，它定义了一些用于格式化和解析日期的方法。它的具体实现类包括SimpleDateFormat和其他一些类，如DateTimeFormat和DateFormatSymbols。与SimpleDateFormat不同，DateFormat不能直接实例化，需要通过调用静态方法getInstance()或getDateInstance()等来获取实例。 总之，SimpleDateFormat是DateFormat的一个实现，它提供了一种更简单的方式来格式化和解析日期和时间。在实际开发中，我们可以根据需要选择使用哪一个类来满足要求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值