完整程式碼，請洽: https://github.com/Zrn-code/Node-js-tutorial/tree/node-07
# ejs 預覽引擎
# 安裝
npm i ejs |
# 使用
app.set('view engine','ejs'); |
並將 index.html 、 about.html 、 create.html 的副檔名改成 index.ejs 、 about.ejs 、 create.ejs 。
app.get('/',(req,res)=>{ | |
app.render('index'); | |
}); | |
app.get('/about',(req,res)=>{ | |
app.render('about'); | |
}); | |
app.get('/blogs/create',(req,res)=>{ | |
app.render('create'); | |
}); |
# 傳送資料到預覽
# 傳送一個資料
app.get('/',(req,res)=>{ | |
app.render('index', { title: 'Home' }); | |
}); | |
app.get('/about',(req,res)=>{ | |
app.render('about', { title: 'About' }); | |
}); | |
app.get('/blogs/create',(req,res)=>{ | |
app.render('create',{ title: 'Create A New Blog'}); | |
}); | |
app.use((req,res)=>{ | |
res.statusCode(404).render('404',{ title: '404' }) | |
}); |
# 使用
<title>Blogs | <%= title %></title> |
# 傳送多筆資料
app.get('/',(req,res)=>{ | |
const blogs = [ | |
{ title: 'Blogs 1', snippet: 'Snippet 1' }, | |
{ title: 'Blogs 2', snippet: 'Snippet 2' }, | |
{ title: 'Blogs 3', snippet: 'Snippet 3' } | |
]; | |
app.render('index', { title: 'Home', blogs }); | |
}); |
# 使用
<div class="blogs content"> | |
<h2>All Blogs</h2> | |
<% if (blogs.length > 0) { %> | |
<% blogs.forEach(blog = >{ %> | |
<h3 class= "title"><%= blog.title %></h3> | |
<p class="snippet"><%= blog.snippet %></p> | |
<% }) %> | |
<% } else |
