详解Express笔记之动态渲染HTML(新手入坑)

下面我将详细讲解“详解Express笔记之动态渲染HTML(新手入坑)”完整攻略，具体内容如下：

什么是动态渲染HTML

动态渲染HTML是指在服务器端生成HTML代码，并将其发送到客户端显示，与静态HTML文件不同，静态HTML文件是在客户端本地存储的HTML文件，而动态渲染HTML是根据客户端请求的不同数据动态生成不同的HTML网页。动态渲染HTML主要是由服务器端脚本语言，如Node.js、PHP、Python等来实现的。其中，Node.js的Express框架可以实现快速的、灵活的动态渲染HTML。

如何使用Express实现动态渲染HTML

使用Express实现动态渲染HTML需要借助View Engine，常见的View Engine有EJS和Pug两种。这里我们以EJS为例进行讲解。

步骤一：安装EJS模板引擎

在使用EJS模板引擎前，需要先通过npm安装。可以在终端输入以下命令进行安装：

npm install ejs --save

步骤二：配置Express应用程序

在Express应用程序中，需要设置EJS模板引擎作为默认的View Engine。可以通过以下代码进行配置：

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

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

步骤三：创建EJS模板文件

在Express应用程序中，需要创建EJS模板文件，包含HTML页面的具体结构和样式。模板文件的后缀名为.ejs。以下是一个简单的模板文件示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><%= title %></title>
</head>
<body>
    <h1><%= heading %></h1>
    <p><%= content %></p>
</body>
</html>

步骤四：动态渲染HTML页面

最后，在Express应用程序中，需要通过res.render()函数来动态渲染HTML页面。可以通过以下代码对前面创建的模板文件进行动态渲染：

app.get('/', function(req, res) {
    const heading = 'Welcome to EJS Tutorial';
    const content = 'This is a tutorial about EJS template engine';
    res.render('home', {heading: heading, content: content});
});

在上面的代码中，我们设置了一个路由，当访问'/'时，会渲染出名为'home'的EJS模板文件，并且向模板文件传递了两个参数：heading和content。

示例说明

以下是两个简单的示例，演示了如何使用Express实现动态渲染HTML：

示例一：在Express中使用EJS模板引擎

在这个示例中，我们将创建一个基于Express和EJS的简单网站。首先，需要安装并引入依赖项（Express和EJS），并设置应用程序：

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

app.use(express.static('public'));

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

app.listen(3000, function() {
    console.log('Server started on port 3000');
});

在应用程序中，我们通过express.static()中间件来指示Express将静态文件提供给客户端。设置View Engine为EJS的方式在上面已经讲过了。

接下来，我们创建一个EJS模板文件index.ejs，实现以下功能：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><%= title %></title>
</head>
<body>
    <h1><%= heading %></h1>
    <p><%= content %></p>
</body>
</html>

在这个模板文件中，我们使用了EJS的语法，通过<%= ... %>标记来实现对数据的动态渲染。

下面，我们在Express应用程序中添加路由，操作请求并返回数据：

app.get('/', function(req, res) {
    const title = 'Home';
    const heading = 'Welcome to my website';
    const content = 'This is a sample web application built with Node.js and EJS.';
    res.render('index', {title: title, heading: heading, content: content});
});

在这个路由函数中，我们创建了三个参数：title、heading和content，并向模板文件传递了这三个参数。最后，通过res.render()函数将结果渲染到EJS模板文件中。

示例二：在Express中使用Pug模板引擎

在这个示例中，我们将创建一个基于Express和Pug的简单网站。首先，需要安装并引入依赖项（Express和Pug），并设置应用程序：

const express = require('express');
const app = express();
app.use(express.static('public'));

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

app.listen(3000, function() {
    console.log('Server started on port 3000');
});

在应用程序中，我们通过express.static()中间件来指示Express将静态文件提供给客户端。设置View Engine为Pug的方式在上面已经讲过了。

接下来，我们创建一个Pug模板文件index.pug，实现以下功能：

html
    head
        meta(charset='utf-8')
        title= title
    body
        h1= heading
        p= content

在这个模板文件中，我们使用了Pug的语法（基于缩进），以更简洁的方式来表达同样的意思。