Node.js 中如何使用 EJS 模板引擎?

前言

EJS(Embedded JavaScript)是一个简单的 JavaScript 模板引擎,它可以将数据和 HTML 进行混编,生成最终的 HTML 输出。在 Node.js 应用中,使用 EJS 可以简化渲染 HTML 页面的流程,提升开发效率。本文将介绍如何在 Node.js 中使用 EJS 模板引擎,帮助初学者快速上手使用。

安装 EJS

在使用 EJS 前,需要先安装 EJS 模块。在命令行中执行以下命令即可:

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

创建 EJS 模板文件

在使用 EJS 模板引擎前,需要先创建 EJS 模板文件。EJS 的模板文件采用 .ejs 后缀名,可以在模板中使用 JavaScript 语法进行编写。下面是一个简单的 EJS 模板示例,用于输出用户信息:

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

在模板中,可以使用 <%= %> 语法输出其中的表达式的值。在上述示例中,<%= user.name %> 将输出用户的名称。

在 Node.js 中使用 EJS

在 Node.js 应用中使用 EJS 模板引擎,需要先加载 EJS 模块,然后使用 EJS 的 render() 函数渲染模板。下面是一个简单的 Node.js 示例,用于渲染用户信息页面:

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

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

在上述示例中,使用 fs 模块读取 ./userprofile.ejs 文件,并使用 ejs.render() 函数渲染模板。ejs.render() 函数接收两个参数,第一个参数是模板文件的字符串内容,第二个参数是一个对象,用于传递模板需要的数据。在示例中,传递了一个 user 对象用于渲染模板。最后将渲染后的 HTML 响应给客户端。

EJS 模板的控制流

EJS 模板还支持常见的控制流语句,如 if、for、while 等。下面是一个包含控制流的 EJS 模板示例,用于输出用户列表:

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

在上述示例中,使用 <% %> 语法包含 JavaScript 代码块。在代码块中,可以使用常见的控制流语句进行编写。在示例中,使用 forEach() 方法遍历用户数组,并输出每个用户的名称。

总结

本文介绍了如何在 Node.js 应用中使用 EJS 模板引擎。包括安装 EJS、创建 EJS 模板文件、在 Node.js 中使用 EJS 进行模板渲染,以及使用 EJS 控制流语句进行模板编写。通过本文的介绍,读者可以快速上手使用 EJS 模板引擎,提升 Node.js 应用的开发效率。

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


