art-template

安装模板引擎
模板引擎 art-template
准备好art文件,跟html文件差不多用法如图
模板引擎 art-template
引入后,用path拼接路劲作为template的第一个参数,找到那个文件,然后传值过去。
模板引擎 art-template
返回的是一个html模板的字符串
模板引擎 art-template
可以看到值被换了。
图中的{{}}为模板语法,图中有一行的乱码其实代表的是《h1》这些,而下一行因为添加个了@,不解析html标签而直接显示出来
模板语法:标准语法:{{}},原始语法:<%=数据%> 原文输出不解析:{{@数据}} <%-数据%>

条件

模板引擎 art-template
模板引擎 art-template
标准语法:
{{if 条件}}内容
{{else if 条件}}内容
{{else }}内容
{{/if}}
模板引擎 art-template
原始语法
模板引擎 art-template
模板引擎 art-template

循环

模板引擎 art-template
模板引擎 art-template
模板引擎 art-template
{{each 循环的对象}}其中会自动生产一些标签{{/each}}

原始语法
模板引擎 art-template
模板引擎 art-template

子模块以及模快引入

可以抽取一些公共的模块出来,如图
模板引擎 art-template
模板引擎 art-template
在art中用{{include ‘’}}或则<%include(’’)%>引入,结果
模板引擎 art-template

模板引擎 art-template

继承

模板引擎 art-template
模板引擎 art-template
模板引擎 art-template
可以继承其他人的模板,用{{extemd ‘路径’}}即可,模板里面还可以预留位置,如{{bloack ‘head’}}{{/block}}

在引用的时候,传值过去{{block ‘head’}}123{{/block}}最终123会被传过去放在对应位置

模板配置

每次都要用path来拼接路径引入实属麻烦。故直接配置模板根目录,模板后缀,第一个参数就可以直接写模板名字。
设置根目录
模板引擎 art-template
模板引擎 art-template
模板引擎 art-template
第一个参数可以直接写放在那个根目录下的文件的名字。
模板引擎 art-template
时间格式转换用dataformat模块
模板引擎 art-template
模板引擎 art-template
此时就有了一个a方法,而且可以直接在模板文件总调用
模板引擎 art-template
模板引擎 art-template

路由模板引擎 art-template

模板引擎 art-template
接着便可使用路由了
模板引擎 art-template
模板引擎 art-template
格式就是router.get/post(‘地址’,(req,res)=>{
配合引擎模板用res.send()渲染出来。
})
注意,模板引擎 art-template
因为数据库的操作是异步操作且返回的是promise对象,故加上await变成同步函数
模板引擎 art-template
记得导出,然后在app.js中导入,
模板引擎 art-template
当服务器发生请求时,就可以启用路由了。启用格式如图。
接着便是对静态资源的处理,这样才可以访问这些资源,一般放着的都是CSS文件等等。
借助serve-static模块,先安装
模板引擎 art-template
接着便在服务器请求时开启模板引擎 art-template
这样便可正常访问了。

时间格式化

上面说过的datafromat模块
模板引擎 art-template
这样在art文件中就可以使用dateformat方法对时间进行格式转化
模板引擎 art-template
第一个参数是数据,第二个参数是转换的格式。

相关文章: