Express.js 中使用 EJS 模板引擎的详细教程

在前端开发中,模板引擎是一个很有用的工具,它能够以动态的方式将数据渲染到 HTML 页面中。在 Node.js 的世界里,Express.js 是一个广泛使用的 Web 框架,而 EJS 模板引擎则是它的默认选择之一。

在本文中,我们将详细介绍如何在 Express.js 中使用 EJS 模板引擎,包括如何安装和配置它,以及如何在 Node.js 中编写 EJS 模板。

安装 Express.js 和 EJS

如果你还没有安装 Node.js 和 Express.js,可以从官网下载并安装。在安装 Express.js 时,可以选择使用 EJS 作为模板引擎,也可以之后再进行配置。

安装 Express.js 和 EJS 的命令如下:

--- ------- ------- ------
--- ------- --- ------

这将会在你当前项目的 node_modules 目录下安装这两个包。同时,你需要在你的代码中导入它们:

----- ------- - -------------------
----- --- - ----------
----- --- - ---------------

配置 EJS 模板引擎

在使用 EJS 模板引擎之前,需要在 Express.js 中配置它。这可以通过 app.set() 方法完成。下面是一个简单的实例:

------------- -------- -------
---------------- --------- - ----------

在这个例子中,我们告诉 Express.js 使用 EJS 作为模板引擎,并指定模板页面的路径。注意,这里使用了 Node.js 的 __dirname 变量,用于获取当前文件所在的目录名。

创建 EJS 模板

一旦配置完成,我们可以开始编写 EJS 模板了。在 Express.js 中,模板文件默认保存在 views 目录下。

下面是一个简单的 EJS 模板文件,它渲染了一个包含用户名的欢迎语句:

--------- -----
------
------
    ----- ----------------
    -------------- --- -------- -----------
-------
------
    ----------- --- -------- --------
-------
-------

在这个模板中,<%= ... %> 是 EJS 的标签,用于向模板中动态输出内容。在这里,我们通过 username 变量向模板中传递了一个用户名称,并在 HTML 标题和正文中显示出来。

使用 EJS 模板

使用 EJS 模板引擎渲染 HTML 页面很简单。在 Express.js 中,我们只需要调用 res.render() 方法即可。下面是一个简单的示例:

------------ ------------- ---- -
    --------------------- - --------- ------ ---
---

在这个示例中,我们定义了访问 '/ ' 路径时的处理程序,它通过调用 res.render() 方法来渲染 welcome.ejs 模板。我们还向 res.render() 方法提供了一个数据对象,其中 username 属性的值是 'John'

在实际运行中,res.render() 方法会取出 welcome.ejs 模板,将数据对象中的 username 填充进去,生成最终的 HTML 页面,并将其发送给浏览器。这个页面将显示一个欢迎语句,其中用户名为 'John'

总结

在本文中,我们详细介绍了如何在 Express.js 中使用 EJS 模板引擎,从安装和配置到编写和使用模板,一步一步地讲解了每个步骤。

EJS 模板引擎是一个非常方便的工具,遵循前端工程化的思路,将网站分为盒子的思想,可以让前端开发更加高效、易于维护。希望通过这篇文章,可以帮助你更好地理解和使用 EJS 模板引擎,在 Web 开发中发挥更大的作用。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64a4f9e548841e98941685b7