猜你喜欢

  • Headless CMS 和 Laravel 的集成指南

    随着前端技术的不断发展,传统的 CMS 架构已经不能满足现代 Web 应用的需求。Headless CMS 的出现使得前端开发者可以在不受 CMS 后台的限制下,拥有更加自由和灵活的开发体验。

    1 年前
  • Express.js 路由详解

    在前端开发中,我们通常采用一种名为 Express.js 的框架来搭建 Web 应用程序。而在 Express.js 中,路由是非常重要的一环,它可以帮助我们将处理不同 URL 的请求的代码组织在一起...

    1 年前
  • MongoDB 中的文本索引的使用方法

    MongoDB 是一种广泛使用的文档型 NoSQL 数据库,支持存储结构灵活、易于横向扩展、支持高并发访问等特点,在前端开发中也得到了广泛应用。而 MongoDB 中的文本索引是其中一个非常实用的功能...

    1 年前
  • 使用 JavaScript 第三方库定位 IP 的正确姿势

    随着互联网的发展,IP 地址已经成为判断用户位置和提供更好的服务的重要依据。定位 IP 地址已经成为前端工作中的一个常见需求,这需要我们使用 JavaScript 第三方库来实现。

    1 年前
  • Docker 容器升级方法

    Docker 已经成为我们日常开发、测试、部署的重要工具。使用 Docker,我们可以快速搭建本地开发环境、迁移应用程序到云端或者物理机并减少应用程序的依赖关系。在使用 Docker 过程中,我们经常...

    1 年前
  • ES8 中的新特性:BigInt

    JavaScript 是一门弱类型语言,其内置类型只包含原始类型和对象类型,其中原始类型包括数字、字符串、布尔值、null 和 undefined 等。在 ES8 中,我们可以看到新增了一种原始类型:...

    1 年前
  • 在 Deno 中实现日历和时区处理的最佳实践

    在前端开发中,日期和时区处理是非常重要的一部分。它们与用户体验密切相关,并且在许多应用程序中都是关键的功能。然而,在处理日期和时区时,存在许多坑和陷阱,特别是在不同的环境下,如浏览器,服务器和移动应用...

    1 年前
  • ES2021(ES12)即将发布:最新的 ECMAScript 标准

    ES2021,也称为 ECMAScript 2021 或 ES12,是最新的 ECMAScript 标准,即 JavaScript 的最新版本。它包含了一些新的语法和功能,使得 JavaScript ...

    1 年前
  • 使用 ESLint 避免 JavaScript 错误

    JavaScript 是一种弱类型语言,这意味着程序员需要自己负责代码的类型检查和错误处理。如果不小心犯了错误,这些错误可能会在程序运行时崩溃,导致应用程序中断或产生未定义的行为。

    1 年前
  • ES6 中的数组方法详解

    在前端开发中,我们经常会用到 JavaScript 的数组。ES6 引入了很多新的数组方法,让我们可以更加方便地对数组进行操作。本文将详细介绍 ES6 中的数组方法,包括使用方法、示例代码以及指导意义...

    1 年前
  • RxJS 中的 publish 操作符

    RxJS 是一款强大的 JavaScript 响应式编程框架,它提供了多种操作符用于处理数据流。其中,publish 发布操作符是 RxJS 操作符中的一种,它可以将源 Observable 转化成一...

    1 年前
  • TypeScript 中的工具类型详解

    前言 TypeScript 是 JavaScript 的强类型版本,它提供了一些强大的功能,能帮助我们开发更加健壮、可维护的代码。其中一个特别有用的功能就是 TypeScript 的工具类型,本篇文章...

    1 年前
  • 使用 Web Components 进行跨平台开发:一个完整的示例

    Web Components 是一种用于构建可重用组件的浏览器技术,它允许我们使用一组独立的技术实现自定义元素、Shadow DOM 和 HTML 模板。Web Components 可以被用于构建跨...

    1 年前
  • Socket.io 如何实现基于位置的推送通知

    前言 在当今互联网时代,推送通知逐渐成为了移动互联网时代的标配,而基于位置的推送通知更是为前端开发人员所热衷。Socket.io作为一个优秀的web实时通讯库,不仅让前端开发者实现基于位置的推送通知变...

    1 年前
  • WebSocket 在 Webpack 中的使用详解

    WebSocket 是 HTML5 开始引入的一种通信协议,它建立在 TCP 协议之上,使得客户端和服务器可以进行双向实时通信。在 Web 开发中,尤其是前端开发中,WebSocket 的运用越来越广...

    1 年前
  • Vue.js 中集成客户端存储的方法

    随着前端应用的发展,越来越多的网站和应用需要在客户端存储数据。传统的解决方法是使用 cookie 或者使用后端存储,但这些方法都有一些缺点。Vue.js 提供了更好的方案来实现客户端存储,并且非常容易...

    1 年前
  • Redis 的分布式锁实现方法及应用场景

    在分布式系统中,锁机制是实现数据共享和协调的重要组成部分。Redis 是一个流行的 key-value 存储系统,具有高性能和可扩展性的优点。Redis 提供了一种简单的方式来实现分布式锁,这篇文章将...

    1 年前
  • Promise 中的 async 和 await

    前言 在 JavaScript 中,异步编程是一项非常重要的技术。各种异步操作,如网络请求、文件读写等操作,都必须以异步方式进行。Promise 是一种处理异步操作的规范,在大型 Web 应用的开发中...

    1 年前
  • 在 GraphQL 中使用乐观更新

    什么是乐观更新 乐观更新是一种优化策略,它将假设修改操作是成功的,而不等待服务器的响应。在前端应用中,如果用户提交了修改请求,通常需要等待服务器的响应来更新 UI,这个过程很可能会产生一些卡顿,影响用...

    1 年前
  • SASS 中如何处理复杂的嵌套结构

    前言 在日常前端开发中,我们经常会遇到许多嵌套结构复杂的样式代码,尤其是在大型项目中,这种情况更为常见。为了更好地管理和组织这些样式代码,我们可以使用预处理器来编写样式,其中 SASS 是目前比较常用...

    1 年前

相关推荐

    暂无文章