前言
Express.js 是一款开源的 Node.js Web 应用程序框架，具有轻量、灵活等优点，是前端开发人员常用的后端技术。在实现动态 Web 页面时，HTML 文件的渲染是必不可少的一环，而在使用 Express.js 进行开发时，常用的方法有如下三种：
- 使用 res.sendfile() 方法直接发送 HTML 文件。
- 使用 res.render() 方法结合模板引擎渲染 HTML 文件。
- 使用静态目录挂载方法可以生成静态 HTML 页面。
下面本文将详细介绍上述方法的使用，以及其深度和学习指导意义。
方法一：res.sendfile()
res.sendfile() 方法是 Express 中直接发送 HTML 文件最简单的方法，其语法格式为：
res.sendfile(path [, options] [, callback])
其中，path 表示要发送的 HTML 文件路径；options 用于设置一些选项，比如选项中的 root 表示文件路径的根目录；callback 是一个回调函数。
示例代码：
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
app.get('/sendfile', (req, res) => {
res.sendfile(__dirname + '/index.html');
});
app.listen(3000, () => {
console.log('App listening on port 3000!');
});上述代码表示当访问 /sendfile 路径时，将返回服务器根目录下的 index.html 文件。
方法二：res.render()
res.render() 方法是 Express 中常用的渲染 HTML 文件的方法，其结合了模板引擎的特点，可以实现变量替换、循环等操作。它的语法格式如下：
res.render(view [, locals] [, callback])
其中，view 表示要渲染的 HTML 文件的路径及名称；locals 是一个对象，用于传递给 HTML 文件中的变量；callback 是一个回调函数。
示例代码：
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs'); // 指定模板引擎为 EJS
app.get('/render', (req, res) => {
res.render('index', {
title: '这是一个标题',
content: '这是一个内容'
});
});
app.listen(3000, () => {
console.log('App listening on port 3000!');
});上述代码表示当访问 /render 路径时，将渲染 views 目录下的 index.ejs 文件，并将 title 和 content 两个变量传递进去。
方法三：静态目录挂载方法
静态目录挂载方法是 Express 中对于生成静态 HTML 页面的方法，通过这种方法，可以将静态页面保存在服务器的某个目录下，从而实现在线访问。其语法格式如下：
app.use(express.static(path))
其中，path 表示静态 HTML 文件所在的路径。
示例代码：
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/public'));
app.listen(3000, () => {
console.log('App listening on port 3000!');
});上述代码表示将 public 目录下的所有静态 HTML 文件挂载到 Express 中。当访问 /index.html 路径时，将返回服务器根目录下的 public/index.html 文件。
总结
本文介绍了 Express.js 中常见的三种渲染 HTML 文件方法，分别是使用 res.sendfile() 方法直接发送 HTML 文件、使用 res.render() 方法结合模板引擎渲染 HTML 文件，以及使用静态目录挂载方法可以生成静态 HTML 页面。不同的方法适用于不同的场合，开发人员可以根据需求进行选择。此外，开发人员在使用 Express.js 进行开发时，还需要了解相关的知识，比如路由、中间件等概念。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654efc967d4982a6eb808f61