正文

学会EJS布局：轻松打造网页模板，从入门到实践

/0 浏览量
0704

EJS（Embedded JavaScript）是一种流行的模板引擎，它允许你将HTML代码与JavaScript代码嵌入到一起，以动态生成HTML页面。EJS在Node.js开发中非常流行，它使得创建具有动态内容的网页变得简单而高效。本文将带你从入门到实践，一步步学会使用EJS布局。

一、EJS简介

EJS是一种服务器端模板引擎，它允许你将HTML模板与JavaScript代码混合编写。当你运行EJS模板时，它会执行其中的JavaScript代码，并将结果插入到HTML模板中，最终生成完整的HTML页面。

1.1 EJS的特点

  • 嵌入JavaScript：在HTML模板中直接嵌入JavaScript代码，实现动态渲染。
  • 简单易用：学习曲线平缓，易于上手。
  • 高性能：EJS模板编译为高效的JavaScript代码，执行速度快。
  • 广泛支持：在Node.js、Express等框架中得到广泛应用。

1.2 EJS的应用场景

  • 动态网页：生成具有动态内容的网页，如新闻网站、博客等。
  • 电商网站：实现商品列表、购物车等功能。
  • 后台管理系统：构建用户界面和数据处理逻辑。

二、EJS入门

2.1 安装Node.js

首先，确保你的计算机上已安装Node.js。你可以从官网（https://nodejs.org/）下载并安装。

2.2 创建项目

在命令行中，创建一个新的Node.js项目：

mkdir my-ejs-project
cd my-ejs-project
npm init -y

2.3 安装EJS

在项目中安装EJS：

npm install ejs

三、EJS布局实践

3.1 创建HTML模板

在项目根目录下创建一个名为index.ejs的文件，并编写以下HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS模板示例</title>
</head>
<body>
    <h1>欢迎来到我的EJS网页</h1>
    <p>这是一个EJS模板示例。</p>
    <p>当前时间：{{datetime}}</p>
</body>
</html>

3.2 使用EJS渲染模板

在项目根目录下创建一个名为app.js的文件，并编写以下Node.js代码：

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

// 设置静态文件目录
app.use(express.static('public'));

// 设置模板引擎
app.set('view engine', 'ejs');

// 渲染模板
app.get('/', (req, res) => {
    const datetime = new Date().toLocaleString();
    res.render('index', { datetime });
});

// 启动服务器
app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

3.3 运行项目

在命令行中，运行以下命令启动项目：

node app.js

打开浏览器，访问http://localhost:3000，即可看到渲染后的EJS模板页面。

四、总结

通过本文的学习，你已掌握了EJS布局的基本知识和实践方法。EJS是一种强大的模板引擎，可以帮助你轻松打造动态网页。在实际开发中，你可以根据需求对EJS模板进行扩展和优化，以实现更丰富的功能。祝你学习愉快！

-- 展开阅读全文 --