【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 文件,也可以直接渲染 html 文件,但需要配置模板引擎:

// 配置模板引擎
app.set('views', './views')
app.set('view engine', 'html')
app.engine('html', require('ejs').renderFile)

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/106518.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mac安装Kali保姆级教程

Mac安装Kali保姆级教程 其他安装教程&#xff1a;使用VMware安装系统Window、Linux&#xff08;kali&#xff09;、Mac操作系统 1 虚拟机安装VM Fusion 去官网下载VM Fusion 地址&#xff1a;https://customerconnect.vmware.com/en/evalcenter?pfusion-player-personal-13 …

网工记背配置命令(3)----POE配置示例

POE 供电就是通过以太网供电&#xff0c;这种方式仅凭借那根连接通信终端的网线就可完成为它们供电。POE提供的是-53V~0v 的直流电&#xff0c;供电距离最长可达 100m。PoE 款型的交换机的软件大包天然支持 POE&#xff0c;无需 license&#xff0c;通过执行 poe-enable 命令使…

Android 10.0 禁止弹出系统simlock的锁卡弹窗功能实现

1.前言 在10.0的系统开发中,在一款产品中,需要实现simlock锁卡功能,在系统实现锁卡功能以后,在开机的过程中,或者是在插入sim卡 后,当系统检测到是禁用的sim卡后,就会弹出simlock锁卡弹窗,要求输入puk 解锁密码,功能需求禁用这个弹窗,所以就需要看是 哪里弹的,禁用…

记一次生产大对象及GC时长优化经验

最近在做一次系统整体优化,发现系统存在GC时长过长及JVM内存溢出的问题,记录一下优化的过程 面试的时候我们都被问过如何处理生产问题&#xff0c;尤其是线上oom或者GC调优的问题更是必问&#xff0c;所以到底应该如何发现解决这些问题呢&#xff0c;用真实的场景实操&#xff…

计算机毕业设计 基于协同过滤算法的白酒销售系统的设计与实现 Javaweb项目 Java实战项目 前后端分离 文档报告 代码讲解 安装调试

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…

Apache Log4j Server (CVE-2017-5645) 反序列化命令执行漏洞

文章目录 Apache Log4j Server 反序列化命令执行漏洞&#xff08;CVE-2017-5645&#xff09;1.1 漏洞描述1.2 漏洞复现1.2.1 环境启动1.2.2 漏洞验证1.2.3 漏洞利用 1.3 加固建议 Apache Log4j Server 反序列化命令执行漏洞&#xff08;CVE-2017-5645&#xff09; 1.1 漏洞描述…

【大数据】Hive SQL语言(学习笔记)

一、DDL数据定义语言 1、建库 1&#xff09;数据库结构 默认的数据库叫做default&#xff0c;存储于HDFS的&#xff1a;/user/hive/warehouse 用户自己创建的数据库存储位置&#xff1a;/user/hive/warehouse/database_name.db 2&#xff09;创建数据库 create (database|…

allegro中shape的一些基本操作(一)——添加和修改shape

添加shape 简单添加shape的方式有3种&#xff0c;如下图所示 点击选择相应的shape模式后可以在option面板中设置相应的shape参数&#xff08;这里不做过多介绍&#xff0c;里面可以设置shape的大小、静态或动态shape等参数&#xff09;&#xff0c;然后再用鼠标在相应的层上添…

计算机网络 | 网络层

计算机网络 | 网络层 计算机网络 | 网络层功能概述SDN&#xff08;Software-Defined Networking&#xff09;路由算法IPv4IPv4 分组IPv4 分组的格式IPv4 数据报分片 IPv4 地址与 NATIPv4 地址网络地址转换&#xff08;NAT&#xff09; 子网划分和子网掩码子网划分子网掩码 无分…

Hadoop3教程(十二):MapReduce中Shuffle机制的概述

文章目录 &#xff08;95&#xff09; Shuffle机制什么是shuffle&#xff1f;Map阶段Reduce阶段 参考文献 &#xff08;95&#xff09; Shuffle机制 面试的重点 什么是shuffle&#xff1f; Map方法之后&#xff0c;Reduce方法之前的这段数据处理过程&#xff0c;就叫做shuff…

