Express Templates

Express có khả năng xử lý các công cụ mẫu phía máy chủ. Công cụ mẫu cho phép chúng tôi thêm dữ liệu vào chế độ xem và tạo HTML động.

Express có khả năng xử lý các công cụ mẫu phía máy chủ.

Công cụ mẫu cho phép chúng tôi thêm dữ liệu vào chế độ xem và tạo HTML động.

Express sử dụng Jade làm mặc định. Jade là phiên bản cũ của Pug, cụ thể là Pug 1.0.

Tên đã được đổi từ Jade thành Pug do vấn đề nhãn hiệu vào năm 2016, khi dự án phát hành phiên bản 2. Bạn vẫn có thể sử dụng Jade, hay còn gọi là Pug 1.0, nhưng về sau, tốt nhất nên sử dụng Pug 2.0

Mặc dù phiên bản cuối cùng của Jade đã được 3 năm tuổi (tại thời điểm viết bài, mùa hè 2018), nó vẫn là phiên bản mặc định trong Express vì lý do tương thích ngược.

Trong bất kỳ dự án mới nào, bạn nên sử dụng Pug hoặc một động cơ khác mà bạn chọn. Trang web chính thức của Pug làhttps://pugjs.org/.

Bạn có thể sử dụng nhiều công cụ mẫu khác nhau, bao gồm Pug, Handlebars, Mustache, EJS và hơn thế nữa.

Sử dụng Pug

Để sử dụng Pug trước tiên chúng ta phải cài đặt nó:

npm install pug

và khi khởi tạo ứng dụng Express, chúng ta cần đặt nó:

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

Bây giờ chúng tôi có thể bắt đầu viết các mẫu của chúng tôi trong.pugcác tập tin.

Tạo chế độ xem giới thiệu:

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

và mẫu trongviews/about.pug:

p Hello from Flavio
This template will create a p tag with the content Hello from Flavio.


You can interpolate a variable using


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

p Hello from #{name}
This is a very short introduction to Pug, in the context of using it with Express. Look at the Pug guide for more information on how to use Pug.


If you are used to template engines that use HTML and interpolate variables, like Handlebars (described next), you might run into issues, especially when you need to convert existing HTML to Pug. This online converter from HTML to Jade (which is very similar, but a little different than Pug) will be  a great help: https://jsonformatter.org/html-to-jade




Also see the differences between Jade and Pug




Using Handlebars


Let’s try and use Handlebars instead of Pug.


You can install it using npm install hbs.


Put an about.hbs template file in the views/ folder:


Hello from {{name}}
and then use this Express configuration to serve it on /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’))



You can also render a React application server-side, using the express-react-views package.


Start with npm install express-react-views react react-dom.


Now instead of requiring hbs we require express-react-views and use that as the engine, using jsx files:


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’))



Just put an about.jsx file in views/, and calling /about should present you an “Hello from Flavio” string:


const React = require('react')

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


module.exports = HelloMessage


  

  
Download my free Express.js Handbook

  




More express tutorials:

Công nghệ Wiki trực tuyến!