Home 教學 EJS express NodeJS Node + Express 完全新手教學 - 3 [Template - EJS 介紹 + 使用]

Node + Express 完全新手教學 - 3 [Template - EJS 介紹 + 使用]

下午5:47:00
Read
下午5:47:00
前言:
Template Engine:

當然現在線上有多的JavaScript Template
比較多人知道的就是Jade 跟 EJS


[有javascript or php背景的 推薦用]
EJS



[有html&&python的 推薦用]
Jade 

原因: 因為python 都很習慣縮排這件事情 and 對html tag必須要熟悉



[有些可以關注的]
　
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畫面


Tags :
技術提供：Blogger.