第九章认识Express模板

news2025/1/20 14:59:07

基本概述

Express模板是指Express框架中用于渲染视图的文件,可以包含HTML、CSS、JavaScript等内容,用于构建Web应用程序的用户界面。

使用Express模板可以快速、方便地创建Web应用程序,并且可以轻松地将动态数据注入到模板中,以便于动态地呈现信息给用户。常见的Express模板引擎包括EJS、Pug、Handlebars等。

基本分类

Express模板可以分为静态模板和动态模板两种。

  1. 静态模板:预先定义好的HTML文件,可以通过路由来直接呈现给用户。

  2. 动态模板:通过特定的模板引擎来生成动态内容,可以根据业务逻辑、用户信息等动态生成HTML。

在Express中常用的模板引擎有:

  1. 基于HTML的模板引擎,如Mustache、Handlebars等;

  2. 基于JavaScript的模板引擎,如EJS、Underscore.js等;

  3. 基于CSS的模板引擎,如LESS、SASS等;

  4. 小而精的模板引擎,如Nunjucks、Swig等。

使用步骤(espresso-art-template引擎模板)

第一、在D盘中新建一个文件,例如D:\code\chapter04\server,以此形成目录,方便管理,然后执行模板安装命令,如下:

npm install art-template express-art-template  --sava

解释:安装art-templateexpress-art-template这两个npm包,并将它们添加到项目的依(dependencies)中。

其中,art-template是一个轻量、高性能的javascript模板引擎。

express-art-template是基于art-template的express框架的模板引擎。

--save参数使得这些依赖被添加到项目的package.json文件中,以方便项目的部署和维护

第二、在server目录中新建art.js文件,编写代码,实现模板引擎如下:

const express = require('express'); //引入express框架模块,并将其赋值给常量express
const path = require('path')  //引入path模块,并将其赋值给常量path
const app = express();  //创建一个express实例,并将其赋值给常量app

//配置模板引擎
app.engine('art', require('express-art-template')); //注册art-template模板引擎为art文件的渲染引擎
app.set('views', path.join(__dirname, 'views')); //设置存放视图文件(即模板文件)的目录为views目录,使用了path.join()方法连接__dirname和views目录路径。
app.set('view engine', 'art'); //设置默认的模板文件后缀名为art
app.listen(3000); //启动express服务器,监听3000端口

console.log('服务器启动成功');
//请访问http://localhost:3000/art

第三,成功配置模板完后,在例如D:\code\chapter04\server目录下新建views目录,然后再views目录新建index.art模板文件,编写代码,实现msg信息渲染。如下:

{{ msg }}

上述代码通过“{{ }}”语法输出msg变量

第四、打开编写好的art.js文件,再第7行代码后添加如下代码:

app.get('/art', (req, res) => {
    //渲染模板
    res.render('index', {
        msg: 'message'
    });
});

第五、打开命令行工具,切换到server目录下,执行命令如下:

node art.js

第六、打开浏览器地址栏中输入http://localhost:3000/art即可看到模板渲染成功

最终结果如下

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

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

相关文章

Netty实战专栏 | NIO详解

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏: Netty实战专栏 ✨特色专栏&#xff1a…

实验室LIMS系统 asp.net源码 lims系统源码

LIMS系统是以实验室为中心,将人员、仪器、试剂、方法、环境、文件等影响分析数据的因素有机结合,针对实验室的要求,遵循ISO 17025准则,采用先进的计算机网络技术、数据存储技术、快速和强大的数据处理技术来对实验室进行全面管理的…

【23真题】魔都高校真题!刷一刷!

今天分享的是23年上海海事大学806的信号与系统试题及解析。 本套试卷难度分析:22年上海海事大学806考研真题,我也发布过,若有需要,戳这里自取!本套试题内容难度适中,题量适中,考察的知识点不难…

还有医学生不知道这个免费好用的在线样本量计算器吗?

相信很多小伙伴都有过这样的经历:做科研设计、撰写论文,设计好主题后摆在眼前的是你最头痛的问题——样本量计算。事实上,样本量计算往往是临床医生做临床研究设计的一大障碍,是临床研究设计、临床知识经验以及统计学知识的结合。…

前端 / 小程序——第三方字体库压缩(压缩率80%)

文章目录 前言压缩字体总结 前言 在做微信小程序时,需要使用第三方字体库,但是该字体库有30MB大小,导致微信使用wx.loadFontFace一直报错。网速很慢的话,极其影响用户体验,小的字体库没有问题,所以是字体库…

[读论文]DiT Scalable Diffusion Models with Transformers

论文翻译Scalable Diffusion Models with Transformers-CSDN博客 论文地址:https://arxiv.org/pdf/2212.09748.pdf 项目地址:GitHub - facebookresearch/DiT: Official PyTorch Implementation of "Scalable Diffusion Models with Transformers&qu…

