Express 中 ejs 的安装:
npm install ejs --save 或者:
npm install ejs --save-dev
Express 中 ejs 的使用:
var express = require("express");
var app = express();
app.set("view engine","ejs");
app.get("/",function(req,res){ });
res.render("news",{
"news" : ["新闻","我","哈哈"]
});
app.listen(3000);
指定模板位置 ,默认模板位置在 views
app.set('views', __dirname + '/views');
Ejs 引入模板
<%- include header.ejs %>
Ejs 绑定数据
<%=h%>
Ejs 绑定 html 数据
<%-h%>
Ejs 模板判断语句
<% if(true){ %> <div>true</div>
<%} else{ %> <div>false< /di v>
<%} %>
Ejs 模板中循环数据
<%for(var i=0;i<list.length;i++) { %>
<li><%=list[i] %></li> <%}%>
Ejs 后缀修改为 Html
这是一个小技巧,看着.ejs 的后缀总觉得不爽,使用如下方法,可以将模板文件的后缀换成我们习惯的.html。 1.在 app.js 的头上定义 ejs:,代码如下:
varejs = require('ejs');
2.注册 html 模板引擎代码如下: app.engine('html',ejs.__express);
3.将模板引擎换成 html代码如下:
app.set('view engine', 'html');
4.修改模板文件的后缀为 .html。
利用 Express.static 托管静态文件
1.如果你的静态资源存放在多个目录下,你可以多次调用express.static中间件
app.use(express.static('public'));
现在,public 目录下面的文件就可以访问了。
http://localhost:3000/hello.html
2、如果你希望所有通过 express.static 访问的文件都存放在一个“虚拟(virtual)”目 录(即目录根本不存在)下面,可以通过为静态资源目录指定一个挂载路径的方式来实现,
如下所示:
app.use('/static', express.static('public'));
现在,你就爱可以通过带有 “/static” 前缀的地址来访问 public 目录下 面的文件了。
http://localhost:3000/static/hello.html
demo:
/*
1.安装ejs cnpm install ejs
2.配置express的模板引擎
app.set("view engine","ejs");
express 里面使用ejs 安装以后就可以用,不需要引入。
3.在express中使用ejs
1.渲染的模板引擎
2.数据
res.render("news",{
"news" : ["新闻","我","哈哈"]
});
* */
var express=require('express');
var app=express();
/*配置ejs模板引擎*/
app.set('view engine','ejs');
//views默认会在这个文件里面找模板
//设置模板的位置
app.set('views', __dirname + '/views');
//中间件app.use
//express.static('public')给 public目录下面的文件提供静态web服务
// http://localhost:3001/images/baidu.png
app.use(express.static('public'));
//配置虚拟目录 的静态web服务
//http://localhost:3001/static/images/baidu.png
// images/baidu.png去public目录找这个文件,如果有就返回
app.use('/static',express.static('public'));
app.get('/',function(req,res){
//res.send('ejs的示例');
res.render('index'); /*ejs渲染模板*/
})
app.get('/news',function(req,res){
//res.send('ejs的示例');
var arr=['1111','222','3333'];
res.render('news',{ /*数据*/
list:arr
});
/*ejs渲染模板*/
})
/*端口大于3000 */
app.listen('3001','127.0.0.1');
login.ejs示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> </head> <body> <h2>这是一个ejs的后台模板引擎-登录</h2> <h2><%=msg%></h2> <br/> <hr/> <ul> <% for(var i=0;i<list.length;i++){%> <li><%=list[i]%></li> <% } %> </ul> </body> </html>