express如何显示html_Express框架中HTML页面渲染与响应方法-html教程-PHP中文网

express如何显示html_Express框架中HTML页面渲染与响应方法

看不見的法師

发布： 2025-11-18 22:57:42

原创

878人浏览过

Express中返回HTML有四种方式：res.send()发送简单HTML字符串；res.sendFile()返回静态文件需用path.join(__dirname)确保路径正确；使用EJS等模板引擎渲染动态数据；通过express.static()托管整个public目录实现多页面静态资源访问。

express如何显示html_express框架中html页面渲染与响应方法

在使用 Express 框架开发 Node.js 应用时，显示 HTML 页面是常见的需求。Express 提供了多种方式来渲染和响应 HTML 内容，具体方法取决于你是返回静态页面还是动态生成内容。

直接发送 HTML 字符串

如果你只需要返回简单的 HTML 内容，可以直接使用 res.send() 方法发送字符串形式的 HTML。

示例：

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

app.get('/', (req, res) => {
  res.send('<h1>欢迎来到首页</h1><p>这是一个简单的HTML页面</p>');
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

登录后复制

这种方式适合调试或返回极简内容，不适合复杂页面。

发送静态 HTML 文件

对于已存在的 HTML 文件（如 index.html），推荐使用 res.sendFile() 方法。

假设项目结构如下：

/project
  /public
    index.html
  app.js

登录后复制

代码示例：

PhotoAid Image Upscaler

PhotoAid出品的免费在线AI图片放大工具

查看详情

立即学习“前端免费学习笔记（深入）”；

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

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(3000);

登录后复制

注意：必须使用绝对路径，__dirname 可确保路径正确。

使用模板引擎渲染动态 HTML

当需要动态数据插入 HTML（如用户信息、文章列表），应使用模板引擎，如 EJS、Pug 或 Handlebars。

以 EJS 为例：

安装 ejs：npm install ejs
设置模板目录和引擎：

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

登录后复制

创建 views/index.ejs：

<h1><%= title %></h1>
<p>当前时间：<%= new Date().toLocaleString() %></p>

登录后复制

在路由中渲染：

app.get('/home', (req, res) => {
  res.render('index', { title: '动态页面示例' });
});

登录后复制

render 方法会自动查找视图文件并注入数据。

托管整个静态资源目录

如果有多页 HTML 或包含 CSS、JS 的完整网站，可使用 express.static() 中间件。

app.use(express.static(path.join(__dirname, 'public')));

登录后复制

将所有静态文件放入 public 目录，访问 /about.html 会自动返回对应文件。

基本上就这些常用方法。根据你的项目需求选择合适的方式：简单内容用 send，单个文件用 sendFile，动态数据配模板引擎，多页面站点用静态托管。不复杂但容易忽略路径和引擎配置细节。

以上就是express如何显示html_Express框架中HTML页面渲染与响应方法的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

HTML表单提交漏洞怎么查找_HTML表单提交漏洞通过代码审查和测试工具查找方法 Windows如何用Git管理HTML学习项目版本？如何在Kate中自定义HTML缩进规则的处理方法 html代码怎么居中_html内容居中显示的多种方法与代码实现 Mac Safari开发菜单怎么强制显示HTML源码？