nodejs模板引擎(一)

devtools/2024/10/11 13:23:49/

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

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

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

    javascript">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.ppmy.cn/devtools/59081.html

相关文章

音视频基本概念

文章目录 录制的大概流程播放的大概流程视频的主要概念I帧&#xff08;Intra coded frames&#xff09;P (Predicted frames)帧B(Bi-directional predicted frames)帧 音频常见概念数据帧信号的存储方式冗余信号的两个表现频谱掩蔽效应 和 时域掩蔽效应编码方案 和实现方式 封装…

贪心算法案例

1.买卖股票的最佳时机 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从这笔…

OpenCV 寻找棋盘格角点及绘制

目录 一、概念 二、代码 2.1实现步骤 2.2完整代码 三、实现效果 一、概念 寻找棋盘格角点&#xff08;Checkerboard Corners&#xff09;是计算机视觉中相机标定&#xff08;Camera Calibration&#xff09;过程的重要步骤。 OpenCV 提供了函数 cv2.findChessboardCorners…

【Rust练习】2.数值类型

练习题来自https://practice-zh.course.rs/basic-types/numbers.html 1 // 移除某个部分让代码工作 fn main() {let x: i32 5;let mut y: u32 5;y x;let z 10; // 这里 z 的类型是? }y的类型不对&#xff0c;另外&#xff0c;数字的默认类型是i32 fn main() {let x: i…

科研绘图系列:R语言圆形柱状图(circular barplot)

介绍 圆形柱状图(circular barplot),又称为雷达图或蜘蛛网图(Spider Chart),是一种用来展示多变量数据的图表。这种图表使用一个圆形的网格,将数据变量分布在一个或多个从中心点向外延伸的轴上,每个轴代表一个变量,数据点在轴上的位置表示该变量的值。然后,将这些点…

python-time模块使用

time模块使用 1&#xff0c;三个时间对象 struct_time: time对象 timestamp&#xff1a;浮点数。 format_time: 字符换 2&#xff0c;struct_time 相互转换 format_time time.strftime(format, struct_time) -> format_timetime.strptime(format_time, format) -> …

django的增删改查,排序,分组等常用的ORM操作

Django 的 ORM&#xff08;对象关系映射&#xff09;提供了一种方便的方式来与数据库进行交互。 1. Django模型 在 myapp/models.py 中定义一个示例模型&#xff1a;python from django.db import modelsclass Person(models.Model):name models.CharField(max_length100)age…

微信小程序 - 本地存储 增加有效期

小程序的本地存储API提供了wx.setStorageSync和wx.setStorage来存储数据&#xff0c;注意的是&#xff0c;小程序的本地存储并没有明确的有效期设置&#xff0c;存储的数据在不超过限制的情况下&#xff0c;会一直保留。 一、小程序本地存储API 小程序的本地存储API提供了设置…