Node.js模板引擎学习----ejs
环境:windows+node.js+express
一、安装ejs
打开cmd窗口,输入npm install ejs -g,等待下载安装完成。
二、使用
调用过程中使用路由机制和模板,路由请求地址为根目录,模板文件为home.ejs【注:模板引擎文件为.ejs文件】
1、新建js文件为index.js
写入如下代码:
varexpress=require("express");
varapp=express();
//设置渲染引擎
app.set("viewengine",'ejs');
//设置模板目录为当前index.js目录同级views目录下的模板
app.set("views",__dirname+"/views");
//设置使用当前目录
app.use(express.static(__dirname));
app.get("/",function(req,res){
//渲染页面并传值
res.render('home.ejs',{name:"kid"});
});
//监听3000端口
app.listen(3000);
2、新建home.js,目录为/views/home.ejs,输入如下内容:
<!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title></title> </head> <body> <h2>Hello</h2> <!--<%%>:ejs的语法--> <p>Hi<%=name%></p> </body> </html>
3、在浏览器中输入localhost:3000回车
结果如下

4、在网页里面引入ejs,渲染
修改home.js
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
</head>
<body>
<h2>Hello</h2>
<!--<%%>:ejs的语法-->
<p>Hi<%=name%></p>
<divid="new-temp"></div>
</body>
<!--========================================-->
<scriptsrc="../ejs.min.js"></script>
<script>
vartmp="<p>Newtemplate</p>";
varnewTemplate=document.getElementById("new-temp");
newTemplate.innerHTML=ejs.render(tmp);
</script>
<!--========================================-->
</html>
总结:由此可以扩展到动态创建或者获取res.render()方法的locals参数,然后渲染相同的页面,第4步,就像引入jquery一样对网页进行操作。
Node.js模板引擎学习----ejs的更多相关文章
- [js高手之路]Node.js模板引擎教程-jade速学与实战1
环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...
- [js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法
环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...
- Node.js模板引擎的深入探讨
每次当我想用 node.js 来写一个 web 相关项目的时候.我总是会陷入无比的纠结.原因是 JavaScript 生态圈里的模板引擎实在太多了,但那么多却实在找不出一个接近完美的,所谓完美的概念就 ...
- [js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义
一.转义与非转义 jade模板文件代码: doctype html html head meta(charset='utf-8') title jade学习-by ghostwu body h3 转义 ...
- consolidate.js 一个Node.js 模板引擎的集合
consolidate是一个模板引擎的结合体.包括了常用的jade和ejs.通过配置我们就可以使用多种模板引擎. consolidate.js安装 npm install consolidate co ...
- [js高手之路]Node.js模板引擎教程-jade速学与实战4-模板引用,继承,插件使用
一.block 模块复用 把需要复用的模块用block定义 block后面跟上模块的名字,引用一次block 内容就会被复用一次 编译之后的结果: 二,继承模板(extends) 在实际开发中,网站的 ...
- [js高手之路]Node.js模板引擎教程-jade速学与实战3-mixin
强大的mixin mixin类似于函数的功能,可以达到模块复用的效果 mixin show: 定义一个类似函数的功能,名字叫show,里面的就是他的内容 +show: 调用show,每调用一次执行一次 ...
- JS模板引擎handlebars.js的简单使用
handlebars.js的使用 首先我们要明白handlebars.js是干什么用的,我们知道使用jsp很麻烦, 于是我们开始使用freemarker等模板引擎,但这个只是针对服务器端来解 析的,那 ...
- node.js 模板 ejs 转
node.js 模板引ejs. 搜了一把推荐用ejs的最多. 速度比对:http://www.cnblogs.com/fengmk2/archive/2011/04/28/2031971.html e ...
随机推荐
- Thrift写RPC接口
Thrift总结(二)创建RPC服务 前面介绍了thrift 基础的东西,怎么写thrift 语法规范编写脚本,如何生成相关的语言的接口.不清楚的可以看这个<Thrift总结(一)介绍>. ...
- 支付宝开发之手机网站支付(H5支付)
其实官方的文档中:https://docs.open.alipay.com/203 介绍的已经很详细了,我就实地的看文档操作了一遍,具体步骤如下: 一.创建应用 流程如下: 首先要有支付宝开放平台: ...
- C#写COM组件,JS调用控件
1.c#2005中新建项目,类型为类库,项目名为AddCom确定. 配置:右键点击解决方案资源管理器中的AddCom,选择“属性”,选择“生成”,选择“为COM Interop注册(_P)” 2.打开 ...
- hive 分区表与数据产生关联的三种方式
所谓关联,可以理解为能够使用select查询到 1.load 这是最常用的一种方式 load data [local] inpath "数据路径" into table table ...
- Sublime Text3的react代码校验插件
之前写前端一直用的是jshint做语法检查,但jshint不支持JSX语法,为了在React使用,需要用eslint代替它.六月份的时候为了写React Native,编辑器换过Webstorm和VS ...
- 全分布式的Hadoop初体验
背景 之前的时间里对 Hadoop 的使用都是基于学长所搭建起的实验环境的,没有完整的自己部署和维护过,最近抽时间初体验了在集群环境下装机.配置.运行的全过程,梳理总结到本文中. 配置 内存:8G C ...
- visual studio 编译器在辨异 C/C++ 程序时的注意事项
1. 数组大小的限制 visual studio 对数组的维数(元素的个数)没有限制,但要求数组的 size (sizeof() 后的结果,所占内存的大小)不得超过 0x7fff ffff = 2^3 ...
- 关于iis里面 .net framework 版本的切换
然而,即便这样还是不够的 在iis上浏览网站会报以下错误: 这是什么原因呢?这是因为应用程序池中没有使用asp.net v4.0 网站程序是用v4.0写的,所以我们要用4.0的程序池版本,当前应用程序 ...
- python实现简易采集爬虫
#!/usr/bin/python #-*-coding:utf-8-*- # 简易采集爬虫 # 1.采集Yahoo!Answers,parseData函数修改一下,可以采集任何网站 # 2.需要sq ...
- react学习(6)——关于组件生命周期的问题
在项目开发的过程中,遇到了一个问题: 父组件请求后台数据,收到后将数据以props传给子组件,子组件根据收到数据的不同,显示不同的内容,同时,子组件自身可以根据click操作改变根据父组件的数据显示的 ...