Nodejs 求助一个问题：介绍个js的页面绑值。

Nodejs 求助一个问题：介绍个js的页面绑值。

ajax获取返回数值之后，比如返回生成一个table表单，不想在js中区for循环它，有没有什么插件可以像这样写的： <% for(…) %> <tr> <td>…</td> </tr> <% } %> 直接写在页面上，第一比较方便，第二不需要在js中拼HTML标签。

4 回复

当然可以！在Node.js项目中，我们通常使用模板引擎来处理这种动态数据绑定的需求。一个非常流行且易于使用的模板引擎是EJS（Embedded JavaScript），它可以让你像你在问题中提到的方式一样，在HTML文件中嵌入JavaScript代码。

使用EJS

  1. 安装EJS: 首先需要在你的项目中安装EJS。你可以通过npm来安装：

    npm install ejs

  2. 设置EJS作为视图引擎: 在Express应用中，你需要设置EJS作为视图引擎。例如，如果你正在使用Express框架，可以在app.js或index.js中添加以下代码：

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

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

// 静态文件服务
app.use(express.static('public'));

app.get('/', (req, res) => {
  const data = [
    { name: 'Alice', age: 24 },
    { name: 'Bob', age: 30 }
  ];
  res.render('index', { users: data });
});

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

  3. 创建EJS模板文件: 在项目的views目录下创建一个名为index.ejs的文件，并添加以下内容：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>User List</title>
</head>
<body>
  <table border="1">
    <% users.forEach(function(user) { %>
      <tr>
        <td><%= user.name %></td>
        <td><%= user.age %></td>
      </tr>
    <% }); %>
  </table>
</body>
</html>

解释

  • <% %>: 这些标签用于包含可执行的JavaScript代码。
  • <%= %>: 这些标签用于输出变量的内容。

在上面的例子中，当用户访问主页时，服务器会渲染index.ejs文件，并将传递给res.render函数的数据对象中的users数组插入到HTML模板中。然后，EJS引擎会在每个数组元素上运行一个循环，并生成相应的HTML表格行。

这种方法不仅使代码更简洁、易读，而且还可以有效地分离业务逻辑和视图层，提高代码的可维护性。


有的模板自己就可以，或者自己写个拼循环HTML的函数，以后也用的着

谢谢你的回复，模板上得我知道可以，但它主要是通过后台直接返值过来的。我记得我见过一种js的绑值方法，跟模板差不多，好像是什么插件，具体不太清楚了

在前端开发中，确实存在一些模板引擎可以帮助你在页面中更方便地绑定数据。其中一个流行的库是 EJS (Embedded JavaScript)，它可以让你像你在问题中描述的一样，在HTML中嵌入JavaScript逻辑来渲染数据。

示例

首先，你需要安装EJS。你可以通过npm来安装它：

npm install ejs --save

然后，假设你有一个简单的Node.js服务器，以及一个包含一些用户信息的数组。你可以使用EJS来渲染这个数组到HTML表格中。

Node.js 服务器代码示例

const express = require('express');
const app = express();
app.set('view engine', 'ejs'); // 设置视图引擎为EJS

// 假设这是从数据库或API获取的数据
const users = [
    {id: 1, name: "张三"},
    {id: 2, name: "李四"},
    {id: 3, name: "王五"}
];

app.get('/', (req, res) => {
    res.render('users', {users}); // 渲染名为'users.ejs'的视图，并传递users数据
});

app.listen(3000, () => console.log('Server running on http://localhost:3000'));

EJS 模板代码（users.ejs）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
</head>
<body>

<table border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <% users.forEach(function(user) { %>
        <tr>
            <td><%= user.id %></td>
            <td><%= user.name %></td>
        </tr>
        <% }); %>
    </tbody>
</table>

</body>
</html>

在这个例子中，我们使用了EJS语法 <% ... %> 来执行循环和条件逻辑，而 <%= ... %> 用于输出变量的值。这种方式避免了在JavaScript中拼接字符串来构建HTML元素，使代码更加清晰易读。

回到顶部