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

在使用 Express 框架开发 Node.js 应用时,显示 HTML 页面是常见的需求。Express 提供了多种方式来渲染和响应 HTML 内容,具体方法取决于你是返回静态页面还是动态生成内容。
直接发送 HTML 字符串
如果你只需要返回简单的 HTML 内容,可以直接使用 res.send() 方法发送字符串形式的 HTML。
示例:
const express = require('express');const app = express();app.get('/', (req, res) => { res.send('欢迎来到首页
这是一个简单的HTML页面
');});app.listen(3000, () => { console.log('服务器运行在 http://localhost:3000');});
这种方式适合调试或返回极简内容,不适合复杂页面。
发送静态 HTML 文件
对于已存在的 HTML 文件(如 index.html),推荐使用 res.sendFile() 方法。
假设项目结构如下:
立即学习“前端免费学习笔记(深入)”;
/project /public index.html app.js
代码示例:
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:
当前时间:
在路由中渲染:
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页面渲染与响应方法的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1596852.html
微信扫一扫
支付宝扫一扫