当前位置：首页 > 行业动态 > 正文

html如何拼接ejs

admin
行业动态
2024-04-06
4935

要在HTML中拼接EJS，首先需要安装EJS库，然后在HTML文件中引入EJS模板，最后使用EJS的<%= %>标签将数据插入到模板中，以下是一个简单的示例：

1、安装EJS库：

npm install ejs

2、创建一个名为views的文件夹，并在其中创建一个名为index.ejs的文件，在这个文件中，我们将编写EJS模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>EJS Example</title>
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <table border="1">
        <tr>
            <th>标题</th>
            <th>内容</th>
        </tr>
        <% data.forEach(function(item) { %>
            <tr>
                <td><%= item.title %></td>
                <td><%= item.content %></td>
            </tr>
        <% }); %>
    </table>
</body>
</html>

3、在HTML文件中引入EJS模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>EJS Example</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/ejs/3.1.6/ejs.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        // 假设我们有一个名为data的数据对象，包含一些标题和内容
        const data = [
            { title: '标题1', content: '内容1' },
            { title: '标题2', content: '内容2' },
            { title: '标题3', content: '内容3' },
        ];
        // 使用EJS渲染模板并将结果插入到页面中
        const template = fs.readFileSync('./views/index.ejs', 'utf8');
        const html = ejs.render(template, { data: data });
        document.getElementById('app').innerHTML = html;
    </script>
</body>
</html>

这个示例展示了如何在HTML中使用EJS模板来显示一个包含标题和内容的表格，我们创建了一个EJS模板文件index.ejs，然后将其引入到HTML文件中，接着，我们使用EJS的<%= %>标签将数据插入到模板中，我们使用Node.js的fs模块读取模板文件，并使用EJS的render方法将数据渲染到模板中，然后将结果插入到页面中。