当前位置: 首页 > news >正文

【Express】服务端渲染(模板引擎 EJS)

在这里插入图片描述

EJS(Embedded JavaScript)是一款流行的模板引擎,可以用于在Express中创建动态的HTML页面。它允许在HTML模板中嵌入JavaScript代码,并且能够生成基于数据的动态内容。

下面是一个详细的讲解和示例,演示如何在Express中使用EJS模板引擎:

  1. 安装EJS:首先,在你的项目中安装EJS模板引擎。可以使用NPM来完成安装:
npm install ejs
  1. 配置EJS:在Express应用中,你需要设置EJS作为模板引擎。在app.js(或其他入口文件)中添加以下代码:
const express = require('express');
const app = express();
app.set('views', './views');  // views, 放模板文件的目录
app.set('view engine', 'ejs');
  1. 创建EJS视图文件:在项目目录下创建一个名为views的文件夹(如果没有的话),然后在该文件夹中创建一个EJS视图文件,比如index.ejs

  2. 使用EJS模板:在路由处理程序中,使用res.render()方法来渲染EJS视图文件,并传递数据给模板。以下是一个例子:

app.get('/', (req, res) => {const data = {name: 'John',age: 25,hobbies: ['reading', 'running', 'cooking']};res.render('index', { data });
});

在上面的示例中,当用户访问根URL时,将渲染名为index.ejs的视图文件,并提供名为data的数据对象。

  1. 在EJS模板中使用数据:在index.ejs视图文件中,可以通过以下方式使用传递的数据:
<h1>Welcome, <%= data.name %>!</h1>
<p>Age: <%= data.age %></p>
<p>Hobbies:</p>
<ul><% data.hobbies.forEach((hobby) => { %><li><%= hobby %></li><% }) %>
</ul>

在EJS模板中,用<%= %>插入JavaScript表达式来显示数据。使用<% %>标记包裹一段JavaScript代码,可以进行循环、条件判断和其他逻辑操作。

在这里插入图片描述

  1. 渲染完整的HTML页面:在index.ejs文件中,可以使用partials(局部视图)和其他EJS功能来构建完整的HTML页面。

EJS还支持其他功能,比如模板继承、自定义过滤器等。

http://www.lryc.cn/news/191916.html

相关文章:

  • Linux CentOS8安装gitlab_ce步骤
  • RabbitMq启用TLS
  • CakePHP 3.x/4.x反序列化RCE链
  • 练习之C++[3]
  • [MT8766][Android12] 修改WIFI热点默认名称、密码、IP地址以及默认开启热点
  • 【嵌入式】堆栈与单片机内存
  • 十大排序算法Java实现及时间复杂度
  • [Go]配置国内镜像源
  • Java知识点补充
  • Webpack和JShaman相比有什么不同?
  • WEB应用程序编程接口API
  • 进阶JAVA篇- BigDecimal 类的常用API(四)
  • UE4 顶点网格动画播放后渲染模糊问题
  • centos 磁盘挂载与解挂
  • C语言 位操作
  • Go语言中入门Hello World以及IDE介绍
  • Java面试题-Java核心基础-第二天(基本语法)
  • Linux 部署 GitLab idea 连接
  • Java延迟队列——DelayQueue
  • Vulnhub系列靶机---Raven2
  • 设计模式-生成器模式
  • Nginx正向代理配置(http)
  • ARMv5架构对齐访问异常问题
  • Go中varint压缩编码原理分析
  • 在IDEA中如何用可视化界面操作数据库? 在idea中如何操作数据库? 在idea中如何像Navicat一样操作数据库?
  • 数据库安全-RedisHadoopMysql未授权访问RCE
  • 辅助驾驶功能开发-功能规范篇(27)-3-导航式巡航辅助NCA华为
  • 探索UI设计|栅格系统的深入分析和应用
  • AI 律助 Alpha GPT 线上实操发布会,重磅发布!
  • 【漏洞复现】安全云平台存在任意文件下载getshell