使用ejs和express将数据显示到网格_Node.js express和ejs尝试将变量从js文件传递到ejs文件_express和ejs错误，用于在屏幕上显示来自数据库的数据 - 腾讯云开发者社区

使用ejs和express将数据显示到网格

基础概念

EJS（Embedded JavaScript）是一种简单的模板语言，它允许你在HTML中嵌入JavaScript代码，从而动态生成HTML内容。Express是一个基于Node.js的Web应用框架，它提供了一系列强大的特性来帮助你创建Web应用和API。

类型

EJS:
- 文件扩展名通常为.ejs。
- 支持两种语法：一种是类似于PHP的<% code %>，另一种是更简洁的<%= code %>（用于输出）。
Express:
- 是一个Node.js框架，主要通过express模块来实现。
- 提供了路由（Router）、中间件（Middleware）、视图引擎（View Engine）等功能。

应用场景

EJS:
- 适用于需要动态生成HTML内容的Web应用。
- 适合小型到中型的项目，尤其是那些需要快速迭代和灵活性的项目。
Express:
- 适用于构建各种Web应用和API，从简单的静态网站到复杂的实时应用。
- 适合需要高度定制化和扩展性的项目。

示例代码

以下是一个简单的示例，展示如何使用EJS和Express将数据显示到网格中：

安装依赖

首先，确保你已经安装了Node.js和npm。然后创建一个新的项目目录并初始化：

mkdir ejs-express-grid
cd ejs-express-grid
npm init -y

安装Express和EJS：

npm install express ejs

创建Express应用

创建一个app.js文件：

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

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

// 模拟数据
const data = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
];

// 路由
app.get('/', (req, res) => {
  res.render('index', { data });
});

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

创建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>EJS Grid Example</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <h1>Data Grid</h1>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <% data.forEach(item => { %>
        <tr>
          <td><%= item.id %></td>
          <td><%= item.name %></td>
          <td><%= item.age %></td>
        </4>
      <% }) %>
    </tbody>
  </table>
</body>
</html>