本文將包括以下內容:
- 創建一個Express應用
- 使用npm和
package.json管理應用依賴 - 調整Express工程結構到MVC架構
- Route和Controller概念分離
- 創建新的Node模塊(module)
- 使用Git在線部署Express應用到Heroku
在進行一切操作之前, 需要先安裝好Node.js, 對於*nix用戶來說, 直接下載解壓, 並添加到環境變量中即可完成安裝.
首先從Express着手, Express是構建在Node之上的web應用框架.
使用package.json定義依賴
每個Node應用的根目錄都有一個文件叫做package.json, 用來記錄Node應用的依賴, 例如:
{
...
"depencencies": {
"express": "~4.9.0"
...
}
}
其中"~"表示使用最近的patch版本, 推薦使用.
使用npm安裝Node依賴
工程範圍的依賴
在和package.json相同的目錄層級運行以下指令即可:
$ npm install
這會將所有的依賴(包括間接依賴)下載到node_modules文件夾內. 如果後期你想向工程中追加依賴, 只需要運行以下指令:
$ npm install <package-name> --save
以上指令完成了兩步操作:
- 將指定
package下載到node_modules文件夾; - 將依賴條目追加到
package.json文件內.
全局範圍的依賴
一些通用的依賴需要安裝成全局依賴, 例如express generator:
$ npm install -g express-generator
依賴會被安裝到以下路徑: ${NODE_HOME}/lib/node_modules/express-generator
創建並啓動一個Express工程
- 新建一個文件夾
- 在文件夾內運行
express npm install按照package.json的定義安裝所有依賴npm start啓動程序, 瀏覽器訪問localhost:3000即可.
Express的用戶請求處理邏輯
如下圖所示
重啓一個Node應用
如果你修改了服務端的Node代碼, 那麼需要停止應用運行, 編譯並重新啓動
重啓應用的方法有兩種, 一種是從啓動應用的控制檯ctrl+c, 然後npm start, 另一種方法是使用nodemon, nodemom是Node應用的監控程序, 能夠簡化Node應用的開發. 安裝方法如下:
$ npm install -g nodemon
然後使用nodemon指令代替npm start啓動應用程序.
如果你只是修改了Jade模板, CSS文件, 或者客戶端的js代碼, 無需重新啓動應用
調整Express工程結構到MVC模式
首先在根目錄下新創建一個app_server文件夾, 將根目錄下的routes和views文件夾移到裏面:
然後更改app.js文件, 將兩者重新定位到新的位置. 具體的來說就是將原來的
app.set('views', path.join(__dirname, 'views'));
var index = require('./routes/index');
var users = require('./routes/users');
變更爲
app.set('views', path.join(__dirname, 'app_server', 'views'));
var index = require('./app_server/routes/index');
var users = require('./app_server/routes/users');
Node模塊(module)的生成與使用
舉個例子, 現在我們有a.js和b.js兩個文件, 假設現在它們在同級目錄下, 我們想在b.js文件中調用a.js中定義的變量或函數. 下面是a.js文件的內容
module.exports.logThis = function(message) {
console.log(message);
}
上述代碼將logThis變量(函數)暴露出來, 供其他模塊使用, 經過這樣設定後我們就可以在b.js中如下調用
var myModule = require("./a")
myModule.logThis("It works!")
需要注意的一點是, require()方法並不需要加後綴, 它會自動依以下順序搜索:
- 尋找同名js文件
- 尋找同名文件夾下的
index.js文件
Bootstrap安裝
- 首先下載Bootstrap發行版, 解壓並添加到Express工程下的public目錄(public目錄是用於存放靜態資源的目錄)下的bootstrap目錄(需新建).
- 由於Bootstrap依賴jquery, 所以我們還要下載jquery, 從這裏下載, 注意下載完整版的, 不要下載slim版的, 點擊之後, 會跳出一個代碼頁面, 直接拷貝全部, 然後保存在
public/javascript/jquery-<具體的版本.min.js文件中即可. - 清空Express默認的樣式. 具體的來講, 就是清空
public/stylesheet/style.css文件中的內容
安裝Bootstrap主題
這裏以Amelia主題爲例, 從這裏下載, 將解壓得到的amelia.bootstrap.css和amelia.bootstrap.min.css拷貝到Express工程下的public/bootstrap/css文件夾下.
Jade模板的使用
Jade模板的使用原則是:
設計一系列的模板佈局, 然後讓其他文件去擴展
這裏我們來看一個例子, 下面分別是layout.jade和index.jade文件的內容:
extend layout
block content
h1= title
p Welcome to #{title}
上面代碼的意思是index.jade擴展了layout.jade, block content是layout.jade中聲明的一個html填充塊, 這裏向裏面填充了一個<h1>和一個<p>.
下面讓我們來看一下layout.jade.
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
script(src='/javascript/jquery-3.1.1.min.js')
script(src='/bootstrap/js/bootstrap.min.js')
layout.jade除了用於定義html的模板, 還用來進行css和js腳本的連接, 注意: js腳本放在頁面最下面有利於提升網頁的加載速度. 此外, 第一行設置的viewport有利於頁面能夠在移動設備上良好的縮放.
到此, 使用Bootstrap的Amelia主題之後的顯示效果如下:
使用Heroku進行網站的對外在線演示
將網站託管到在線平臺上的意義是:
可以便利的進行跨瀏覽器的測試, 跨設備測試, 並且能夠向同事和合作伙伴快速展示與交流開發階段性進展.
類似的平臺服務還有Google Cloud Platform, Nodejitsu, OpenShift等.
安裝Heroku
- 從這裏註冊一個免費賬號
- 下載Heroku toolbelt, 或者直接使用以下指令在Ubuntu中下載
$ wget -O- https://toolbelt.heroku.com/install-ubuntu.sh | sh - 觸發安裝
$ heroku --version - 驗證安裝成果
$ heroku --version heroku-toolbelt/3.43.15 (x86_64-linux) ruby/1.9.3 heroku-cli/5.5.6-a9ddee4 (linux-amd64) go1.7.4 You have no installed plugins. - 登陸(實際上完成了類似ssh密鑰對生成並上傳公鑰的工作)
$ heroku login
使用Heroku提交Node.js應用
首先需要保證雲端的運行環境與本地開發環境一致
具體的是在package.json中添加一個engines配置塊, 指明node和npm的版本, 如果不清楚的話, 還是確認一下比較好:
$ node --version
$ npm --version
下面是示例的package.json文件:
{
"name": "Loc8r"
...
"engines": {
"node": "~4.6.0",
"npm": "~2.15.9"
},
...
}
創建一個雲端啓動腳本
具體來說就是創建一個啓動腳本, 指明我們應用的類型以及啓動指令, 對於Node.js應用來說, 需要在應用的根目錄下創建一個名爲Procfile的文件, 示例內容如下:
web: npm start
使用heroku local進行本地驗證
heroku local的前身是foreman, 但是現在的heroku toolbelt中已經用前者替換掉了了後者, 詳見如下官方通知
heroku local工具是用來在提交應用前進行本地驗證的, 使用heroku local啓動應用前需要先關閉本地應用, 然後使用以下指令啓動:
$ heroku local web
程序成功啓動後會監聽在5000端口, 我們可以通過localhost:5000來訪問, 顯示效果應與之前本地直接運行相同.
將應用託管到Heroku
首先需要初始化一個git倉庫, 添加.gitignore文件, 推薦使用這裏自動生成(鍵入Node即可).
然後在雲端創建一個heroku應用容器(隱式完成了本地倉庫的關聯)
$ heroku create
Creating app... done, ⬢ sheltered-everglades-85543
https://sheltered-everglades-85543.herokuapp.com/ | https://git.heroku.com/sheltered-everglades-85543.git
推送到遠程倉庫
$ git push heroku master
在heroku雲端用測試機(dyno)來運行部署的程序
每位用戶都會免費獲得一個可用的web測試機, 使用如下指令來開啓它
$ heroku ps:scale web=1
Scaling dynos... done, now running web at 1:Free
在線瀏覽部署情況
$ heroku open
自動在雲端的網址上看到部署的應用的情況
之後修改了應用代碼後, 只需要push到heroku容器的master分支, 就會自動更新並部署.
