Express 可以处理服务器端模板引擎。模板引擎允许我们向视图中添加数据,并根据数据动态生成 HTML。
Express 默认使用 Jade 作为模板引擎,但 Jade 是 Pug 的旧版,具体来说是 Pug 1.0。
由于商标问题,该项目在 2016 年发布了 2.0 版本时将名称从 Jade 更改为 Pug。你仍然可以使用 Jade,即 Pug 1.0,但未来最好使用 Pug 2.0。
尽管 Jade 的最后一个版本已经有三年时间了(截至文章撰写时的夏季 2018),但在 Express 中仍然是默认设置,这是为了向后兼容。
在任何新项目中,你应该使用 Pug 或其他你选择的引擎。Pug 的官方网站是 https://pugjs.org/。
你可以使用许多不同的模板引擎,包括 Pug、Handlebars、Mustache、EJS 等。
使用 Pug
首先我们需要安装 Pug:
npm install pug
在初始化 Express 应用程序时,我们需要设置 Pug:
const express = require('express')
const app = express()
app.set('view engine', 'pug')
现在我们可以开始在 .pug
文件中编写模板了。
创建一个关于页面的视图:
app.get('/about', (req, res) => {
res.render('about')
})
然后在 views/about.pug
中创建模板:
p Hello from Flavio
这个模板会生成一个带有内容为 Hello from Flavio
的 p
标签。
你可以使用变量插值:
app.get('/about', (req, res) => {
res.render('about', { name: 'Flavio' })
})
p Hello from #{name}
以上是一个关于如何在 Express 中使用 Pug 的简单介绍。如果想了解有关如何使用 Pug 的更多信息,请参考 Pug 指南。
如果你习惯使用使用 HTML 和变量插值的模板引擎,比如 Handlebars(后面会描述),那么在你需要将现有的 HTML 转换为 Pug 时可能会遇到一些问题。这个在线转换器可以帮助你将 HTML 转换为 Jade(比 Pug 稍微有些不同): https://jsonformatter.org/html-to-jade
也可以参考 Jade 和 Pug 的区别
使用 Handlebars
让我们尝试使用 Handlebars 而不是 Pug。
你可以使用 npm install hbs
进行安装。
将一个 about.hbs
模板文件放在 views/
文件夹中:
Hello from {{name}}
然后使用以下 Express 配置将其作为 /about
服务:
const express = require('express')
const app = express()
const hbs = require('hbs')
app.set('view engine', 'hbs')
app.set('views', path.join(__dirname, 'views'))
app.get('/about', (req, res) => {
res.render('about', { name: 'Flavio' })
})
app.listen(3000, () => console.log('Server ready'))
你还可以使用 express-react-views
包来 服务器端渲染 React 应用程序。
开始使用 npm install express-react-views react react-dom
进行安装。
现在,我们需要 require
express-react-views
替代 hbs
并将其作为引擎,可以使用 jsx
文件:
const express = require('express')
const app = express()
app.set('view engine', 'jsx')
app.engine('jsx', require('express-react-views').createEngine())
app.get('/about', (req, res) => {
res.render('about', { name: 'Flavio' })
})
app.listen(3000, () => console.log('Server ready'))
只需要将一个 about.jsx
文件放在 views/
中,然后访问 /about
即可看到一个字符串 “Hello from Flavio”:
const React = require('react')
class HelloMessage extends React.Component {
render() {
return <div>Hello from {this.props.name}</div>
}
}
module.exports = HelloMessage