Express 中 ejs 的安装：
npm install ejs --save
配置 Express 使用 ejs 模板
-
app.set('views', config.viewPath);-
配置模板文件存放的路径
-
-
app.set('view engine', 'ejs');-
配置调用 res.render 的时候使用的模板引擎
-
找到
view目录下的.ejs后缀的文件
-
app.set('views', '视图模板文件存放路径')
app.set('view engine', '安装的模板引擎的名称，例如：ejs')如果使用上面的配置，则视图的后缀名必须为 .ejs，如果不想修改视图的后缀名，可以使用下面的配置形式
app.engine('.html', require('ejs').__express)
app.set('view engine', 'html')
app.set('views', __dirname + '/views');//指定模板位置修改后缀为.html的下面还有另外一种方式
使用：
只要执行了上面两句代码：就可以直接在后面的请求处理函数中使用 res.render(视图名称，要注入的数据对象)，然后express会自动帮你去读取文件然后注入数据，解析替换，最后得到一个完整的 html 页面，然后发送给客户端。
Express 中 ejs 的使用:
var express = require("express");
var app = express();
app.set('views', __dirname + '/views');//指定模板位置
app.set("view engine","ejs");
app.get("/",function(req,res){
res.render("news",{
"news" : ["我是小新闻啊","我也是啊","哈哈哈哈"]
});
});
app.listen(3000);
指定模板位置 ，默认模板位置在 views:
app.set('views', __dirname + '/views');//指定模板位置
app.set("view engine","ejs");//必须ejs配置
上面两行是设置views文件夹，即模板文件夹，__dirname是node.js里面的全局变量，即取得执行的js所在的路径，另外__dirname是目前执行的js文件名。所以，app.set(‘views’, __dirname + ‘/views’);是设置views的文件夹。
而app.set(‘view engine’, ‘ejs’);是设置express.js所使用的render engine。除了ejs之外express.js还支持JadeEJS、Haml、CoffeScript和jQuerytemplate等js模板 .
https://www.cnblogs.com/ouzilin/p/7906089.html
Ejs 引入模板：
<%- include header.ejs %> // 一个.ejs文件中引入另外一个.ejs文件
Ejs 绑定数据
<%=h%>
Ejs 绑定 html 数据
<%-h%>
Ejs 模板判断语句
<% if(true){ %>
<div>true</div>
<%} else{ %>
<div>false</div>
<%} %>
Ejs 模板中循环数据
<%for(var i=0;i<list.length;i++) { %>
<li><%=list[i] %></li>
<%}%>
Ejs 后缀修改为 Html
这是一个小技巧，看着.ejs 的后缀总觉得不爽，使用如下方法，可以将模板文件的后缀换成我们习惯的.html。
1.在 app.js 的头上定义 ejs:,代码如下:
var ejs = require('ejs');
2.注册 html 模板引擎代码如下：
app.engine('html',ejs.__express);
3.将模板引擎换成 html 代码如下:
app.set('view engine', 'html');
4.修改模板文件的后缀为.html。
案例：
目录结构
01ejs.js
let express = require('express');
let app = new express();
//配置ejs的模板引擎(固定)
app.set('view engine','ejs')
//设置模板的位置;app.set('view engine','ejs')不能删除
app.set('views',__dirname+'/views')
app.get('/',(req,res) => {
// res.send("ejs的演示");//send()和render()同时有会报错
//默认模板位置在 views;所以这里直接写index
res.render('index',{/**传递数据 */
news:["我是小新闻啊","我也是啊","哈哈哈哈"]
})
})
app.get('/news',(req,res) => {
res.render('news',{//
news:["我是小新闻啊","我也是啊","哈哈哈哈"]
})
})
app.listen(8008,'127.0.0.1')indes.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>你好！ejs</h2>
<h3><%=news%></h3>
</body>
</html>news.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>news你好！ejs</h2>
<!-- 在.ejs文件中引入其他的外部.ejs文件 -->
<%- include public/header.ejs%>
<ul>
<%for(let i=0;i<news.length;i++) {%>
<li><%=news[i]%></li>
<%}%>
</ul>
</body>
</html>在公共的模板引擎中只是写html标签+class类名
补充：
Express框架之res.render()和res.send()区别：
大多数情况下，渲染内容用res.render()，将会根据views中的模板文件进行渲染。如果不想使用views文件夹，想自己设置文件夹名字，那么app.set("views","mb");
var express=require('express');
var app=express();
//设计模板引擎 ejs
app.set("views","mb");//设置需要渲染的目录下模板文件
app.set("view engine","ejs");
app.get("/",function(req,res){
res.render("biaodan",{
news:['1','2']
});
});
app.listen(3000)如果想写一个快速测试页，当然可以使用res.send()。这个函数将根据内容，自动帮我们设置了Content-Type头部和200状态码。send()只能用一次，和end一样。和end不一样在哪里？能够自动设置MIME类型。
如果想使用不同的状态码，可以使用(加状态码打点):
res.status(404).send('Sorry, we cannot find that!');如果想使用不同的Content-Type，可以：
res.set('Content-Type', 'text/html');实质上res.render用来渲染模板文件,而这个res.send()和res.end(原生)用法基本一致,不过省去了请求头的字符集已经状态码等问题,大大节约我们用来测试!当然也可以自己采用原生的res.end()等,express框架没有自行产生抽象的概念,保留了全部的node原生用法!
app.render()、res.render()的区别:
https://www.jianshu.com/p/72925069832b
扫一扫
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
