使用 EJS 模板引擎的示例

使用 EJS 模板引擎的示例

EJS(Embedded JavaScript)是一种简单的模板引擎,允许你在 HTML 中嵌入 JavaScript 代码。以下是一个使用 EJS 模板引擎的完整示例,包括设置 Express.js 项目、配置 EJS 视图引擎和创建 EJS 模板文件。

第一步:设置 Express.js 项目
  1. 创建项目目录

    mkdir ejs-example
    cd ejs-example
    npm init -y
    
  2. 安装 Express 和 EJS

    npm install express ejs
    
第二步:创建 Express.js 服务器

在项目根目录下创建一个 server.js 文件,并设置基本的 Express.js 服务器配置:

const express = require('express');
const app = express();
const port = 3000;// 设置 EJS 作为模板引擎
app.set('view engine', 'ejs');// 静态文件中间件
app.use(express.static('public'));// 路由
app.get('/', (req, res) => {const data = { name: "John Doe", age: 26 };res.render('index', data);
});app.listen(port, () => {console.log(`Server is running on http://localhost:${port}`);
});
第三步:创建 EJS 模板文件

在项目根目录下创建一个 views 文件夹,并在其中创建一个 index.ejs 文件:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>EJS Example</title><link rel="stylesheet" href="/styles.css">
</head>
<body><h1>Welcome to EJS Example</h1><p>Name: <%= name %></p><p>Age: <%= age %></p>
</body>
</html>
第四步:创建静态文件

在项目根目录下创建一个 public 文件夹,并在其中创建一个 styles.css 文件:

/* styles.css */
body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;
}h1 {color: #333;
}p {color: #666;
}
第五步:运行项目

在终端中运行以下命令启动 Express.js 服务器:

node server.js

打开浏览器,访问 http://localhost:3000,你将看到一个包含从服务器传递的数据的网页。

总结

通过以上步骤,你可以创建一个使用 EJS 作为模板引擎的简单 Express.js 应用程序。EJS 允许你在 HTML 中嵌入 JavaScript 代码,使得动态生成 HTML 页面变得非常容易。这种方法非常适合创建动态内容的网站和应用程序。

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

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

相关文章

Java | Leetcode Java题解之第264题丑数II

题目&#xff1a; 题解&#xff1a; class Solution {public int nthUglyNumber(int n) {int[] dp new int[n 1];dp[1] 1;int p2 1, p3 1, p5 1;for (int i 2; i < n; i) {int num2 dp[p2] * 2, num3 dp[p3] * 3, num5 dp[p5] * 5;dp[i] Math.min(Math.min(num2…

2024年网络安全焦点:新兴威胁与防御技术创新

概述 2024年&#xff0c;随着网络技术的发展&#xff0c;网络安全面临的威胁也在不断演变。本文将深入探讨2024年网络安全领域的最新威胁与防御技术创新&#xff0c;并分析它们对企业及个人安全的影响。 新兴威胁分析 云集中风险 随着越来越多的企业将数据和服务迁移至云端…

鸿蒙笔记--存储

这一节了解一下鸿蒙中常用存储API&#xff0c;主要有LocalStorage &#xff0c;AppStorage&#xff0c;PersistentStorage&#xff0c;LocalStorage 是一种页面级UI状态存储机制&#xff0c;主要用于在UIAbility内和页面间共享状态数据。通过使用特定的装饰器&#xff0c;Local…

昇思25天学习打卡营第20天|CV-ResNet50图像分类

打卡 目录 打卡 图像分类 ResNet网络介绍 数据集准备与加载 可视化部分数据集 残差网络构建 Building Block 结构 代码实现 Bottleneck结构 代码实现 构建ResNet50网络 代码定义 模型训练与评估 可视化模型预测 重点&#xff1a;通过网络层数加深&#xff0c;感知…

数据输入输出的概念

文章目录 数据输入输出的概念及在C语言中的实现简单的格式输入与输出用简单的printf函数输出数据用简单的scanf函数输入数据较复杂的输入输出格式控制输出数据格式控制 数据输入输出的概念及在C语言中的实现 数据的输入与输出是相对于计算机而言的。其中&#xff1a; 从计算机…

Linux的shell的date命令

用于生成备份文件的例子 fp"/etc/samba/smb.conf" ; cp -a ${fp} ${fp}.$(date %0y%0m%0d%0H%0M%0S).bak带纳秒ns fp/etc/samba/smb.conf ; cp -a $fp $fp.$(date %0y%0m%0d%0H%0M%0Sns%0N).bakfp/etc/samba/smb.conf ; cp -a $fp $fp.$(date %0y%0m%0d%0…

昇思25天学习打卡营第33天|共赴算力时代

文章目录 一、平台简介二、深度学习模型2.1 处理数据集2.2 模型训练2.3 加载模型 三、共赴算力时代 一、平台简介 昇思大模型平台&#xff0c;就像是AI学习者和开发者的超级基地&#xff0c;这里不仅提供丰富的项目、模型和大模型体验&#xff0c;还有一大堆经典数据集任你挑。…

BM58 字符串的排列

1.题目描述 输入一个长度为 n 字符串&#xff0c;打印出该字符串中字符的所有排列&#xff0c;你可以以任意顺序返回这个字符串数组。 例如输入字符串ABC,则输出由字符A,B,C所能排列出来的所有字符串ABC,ACB,BAC,BCA,CBA和CAB。 数据范围&#xff1a;n<10n<10 要求&#…

本地搭建rtmp拉流

本地搭建rtmp拉流 可按照步骤来 关注公众号&#xff1a;城羽海 更多有趣实用教程 下载地址: 从微信公众号发送关键词 rtmp可获取下载地址 文章目录 本地搭建rtmp拉流 可按照步骤来 关注公众号&#xff1a;城羽海 更多有趣实用教程 拿到之后如图所下&#xff1f;二、配置obs文…

Spark_Oracle_I_通过jdbc读取oracle程序报错invalid character

问题背景&#xff1a; 我原先是通过我么api直接读取的oracle,现在由于要并行读取这个oracle数据库表数据&#xff0c;因此采用jdbc的方式&#xff0c;一开始我把sql变成query直接查&#xff0c;所以报上面的问题。部分样例代码如下 val date "2024/07/01" val quer…

华为网络模拟器eNSP安装部署教程

eNSP是图形化网络仿真平台&#xff0c;该平台通过对真实网络设备的仿真模拟&#xff0c;帮助广大ICT从业者和客户快速熟悉华为数通系列产品&#xff0c;了解并掌握相关产品的操作和配置、提升对企业ICT网络的规划、建设、运维能力&#xff0c;从而帮助企业构建更高效&#xff0…

一个函数统一238个机器学习R包,这也太赞了吧

Caret 是一个试图标准化机器学习过程的一个包。Caret 对 R 中最常用的机器学习方法 (目前支持238个R包)提供了统一的接口。 进行数据预处理 实现机器学习方法流程化模型构建 通过参数组合和交叉验证评估模型的参数 选择最优模型 评估模型性能 一键满足各种掉包&#xff0c…

Linux开启coredump

在Linux系统中&#xff0c;C/C程序崩溃是常见的问题之一。Coredump是指当一个程序崩溃时&#xff0c;系统把程序运行时的内存数据以二进制文件的形式保存下来&#xff0c;以便程序开发者进行崩溃分析。本文将介绍如何开启并配置Coredump 1、查看并配置coredump 在Linux系统中…

JavaScript实战 - 一个能够做圆周运动的模型

一个能够做圆周运动的模型 HTML 文件JavaScript 文件总结 作者&#xff1a;逍遥Sean 简介&#xff1a;一个主修Java的Web网站\游戏服务器后端开发者 主页&#xff1a;https://blog.csdn.net/Ureliable 觉得博主文章不错的话&#xff0c;可以三连支持一下~ 如有需要我的支持&…

分组背包--完全背包

分组背包:多个物品分组&#xff0c;每组只能取1件 每一组的物品都可能性展开就可以&#xff0c;时间复杂度为O(物品的数量*背包的容量) 分组背包 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.OutputStre…

基于微信小程序+SpringBoot+Vue的垃圾分类系统(带1w+文档)

基于微信小程序SpringBootVue的垃圾分类系统(带1w文档) 基于微信小程序SpringBootVue的垃圾分类系统(带1w文档) 本垃圾分类小程序也是紧跟科学技术的发展&#xff0c;运用当今一流的软件技术实现软件系统的开发&#xff0c;让环保方面的信息完全通过管理系统实现科学化&#xf…

【Jackson】注解及其使用

Jackson库提供了多种注解&#xff08;annotations&#xff09;&#xff0c;可以用来控制JSON序列化和反序列化的行为。这些注解允许你灵活地映射Java对象与JSON数据之间的关系。下面将详细介绍一些常用的Jackson注解及其用法。 1. JsonProperty 作用: 用于指定JSON属性与Java…

不是演练 “毒云藤”再出击,知网用户成钓鱼攻击目标

亚信安全威胁情报中心近期在梳理安全事件时&#xff0c;发现一起钓鱼攻击活动。该起事件仿冒网易云邮箱进行钓鱼攻击&#xff0c;成功窃取到用户信息后将用户信息post到本地的”login.php”目录下保存&#xff0c;并跳转到正常网站。经分析&#xff0c;判断该行为符合绿斑APT组…

React: 条码渲染 渲染列表

一、条件渲染 1、定义&#xff1a;根据不同的情况显示不同的内容&#xff08;就像vue中的v-if)。 2、在 React 中&#xff0c;可以使用 JavaScript 的 if 语句、&& 和 ? : 运算符来选择性地渲染 JSX。 2.1 使用条件判断&#xff08;if&#xff09; export default f…

FastAPI(八十二)实战开发《在线课程学习系统》接口开发-- 课程上架下架

源码见&#xff1a;"fastapi_study_road-learning_system_online_courses: fastapi框架实战之--在线课程学习系统" 课程上架/下架 1、是否登录 2、角色权限 3、课程是否存在 4、是否是自己的课程 4、课程如果是上架状态&#xff0c;则下架&#xff0c;反之&#xff…