前面對nodejs做了一些瞭解,這次我們來學習基於nodejs的非常流行的web框架express。
1. 第一步先安裝express-generator
express-generator可以安裝express框架的工程模板生成一個項目。
sudo npm install express-generator -g
-g將這個模塊安裝到全局模塊。
2. 新建一個app
使用express新建一個工程名爲myapp的express項目。
express myapp
create : myapp
create : myapp/package.json
create : myapp/app.js
create : myapp/public
create : myapp/public/javascripts
create : myapp/public/images
create : myapp/public/stylesheets
create : myapp/public/stylesheets/style.css
create : myapp/routes
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/views
create : myapp/views/index.jade
create : myapp/views/layout.jade
create : myapp/views/error.jade
create : myapp/bin
create : myapp/bin/www
其會爲我們生產一個文件。app.js是app入口文件,public文件夾下放置static文件,views爲模板目錄,routes爲路由規則目錄。
3. 安裝依賴
express依賴與其他的模塊,生產express功能目錄的時候,只是將這些依賴寫到了package.json文件中,我們還需要安裝這些模塊。
在myapp目錄下,執行下面命令
npm install
可以會報:npm ERR! Please try running this command again as root/Administrator.
這是使用sudo npm install
輸入如下的安裝log
jade@1.11.0 node_modules/jade
├── character-parser@1.2.1
├── void-elements@2.0.1
├── commander@2.6.0
├── mkdirp@0.5.1 (minimist@0.0.8)
├── jstransformer@0.0.2 (is-promise@2.1.0, promise@6.1.0)
├── with@4.0.3 (acorn@1.2.2, acorn-globals@1.0.6)
├── constantinople@3.0.2 (acorn@2.5.2)
├── uglify-js@2.5.0 (uglify-to-browserify@1.0.2, async@0.2.10, source-map@0.5.3, yargs@3.5.4)
├── transformers@2.1.0 (promise@2.0.0, css@1.0.8, uglify-js@2.2.5)
└── clean-css@3.4.6 (commander@2.8.1, source-map@0.4.4)
- 試運行我們的例子
DEBUG=myapp:* npm start
DEBUG
指定了debug模式運行,而且level是all,即什麼log都輸出。
這是我們訪問http://localhost:3000,就會看到express的默認頁面。
express處理流程
學過設計模式的都應該知道責任鏈模式,就是在一個處理流程中,一個請求被順序處理,在express每個責任人就是express文檔中所說的中間件,文檔http://www.expressjs.com.cn/
,這個我就不細說了。
我沒做過web開發,所以對模板的具體使用方式不知道,但是在c++中,模板可以用類型來填充,我們小看了模板那張,web模板就是將數據拉出來,用一個標識替代,然後在render模板時,指定標識的值,然後輸出爲html給用戶,這裏我們就不深究這個。我們這個只是一個入門的教程。在web開發,資源是由url指定,而怎麼組織url,那就是通過url路由來管理。express通過可掛在的路由句柄來實現各個路由的管理,同時也達到了通過路由來對源碼組織進行管理。添加自己的業務到myapp
我們添加一個查看文章的功能。我們添加一個article的路由句柄。在routes目錄下面新建一個article.js文件,來具體實現我們的業務羅輯。url爲http://localhost:3000/article/id/xxxx
,我們每個文章有一個id,一串數字,然後我們返回json數據。
article.js文件內容如下:
var express = require('express');
var router = express.Router();
var db = require('mongoskin').db('mongodb://localhost:27017/express_demo', {native_parser:true});
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a article');
});
router.get(/^\/id\/(\d+)$/, function(req, res, next) {
var article_id = req.params[0];
db.collection('article').findOne({id: parseInt(article_id)}, function(err, result) {
if (err) {
next(err);
}
res.send(result);
});
});
module.exports = router;
我連接上我本地的mongodb數據庫中的express_demo數據庫,當我們輸入http://localhost:27017/article/id/1
,就會調用
router.get(/^\/id\/(\d+)$/, function(req, res, next) {
var article_id = req.params[0];
db.collection('article').findOne({id: parseInt(article_id)}, function(err, result) {
if (err) {
next(err);
}
res.send(result);
});
});
來處理,我們使用了正則來匹配url,我們使用()來提取出我們的id參數。我在express_demo數據庫中的article文檔中加了兩條數據,格式
{
"id":xx,
"title":"xxx",
"content":"xxx"
}
在操作數據庫時我們使用了mongoskin
這個操作mongodb的模塊,在myapp目錄下執行npm install mongoskin
進行安裝。
我們的id是唯一,所以我們使用了findOne,傳入{id:xx}
爲參數,article_id是一個string,需要parseInt轉換成int,不然我們傳入的就是{id:'xxx'}
,和我們的scheme是不匹配的。我們已經完成了我們的路由句柄,我們將它掛在在我們的路由路徑上。
var article = require('./routes/article.js');
app.use('/article', article);
在app.js中添加上這兩句就行了。
結果如下圖:
當然這只是一個簡單的demo小程序。