Nodejs 请问express 怎么和ejs等模板进行数据绑定的

最近开始使用node做网站demo，但是总觉得数据绑定让人很迷惑，按说是通过response来传递的，那应该放在哪里才是直接跟模板里想对应的呢？这方面的资料比较少，看的也比较迷惑，请高手们指教。

Node.js 中 Express 如何与 EJS 模板引擎进行数据绑定

在使用 Node.js 和 Express 开发 Web 应用时，通常会使用模板引擎来生成动态 HTML 页面。EJS（Embedded JavaScript）是一种非常流行的模板引擎，它允许你在 HTML 文件中嵌入 JavaScript 代码。

数据绑定的基本概念

数据绑定是指将后端的数据传递到前端的视图中，并在页面上显示出来。在 Express 和 EJS 的组合中，我们可以通过 res.render() 方法将数据传递给模板文件，并在模板文件中使用这些数据。

示例代码

首先，确保你已经安装了 Express 和 EJS。如果没有安装，可以使用以下命令进行安装：

npm install express ejs

接下来，创建一个简单的 Express 应用来演示数据绑定过程。

设置 Express 应用

const express = require('express');
const app = express();

// 设置模板引擎为 EJS
app.set('view engine', 'ejs');

// 定义静态文件目录（可选）
app.use(express.static('public'));

// 路由处理
app.get('/', (req, res) => {
  // 数据对象
  const data = {
    title: 'Hello EJS',
    message: 'Welcome to my website!'
  };

  // 渲染模板并传递数据
  res.render('index', data);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

创建 EJS 模板文件

在项目的 views 目录下创建一个名为 index.ejs 的文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
</head>
<body>
  <h1><%= title %></h1>
  <p><%= message %></p>
</body>
</html>

解释

Express 配置：在上面的代码中，我们设置了 EJS 作为视图引擎，并定义了一个路由 /。当用户访问根路径时，Express 会调用回调函数，该函数会创建一个包含 title 和 message 的数据对象。
渲染模板：通过 res.render('index', data) 方法，我们将数据对象传递给 index.ejs 模板文件。在模板文件中，我们使用 <%= %> 语法来插入这些变量的值。

运行应用

运行你的应用，然后在浏览器中访问 http://localhost:3000，你应该能看到包含 title 和 message 的动态生成的页面。

通过这种方式，你可以轻松地将后端数据传递给前端模板，并实现动态页面的生成。

nodeper 2楼•1 个月前

常用的是res.render(‘view.ejs’,{data1:1,data2:2}); 内部会转换调用ejs的renderFile方法,内部实现就是fs读取模版文件，然后解析字符串，替换<%…%>为执行后的值，合并输出

yuanlaile 3楼•1 个月前

数据是附加到res.locals上来添加到模版上下文的，当然中间还有merge app.locals的数据

itying888 4楼•1 个月前

在render方法里面，源码在：express\lib\application.js 里面，源码是最好的文档。你会发现所有的模板机制都差不多，看过数个php模板系统的源码，再来看express的，很简单了，脚本语言的模板原理都是一样的。

wuwangju 5楼•1 个月前

多谢两位

wuwangju 6楼•1 个月前

3年前 PHP ASP也不差呀…

gougou168 7楼•1 个月前

当然可以！在Express中与EJS模板引擎的数据绑定主要是通过在路由处理函数中将数据传递给模板实现的。以下是一个简单的示例来展示如何操作。

示例代码

首先确保已经安装了express和ejs：

npm install express ejs

文件结构

假设我们有以下文件结构：

/project-root
  /views
    index.ejs
  app.js

`app.js`

const express = require('express');
const app = express();

// 设置模板引擎为 EJS
app.set('view engine', 'ejs');

// 定义一个路由
app.get('/', (req, res) => {
  // 在这里定义要传递给模板的数据
  const data = {
    title: "Hello EJS",
    message: "This is a message from Express."
  };

  // 渲染模板并将数据传递给模板
  res.render('index', data);
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

`views/index.ejs`

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
<p><%= message %></p>
</body>
</html>

解释

设置视图引擎：在Express应用中设置EJS作为默认模板引擎。
定义路由：创建一个路由处理函数，在这个函数中定义要传递给模板的数据对象。
渲染模板：调用res.render()方法，该方法接收模板名（相对于views目录）以及需要传递给模板的数据对象。
模板语法：在EJS模板中，通过<%= variableName %>的语法来显示变量值。

以上步骤展示了如何在Express应用中使用EJS模板进行数据绑定。希望这能帮助你理解并解决你的问题！