https://www.kdzone.net/2016/01/node-express-3-template-ejs.html
當然現在線上有多的JavaScript Template
比較多人知道的就是Jade 跟 EJS
[有javascript or php背景的 推薦用]
EJS
[有html&&python的 推薦用]
Jade
[有些可以關注的]
1.感覺很快，但是目前還在bate板當中可以關注 - Paperclip.js
2.由twitter開發的- Hogan
3.這個是跟是我自己有在關注的 Jiko
當然還有更多只是我們今天已EJS作為一個教學
實作EJS:
1.先安裝EJS
npm install ejs --save
2.修改
app.js
var express = require('express');
var app = express();
app.set('view engine', 'ejs');
app.get('/', function(req, res) {
res.render('default', {
title: '首頁',
users: ['Kai', 'aYen', 'Kyousuke']
});
});
app.get('/me', function(req, res) {
res.send('<h1>我的FB</h1>' + 'https://www.facebook.com/witkaiy');
});
app.get('/who/:name?', function(req, res) {
var name = req.params.name;
res.send(name + ' 在這邊歐');
});
app.get('/who/:name?/:title?', function(req, res) {
var name = req.params.name;
var title = req.params.title;
res.send('<p>名稱: ' + name + '<br>值稱: ' + title + '</p>');
});
app.get('*', function(req, res) {
res.send('沒有東西噢');
});
var server = app.listen(3000, function() {
console.log('Listening on port 3000');
});
3.新增
./views/default.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實作EJS</title>
</head>
<body>
<h1><%= title %></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quod, praesentium dolor velit culpa cupiditate odio nihil voluptates aliquid eum dolore eligendi quas nobis nam nesciunt odit pariatur minus cum.</p>
<ul>
<% for(var i=0; i<users.length; i++) {%>
<li><%= users[i] %></li>
<% } %>
</ul>
</body>
</html>
1.這邊看到第一個不同的是:
app.set('view engine', 'ejs');
這邊我宣告了我們的view engine為ejs
然後render default 這一頁面 我們可以看到render出來的畫面,是把
{
title: '首頁',
users: ['Kai', 'aYen', 'Kyousuke']
}
宣告的資料 放進去後產出HTML畫面
沒有留言:
張貼留言