使用 EJS 模板引擎的示例

Ai君臣

于 2024-07-25 18:19:21 发布

阅读量334

点赞数 3

文章标签： ejs

本文链接：https://blog.csdn.net/liuchenbaidu/article/details/140696869

版权

使用 EJS 模板引擎的示例

EJS（Embedded JavaScript）是一种简单的模板引擎，允许你在 HTML 中嵌入 JavaScript 代码。以下是一个使用 EJS 模板引擎的完整示例，包括设置 Express.js 项目、配置 EJS 视图引擎和创建 EJS 模板文件。

第一步：设置 Express.js 项目

创建项目目录：

mkdir ejs-example
cd ejs-example
npm init -y

安装 Express 和 EJS：
```
npm install express ejs
```

第二步：创建 Express.js 服务器

在项目根目录下创建一个 server.js 文件，并设置基本的 Express.js 服务器配置：

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

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

// 静态文件中间件
app.use(express.static('public'));

// 路由
app.get('/', (req, res) => {
    const data = { name: "John Doe", age: 26 };
    res.render('index', data);
});

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

第三步：创建 EJS 模板文件

在项目根目录下创建一个 views 文件夹，并在其中创建一个 index.ejs 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EJS Example</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <h1>Welcome to EJS Example</h1>
    <p>Name: <%= name %></p>
    <p>Age: <%= age %></p>
</body>
</html>

第四步：创建静态文件

在项目根目录下创建一个 public 文件夹，并在其中创建一个 styles.css 文件：

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

h1 {
    color: #333;
}

p {
    color: #666;
}

第五步：运行项目

在终端中运行以下命令启动 Express.js 服务器：

node server.js

打开浏览器，访问 http://localhost:3000，你将看到一个包含从服务器传递的数据的网页。

总结

通过以上步骤，你可以创建一个使用 EJS 作为模板引擎的简单 Express.js 应用程序。EJS 允许你在 HTML 中嵌入 JavaScript 代码，使得动态生成 HTML 页面变得非常容易。这种方法非常适合创建动态内容的网站和应用程序。

Ai君臣

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用 EJS 模板引擎的示例

通过以上步骤，你可以创建一个使用 EJS 作为模板引擎的简单 Express.js 应用程序。EJS 允许你在 HTML 中嵌入 JavaScript 代码，使得动态生成 HTML 页面变得非常容易。这种方法非常适合创建动态内容的网站和应用程序。
复制链接

扫一扫