【 Node 】EJS模板引擎

2024-04-28 21:08
文章标签 模板 引擎 node ejs

本文主要是介绍【 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>

在这里插入图片描述

这篇关于【 Node 】EJS模板引擎的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/944270

相关文章

VSCode中配置node.js的实现示例

《VSCode中配置node.js的实现示例》本文主要介绍了VSCode中配置node.js的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一.node.js下载安装教程二.配置npm三.配置环境变量四.VSCode配置五.心得一.no

Python中Flask模板的使用与高级技巧详解

《Python中Flask模板的使用与高级技巧详解》在Web开发中,直接将HTML代码写在Python文件中会导致诸多问题,Flask内置了Jinja2模板引擎,完美解决了这些问题,下面我们就来看看F... 目录一、模板渲染基础1.1 为什么需要模板引擎1.2 第一个模板渲染示例1.3 模板渲染原理二、模板

利用Python打造一个Excel记账模板

《利用Python打造一个Excel记账模板》这篇文章主要为大家详细介绍了如何使用Python打造一个超实用的Excel记账模板,可以帮助大家高效管理财务,迈向财富自由之路,感兴趣的小伙伴快跟随小编一... 目录设置预算百分比超支标红预警记账模板功能介绍基础记账预算管理可视化分析摸鱼时间理财法碎片时间利用财

如何在 Spring Boot 中实现 FreeMarker 模板

《如何在SpringBoot中实现FreeMarker模板》FreeMarker是一种功能强大、轻量级的模板引擎,用于在Java应用中生成动态文本输出(如HTML、XML、邮件内容等),本文... 目录什么是 FreeMarker 模板?在 Spring Boot 中实现 FreeMarker 模板1. 环

IDEA自动生成注释模板的配置教程

《IDEA自动生成注释模板的配置教程》本文介绍了如何在IntelliJIDEA中配置类和方法的注释模板,包括自动生成项目名称、包名、日期和时间等内容,以及如何定制参数和返回值的注释格式,需要的朋友可以... 目录项目场景配置方法类注释模板定义类开头的注释步骤类注释效果方法注释模板定义方法开头的注释步骤方法注

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中,模板是实现泛型编程

nvm如何切换与管理node版本

《nvm如何切换与管理node版本》:本文主要介绍nvm如何切换与管理node版本问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录nvm切换与管理node版本nvm安装nvm常用命令总结nvm切换与管理node版本nvm适用于多项目同时开发,然后项目适配no

MySQL常见的存储引擎和区别说明

《MySQL常见的存储引擎和区别说明》MySQL支持多种存储引擎,如InnoDB、MyISAM、MEMORY、Archive、CSV和Blackhole,每种引擎有其特点和适用场景,选择存储引擎时需根... 目录mysql常见的存储引擎和区别说明1. InnoDB2. MyISAM3. MEMORY4. A