node+express+ejs使用模版引擎做的一个示例demo

下面是详细讲解“node+express+ejs使用模版引擎做的一个示例demo”的完整攻略。

什么是Node.js

Node.js是一个基于Chrome V8 JavaScript引擎的开源、跨平台的JavaScript运行环境。它可以使JavaScript在服务器端运行，用于构建快速的网络应用程序。

什么是Express

Express是一个基于Node.js平台的极简、灵活的Web应用开发框架，提供丰富的HTTP工具和插件，可以用来构建各种Web应用、RESTful API等。

什么是EJS

EJS是一款嵌套式的JavaScript模板引擎，可以通过使用JavaScript代码来构建HTML页面和其他格式的文档。

步骤

1. 安装必要的软件：Node.js、Express、EJS。

$npm install node express ejs -save

1. 创建项目目录并进入:

$mkdir node-demo

$cd node-demo

1. 初始化项目:

$npm init

1. 创建Express服务器并引入EJS：

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

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

1. 编写首页面和路由：

app.get('/', function(req, res) {
const data = {
title: 'Node.js、Express和EJS的使用示例',
author: '网站作者'
};
res.render('index', data);
});

1. 创建ejs模板，用于显示数据：

<%= title %>

作者：<%= author %>

1. 启动服务器：

$node app.js

1. 打开浏览器，输入http://localhost:3000/，即可看到显示数据的网页。

示例说明

示例一：使用EJS模板引擎显示数据

以上面的步骤为基础，我们在示例一中使用EJS模板引擎来显示数据。在node-demo/views/目录下新建list.ejs文件，内容如下：

<% if (users.length) { %>

<% users.forEach(function(user) { %>
• <%= user %>

<% }); %>

<% } else { %>

No users :(

<% } %>

然后在app.js中新建/list路由，用于向模板引擎中传递数组数据并进行渲染：

app.get('/list', function(req, res) {
const users = ['user1', 'user2', 'user3'];
const data = {
title: 'Node.js、Express和EJS的使用示例',
users: users
};
res.render('list', data);
});

启动服务器并访问http://localhost:3000/list，即可看到渲染后的页面。

示例二：使用EJS模板引擎继承

在EJS模板引擎中，可以使用继承来避免代码重复。例如，在node-demo/views/目录下新建layout.ejs文件，用于展示重复的HTML代码，内容如下：

<%- include('header') -%>

<%- body -%>

<%- include('footer') -%>

在node-demo/views/目录下新建index.ejs文件，继承layout.ejs，内容如下：

<% layout('layout') %>

<%= title %>

作者：<%= author %>

然后，在node-demo/views/目录下新建header.ejs和footer.ejs文件，用于描述HTML代码的头和尾内容：

• Home
• About
• Contact

© 2021 Node Demo

启动服务器并访问http://localhost:3000/，即可看到渲染后的页面，其中包含了继承和不重复的HTML代码。