node渲染html模板的两种方法

Nodejs在进行渲染前端文件的时候，可以使用ejs或者swig渲染引擎

下面是两种方法来进行渲染html文件

方式一：使用ejs渲染引擎

后台JS文件

HTML模板文件

方式二：使用ｓｗｉｇ进行渲染ＨＴＭＬ模板

后台JS文件

HTML模板文件

总结：

引擎设置

接收参数

方式一：使用ejs渲染引擎

后台JS文件

var express=require('express');
var ejs=require('ejs');app=express();
//设置渲染文件的目录
app.set('views','./views');
//设置html模板渲染引擎
app.engine('html',ejs.__express);
//设置渲染引擎为html
app.set('view engine','html');//调用路由，进行页面渲染
app.get('/',function(request,response){//调用渲染模板response.render('login',{//传参title:'首页', content:'Render template'});});
app.listen(8005);
console.log('http://127.0.0.1:8005');

HTML模板文件

在使用ejs模板引擎传输参数，接受的时候参数包含在<%=%>里面.例如：<%=KeyName%>

<!DOCTYPE html>
<html style="height: 100%">
<head><meta charset="utf-8"><!--<title>{{ title }}</title>--><title><%=title%></title>
</head>
<body style="height: 100%; margin: 0">
<h1><%=content%></h1>
</body>
</html>

效果：

方式二：使用swig进行渲染HTML模板

后台JS文件

var express=require('express');
var swig=require('swig');app=express();
//设置渲染文件的目录
app.set('views','./views');
//设置html模板渲染引擎
app.engine('html',swig.renderFile);
//设置渲染引擎为html
app.set('view engine','html');app.listen(8005);//调用路由，进行页面渲染
app.get('/',function(request,response){//调用渲染模板response.render('login',{//传参title:'首页', content:'Render template'});});
console.log('http://127.0.0.1:8005');

HTML模板文件

在使用swig模板引擎传输参数，接受的时候参数包含在{{}}里面.例如：{{KeyName}}

<!DOCTYPE html>
<html style="height: 100%">
<head><meta charset="utf-8"><title>{{title}}</title>
</head>
<body style="height: 100%; margin: 0">
<h1>{{content}}</h1>
</body>
</html>

效果：

总结：

引擎设置

使用ejs渲染html模板的时候，html引擎设置为：

app.engine('html',ejs.__express);

使用ejs渲染html模板的时候，html引擎设置为：

app.engine('html',swig.renderFile);

接收参数

ejs引擎接收参数方式： <%=KeyName%>

swig引擎接收参数方式：{{KeyName}}

以上就是nodejs对HTML模板进行渲染的两种方式，记录一下希望对你有用！

node渲染html模板的两种方法相关推荐

动态修改dom node的两种方法性能比较
Created by Jerry Wang, last modified on Sep 25, 2014 测试代码: <html> <script src="C:\User ...
ppt模板怎样用到html中,如何添加套用 PPT 模板？教你两种方法
如果你想要提升幻灯片的质量,需要注意的细节有很多,除了进行图文排版,还可以套用PPT模板,这样就不用思考划分标题栏.内容区域,可以节省时间.现在问题来了,如何导入PPT模板?很简单,大家可以试试下面两 ...
C++/C++11中用于定义类型别名的两种方法：typedef和using
类型别名(type alias)是一个名字,它是某种类型的同义词.使用类型别名有很多好处,它让复杂的类型名字变得简单明了.易于理解和使用,还有助于程序员清楚地知道使用该类型的真实目的.在C++中,任何 ...
Hexo自定义页面的两种方法
原文地址:http://refined-x.com/2017/07/10/Hexo自定义页面的方法/. Hexo是静态页博客生成利器,同很多博主一样,前端路上原创技术博客也是使用Hexo生成并托管在G ...
普歌-腾讯云短信+使用node发送短信（3种方法API、SDK）、封装工具、搭建web服务、写接口、调用接口发送短信、时效性判断、验证验证码的正确性（下）
普歌-结合腾讯云短信服务+node搭建一个简单的发送短信web小项目涉及技术: 腾讯云服务后端服务:node+express 前端搭建:html+js 前言:本来这篇博客应该很早就发了,中间有一些 ...
牛客 Tree(最小深度总和)（两种方法求重心）难度⭐⭐⭐
题目链接牛妹有一张连通图,由n个点和n-1条边构成,也就是说这是一棵树,牛妹可以任意选择一个点为根,根的深度deprootdep_{root}deproot为0,对于任意一个非根的点,我们将他到 ...
Endnote在latex中的应用的两种方法
从endnote中向latex文档批量插入参考文献的两种方法一.若是latex模板中参考文献编写的命令是: \begin{thebibliography} \bibitem{lab1}LIU M L ...
jmeter提取多个变量的多个值_jmeter用一个正则提取器提取多个值的两种方法
jmeter中,用json提取器,一次提取多个值,这个很多人都会.但是,用正则提取器一次提取多个,是否可以呢? 肯定,很多人都自信满满的说,可以!形如:token":"(.*?)& ...
python文字教程-Python在图片中添加文字的两种方法
本文主要介绍的是利用Python在图片中添加文字的两种方法,下面分享处理供大家参考学习,下来要看看吧一.使用OpenCV 在图片中添加文字看上去很简单,但是如果是利用OpenCV来做却很麻烦.Ope ...

node渲染html模板的两种方法

方式一：使用ejs渲染引擎

后台JS文件

HTML模板文件

方式二：使用swig进行渲染HTML模板

后台JS文件

HTML模板文件

总结：

引擎设置

接收参数

以上就是nodejs对HTML模板进行渲染的两种方式，记录一下希望对你有用！

node渲染html模板的两种方法相关推荐

最新文章

热门文章