【 Node 】EJS模板引擎

简介

高效的嵌入式 JavaScript 模板引擎。

安装

npm install ejs

配置视图引擎

app.set('view engine', 'ejs')

基本使用

	// 引入express框架
const express = require('express')
// 实例化express对象
const app = express()

// 配置视图引擎 ('默认格式','模板引擎')
app.set('view engine', 'ejs')

    // res.send('传输纯文本信息')
    // res.sendFile('传输文件')
    
    // 渲染ejs模板引擎 res.render('<ejs文件名>',配置一些对象方便后面取值)
    // res.render('profile', { name: "EJS" })
    

// 根据请求地址返回对应的数据
app.get('/', (req, res) => {
    console.log(req.url);
    res.sendFile(__dirname + '/public/index.html')
})

app.get('/about', (req, res) => {
    res.sendFile(__dirname + '/public/about.html')
})

app.get('/contact', (req, res) => {
    res.sendFile(__dirname + '/public/contact.html')
})

// 路由参数 /xxx/:<自定义>
app.get('/profile/:id', (req, res) => {
    // res.send('您所访问的路由参数为:' + req.params.id)
        
    // 渲染ejs模板引擎
    res.render('profile', 
    {
        name: "EJS"
    })
})

// 监听端口
app.listen(5000)
console.log(__dirname); // D:\Study\Node

EJS使用

// 渲染ejs模板引擎
res.render('profile', {
	websiteName: req.params.id,
	data: data
})
// 数据和显示数据代码如下所示

• 单个数据对象

var data = {
	name:"EJS"
}


<ul>
	<li>
		姓名:<%= data.name %>
	</li>
</ul>

• 多个数据对象

var data = [
	{
		name: 'Bucky',
		age: 25
	},
	{
		name: 'Ketty',
		age: 26
	}, 
	{
		name: 'Henry',
		age: 27
	}
]

<ul>
	// 逻辑处理部分 不需要设置等号
	<% data.forEach(item=>{%>
		<li>
			姓名:<%= item.name%>
		</li>
		<li>
			年龄: <%= item.age%>
		</li>
	<% }) %>
</ul>

• 对象嵌套

var data = [
	{
		name: ['Bucky', 'Summer', 'God', 'Bongo'],
		age: 25
	},
	{
		name: ['Ketty', 'John', 'Today'],
		age: 26
	}, 
	{
		name: ['Henry', 'Sun'],
		age: 27
	}
]

<ul>
	<% data.forEach(item=>{%>
	// 第一次循环 获取的是全部的name数组里面的名字
		<li>
			姓名:<%= item.name%>
		</li>
			// 对name里面的数组进行循环 items就是获得的单个的数组元素name
			<% item.name.forEach(items=>{%>
				<li>
					姓名:<%=items%>
				</li>
			<% })%>
		<li>
			年龄:<%=item.age%>
		</li>
	<% })%>
</ul>