初步嘗試Express&jade快速建站

最近一直在看Web開發相關的書籍，一周時間讀完了《Node開發指南》一書，由於之前瞭解過一些Node的相關知識，於是前面基礎知識學得比較快，到開發實踐這一章的時候，卻發現好多內容不能跟著練習了。因為近幾年Node的發展過於快速，其Web開發架構 Express 必然也更新得比較頻繁，並且版本與版本之間差異較大。所以，書中必然有好多代碼在現在來看肯定運行不了，但是大體的架構還是在那裡，想動手實踐還是得對照著官方文檔進行。

1. 產生Express項目

根據 官方文檔入門 的介紹，根據Express建站的步驟大致寫一下：

1. npm install express 安裝express
2. npm install express-generator -g 安裝express應用產生器
3. express myapp 產生express項目目錄以及基本啟動代碼
4. DEBUG=myapp npm start 啟動應用（Mac or Linux）； set DEBUG=myapp & npm start 啟動應用（Windows）
5. 瀏覽器訪問 http://localhost:3000

通過上面幾步很快就完成了一個項目的部署，那麼接下來就是要往裡填寫內容了，用架構開發就是這麼快，但是會忽略掉很多重要的細節。

開啟 myapp 檔案夾，會看到該項目的目錄結構如下：

.├── app.js├── bin│   └── www├── package.json├── public│   ├── images│   ├── javascripts│   └── stylesheets│       └── style.css├── routes│   ├── index.js│   └── users.js└── views    ├── error.jade    ├── index.jade    └── layout.jade

瞭解過一些Node的相關知識就知道，Node是通過動態網頁的方式來實現網站的，就如同其他語言Java、PHP一樣，要實現動態網頁面就要在HTML模板中插入程式碼，於是就有了JSP、PHP以及ASP等技術。通過JavaScript實現的模板引擎有很多， Jade 就是其中之一，為什麼選擇它，因為Express預設就是它，反正也是新接觸，那就它咯。

2. Jade 模板引擎

由於新學，也沒有什麼經驗可談，基本用法參考官網就可以了。這類語言基本上看一遍就百分之八九十了，接下來就是熟練使用它。

• Jade Template Syntax Documentation by Example
• Jade —— 源於 Node.js 的 HTML 範本引擎 - 新聞 - SegmentFault

3. 回頭看看 app.js

// view engine setupapp.set('views', path.join(__dirname, 'views'));app.set('view engine', 'jade');

這裡就是設定 Jade 模板引擎以及視圖目錄的地方。

4. 編寫路由規則

編寫路由規則，開啟 routes/index.js 檔案，添加4條路由規則，代表4個不同的頁面。

/* GET home page. */router.get('/', function(req, res, next) {  res.render('index', { title: 'Home Page'});});/* GET detail page. */router.get('/detail/:id', function(req, res, next) {  res.render('detail', { title: 'Detail Page'});});/* GET admin page. */router.get('/admin', function(req, res, next) {  res.render('admin', { title: 'Admin Page'});});/* GET list page. */router.get('/list', function(req, res, next) {  res.render('list', { title: 'List Page'});});

5. 瞧瞧 jade 模板視圖檔案

開啟 views/layout.jade

doctype htmlhtml  head    title= title    link(rel='stylesheet', href='/stylesheets/style.css')  body    block content

看了一遍 jade 文法的基本就能看出這是一個基本頁面,然後再開啟 views/index.jade 。

extends layoutblock content  h1= title  p Welcome to #{title}

路由規則中， title 變數就用與此處，如此即為動態網頁面。 npm start 啟動應用，訪問 http://localhost:3000 得到頁面如。

6. 依次建立 detail 、 list 、 admin 頁面

根據路由規則所規定的訪問路徑，依次訪問，會得到不同的動態網頁面。

