express渲染html页面

一、场景描述

当我们使用express框架进行node项目开发时,虽然现在大多都是前后端分离,但是偶尔后端也需要渲染个别页面。
当我们创建好express项目时,访问localhost:3000时会出现如下页面
在这里插入图片描述
当我们查看代码时会发现
在这里插入图片描述
它实际上渲染了一个index.jade页面
在这里插入图片描述
至于什么是jade页面大家可以自行了解。
但是我们一般都是熟悉HTML页面。下面就来实现express渲染HTML页面

二、目录配置

1. 页面文件配置

查看express项目的目录,我们可以看到express默认将页面文件存放到views目录下。
在这里插入图片描述
实际上这也是可以配置的,打开app.js有这两句代码:

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

在这里插入图片描述
从注释我们也可以看到是‘页面引擎设置’

app.set('views', path.join(__dirname, 'views'));:配置‘views’代表路径‘views/’
res.render('index', { title: 'Express' });:会默认使用’views‘,也就是这里的index相当于views/index相当于path.join(__dirname, 'views')/index
如果我们想修改存放位置,只需要修改path.join方法中的views即可
例如:app.set('views', path.join(__dirname, 'template'));
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
修改静态文件存放地址app.use(express.static(path.join(__dirname, 'public')));是一个道理,这里就不再描述。

2. 配置ejs

我们想让express识别html文件,需要借助ejs库实现

npm install ejs

将:

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

修改为:

app.engine('.html', require('ejs').__express);
app.set('view engine', 'html')

最终情况:
在这里插入图片描述

3. 重新启动

在自己配置的页面文件下新增index.html
在这里插入图片描述
重新启动express项目
访问对应路径
在这里插入图片描述
配置成功

注意:
有时候可能会出现一些特殊情况:
在这里插入图片描述
明明正常配置,浏览器访问时没有出现页面,出现了页面源码
这里我们需要在路由js里面添加服务器返回渲染的type值res.type('html');

const express = require('express');
const router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.type('html');
  res.render('index', { title: 'Express' });
});

module.exports = router;

在这里插入图片描述
重新启动之后,清空浏览器缓存,刷新页面即可。(ps:我个人也不知道这个问题的原因)

  • 2
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Node.js 中进行页面渲染通常涉及使用模板引擎。模板引擎允许你在服务器端生成 HTML 页面,并将它们发送到客户端进行显示。以下是一个简单的示例,展示如何在 Node.js 中使用 Express 框架和 EJS 模板引擎进行页面渲染: 首先,确保已经安装了 Express 和 EJS: ``` npm install express ejs ``` 然后,创建一个名为 `app.js` 的文件,并添加以下代码: ```javascript const express = require('express'); const app = express(); // 设置 EJS 作为默认模板引擎 app.set('view engine', 'ejs'); // 设置存放模板文件的目录(可选) // 默认情况下,Express 会在 views 文件夹中查找模板文件 // 如果你希望使用其他目录,请使用 app.set('views', 'your_folder_path') 进行设置 // 定义路由,渲染页面 app.get('/', (req, res) => { // 渲染名为 'index' 的 EJS 模板文件,并传递数据给模板 res.render('index', { title: 'Node.js 页面渲染示例', message: '欢迎使用 EJS 模板引擎!' }); }); // 启动服务器,监听端口 app.listen(3000, () => { console.log('服务器已启动,监听端口 3000'); }); ``` 接下来,在项目根目录中创建一个名为 `views` 的文件夹,并在其中创建一个名为 `index.ejs` 的文件。在 `index.ejs` 文件中,你可以使用 EJS 的模板语法来定义 HTML 页面的结构和动态内容,如下所示: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title><%= title %></title> </head> <body> <h1><%= message %></h1> </body> </html> ``` 以上代码中,`<%= title %>` 和 `<%= message %>` 是 EJS 的模板语法,用于将传递给模板的数据渲染HTML 页面中。 最后,在命令行中运行 `node app.js` 启动服务器,并打开浏览器访问 `http://localhost:3000`,你将看到渲染后的页面页面的标题和消息来自于我们在路由中传递给模板的数据。 这只是一个简单的示例,你可以根据需求使用不同的模板引擎和更复杂的模板语法进行页面渲染

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值