猜你喜欢

  • ES9 的异步迭代器和 for-await-of

    ES9(ECMAScript 2018)是 JavaScript 的一个大版本更新,其中引入了许多新特性,包括异步迭代器和 for-await-of。这两个新特性允许开发人员使用更加高效和灵活的方式处...

    1 年前
  • 使用 Custom Elements 创建自定义下拉列表

    前言 自定义元素是 Web 组件中最强大的部分之一。在 Web Components 规范中,自定义元素是一种允许开发人员在 DOM 上创建自定义标签的机制。使用自定义元素,开发人员可以将组件封装在单...

    1 年前
  • 在 ECMAScript 2020 中使用 Math.signBit() 函数

    ECMAScript 2020 是 JavaScript 的最新版本之一,其中包含了许多新的特性和函数。其中 Math.signBit() 函数是一个非常实用的函数,它可以返回一个数值的符号位信息。

    1 年前
  • Sequelize 函数类型配置方式的详细说明

    前言 在前端开发中,我们难免会用到 Sequelize 这个工具。Sequelize 是一个基于 Promise 实现的 Node.js ORM(Object-Relational Mapping),...

    1 年前
  • Angular 服务器调用 API 获取数据(使用 HttpClient)

    Angular 是一款强大的前端框架,可以帮助开发者快速构建现代化的 Web 应用。其中与后端交互获取数据是很重要的一部分。本文将介绍如何使用 Angular 中的 HttpClient 模块来调用服...

    1 年前
  • 在 Fastify 中开启 HTTPS 安全通道

    在 Fastify 中开启 HTTPS 安全通道 Fastify 是一款快速、低开销的 Web 框架,它的模块化体系结构和插件机制使得开发者能够轻松地实现特定的需求。

    1 年前
  • Mongoose 的 populate 替代方案

    在使用 Node.js 进行 Web 开发时,Mongoose 是一个非常流行的 MongoDB 驱动工具。Mongoose 具有简洁、易用的 API,可以极大地提高开发效率。

    1 年前
  • SASS 的 @import 规则应该怎么使用?

    SASS 的 @import 规则应该怎么使用? 在前端开发中,SASS 经常被用来处理 CSS 的样式表。而在 SASS 中,@import 是一项十分重要的规则,它可以用来引入其他的 SASS 文...

    1 年前
  • 解决在 ES6 中使用 Object.assign() 方法的问题

    在 ES6 中,可以使用 Object.assign() 方法将多个对象的属性合并到一个新对象中。但是在使用该方法时,会遇到几个问题。本文将分析这些问题并提供解决方案。

    1 年前
  • Redis 如何解决缓存穿透问题

    前言 在现代应用程序中,缓存是提高性能的关键因素之一,而缓存穿透是指当请求一个不存在的缓存数据时,每次请求都会直接查询后端存储,这样会明显影响应用程序的性能。在这篇文章中,我们将详细讨论 Redis ...

    1 年前
  • Headless CMS 如何应对容灾和备份问题

    简介 随着互联网的发展,Headless CMS(无头 CMS)作为新型的内容管理系统受到了越来越多开发者的关注。相比传统的 CMS 系统,Headless CMS 更加灵活,可定制化程度更高,并且能...

    1 年前
  • GraphQL 和跨域资源共享:如何解决 Access-Control-Allow-Origin 错误

    前言 在Web开发中,我们常常会遇到 AJAX 调用其他域的 API 的时候出现 Access-Control-Allow-Origin 的问题,这是由于浏览器出于安全考虑,限制了HTTP请求跨域访问...

    1 年前
  • MongoDB 的逐渐均衡负载机制

    引言 随着互联网流量的日益增长和数据量的爆炸式增加,大规模分布式系统的负载均衡一直是互联网技术领域追求高可用、高性能的必备条件。MongoDB 的逐渐均衡负载机制,是 MongoDB 作为一款流行的 ...

    1 年前
  • 如何在 Vuepress 项目中使用 Tailwind CSS 进行网站开发

    如何在 Vuepress 项目中使用 Tailwind CSS 进行网站开发 1、介绍 VuePress 是一个 Vue 驱动的静态网站生成器,它使用了 webpack 和 node.js 的能力来打...

    1 年前
  • 如何使用 Web Components 实现网页截图功能

    随着互联网的发展,对于网页截图的需求越来越高。Web Components 是一种用来编写可重用组件的技术。在本篇文章中,我们将介绍如何使用 Web Components 实现网页截图功能。

    1 年前
  • CSS Flexbox 实现自适应布局的使用技巧

    随着移动设备的普及和不同设备屏幕尺寸的不断增加,响应式布局变得越来越重要。CSS Flexbox 是一个非常强大的工具,用于创建网页布局的灵活和可靠的方式。在本篇文章中,我们将探讨如何使用 CSS F...

    1 年前
  • 如何使用 React 实现带有搜索功能的 SPA 应用?

    React 是当今最受欢迎的 Web 前端框架之一,它的虚拟 DOM 技术、组件化设计以及极高的性能得到了广泛认可。本文将介绍如何使用 React 实现一个带有搜索功能的单页面应用(Single Pa...

    1 年前
  • 如何在 Deno 中使用 Sequelize 操作 MySQL 数据库?

    Deno 是一个新兴的 JavaScript 和 TypeScript 运行环境,它与 Node.js 相比,具有更加安全、快速和可靠的特点。在前端开发领域,使用 Deno 可以使得代码更加简洁高效,...

    1 年前
  • 解决 Webpack 的 "Module not found" 报错

    当我们在使用 Webpack 构建前端项目时,有时候会遇到类似于以下的报错信息: ------ --- ------ ------ ----- ------- ----- -- -----------...

    1 年前
  • 使用 Swagger UI 自动生成 RESTful API 文档

    什么是 RESTful API? RESTful API 是一种基于 HTTP 协议的 API 设计风格。它通过不同的 URL、HTTP 方法和请求/响应格式来表示不同的资源和操作。

    1 年前

相关推荐

    暂无文章