nodejs中art-template模板语法的引入及冲突解决方案


Posted in NodeJs onNovember 07, 2017

使用Webstorm创建nodejs express应用时,默认使用的是jade或者ejs模板,对于不习惯这两种模板语法的人来说确实不是很方便。没关系,这里我们使用art-template模板引擎,使用后可以直接使用html模板:

1、安装art-template

npm install art-template

2、修改app.js文件,添加如下代码:

// view engine setup
app.set('views', path.join(__dirname, 'views'));
var template = require('art-template');
template.config('base', '');
template.config('extname', '.html');
app.engine('.html', template.__express);
app.set('view engine', 'html');

3、然后直接创建html页面,js路由便可以直接访问了

4、首先在app.js中添加如下路由拦截:

var routes = require('./routes/index');

...

app.use('/', routes);

然后是index.js文件:

var express = require('express');
var router = express.Router();
var tags = require('../modules/tag.js');

router.get('/', function(req, res, next) {
 res.render("index2",{title:"index2",content:"index2's content"});
});

module.exports = router;

这里我跳转到index2页面(配置好了art-template模板引擎后,视图层默认文件后缀即为html),index2.html页面如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>{{title}}</title>
</head>
<body>
{{content}}
</body>
</html>

运行应用,浏览器输出如下:

nodejs中art-template模板语法的引入及冲突解决方案

nodejs中art-template模板语法冲突解决方案

art-template的github地址: https://github.com/aui/art-template

前端开发中,有非常多的模板引擎第三方框架,其中art-template属于写的比较好的一个,一般的模板引擎第三方都会支持一到两种模板语法,最常见的就是大胡子语法 {{ }} 和尖括号语法 <%= %>

本篇文章主要介绍一下在nodejs中,art-template如何解决模板引擎语法冲突

1.1-模板引擎语法冲突的场景

1.如果一个html文件中,既存在客户端渲染,也存在服务端渲染的话,那么这两种渲染的模板引擎语法不能一致,否则在加载时服务端渲染就已经将客户端的模板也一并渲染了

2.一般遇到这种情况,例如一个html文件中既有服务端渲染又有客户端渲染的情况下,服务端的模板引擎我们使用 {{ }} 语法,客户端渲染我们使用 <%= %>

3.在nodejs中,我们使用npm来安装art-template之后: npm install art-template ,默认情况下art-template是同时支持浏览器端与服务端的,并且他们之间的导入文件是不同的

1.2-配置art-template服务端模板语法

1.如果是服务端,我们使用 require('art-template') 来导入,此时加载的是 index.js ,这里的index.js值得是根目录下的index.js,这是nodejs模块加载机制的入口,它的内部非常简单,就是做了一个文件导入操作。

服务端的art-template的模板语法源代码在 art-template 的 lib 文件夹下的 compile文件夹 对应的 adapter 中,两种模板语法分别对应的文件是 rule.art.js简洁语法 , rule.native.js原生语法 ,如下图

nodejs中art-template模板语法的引入及冲突解决方案 

2.如果是客户端,我们则不能使用服务端的模板语法文件,这是因为nodejs遵循的是commonjs的规范,所有的文件API都是以模块的形式导出,在 art-template 文件夹, lib -> compile 文件夹中有一个专用于客户端的模板语法文件 template-web.js ,这是一个压缩的js包

nodejs中art-template模板语法的引入及冲突解决方案 

3.浏览器的模板语法默认支持两种语法,简洁和原生,这个无法修改。但是我们可以通过修改服务端的源代码,使服务端只支持一种模板语法 {{ }} ,这样的话我们在客户端使用 <%= %> 语法,服务器就无法渲染了

经过本人对 art-template 源码的分析,发现 art-template 的服务端两种模板语法是在 compile 文件下有一个 default.js 文件中导入的,所以我们只需要稍微修改一下源码即可

默认是一个数组来配置模板语法,[nativeRule, artRule]同时支持两种模板语法,我们去掉nativeRule即可,此时服务端只支持 {{}} 语法,该代码修改不会对客户端造成影响

nodejs中art-template模板语法的引入及冲突解决方案 

大功告成,此时服务端与客户端的模板语法就不会冲突了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
nodejs中exports与module.exports的区别详细介绍
Jan 14 NodeJs
NodeJS与Mysql的交互示例代码
Aug 18 NodeJs
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
Aug 03 NodeJs
NodeJS使用jQuery选择器操作DOM
Feb 13 NodeJs
nodejs导出excel的方法
Jun 30 NodeJs
详解Nodejs基于mongoose模块的增删改查的操作
Dec 21 NodeJs
nodejs socket实现的服务端和客户端功能示例
Jun 02 NodeJs
nodejs开发微信小程序实现密码加密
Jul 11 NodeJs
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
Sep 19 NodeJs
nodejs实现截取上传视频中一帧作为预览图片
Dec 10 NodeJs
nodeJS服务器的创建和重新启动的实现方法
May 12 NodeJs
PHPStorm中如何对nodejs项目进行单元测试详解
Feb 28 NodeJs
Mac 安装 nodejs方法(图文详细步骤)
Oct 30 #NodeJs
浅谈NodeJs之数据库异常处理
Oct 25 #NodeJs
详解使用PM2管理nodejs进程
Oct 24 #NodeJs
nodejs中安装ghost出错的原因及解决方法
Oct 23 #NodeJs
详解Nodejs 通过 fs.createWriteStream 保存文件
Oct 10 #NodeJs
NodeJs通过async/await处理异步的方法
Oct 09 #NodeJs
nodejs 图片预览和上传的示例代码
Sep 30 #NodeJs
You might like
PHP开发入门教程之面向对象
2006/12/05 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
IE8 原生JSON支持
2009/04/13 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
关于python中导入文件到list的问题
2020/10/31 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
优秀毕业生求职推荐信范文
2013/11/21 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android