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：我个人也不知道这个问题的原因）