EJS(Embedded JavaScript)是一种简单的模板语言,它允许你在HTML中嵌入JavaScript代码,从而动态生成HTML内容。Express是一个基于Node.js的Web应用框架,它提供了一系列强大的特性来帮助你创建Web应用和API。
.ejs
。<% code %>
,另一种是更简洁的<%= code %>
(用于输出)。express
模块来实现。以下是一个简单的示例,展示如何使用EJS和Express将数据显示到网格中:
首先,确保你已经安装了Node.js和npm。然后创建一个新的项目目录并初始化:
mkdir ejs-express-grid
cd ejs-express-grid
npm init -y
安装Express和EJS:
npm install express ejs
创建一个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}`);
});
在项目根目录下创建一个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>
在终端中运行以下命令启动服务器:
node app.js
然后在浏览器中访问http://localhost:3000
,你应该会看到一个包含数据的网格表格。
通过以上步骤,你可以使用EJS和Express将数据显示到网格中。如果你遇到任何问题,可以参考官方文档或搜索相关社区论坛获取帮助。