express渲染html页面
- 一、场景描述
- 二、目录配置
- 1. 页面文件配置
- 2. 配置ejs
- 3. 重新启动
一、场景描述
当我们使用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：我个人也不知道这个问题的原因）