【opencv】windows10下opencv4.8.0-cuda Python版本源码编译教程

【opencv】windows10下opencv4.8.0-cuda Python版本源码编译教程 提示:博主取舍了很多大佬的博文并亲测有效,分享笔记邀大家共同学习讨论 文章目录 【opencv】windows10下opencv4.8.0-cuda Python版本源码编译教程前言准备工具anaconda/cuda/cudnnanaconda创建环境(选做)安装原…

Opencv——颜色模型+通道分离与合并

视频加载/摄像头调用 VideoCapture允许一开始定义一个空的对象 VideoCapture video VideoCapture(const String &filename,int apiPreferenceCAP_ANY) filename:读取的视频文件或者图像序列名称 apiPreference:读取数据时设置的属性&#xff0c;例如编码格式、是否调用Op…

LabVIEW为什么不能在RT机箱内看到NI-IMAQ设备

LabVIEW为什么不能在RT机箱内看到NI-IMAQ设备 最近把NI-IMAQ更新到最新的1394版本。这个新驱动工作良好。但是&#xff0c;当打开MAX&#xff0c;NII MAQ设备却在RT PXI机箱里找不到。 问题最有可能是NIIMAQ服务器的版本跟主机PC和RT目标设备是不同的。为保证通信正常NII MAQ服…

FFmpeg截图命令优化

由于项目要求&#xff0c;需要对摄像机的rtsp流进行截图。一开始我使用了命令&#xff1a; ./ffmpeg -ss 0 -i XXX -f image2 -vframes 1 -s 370*210 -y output.jpg 上述命令抓取rtsp流第0秒&#xff08;当前&#xff09;的图像&#xff0c;将其保存为370*210分辨率的jpg图片…

08Maven中的继承和聚合的作用

Maven中的继承 实际开发中对一个比较大型的项目进行了模块拆分 , 一个project下面创建了很多个modul, 每一个module都需要配置自己的依赖信息 开发中使用的同一个框架内的不同jar包&#xff0c;它们应该是同一个版本&#xff0c;所以整个项目中使用的框架版本需要统一 传统方…

机器人硬件在环仿真:解决实体开发与测试挑战,提升效率与安全性

工业机器人具备出色的灵活性和运动能力&#xff0c;广泛应用于工业制造领域。它们可以完成装配、焊接、喷涂、搬运、加工、品质检测等任务&#xff0c;提高了生产效率&#xff0c;保证了产品质量。此外&#xff0c;在医疗领域也有辅助手术等特殊应用&#xff0c;展现了其在多个…

Flash-Attention

这是一篇硬核的优化Transformer的工作。众所周知&#xff0c;Transformer模型的计算量和储存复杂度是 O ( N 2 ) O(N^2) O(N2) 。尽管先前有了大量的优化工作&#xff0c;比如LongFormer、Sparse Transformer、Reformer等等&#xff0c;一定程度上减轻了Transformer的资源消耗…

k8s-10 cni 网络

k8s通过CNI接口接入其他网络插件来实现网络通讯。目前比较流行的插件有flannel,calico等。 CNI插件存放位置: # cat /etc/cni/net.d/10-flannel.conflist 插件使用的解决方案如下: 虚拟网桥&#xff0c;虚拟网卡&#xff0c;多个容器共用一个虚拟网卡进行通信。多路复用: Mac…

MAC上设置IDEA如何一个窗口打开多个项目,多个tab

1、IDEA一个窗口打开多个项目 如果你打开了多个项目、每次切换都要半天&#xff0c;想让项目都汇聚到top栏 点击 Window - Merge All Project Windows 即可 但是这样比较挫&#xff0c;每次打开新的项目都还是会重新打开一个IDEA窗口 so&#xff0c;如何设置项目在同一个窗口…

【Eclipse】安装教程

首先打开官网&#xff1a;Eclipse Downloads | The Eclipse Foundation 选择download package 如图所示&#xff0c;到如下界面 1.绿色版免安装版本 按图片点击&#xff0c;即可开始下载 2.安装版本 点击Eclipse Installer 依旧选择其他镜像&#xff0c;开头带China的 等待…