前言：一條線，豎着放，如果做不到精進至深，那就旋轉90°，至少也圖個幅度寬廣。
通俗解釋上面的胡言亂語：還沒學會爬，就學起走了？！
繼上篇《Nodejs學習筆記（二）——Eclipse中運行調試Nodejs》之后，代碼編寫環境就從Sublime轉戰到Eclipse下，感覺順手多了。於是就跟着Scott老師學起了Nodejs建站的課程（推薦大家點進去看看），踏上了未爬先走的路子。
作為一個白里透白的小白來說，今天主要記錄下如何用Nodejs搭建一個小小的網站，以及自己對於這種Nodejs建站的運行邏輯的理解，還有在建站過程中需要安裝一些模塊等遇到的問題，也是借此機會梳理下思路。
1. 創建項目
1.1 鑒於前兩篇的努力，現在已經可以在Eclipse中創建一個Node Project了。所以首先要創建一個Node工程，創建好了如下所示，基本是空空如也。
1.2 隨后要做的就是將項目包裝成一個express模樣的project並且安裝依賴的模塊
進入到項目的上級目錄，執行express imooc_1命令：
再進入到項目目錄下，執行npm install命令
1.3 此時再去刷新Eclipse中項目imooc_1,就可以看到新生成的文件和新的項目結構
其中app.js是入口文件，views目錄下放的是視圖文件，routes負責路由，public放的是一些css等文件，node_modules下面是已安裝和要安裝模塊的存放位置，package.json是項目模塊依賴文件。
2.代碼編寫
為了不把整個項目講的雲里霧里的，這里先上文件(注：這里的代碼主要參考了Scott老師以及一位兄弟的git上的代碼，在此謝過^_^)
項目的各文件目錄結構如下
app.js
var express = require("express")//這里主要是引用所必須要的模塊，當然，這些模塊是需要使用"npm install 模塊名"安裝的
var bodyParser = require('body-parser')
var port = process.env.PORT || 3000
var app = express()
app.set('views', './views/pages')//定義了一些路徑和所用到的引擎
app.set('view engine', 'jade')
app.use(bodyParser.urlencoded({extended: true}))
//app.use(require('body-parser').urlencoded({extended: true}))
// app.use(express.static(path.join(__dirname,'bower_components')))
app.use(express.static(__dirname + '/views'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.listen(port);
console.log('imooc started on port ' + port);
//index page 這里以及下面皆是路由以及賦值，這里的字段如title, poster等都會在相應的jade如index.jade中用到，實際上是將這里的值傳入相應的jade以渲染頁面
app.get('/', function (req, res) {
res.render('index', {
title: 'imooc 首頁',
movies: [{
title: "復仇者聯盟2",
_id: 1,
poster: 'http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg'
}, {
title: "復仇者聯盟2",
_id: 2,
poster: 'http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg'
}, {
title: "復仇者聯盟2",
_id: 3,
poster: 'http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg'
}, {
title: "復仇者聯盟2",
_id: 4,
poster: 'http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg'
}, {
title: "復仇者聯盟2",
_id: 5,
poster: 'http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg'
}]
})
})
//detail page
app.get('/movie/:id', function (req, res) {
res.render('detail', {
title: 'imooc 詳情',
movie: {
doctor: '喬斯·韋登',
country: '美國',
title: '復仇者聯盟2',
year: '2015',
poster: 'http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg',
language: '英語',
flash: 'http://v.youku.com/v_show/id_XODc4NDY0MjA4.html',
summary: '影片講述當鋼鐵俠試圖啟動處於休眠狀態的維持和平計划時，事情出了差錯。於是，在地球面臨生死存亡的緊急關頭時，強大的超級英雄們挺身而出承擔起拯救世界的重任，他們將阻止可怕的人工智能機器人“奧創”制定恐怖計划。'
}
})
})
//admin page
app.get('/admin/movie', function (req, res) {
res.render('admin', {
title: 'imooc 后台錄入頁',
movie: {
doctor: '',
country: '',
title: '',
year: '',
poster: '',
language: '',
flash: '',
summary: ''
}
})
})
//list page
app.get('/admin/list', function (req, res) {
res.render('list', {
title: 'imooc 列表頁',
movies: [{
doctor: '喬斯·韋登',
country: '美國',
title: '復仇者聯盟2',
year: '2015',
poster: 'http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg',
language: '英語',
flash: 'http://v.youku.com/v_show/id_XODc4NDY0MjA4.html',
summary: '影片講述當鋼鐵俠試圖啟動處於休眠狀態的維持和平計划時，事情出了差錯。於是，在地球面臨生死存亡的緊急關頭時，強大的超級英雄們挺身而出承擔起拯救世界的重任，他們將阻止可怕的人工智能機器人“奧創”制定恐怖計划。'
}]
})
})
layout.jade
doctype
html
head //這是頁面的head，其中還有要用到的一些head文件如bootstrap以及jquery等
meta(charset="utf-8")
title #{title}
include ./includes/head
body //這是頁面的body，其中有header部分以及主體的body內容，需要到相應的jade文件中訪問
include ./includes/header
block content
index.jade
extend ../layout
block content
.container
.row
each item in movies
.col-md-2
.thumbnail
a(href="/movie/#{item._id}")
img(src="#{item.poster}",alt="#{item.title}")
.caption
h3 #{item.title}
p: a.btn.btn-primary(href="/movie/#{item._id}",role="button") 觀看預告片
admin.jade
extend ../layout block content .container .row form.form-horizontal(method="post",action="/admin/movie/new") .form-group label.col-sm-2.control-label(for="inputTitle") 電影名字 .col-sm-10 input#inputTitle.col-sm-10.form-control(type="text",name="movie[title]") .form-group label.col-sm-2.control-label(for="inputDirector") 導演 .col-sm-10 input#inputDirector.col-sm-10.form-control(type="text",name="movie[director]") .form-group label.col-sm-2.control-label(for="inputCountry") 國家 .col-sm-10 input#inputCountry.col-sm-10.form-control(type="text",name="movie[country]") .form-group label.col-sm-2.control-label(for="inputLanguage") 語言 .col-sm-10 input#inputLanguage.col-sm-10.form-control(type="text",name="movie[language]") .form-group label.col-sm-2.control-label(for="inputYear") 上映年份 .col-sm-10 input#inputYear.col-sm-10.form-control(type="text",name="movie[year]") .form-group label.col-sm-2.control-label(for="inputSummary") 簡介 .col-sm-10 input#inputSummary.col-sm-10.form-control(type="text",name="movie[summary]")
detail.jade
extend ../layout
block content
.container
.row
.col-md-7
//-embed(src="#{movie.flash}",allowFullScreen="true",quality="high",width="720",height="600" align="middle",type="application/x-shockwave-flash")
video(src="#{movie.flash}",autoplay="true" width="720",height="600" )
.col-md-5
dl.dl-horizontal
dt 電影名字
dd=movie.title
dt 導演
dd=movie.doctor
dt 國家
dd=movie.country
dt 語言
dd=movie.language
dt 上映年份
dd=movie.year
dt 簡介
dd=movie.summary
list.jade
extend ../layout
block content
.container
.row
table.table.table-hover.table-bordered
thead
tr
th 電影名字
th 導演
th 國家
th 上映時間
//-th 錄入時間
th 查看
th 更新
th 刪除
tbody
each item in movies
tr(class="item-id-#{item._id}")
td #{item.title}
td #{item.doctor}
td #{item.country}
td #{item.year}
//-td #{moment(item.meta.createdAt).format('MM/DD/YYYY')}
td: a(target="_blank",href="../movie/#{item._id}") 查看
td: a(target="_blank",href="../admin/update/#{item._id}") 修改
td
button.btn.btn-danger.del(type="button",data-id="#{item._id")刪除
head.jade
link(href="/bower_components/bootstrap/dist/css/bootstrap.min.css",rel="stylesheet") script(src="/bower_components/jquery/dist/jquery.min.js") script(src="/bower_components/bootstrap/dist/js/bootstrap.min.js")
header.jade
.container .row .page-header h1= title small 重度科幻迷
雖然文件不少，但是捋一捋，邏輯還是比較清楚的，下面以在瀏覽器中輸入http://localhost:3000/從而訪問index.html為例，通過一張圖道出Nodejs建站以及頁面訪問的內部機制
其他頁面的訪問，如list、detail原理與此類似，這里不在贅述。
看明白的點個贊，沒看明白的請留言，哇~~哈~哈~哈~~
3. 遇到的坑
3.1 bootstrap安裝
在安裝bootstrap模塊時，反反復復的不順利。網上有說要設置git的環境變量的，也有說要在git bash里面敲命令的，但是這兩種方法都沒有解決我的問題。
最后還是升級了下bower，然后安裝bootstrap，成功！
3.2 還有一個坑就是jade語法中的縮進，不正確的縮進導致應用無法啟動，當然主要自己對jade完全不熟悉，所以吃了很多虧。
4. 效果展示
最后附上建成網站之后的各個頁面：
首頁
后台錄入頁
列表頁
詳情頁
以上記錄了一個用Nodejs建立一個簡單網站應用的過程，已經發現坑並如何填坑的勵志故事。
如果您覺得閱讀本文對您有幫助，請點一下“推薦”按鈕，您的“推薦”將是我最大的寫作動力！如果您想持續關注我的文章，請掃描二維碼，關注JackieZheng的微信公眾號，我會將我的文章推送給您，並和您一起分享我日常閱讀過的優質文章。
友情贊助
如果你覺得博主的文章對你那么一點小幫助，恰巧你又有想打賞博主的小沖動，那么事不宜遲，趕緊掃一掃，小額地贊助下，攢個奶粉錢，也是讓博主有動力繼續努力，寫出更好的文章^^。
1. 支付寶 2. 微信
