iT邦幫忙

1

node.js - express #8

pyk 2017-07-21 00:28:5318784 瀏覽

接續上篇的基本設定 第七個應用:開發旅行社網站(1)

第七個應用:開發旅行社網站(2)

接續上次建立完簡單的路由和伺服器,我們要繼續往後做了

Express 常用的view engine是 Jade ,但Jade將HTML標籤完全抽像化,較不容易理解
因此這本書改用 Handlebars

  1. 在資料夾內安裝 Handlebars
npm install --save express3-handlebars

雖然上面寫express3但express4也能使用

  1. 修改 meadowloark.js 設定 handlebars為view engine
var app = express();

//將handlebars作為默認的view engine
var handlebars = require('express3-handlebars')
.create({ defaultLayout:'main' });
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');
  1. 建立資料夾 views 並在底下新增 layouts 資料夾存放模板
  2. 新增 main.handlebars 在layouts的資料夾,作為主模板
<!doctype html>
<html>
<head>
    <title>Meadowlark Travel</title> 
</head>
<body>
    {{{body}}}
</body>
</html>
  1. views 的資料夾底下,新建

home.handlebars

<h1>Welcome to Meadowlark</h1>

about.handlebars

<h1>About Meadowlark Travel</h1>

404.handlebars

<h1>404 - Not Found</h1>

500.handlebars

<h1> 500 - Server Error</h1>

這樣就把view給設定好了
6. 修改路由規則,在meadowlark.js下修改規則

//Home
app.get('/', function(req, res){
	res.render('home');
});

//About
app.get('/about', function(req, res){
	res.render('about');
});

//404
app.use(function(req, res){
	res.status(404);
	res.render('404');
});

//500
app.use(function(err, req, res, next){
	console.error(error.stack);
	res.status(500);
	res.render('500');
});

修正完後重新開啟 http://localhost:3000/ 應該會看到套用main layout後的效果
http://ithelp.ithome.com.tw/upload/images/20170720/20105154vvvSsvD5zP.png

使用view engine後在一般情況下會自動傳回200狀態碼
只需要設定404 500的情況即可


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言