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导出excel的方法
Jun 30 NodeJs
Nodejs从有门道无门菜鸟起飞必看教程
Jul 20 NodeJs
nodejs 实现钉钉ISV接入的加密解密方法
Jan 16 NodeJs
nodejs连接mysql数据库简单封装示例-mysql模块
Apr 10 NodeJs
使用nodejs爬取前程无忧前端技能排行
May 06 NodeJs
深入理解nodejs中Express的中间件
May 19 NodeJs
nodejs开发微信小程序实现密码加密
Jul 11 NodeJs
nodejs实现截取上传视频中一帧作为预览图片
Dec 10 NodeJs
Nodejs实现爬虫抓取数据实例解析
Jul 05 NodeJs
NodeJs操作MongoDB教程之分页功能以及常见问题
Apr 09 NodeJs
在NodeJs中使用node-schedule增加定时器任务的方法
Jun 08 NodeJs
详解NodeJS模块化
Jun 15 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代码运行时间查看类代码分享
2011/08/06 PHP
php实现源代码加密的方法
2015/07/11 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
win10系统中安装scrapy-1.1
2016/07/03 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
python 检查文件mime类型的方法
2018/12/08 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
读书活动实施方案
2014/03/10 职场文书
好人好事演讲稿
2014/09/01 职场文书
保险公司演讲稿
2014/09/02 职场文书
会计试用期自我评价
2014/09/19 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
工作保证书怎么写
2015/02/28 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
班主任开场白
2015/06/01 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript