nodejs模板引擎(一)

news2024/12/24 11:43:55

在 Node.js 中使用模板引擎可以让您更轻松地生成动态 HTML 页面,通过将静态模板与动态数据结合,您可以创建可维护且易于扩展的 Web 应用程序。以下是一个使用 Express 框架和 EJS 模板引擎的基本示例:

  1. 安装必要的依赖
    首先,确保您已安装 Node.js 和 npm。然后,在您的项目目录中运行以下命令来安装 Express 和 EJS:

    npm install express ejs
    
  2. 创建 Express 应用
    接下来,创建一个基本的 Express 应用,并设置 EJS 作为模板引擎:

    const express = require('express');
    const app = express();
    const path = require('path');
    
    // 设置 EJS 引擎和视图路径
    app.set('view engine', 'ejs');
    app.set('views', path.join(__dirname, 'views'));
    
    // 设置静态资源目录
    app.use(express.static(path.join(__dirname, 'public')));
    
    // 路由
    app.get('/', (req, res) => {
        const data = { title: 'My Title', message: 'Hello from EJS!' };
        res.render('index', data);
    });
    
    // 启动服务器
    const port = process.env.PORT || 3000;
    app.listen(port, () => {
        console.log(`Server running on port ${port}`);
    });
    
  3. 创建模板文件
    views 文件夹中创建一个名为 index.ejs 的文件。EJS 使用 <% %> 作为脚本标签来嵌入 JavaScript 代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title><%= title %></title>
    </head>
    <body>
        <h1>Welcome to my site</h1>
        <p><%= message %></p>
    </body>
    </html>
    
  4. 运行应用
    运行您的应用,然后访问 http://localhost:3000/,您应该看到动态生成的页面。
    在这里插入图片描述

这只是使用 EJS 的一个简单示例。不同的模板引擎可能有不同的语法和特性,但它们大多数都遵循类似的工作流程。您可以根据具体需求选择合适的模板引擎,如 Pug(旧称 Jade)、Handlebars、Mustache、Dust.js 等。

如果您需要更复杂的逻辑或者特定的功能,您应该查阅所选模板引擎的官方文档来了解如何使用它们的高级功能。

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

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

相关文章

(四)stm32之通信协议

一.串口通信 1、全双工、半双工、单工 单工:只能一个人传输,只能向一个方向传输 半双工:只能一个人传输,可以多个方向传输 全双工:多方传输,多个方向传输 2、同步通信、一步通信 异步通信:双方时钟可以不同步,发送的信息封装(加上起始位、停止位)实现同步,效率低,…

生成式AI推动药物发现革命:加速开发,降低成本

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

Ubuntu 22.04.4 LTS (linux) Auditd 安全审计rm命令 记录操作

1 audit增加rm 规则 #sudo vim /etc/audit/rules.d/audit.rules -w /bin/rm -p x -k delfile #重新启动服务 sudo systemctl restart auditd #查看规则 sudo auditctl -l -w /bin/rm -p x -k delfile 2 测试规则 touch test.txt rm test.tx 3 查看日志 sudo ausear…

LDAPWordlistHarvester:基于LDAP数据的字典生成工具

关于LDAPWordlistHarvester LDAPWordlistHarvester是一款功能强大的字典列表生成工具&#xff0c;该工具可以根据LDAP中的详细信息生成字典列表文件&#xff0c;广大研究人员随后可以利用生成的字典文件测试目标域账号的非随机密码安全性。 工具特征 1、支持根据LDAP中的详细信…

liunx笔记1

线程池的基本概念是&#xff0c;在应用程序启动时创建一定数量的线程&#xff0c;并将它们保存在线程池中。当需要执行任务时&#xff0c;从线程池中获取一个空闲的线程&#xff0c;将任务分配给该线程执行。当任务执行完毕后&#xff0c;线程将返回到线程池&#xff0c;可以被…

【RNN练习】天气预测

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、环境及数据准备 1. 我的环境 语言环境&#xff1a;Python3.11.9编译器&#xff1a;Jupyter notebook深度学习框架&#xff1a;TensorFlow 2.15.0 2. 导…

手机和电脑通过TCP传输

一.工具 手机端&#xff1a;网络调试精灵 电脑端&#xff1a;野火网络调试助手 在开始通信之前&#xff0c;千万要查看一下电脑的防火墙是否关闭&#xff0c;否则可能会无法通信 在开始通信之前&#xff0c;千万要查看一下电脑的防火墙是否关闭&#xff0c;否则可能会无法通信…

浅析Kafka Streams消息流式处理流程及原理

以下结合案例&#xff1a;统计消息中单词出现次数&#xff0c;来测试并说明kafka消息流式处理的执行流程 Maven依赖 <dependencies><dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-streams</artifactId><exclusio…

全国大学生数据建模比赛c题——基于蔬菜类商品的自动定价与补货决策的研究分析

基于蔬菜类商品的自动定价与补货决策的研究分析 摘要 商超蔬菜不易保存&#xff0c;其质量会随着销售时间的增加而变差&#xff0c;影响商超收益&#xff0c;因此&#xff0c;基于各蔬菜品类的历史销售数据&#xff0c;制定合理的销售策略和补货决策对商超的营收十分关键。本文…

HTTP-响应协议(响应状态码、HTTP-协议解析)

HTTP-响应协议 2.3.1 格式介绍 与HTTP的请求一样&#xff0c;HTTP响应的数据也分为3部分&#xff1a;响应行、响应头 、响应体 响应行(以上图中红色部分)&#xff1a;响应数据的第一行。响应行由协议及版本、响应状态码、状态码描述组成 协议/版本&#xff1a;HTTP/1.1响应状态…

fullcalendar基础使用

fullcalendar日历插件&#xff0c;下面是实现的一个基础模版实现任务的添加修改操作。 <div><div id"calendar" ref"calendarRef"></div><el-dialogv-model"dialogTableVisible"title"添加任务"width"500&…

ASP.NET Core中创建中间件的几种方式

前言 今天我们一起来盘点一下在ASP.NET Core应用程序中添加和创建中间件常见的四种方式。 中间件介绍 ASP.NET Core中间件&#xff08;Middleware&#xff09;是用于处理HTTP请求和响应的组件&#xff0c;它们被安排在请求处理管道中&#xff0c;并按顺序执行。中间件的设计是为…

什么是IOT 可编程控制系统

IOT可编程控制系统GF-MAXCC是一种基于物联网&#xff08;Internet of Things, IoT&#xff09;技术的可编程中央控制主机。它集成了多种先进的技术和功能&#xff0c;能够在物联网系统中发挥关键作用&#xff0c;实现对多种设备的集中管理和控制。 一、定义与概述 定义&#x…

PHP全功能微信投票迷你平台系统小程序源码

&#x1f525;让决策变得超简单&#xff01;&#x1f389; &#x1f680;【一键创建&#xff0c;秒速启动】 嘿小伙伴们&#xff0c;你还在为组织投票而手忙脚乱吗&#xff1f;来试试这款全功能投票迷你微信小程序吧&#xff01;只需轻轻一点&#xff0c;无论是班级选举、社团…

家政服务小程序:提高家政服务,新商机!

当下&#xff0c;社会生活的节奏非常快&#xff0c;人们忙于工作&#xff0c;在日常生活家务清洁中面临着时间、精力不足的问题&#xff0c;因此对家政服务的需求日益增加&#xff0c;这也推动了家政行业的迅速发展。目前不少年轻人都开始涌入到了家政行业中&#xff0c;市场的…

debian 12 PXE Server 批量部署系统

pxe server 前言 PXE&#xff08;Preboot eXecution Environment&#xff0c;预启动执行环境&#xff09;是一种网络启动协议&#xff0c;允许计算机通过网络启动而不是使用本地硬盘。PXE服务器是实现这一功能的服务器&#xff0c;它提供了启动镜像和引导加载程序&#xff0c;…

报表控件DevExpress Reporting中文教程 - 如何创建穿透钻取报表?

DevExpress Reporting是.NET Framework下功能完善的报表平台&#xff0c;它附带了易于使用的Visual Studio报表设计器和丰富的报表控件集&#xff0c;包括数据透视表、图表&#xff0c;因此您可以构建无与伦比、信息清晰的报表。 钻取报表允许用户通过单击主/活动报表文档中的…

TG创建小程序以及机器人信息

1、搜索 BotFather &#xff0c;输入命令 /newbot 创建机器人。 2、修改机器人信息 /mybots 编辑名称 : 修改机器人名称 编辑关于: 修改关于 hayden yyds&#xff0c;修改以后打开机器人会出现在下图 编辑描述 : 机器人的描述 编辑描述图片 : 机器人的图片 编辑 Botpic…

【uniApp】ucharts 实现图表下载

由于移动端和PC端功能场景的差异&#xff0c;很多移动端绘制可视化图表是没有下载需求的&#xff0c;导致其在网上提供的解决方法很少&#xff0c;通过对代码的解析发现ucharts内部封装的有saveImage方法&#xff0c;直接调用可以直接保存至手机的相册中&#xff0c;具体方法如…

【网络安全】SSRF:Microsoft Azure API 管理服务

未经许可&#xff0c;不得转载。 文章目录 正文漏洞利用 正文 Azure API管理包括三个主要组件&#xff1a;API网关、管理平面和开发者门户。这些组件默认由Azure托管并完全管理。Azure API管理可实现数字化体验、简化应用程序集成&#xff0c;支持新的数字产品&#xff0c;并促…