Node.js 模板渲染教程 |21xrx.com

Node.js 模板渲染教程

2023-07-11 22:01:48 深夜i -- --

Node js 模板渲染教程模板引擎 Express js

在 Node.js 中，我们经常需要使用模板引擎来渲染 Web 页面。模板引擎可以帮助我们按照一定的格式将数据渲染成 HTML 页面，从而方便开发者管理和维护页面。

本文将介绍 Node.js 中常用的模板引擎 EJS 的使用方法。EJS 是一种嵌入式 JavaScript 模板引擎，可以在 HTML 文件中使用 JavaScript 代码，方便灵活。

首先，我们需要在我们的 Node.js 项目中安装 EJS 模块。可以使用 npm 命令进行安装：`npm install ejs --save`

安装完成后，在我们的 JavaScript 文件中引入 EJS 模块，可以使用 `require` 命令：`const ejs = require('ejs')`

接下来，我们可以创建一个 EJS 模板文件，在文件中编写 HTML 代码和 JavaScript 代码。在 EJS 模板中，我们可以使用 `<% %>` 标签来插入我们的 JavaScript 代码，使用 `<%= %>` 标签来插入我们的变量。

例如，我们可以创建一个 user.ejs 的模板文件，内容如下：


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>User Info</title>
</head>
<body>
 <h1><%= name %> 的个人信息</h1>
 <p>姓名： <%= name %></p>
 <p>年龄： <%= age %></p>
 <% if (gender === 'male') %>
  <p>性别：男</p>
 <% else %>
  <p>性别：女</p>
 <% %>
</body>
</html>

在上面的模板文件中，我们可以使用 `<%= name %>` 和 `<%= age %>` 标签来插入 `name` 和 `age` 这两个变量的值。同时，在 `<% %>` 标签中我们可以使用 JavaScript 代码来实现对 `gender` 这个变量的判断。

在我们的 JavaScript 文件中，我们可以通过调用 ejs.render() 函数来进行渲染，示例代码如下：


const express = require('express')
const app = express()
const ejs = require('ejs')
const userTemplate = __dirname + '/views/user.ejs'
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.get('/user', function (req, res) {
 let userInfo =
  name: 'Tom'
 let html = ejs.renderFile(userTemplate, userInfo)
 res.send(html)
})
app.listen(3000, function () {
 console.log('Example app listening on port 3000!');
})

我们在上面的代码中定义了一个路由 `/user`，在路由中初始化了一个 `userInfo` 对象，然后将这个对象作为参数传入到 ejs.renderFile() 函数中，渲染了我们上面定义的 user.ejs 模板文件，并将渲染后的 HTML 页面发送给客户端。

通过以上方法，我们可以快速地在 Node.js 项目中使用 EJS 模板引擎进行页面渲染。在实际项目中，我们可以按照需要编写不同的 EJS 模板文件，来达到我们想要的页面效果。

上一篇: idea打包java可执行jar包

下一篇: C++实现日历打印

评论区

()

相似文章