正文

轻松学会EJS：一步步教你如何渲染HTML模板

/0 浏览量
0604

EJS（Embedded JavaScript）是一种流行的服务器端模板引擎，常用于Node.js环境中。它允许开发者将JavaScript代码嵌入到HTML模板中，从而在服务器端动态生成HTML页面。学会使用EJS，可以让你更高效地构建动态网页。下面，我们就一步步来学习如何使用EJS渲染HTML模板。

一、安装Node.js和Express

在使用EJS之前，首先需要安装Node.js和Express。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，Express是一个流行的Node.js Web应用框架。

1. 安装Node.js

  1. 访问Node.js官网（https://nodejs.org/）下载适合你操作系统的安装包。
  2. 运行安装包，按照提示完成安装。

2. 安装Express

  1. 打开命令行窗口。
  2. 输入以下命令安装Express：
npm install express --global

二、创建Express项目

  1. 创建一个新的文件夹，用于存放你的Express项目。
  2. 打开命令行窗口，进入该文件夹。
  3. 输入以下命令初始化项目：
express myapp

这个命令会创建一个名为myapp的Express项目，其中包含了基本的文件结构。

三、安装EJS

  1. 进入项目目录：
cd myapp
  1. 输入以下命令安装EJS：
npm install ejs --save

四、配置EJS

  1. 打开app.js文件，找到以下代码：
app.set('view engine', 'ejs');

这段代码设置了Express使用EJS作为模板引擎。

五、创建HTML模板

  1. 在项目目录下创建一个名为views的文件夹。
  2. 在views文件夹中创建一个名为index.ejs的文件，并输入以下内容：
<!DOCTYPE html>
<html>
<head>
    <title>EJS模板</title>
</head>
<body>
    <h1>Hello, <%= title %></h1>
    <p>This is an EJS template.</p>
</body>
</html>

在这个模板中，<%= title %>是一个EJS表达式，它会将title变量的值渲染到页面中。

六、渲染HTML模板

  1. 修改app.js文件，找到以下代码：
app.get('/', function(req, res) {
    res.render('index', { title: 'EJS世界' });
});

这段代码定义了一个路由，当用户访问根目录时，会渲染index.ejs模板，并将title变量的值设置为'EJS世界'。

  1. 保存app.js文件，并在命令行窗口中运行以下命令启动服务器：
node app.js
  1. 打开浏览器，访问http://localhost:3000/，你将看到以下页面：
<!DOCTYPE html>
<html>
<head>
    <title>EJS世界</title>
</head>
<body>
    <h1>Hello, EJS世界</h1>
    <p>This is an EJS template.</p>
</body>
</html>

七、总结

通过以上步骤，你已经学会了如何使用EJS渲染HTML模板。EJS是一个强大的模板引擎，可以帮助你快速构建动态网页。在后续的学习中，你可以进一步探索EJS的高级特性，如条件语句、循环语句等。祝你学习愉快！

-- 展开阅读全文 --