个推用户运营全新上线用户生命周期管理功能,助力APP快速实现用户精细化运营

近期,个推用户运营上线了APP用户生命周期管理功能。该功能可以帮助APP多维度洞察⽤户所处的⽣命周期分布,旨在帮助运营人员快速全面地了解用户,从而基于用户生命周期针对性地做出用户运营策略调整,提升用户价值和运营指标。 个推如…

【LeetCode:2760. 最长奇偶子数组 | 模拟 双指针】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…

(C++)把字符串转换成整数

把字符串转换成整数_牛客题霸_牛客网 愿所有美好如期而遇 思路 看到这个题目我们首先应该想到的就是去处理第一个字符,但是第一个字符也可能是数字字符,所以我们需要对他单独处理,如果他不符合条件,直接return,符合条…

QGIS之二十三矢量线融合

效果 步骤 1、准备数据 现有线分段太多,需要将部分线按照某个字段融合起来 2、融合 运行 3、结果 线已经融合了 线相交处也添加了线的节点

【开源】基于Vue和SpringBoot的网上药店系统

项目编号: S 062 ,文末获取源码。 \color{red}{项目编号:S062,文末获取源码。} 项目编号:S062,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 药品类型模块2.3 药…

[C++]:8.C++ STL引入+string(介绍)

C STL引入string(介绍) 一.STL引入:1.什么是STL2.什么是STL的版本:2-1:原始版本:2-2:P. J 版本:2-3:RW 版本:2-4:SGL版本: 3.STL 的六大组件&…

JS-项目实战-删除库存记录

1、fruit.js function $(name) {if (name) {//假设name是 #fruit_tblif (name.startsWith("#")) {name name.substring(1); //fruit_tblreturn document.getElementById(name);}} }//当页面加载完成后执行后面的匿名函数 window.onload function () {//get:获取…

YOLOv8-Seg改进: 捕捉空间上的局部关系和全局关系的CoordAttention注意力 | 分割注意力系列篇

🚀🚀🚀本文改进:CoordAttention注意力,引入到YOLOv8-seg,CoordAttention在计算注意力时,不仅会考虑输入的特征信息,还会考虑每个像素点的位置信息,从而更好地捕捉空间上的局部关系和全局关系。 🚀🚀🚀Context Aggregation小目标分割&复杂场景首选,实现…

Python winreg将cmd/PowerShell(管理员)添加到右键菜单

效果 1. 脚本 用管理员权限运行,重复执行会起到覆盖效果(根据sub_key)。 icon自己设置。text可以自定义。sub_key可以改但不推荐(避免改成和系统已有项冲突的)。command不要改。 from winreg import *registry r&q…

前端转行可以做什么

前端开发者通常拥有很好的技术背景和解决问题的能力,所以有很多可能的职业选择。以下是一些可能的选择: 全栈开发:这是一个非常热门的职位,需要能够处理前端和后端工作。使用多种编程语言和技术来构建从数据库到用户界面的整个应…

ps5计时计费软件安装教程,佳易王电玩店计时收费系统

ps5计时计费软件安装教程,佳易王电玩店计时收费系统 一、佳易王电玩PS5游戏厅计时计费软件部分功能简介: 1、计时计费功能 :开台时间和所用的时长直观显示,每3秒即可刷新一次时间。 2、销售商品功能 :商品可以绑定桌…

【深度学习实验】网络优化与正则化(五):数据预处理详解——标准化、归一化、白化、去除异常值、处理缺失值

文章目录 一、实验介绍二、实验环境1. 配置虚拟环境2. 库版本介绍 三、优化算法0. 导入必要的库1. 随机梯度下降SGD算法a. PyTorch中的SGD优化器b. 使用SGD优化器的前馈神经网络 2.随机梯度下降的改进方法a. 学习率调整b. 梯度估计修正 3. 梯度估计修正:动量法Momen…

ubuntu云服务器配置SFTP服务

目录 一、安装并运行SSH服务 1,安装ssh服务 2,运行ssh 3,查看ssh运行状态 二、创建SFTP用户并进行用户相关的配置 1,创建SFTP用户 2,限制用户只能使用 SFTP,并禁止 SSH 登录。打开/ect/ssh/sshd_conf…

一文看懂Spark中Cache和CheckPoint的区别

目录 循循渐进理解使用Cache或者PersistCheckPoint缓存和CheckPoint的区别 循循渐进理解 wc.txt数据 hello java spark hadoop flume kafka hbase kafka flume hadoop看下面代码会打印多少条-------------------------(RDD2) import org.apache.spark.rdd.RDD import org.ap…