1. 犀牛前端部落首页
  2. Express教程

Express使用模板

Express使用模板

Express能够处理服务器端模板引擎。模板引擎允许我们向视图中添加数据,并动态生成HTML。

Express使用Jade作为默认值。Jade是旧版本的Pug,特别是Pug 1.0。

2016年该项目发布第二版时,由于商标问题,公司名称由Jade改为Pug。你仍然可以使用Jade,也就是Pug 1.0,但是以后最好还是使用Pug 2.0。

尽管Jade的上一个版本已经使用了3年(撰写本文时是2018年夏天),但由于向后兼容性的原因,它仍然是Express的默认版本。

在任何新项目中,都应该使用Pug或其他选择的引擎。Pug的官方网站是:https://pugjs.org/

您可以使用许多不同的模板引擎,包括Pug、Handlebars、Mustache、EJS等。

使用Pug

要使用Pug,我们必须先安装它:

npm install pug

在初始化Express app时,我们需要设置:

const express = require('express')
const app = express()
app.set('view engine', 'pug')

我们现在可以开始在.pug文件中编写模板了。

创建一个about视图:

app.get('/about', (req, res) => {
  res.render('about')
})

视图/about.pug中的模板:

p Hello from Flavio

这个模板将创建一个p标签,内容为来自Flavio的Hello。

你可以使用插值变量:

app.get('/about', (req, res) => {
  res.render('about', { name: 'Flavio' })
})
p Hello from #{name}

这是对Pug的一个非常简短的介绍,并将其与Express结合使用。有关如何使用Pug的更多信息,请参阅Pug指南。

如果您习惯于模板引擎使用HTML和插值变量,比如车把(下面将介绍),那么您可能会遇到问题,特别是当您需要将现有的HTML转换为Pug时。这个从HTML到Jade(非常类似,但与Pug略有不同)的在线转换器将提供很大的帮助:https://jsonformatter.org/html-to-jade

使用 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- response -views包在服务器端呈现React应用程序。

从npm开始安装express- response -views react- response -dom。

现在不需要hbs,我们需要express- response -views并使用它作为引擎,使用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文件夹下,然后打开首页,将会返回字符串” Hello from Flavio “:

const React = require('react')

class HelloMessage extends React.Component {
  render() {
    return <div>Hello from {this.props.name}</div>
  }
}

module.exports = HelloMessage

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/4734.html

发表评论

登录后才能评论