天天看點

菜鳥學習nodejs--express(二)路由什麼是路由Express中的路由小結

什麼是路由

路由這個次不是nodejs專屬,在web應用程式中就有路由,路由描述應用程式是否以及如何對調http(超文本傳輸協定)請求進行應答,當使用者在與應用程式或者網站互動的時候,浏覽器就會生成這些請求。

路由隻是個用來定義應用程式中http請求的最終點的術語,是以如果希望應用程式能夠做點什麼,那麼就必須使用路由了。

Express中的路由

在Express使用HTTP動詞來定義路由,HTTP動詞描述對服務的請求類型,最為可能用到的動詞Get,Post。

1. GET–從伺服器擷取資料

2. POST–将資料發送給伺服器

其他的也有一些如:PUT,Delete,HEAD,OPTION,TRACE。

node.js路由的從無到有

沒有路由

我們先建立一個沒有使用路由的應用程式吧。如我們上一片部落格Express的安裝和使用,我們建立express_routing檔案夾,在檔案夾内Shift+滑鼠右鍵,選擇在此處打開指令視窗,然後輸入:

express express_routing

cd express_routing && npm install

上邊的指令就是建立Express項目,并引入一些相應的子產品。

打開app.js,在倒數第二行假如app.listen(3000);加入端口号。

在指令視窗繼續輸入:

node app.js

然後再浏覽器輸入http://127.0.0.1:3000,然後觀察頁面

菜鳥學習nodejs--express(二)路由什麼是路由Express中的路由小結

可是如果我們輸入的位址是http://127.0.0.1:3000/about的話,會出現404的錯誤,這就是about沒有路由可以使用,那麼我們改如何使用呢。

有路由

其實我們平時在做web項目的時候一直再用路由,隻是可能我們不知道那就叫路由,如我們常用的從伺服器擷取資料的GET請求,給伺服器資料POST。接下來我們分别介紹一下

添加GET路由

為了使用GET路由,我們需要Get HTTP請求,在上邊的沒有路由的例子中,打開app.js在

var app = express()

下邊加上下邊的代碼

app.get('/about',function(req,res){
    res.send('孟海濱是個大帥哥');
});
           

運作改js,

node app.js

,在浏覽器輸入http://127.0.0.1:3000/about,這樣我們的這個程式就寫完了。看看效果如何。

菜鳥學習nodejs--express(二)路由什麼是路由Express中的路由小結

添加POST路由

我們說完了添加GET路由,那麼接下來我們說一下POST路由,添加POST路由和添加GET路由是一樣的,隻是把動詞換做了post,如下:

app.post('/',function(req,res){
    res.send(req.body);
});
           

在這個示例中,應用程式接收post請求,送到index頁面,并将資料輸送到浏覽器中。

建立一個檔案夾express_post,在該檔案夾下打開控制指令視窗。輸入:

express express_post
cd epxress_post && npm install
           

在app.js中添加

app.listen(3000);

在生成的程式中,打開view–>index.jade,添加如下代碼

h2 Form example
form(mehtod='post',action='/')
    fieldset
        legend Add a user
        p
            label First name
            input(name='user[first_name]')
        p
            label Last name
            input(name='user[last_name]')
        p
            input(type='submit',value='Save')
           

在浏覽器輸入http://127.0.0.1:3000,我們會看到浏覽器出現了這個界面

菜鳥學習nodejs--express(二)路由什麼是路由Express中的路由小結

然後我們輸入一些資訊,就會在位址欄出現我們輸入的資訊了。

菜鳥學習nodejs--express(二)路由什麼是路由Express中的路由小結

使用路由傳送參數

在web項目中,我們通常使用路由來傳遞參數,并且根據參數做相應的回應。例如下邊的url

user/123
department/456
           

第一個url是使用者ID位123的資訊顯示,第二個是部門id是456的資訊顯示。而且nodejs同樣也支援這種方式。

1.建立Express站點

express express_param
cd epxress_param && npm install
           

2.在app.js中添加如下代碼

app.get('/users/:id', function(req, res){
  res.send('使用者ID是' + req.params.id);
});

app.listen();
           

3.啟動項目

4.在浏覽器輸入:http://127.0.0.1:3000/users/123,檢視結果。

菜鳥學習nodejs--express(二)路由什麼是路由Express中的路由小結

注意:你可能發現了,我每次都是把路由放入到了app.js,如果我們的頁面需要大量的資料傳輸,可能使我們的程式特别複雜,難以維護,是以我們需要用一個類似于web項目的js檔案來專門寫這些東西,而這個Nodejs已經為我們考慮好,那就是我們的route檔案夾下的index.js檔案,我們可以直接寫在這裡邊,在我們的app.js中寫上

app.get('/',routes.index);

就可以了

使用本地變量

在res.render函數中,本地變量的使用要掌握關鍵所在,設定要在視圖層展示的資料。

将資料傳遞到視圖層。

我們可能對資料要進行一些處理。例如拼接字元串,計算等。無論做什麼,都需要在展示之前處理好。

app.js中添加如下代碼

app.get('/', function(req, res){
  var user = { 

      first_name: 'Keyser',
      surname: 'Soze',
      address: 'Next door',
      facebook_friends: '4'

  };
  res.render('index.jade', { title: 'User', user: user });
});
           

index.jade中添加如下代碼:

h3 First Name
p= user.first_name

h3 Surname
p= user.surname

h3 Address
p= user.address

h3 Facebook Friends
p= user.facebook_friends
           

執行node app.js,我們會看到如下結果

菜鳥學習nodejs--express(二)路由什麼是路由Express中的路由小結

小結

我們接着在上一篇的Express的基礎上來講了在node.js中擷取和傳輸資料,使用參數等的方法,其實無非就是一個GET,POST,參數的使用。那麼Express到底是幹什麼的呢。

Express 是一個基于 Node.js 平台的極簡、靈活的 web 應用開發架構,它提供一系列強大的特性,幫助你建立各種 Web 和移動裝置應用。 說白了,一個快速為我們建立web前段的架構。

繼續閱讀