模板引擎

express生成器默认使用jade(pug) 模板引擎。

设置模板引擎:

app.set('view engine', 'jade')

views目录下新建index.jade:

html
  head
    title!= title
  body
    h1!= message

渲染模板:

app.get('/', function (req, res) {
  res.render('index', { title: 'Hey', message: 'Hello there!'})
})

consolidation

consolidation 是一系列模板引擎的集合,可以方便地设置模板引擎。

安装

$ yarn add consolidate

比如要使用 ejs 模板引擎开发项目:

const express = require('express')
const consolidate=require('consolidate')
const expressStatic = require('express-static')
const app = express()
// 配置模板引擎
app.set('view engine', 'html'); // 输出什么东西
app.set('views', './views'); // 模板文件放在哪儿
app.engine('html', consolidate.ejs); // 哪种模板引擎
app.get('/', (req, res)=>{
  console.log(res.datas)
  // 指定渲染模板
  res.render('index.ejs', {data: 'hello'});
})
app.use(expressStatic('./www'))

使用 app.set('view engine', 'html') 设置输出格式为html,使用 app.set('views', './views') 指定存放模板文件的目录,使用 app.engine('html', consolidate.ejs) 设置模板引擎,其中 consolidate.ejs 就是引用了 consolidate 模块的 ejs 模板引擎。

直接使用 res.render('index.ejs', {data: 'hello'}); 就可以使用指定目录下的模板进行渲染。

consolidate 官网列举的可渲染的模板包括:

atpl
bracket
doT.js (website)
dust (unmaintained) (website)
dustjs-linkedin (maintained fork of dust) (website)
eco
ect (website)
ejs (website)
haml
haml-coffee
hamlet
handlebars (website)
hogan (website)
htmling
jade (website)
jazz
jqtpl
JUST
liquor
lodash (website)
marko (website)
mote (website)
mustache
nunjucks (website)
plates
pug (formerly jade) (website)
QEJS
ractive
react
slm
swig (unmaintained)
swig (maintained fork)
teacup
templayed
twig
liquid (website)
toffee
underscore (website)
vash
walrus (website)
whiskers

配合模板引擎搭建web项目

集合以前所学的知识,以及数据库的连接使用 ejs 搭建一款简单的服务器:

const express = require('express')
const expressStatic = require('express-static')
const cookieParser = require('cookie-parser')
const cookieSession = require('cookie-session')
const bodyParser = require('body-parser')
const consolidate=require('consolidate')
const mysql = require('mysql')
const app = express()
// 开启服务器
let server = app.listen(8088, () => {
  let host = server.address().address
  let port = server.address().port
  console.log("应用实例,访问地址为 http://%s:%s", host, port)
})
// 配置模板引擎
app.set('view engine', 'html'); // 输出什么东西
app.set('views', './views'); // 模板文件放在哪儿
app.engine('html', consolidate.ejs); // 哪种模板引擎
// 数据库链接
const conn = mysql.createConnection({
  host: 'localhost',
  port: 3306,
  user: 'root',
  password: 'root',
  database: 'test'
})
// Cookie
app.use(cookieParser('asdfgqwert'))
let arr = []
for (let i = 0; i < 10000; i++) {
  arr.push('keys_' + Math.random());
}
// Session
app.use(cookieSession({
  name: 'zns_sess_id',
  keys: arr,
  maxAge: 20 * 3600 * 1000
}))
// POST 请求体
app.use(bodyParser.urlencoded({
  extended: false
}))
// 路由
app.get('/', (req, res, next) => {
  // console.log('GET: ', req.query)
  // console.log('POST: ', req.body)
  // console.log('cookies: ', req.cookies)
  // console.log('session: ', req.session)
  // console.log('=======================================')
  conn.query('select * from user', (err, data) => {
    if (err) {
      res.status(500).send('database error').end()
    } else {
      res.datas = data
      next()
    }
  })
})
app.get('/', (req, res)=>{
  console.log(res.datas)
  // 指定渲染模板
  res.render('index.ejs', {datas: res.datas});
})
// 静态资源
app.use(expressStatic('./www'))

详细的内容请下载: express-test.zip

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress