nodejs模板引擎(二)

news2024/9/22 4:09:38

虽然Jade现在已经被更名为Pug,但它的使用方式并没有太大的改变。下面是如何在Node.js中使用Pug(原Jade)模板引擎的基本步骤:

1. 安装 Pug

首先,你需要安装Pug模块。在你的项目目录中,使用npm来安装:

npm install pug

2. 设置Express应用

假设你已经在项目中设置了Express框架,你可以在应用中设置Pug作为模板引擎。以下是一个基本的Express应用设置:

const express = require('express');
const app = express();

// 设置Pug为模板引擎
app.set('view engine', 'pug');
app.set('views', './views'); // 设置视图文件的目录

// 配置静态资源中间件
app.use(express.static('public'));

// 定义路由
app.get('/', function(req, res) {
    const data = {
        title: '我的网站',
        message: '欢迎来到我的主页!'
    };
    res.render('index', data); // 渲染index.pug并将data传递给模板
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

3. 创建Pug模板

views目录中,创建一个index.pug文件。以下是Pug模板的一个例子:

doctype html
html
    head
        title= title
    body
        h1= message
        p 这是一个使用Pug的Node.js模板。

Pug使用缩进来表示HTML结构。上面的例子将被渲染成如下的HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>我的网站</title>
    </head>
    <body>
        <h1>欢迎来到我的主页!</h1>
        <p>这是一个使用Pug的Node.js模板。</p>
    </body>
</html>

4. 运行应用

最后,运行你的Node.js应用:

node app.js

打开浏览器,访问 http://localhost:3000,你应该能看到你的网页。
在这里插入图片描述

请注意,Pug的语法有一些特殊之处,例如使用!=来转义内容,使用-来表示JavaScript表达式等。更多详细的Pug语法和功能,请参考Pug的官方文档。

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

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

相关文章

gradle 和 java 版本对应关系

文章目录 gradle 和 java 版本对应关系原地址 gradle 和 java 版本对应关系 原地址 https://docs.gradle.org/current/userguide/compatibility.html#compatibility

超市暑期(7-8月)生鲜之蔬果商品及营销操作建议!

生鲜经营的思路现在越来越被重视&#xff0c;越来越做的更精细化&#xff0c;营销方法和手段越来越多&#xff0c;如何正确地运用好营销策略&#xff0c;如何做到这个季节的生鲜经营既能保持新鲜&#xff0c;又能保持盈利呢&#xff1f; 7-8月份蔬菜重点商品及季节性商品 叶菜…

无人驾驶大热,新能源汽车智能化中的算网支持

来源新华社&#xff1a;百度“萝卜快跑”全无人驾驶汽车行驶在路上 当前&#xff0c;新能源汽车产业数智化已成为全球汽车产业数字化转型的焦点。一方面&#xff0c;随着人工智能、大数据、云计算等技术的深度融合&#xff0c;新能源汽车在自动驾驶、智能互联、能源管理等方面…

从零设计一个神经网络:实现手写数字识别

前言 为了能够更好的理解神经网络&#xff0c;从手写数字识别这个小任务来逐层弄清楚神经网络的工作原理以及一般流程是非常合适的。 这篇文章就来手写完成一个数字识别的任务&#xff0c;来说明如何设计、实现并训练一个标准的前馈神经网络&#xff0c;以期对神经网络有一个…

AI编程助手-Tabnine的使用体验

文章目录 一&#xff0c;安装使用1&#xff0c;VSCode安装Tabnine插件2&#xff0c;使用 三&#xff0c;Tabnine的工作原理1&#xff0c;深度学习的力量2&#xff0c;注意事项&#xff1a;最大化Tabnine的效能 在编程的世界里&#xff0c;每一行代码都承载着创造者的智慧与汗水…

ubuntu安装YOLOV8环境

文章目录 前言 前言 ubuntu20.04 使用vmware虚拟机 1、安装python sudo apt-get install python3 python3-pip2&#xff0c;安装虚拟环境 sudo apt install python3.8-venv3&#xff0c;创建虚拟环境 python3 -m venv yolov8-env4&#xff0c;进入虚拟环境 source yolov8…

测试人必会 K8S 操作之 Dashboard

在云计算和微服务架构的时代&#xff0c;Kubernetes (K8S) 已成为管理容器化应用的标准。然而&#xff0c;对于许多新手来说&#xff0c;K8S 的操作和管理常常显得复杂而神秘。特别是&#xff0c;当你第一次接触 K8S Dashboard 时&#xff0c;你是否也感到有些无所适从&#xf…

十大CRM系统对比:选出最适合你的工具

本文将分享10款优质CRM系统&#xff1a;纷享销客、Zoho CRM、HubSpot、Salesforce、悟空CRM、销售易、Pipedrive、Oracle CRM、Insightly、SugarCRM。 在选择CRM系统时&#xff0c;很多企业主和管理者都面临着一个难题&#xff1a;市面上的品牌众多&#xff0c;到底哪个才是最…

《昇思25天学习打卡营第14天|SSD目标检测》

SSD&#xff08;Single Shot MultiBox Detector&#xff09;是一种用于目标检测的深度学习算法。它的设计旨在同时检测多个对象&#xff0c;并确定它们在图像中的位置和类别。与其他目标检测算法相比&#xff0c;SSD具有速度快和精度高的特点&#xff0c;在实时检测应用中非常受…

python 代码设计贪吃蛇

代码&#xff1a; # -*- codeing utf-8 -*- import tkinter as tk import random from tkinter import messageboxclass Snake:def __init__(self, master):self.master masterself.master.title("Snake")# 创建画布self.canvas tk.Canvas(self.master, width400,…

Centos忘记密码,重置root密码

Centos忘记密码&#xff0c;重置root密码 操作环境&#xff1a;Centos7.6 1、选择包含rescue的选项&#xff0c;按e进入编辑模式 首先&#xff0c;我们需要重启系统&#xff0c;进入开机引导菜单界面。在这里&#xff0c;我们可以看到系统的内核版本和启动参数等信息。我们需…

期权专题12:期权保证金和期权盈亏

目录 1. 期权保证金 1.1 计算逻辑 1.2 代码复现 1.3 实际案例 2. 期权盈亏 2.1 价格走势 2.2 计算公式 2.2.1 卖出期权 2.2.2 买入期权 免责声明&#xff1a;本文由作者参考相关资料&#xff0c;并结合自身实践和思考独立完成&#xff0c;对全文内容的准确性、完整性或…

龙迅#LT8644EX适用于HDMI2.0 4进4出矩阵应用,分辨率最高支持4K60HZ!

1. 概述 LT8644EX是一款 1616 数字交叉点开关&#xff0c;具有 16 个差分 CML 兼容输入和 16 个差分 CML 输出。该LT8644EX针对每个端口的数据速率高达 6 Gbps 的不归零 &#xff08;NRZ&#xff09; 信令进行了优化。每个端口都提供可编程的输入均衡电平和可编程输出摆幅。…

10个Python函数参数进阶用法及代码优化

目录 1. 默认参数值&#xff1a;让函数更加灵活 2. 关键字参数&#xff1a;清晰的调用方式 3. *args&#xff1a;拥抱不确定数量的位置参数 4. **kwargs&#xff1a;处理不确定数量的关键字参数 5. 参数解包&#xff1a;简化多参数的传递 6. 命名关键字参数&#xff1a;限…

【第31章】MyBatis-Plus之注解配置

文章目录 前言一、注解介绍二、注解列表总结 前言 本文详细介绍了 MyBatisPlus 注解的用法及属性&#xff0c;提供了源码链接以便深入理解。欢迎通过下方链接查看注解类的源码。 Mybatis-Plus Annotation 源码 一、注解介绍 Mybatis-Plus注解统一存放在com.baomidou.mybatis…

PS 2024【最新】中文白嫖版!,安装教程,图文步骤

文章目录 软件介绍软件下载安装步骤 软件介绍 Photoshop&#xff0c;简称“PS” Adobe Photoshop&#xff0c;简称“PS”&#xff0c;是由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具&#xff0c;可以有效地…

python调用阿里云汇率接口

整体请求流程 介绍&#xff1a; 本次解析通过阿里云云市场的云服务来实现程序中对货币汇率实时监控&#xff0c;首先需要准备选择一家可以提供汇率查询的商品。 https://market.aliyun.com/apimarket/detail/cmapi00065831#skuyuncode5983100001 步骤1: 选择商品 如图点击…

洁净室行业“”尘埃粒子计数器原理及品牌选型

尘埃粒子计数器原理 尘埃粒子计数器是一种基于激光粒子检测技术的精密仪器&#xff0c;用于测量洁净环境中单位体积内尘埃粒子的数量和粒径分布。其工作原理基于光散射现象&#xff1a;当空气中的微粒在激光束的照射下&#xff0c;会发生散射&#xff0c;散射光的强度与微粒的…

年薪60w的前端阿里P7专家,顶尖的技术人才,只因做到了这几点

全方位讲解前端主流框架Recat、Vue在项目中的应用、解析核心源码以及内存机制、核心技术点、架构设计思想等。从根源解决开发难题。 移动端App开发专题 了解移动端适配常见难点、学习Dart语法&#xff0c;掌握控件、布局、动画、操作手势、传感器、线程网络以及交互等核心技能。…

服务攻防——中间件Jboss

文章目录 一、Jboss简介二、Jboss渗透2.1 JBoss 5.x/6.x 反序列化漏洞&#xff08;CVE-2017-12149&#xff09;2.2 JBoss JMXInvokerServlet 反序列化漏洞&#xff08;CVE-2015-7501&#xff09;2.3 JBossMQ JMS 反序列化漏洞&#xff08;CVE-2017-7504&#xff09;2.4 Adminis…