【Express】服务端渲染(模板引擎 EJS)

这篇具有很好参考价值的文章主要介绍了【Express】服务端渲染(模板引擎 EJS)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【Express】服务端渲染(模板引擎 EJS),Express,express

EJS(Embedded JavaScript)是一款流行的模板引擎,可以用于在Express中创建动态的HTML页面。它允许在HTML模板中嵌入JavaScript代码,并且能够生成基于数据的动态内容。

下面是一个详细的讲解和示例,演示如何在Express中使用EJS模板引擎:

  1. 安装EJS:首先,在你的项目中安装EJS模板引擎。可以使用NPM来完成安装:
npm install ejs
  1. 配置EJS:在Express应用中,你需要设置EJS作为模板引擎。在app.js(或其他入口文件)中添加以下代码:
const express = require('express');
const path = require('path');
const app = express();
// 1. 设置模板引擎
app.set('view engine', 'ejs');
// 2. 设置模板文件存放的位置
app.set('views', path.resolve(__dirname, './views'));  
  1. 创建EJS视图文件:在项目目录下创建一个名为views的文件夹(如果没有的话),然后在该文件夹中创建一个EJS视图文件,比如index.ejs

  2. 使用EJS模板:在路由处理程序中,使用res.render()方法来渲染EJS视图文件,并传递数据给模板。以下是一个例子:

app.get('/home', (req, res) => {
  // 3. render 响应
  let name = 'xx'
  res.render('home', { name: name })
})
app.listen(3000, () => {
  console.log('服务器启动成功')
})

在上面的示例中,当用户访问根URL时,将渲染名为index.ejs的视图文件,并提供名为data的数据对象。

  1. 在EJS模板中使用数据:在home.ejs视图文件中,可以通过以下方式使用传递的数据:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>
    <%= name %>
  </h2>
</body>
</html>

在EJS模板中,用<%= %>插入JavaScript表达式来显示数据。使用<% %>标记包裹一段JavaScript代码,可以进行循环、条件判断和其他逻辑操作。

【Express】服务端渲染(模板引擎 EJS),Express,express

  1. 渲染完整的HTML页面:在index.ejs文件中,可以使用partials(局部视图)和其他EJS功能来构建完整的HTML页面。

如果不想再创建 ejs 文件,也可以直接渲染 html 文件,但需要配置模板引擎:

// 配置模板引擎
app.set('views', './views')
app.set('view engine', 'html')
app.engine('html', require('ejs').renderFile)

EJS还支持其他功能,比如模板继承、自定义过滤器等。文章来源地址https://www.toymoban.com/news/detail-724819.html

到了这里,关于【Express】服务端渲染(模板引擎 EJS)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用express搭建后端服务

    上一篇我们利用TDesign搭建了前端服务,现在的开发讲究一个前后端分离,后端的话需要单独搭建服务。后端服务的技术栈还挺多,有java、php、python、nodejs等。在众多的技术栈中我们选择nodejs搭建。 为啥要选用nodejs呢?因为为了技术上的统一,我们前端已经选择了vue3+TDesign了

    2024年02月15日
    浏览(34)
  • Node服务器-express框架

    1 Express认识初体验 2 Express中间件使用 3 Express请求和响应 4 Express路由的使用 5 Express的错误处理 6 Express的源码解析 1、在项目文件的根目录创建package.json文件 2、下载express 3、基本使用 4、运行服务器 先要下载nodemon 中间件在express就是post或者get里面的回调函数(req,res,next)

    2024年02月01日
    浏览(32)
  • Node+Express编写接口---服务端

    开始: 个人兴趣爱好,欢迎大家多多指教!(点击直达源码!) node_vue_admin: 第一个以node为后端,vue为前端的后台管理项目 https://gitee.com/ah-ah-bao/node_vue_admin.git 第一步:安装 安装Node.js     点击直达Node.js (nodejs.org) 安装Navicate   点击直达Navicat | 产品 安装Mysql       点击直达MySQ

    2024年01月17日
    浏览(35)
  • 【最佳实践】如何修改 Express 服务响应头?

    📘 欢迎关注博主的掘金:暮星的主页 最近在尝试修复工作项目中 Express 服务的 WebInspect 扫描报告 指出的漏洞,其中有涉及到需要修改服务响应头的部分。以前没怎么研究过 Express ,正好借此机会实践一下。 📣 版本 node : 14.17.6 express : 4.17.1 Micro Focus Fortify WebInspect 是 Micro

    2024年02月06日
    浏览(32)
  • 前端工程化:express服务端开发

    npm i -S express node app.js 全局中间件:第一个参数是回调函数时,则针对所有请求生效 路由中间件:第一个参数是匹配路由,第二个参数为回调函数 异常中间件:回调函数包含四个参数 异常中间件:回调函数包含四个参数 全局异常捕获 全局Promise异常捕获 需要购买或者找免费

    2023年04月23日
    浏览(33)
  • nodejs + express 实现 http文件下载服务程序

    nodejs + express 实现 http文件下载服务程序, 主要包括两个功能:指定目录的文件列表,某个文件的下载。 假设已经安装好 nodejs ; cd /js/node_js ; 安装在当前目录的 node_modules/ npm install express --save  npm install express-generator --save D:js node node_js/node_modules/express-generator -e blog cd blog ins

    2024年02月07日
    浏览(35)
  • express搭建服务器并连接mysql数据库

    前言:express是一个轻量级的node.js web应用程序开发框架,为web和移动应用程序提供一组强大的功能,可以帮助我们快速搭建基于nodejs的web应用。通俗来说:express可以搭建服务器,接受前端发送过来的请求,并连接数据库,通过一系列操作做出响应发送到前端。 注意:搭建服

    2024年01月18日
    浏览(36)
  • 图书商城项目练习②后端服务Node/Express/Sqlite

    本系列文章是为学习Vue的项目练习笔记,尽量详细记录一下一个完整项目的开发过程。面向初学者,本人也是初学者,搬砖技术还不成熟。项目在技术上前端为主,包含一些后端代码,从基础的数据库(Sqlite)、到后端服务Node.js(Express),再到Web端的Vue,包含服务端、管理

    2024年02月11日
    浏览(38)
  • nodejs配置express服务器,运行自动打开浏览器

    查看专栏目录 Network 灰鸽宝典专栏主要关注服务器的配置,前后端开发环境的配置,编辑器的配置,网络服务的配置,网络命令的应用与配置,windows常见问题的解决等。 作为前端开发的项目,有的时候打包完后就想在本地测试是什么样子的,另外一些如cesium等程序,需要在

    2024年02月04日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包