【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,一经查实,立即删除!

相关文章

使用jsqlparser创建MySQL建表语句

语法 create table [IF NOT EXISTS] 表名 ( 字段名 类型 [约束条件], 字段名 类型 [约束条件], 字段名 类型 [约束条件], 字段名 类型 [约束条件] ); 字段定义在括号内约束条件可以有多个多个字段定义之间用都会隔开 常见约束 NOT NULL 非空DEFAULT 0 默认值AUTO_INCREMENT…

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 解锁密码,功能需求禁用这个弹窗,所以就需要看是 哪里弹的,禁用…

71.同步使用你的可组合代码

你应该始终在setup()钩子或<script setup>中同步调用你的composables。调用composables时&#xff0c;最好不要使用await或Promise.all()。例如&#xff0c;以下使用setup()钩子的代码是不推荐的&#xff1a; <script> import { ref, watch, onMounted, onUnmounte…

机器学习-迁移学习

分类 按照特征分类 当源域和目标域含有一些共同的交叉特征时&#xff0c;我们可以通过特征变换&#xff0c;将源域和目标域的特征变换到相同空间&#xff0c;使得该空间中源域数据与目标域数据具有相同分布的数据分布&#xff0c;然后进行传统的机器学习。基于模型的迁移&#…

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

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

前端工程化知识系列(1)

目录 1. 什么是前端工程化&#xff0c;以及它为前端开发带来了哪些好处&#xff1f;2. 你使用过哪些版本控制系统&#xff1f;描述一下你在团队中如何处理代码合并和冲突解决的经验。3. 什么是Git&#xff0c;它的工作原理是什么&#xff1f;可以解释一下常用的Git命令吗&#…

计算机毕业设计 基于协同过滤算法的白酒销售系统的设计与实现 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…

java double 保留两位小数

在Java中&#xff0c;你可以使用 DecimalFormat 或 String.format 来保留 double 类型的数字两位小数。以下是两个例子&#xff1a; 使用 DecimalFormat import java.text.DecimalFormat;public class Main {public static void main(String[] args) {double number 123.456…

【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…

阿里SQL规约

阿里SQL规约 集团重点强制SQL规约如下&#xff1a; 1、【强制】不要使用count(列名)或count(常量)来替代count()&#xff0c;count()就是SQL92定义的标准统计行数的语法&#xff0c;跟数据库无关&#xff0c;跟NULL和非NULL无关。 2、【强制】count(distinct col) 计算该列除…

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图片…