ejs模板如何生成html

EJS(Embedded JavaScript)是一种嵌入式JavaScript模板引擎,用于生成HTML页面,下面是使用EJS模板生成HTML的详细步骤:

ejs模板如何生成html
(图片来源网络,侵删)

1、安装EJS模板引擎:你需要在你的项目中安装EJS模板引擎,可以使用npm或yarn进行安装,在终端中运行以下命令来安装EJS:

“`

npm install ejs

“`

2、创建EJS模板文件:在你的项目根目录下创建一个名为index.ejs的文件,这个文件将作为你的模板文件,用于生成最终的HTML页面。

3、编写EJS模板:打开index.ejs文件,并编写你的HTML代码,你可以使用EJS的语法来嵌入JavaScript代码和动态数据。

“`html

<!DOCTYPE html>

<html>

<head>

<title><%= title %></title>

</head>

<body>

<h1><%= heading %></h1>

<table>

<tr>

<th>姓名</th>

<th>年龄</th>

</tr>

<% users.forEach(function(user) { %>

<tr>

<td><%= user.name %></td>

<td><%= user.age %></td>

</tr>

<% }); %>

</table>

</body>

</html>

“`

在上面的例子中,<%= title %><%= heading %>是用于插入动态数据的占位符。users是一个包含用户信息的数组,通过遍历该数组,我们可以动态生成表格的每一行。

4、设置路由和服务器:在你的Node.js应用程序中,设置一个路由来处理请求并渲染EJS模板,使用Express框架可以这样做:

“`javascript

const express = require(‘express’);

const app = express();

const ejs = require(‘ejs’);

const data = { title: ‘My Website’, heading: ‘Welcome to my website’ }; // 动态数据

const users = [{ name: ‘John’, age: 25 }, { name: ‘Jane’, age: 30 }]; // 用户数据

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

app.get(‘/’, (req, res) => {

res.render(‘index’, { data, users }); // 渲染模板并传递数据和用户信息给模板文件

});

app.listen(3000, () => {

console.log(‘Server is running on port 3000’);

});

“`

在上面的示例中,我们设置了Express的视图引擎为EJS,并定义了一个路由来处理根路径的GET请求,当请求到达时,我们使用res.render()方法渲染index.ejs模板,并将动态数据和用户信息传递给模板文件。

5、启动服务器:运行你的Node.js应用程序,并在浏览器中访问http://localhost:3000,你将看到由EJS模板生成的HTML页面显示在浏览器中。

原创文章,作者:未希,如若转载,请注明出处:https://www.kdun.com/ask/441044.html

本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。

(0)
未希新媒体运营
上一篇 2024-04-06 02:24
下一篇 2024-04-06 02:24

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

产品购买 QQ咨询 微信咨询 SEO优化
分享本页
返回顶部
云产品限时秒杀。精选云产品高防服务器,20M大带宽限量抢购 >>点击进入