正文

掌握EJS模板语言：轻松实现页面动态渲染的标识技巧

/0 浏览量
0409

在Web开发中，页面动态渲染是一项非常重要的技能。EJS（Embedded JavaScript）模板语言是Node.js环境下非常流行的一种模板引擎，它允许开发者将JavaScript代码嵌入到HTML页面中，从而实现动态渲染。下面，我将详细介绍EJS模板语言的使用方法，帮助你轻松实现页面动态渲染。

EJS简介

EJS是一种简单的模板语言，它使用类似HTML的语法，并允许你将JavaScript代码嵌入到HTML页面中。使用EJS，你可以轻松地实现数据绑定、条件渲染、循环渲染等功能。

安装EJS

首先，你需要在你的Node.js项目中安装EJS。可以通过以下命令完成安装：

npm install ejs

基本语法

1. 变量插入

在EJS中，你可以使用<%= %>标签将变量插入到HTML页面中。例如：

<!DOCTYPE html>
<html>
<head>
    <title>EJS模板语言</title>
</head>
<body>
    <h1><%= title %></h1>
    <p><%= description %></p>
</body>
</html>

在这个例子中，title和description是传递给模板的数据。

2. 条件渲染

EJS支持类似JavaScript的条件语句。使用<% %>标签可以实现条件渲染。例如：

<% if (user) { %>
    <h1>Welcome, <%= user.name %>!</h1>
<% } else { %>
    <h1>Please log in.</h1>
<% } %>

在这个例子中，如果用户已登录，则会显示用户的名字，否则会提示用户登录。

3. 循环渲染

EJS支持<% %>标签进行循环渲染。例如：

<ul>
    <% users.forEach(function(user) { %>
        <li><%= user.name %></li>
    <% }); %>
</ul>

在这个例子中，将遍历users数组，并为每个用户创建一个列表项。

实战案例

下面，我将通过一个简单的示例来展示如何使用EJS实现页面动态渲染。

1. 创建项目目录

首先，创建一个名为ejs-example的项目目录，并在其中创建以下文件：

  • package.json
  • views/index.ejs
  • views/layout.ejs
  • app.js

2. 配置项目

在package.json中，添加以下内容：

{
  "name": "ejs-example",
  "version": "1.0.0",
  "main": "app.js",
  "dependencies": {
    "ejs": "^3.1.6"
  }
}

3. 编写EJS模板

在views/index.ejs中，编写以下内容：

<!DOCTYPE html>
<html>
<head>
    <title>EJS Example</title>
</head>
<body>
    <h1><%= title %></h1>
    <p><%= description %></p>
    <ul>
        <% users.forEach(function(user) { %>
            <li><%= user.name %></li>
        <% }); %>
    </ul>
</body>
</html>

在views/layout.ejs中，编写以下内容：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <%= body %>
</body>
</html>

4. 编写Node.js代码

在app.js中，编写以下内容：

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

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    const title = 'EJS Example';
    const description = 'This is an example of EJS template language.';
    const users = [
        { name: 'Alice' },
        { name: 'Bob' },
        { name: 'Charlie' }
    ];

    res.render('layout', { title, description, body: 'index' });
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

5. 运行项目

在命令行中，执行以下命令启动服务器：

node app.js

打开浏览器，访问http://localhost:3000，你将看到以下页面：

<h1>EJS Example</h1>
<p>This is an example of EJS template language.</p>
<ul>
    <li>Alice</li>
    <li>Bob</li>
    <li>Charlie</li>
</ul>

总结

通过本文的介绍，相信你已经掌握了EJS模板语言的基本用法。EJS可以帮助你轻松实现页面动态渲染，提高开发效率。在实际项目中，你可以根据需要灵活运用EJS的各种功能，让你的Web应用更加丰富和生动。

-- 展开阅读全文 --