Express之初體驗

express是node.js的框架,node.js的好壞就不多說,到處都有的看,更何況像我如今此等入門級,就簡單分享一下初次體驗express的一些心得體會,僅僅是一些基礎知識,希望大神指點,菜鳥則希望有所幫助,共同進步啊。

node.js的簡單配置已經在前面的node.js+socket.io配置這篇博文中提到,就不多說了,其實配置express也是十分簡單,這裏推薦一個比較好的IDE,webStorm,下載完畢後新建一個express工程即可,對於初學者或者對於html有所接觸的同學來說,可以選擇ejs模板,一般默認會選擇jade,生成工程之前會提示選擇,不用擔心,這還是很簡單的。工程建好之後,整體框架也幫我們建好了,程序的入口是app.js,routes目錄下是頁面邏輯,views目錄下是模板文件,等等。

接下來介紹一下這些文件的具體用處吧,

一、app.js:

app.js中首先var express = require("express")等與node.js相同的方式引入一系列的文件,這裏是由express創建服務器,因爲express封裝了node.js中的http協議,創建的方式與node.js是一致的,express.createServer(),再在express.configure()中配置中間件,express的中間件很多,其實在我的理解就是第三方包,不明白的可以去請示google大神或者百度。配置中間件有三種環境,通用環境,開發環境以及生成環境,我們這裏當然還都是通用環境,現在講講不知所云,建立了項目就一目瞭然了,其實很清晰的。接下來就是路由了,express中的路由方式遵循了REST(表徵狀態轉移)風格的路由方式,並定義了8種標準的方法,常用的有get,post,put,delete等等,以get方式舉例,app.get("/",funName);將路徑‘/’映射到相應的函數,並且該路徑指定了只能接受get方式的請求。其中還值得一提的是all方式,這種方式能夠接受該路徑所有方式的請求,all請求方式有利於實現中間件,實現路由控制權的轉移,

app.js
var express = require("express")
,routers = require("./routers");//默認加載routers目錄下的index.js文件
...
app.configure(function(){
    app.use(...)
    ...
})
app.all('/comment',routers .commentByVistor);
app.get('/comment/user',routers .commentByUser);
......
routers/index.js如下:
exports.commentByVistor = function(req,res,next){
    if(!req.params.user){
    res.send("遊客評論");
}else{
    next();
}
}
exports.commentByUser = function(req,res){
    var user = req.params.user;
    res.send("user:"+user+"評論");
}

以上是一個簡單的遊客或者用戶評論的例子,注意app.all中的路徑與get中的路徑,當用戶評論時首先都會進all這種方式的路由,該方法中判斷是否已經登錄,若未登錄則直接處理,否則以next()方法轉移路由到下一個。例如url是/comment/user1,則先進入all路由,由於user不爲空,執行next()進入下一個路由中,即執行commentByUser方法。

二、index.js

如上代碼所示,index.js定義了一系列路由代碼,可以接收用戶請求後渲染模板頁面返回給客戶端,代碼如下:

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
};

這段代碼表示渲染index.ejs模板,並傳入title變量,以下是index.ejs模板內容

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <p>welcome to <%= title %></p>
  </body>
</html>
頁面中的title被傳入的title變量替換,那接下來就簡單介紹一下ejs文件了

三、index.ejs

ejs文件全稱embedded javascript,是一種模板文件,可以直接在html文件中嵌入代碼,例如上面的title,

ejs文件默認繼承一個layout.ejs文件,該文件可以是這種形式:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <%-body%>
  </body>
</html>

繼承了layout.ejs的文件就可以這樣寫了,index.js

<h1><%= name %>發佈的心情</h1>
  <p><%= message %></p>
實現過程中將其中的<%-body%>替換爲我們的目標文件中index.js內容,我們的很多頁面樣式都是大同小異,那麼我們可以定義一個樣式框架,然後讓內容繼承這個整體樣式框架,方便我們開發風格統一的界面。

當我們需要禁用頁面繼承機制的時候,可以再app.configure中顯式禁用,app.set('view options',{"layout":false});我們可以繼承默認的layout.ejs文件,也可以自定義父類模板樣式文件例如base.ejs,然後在res.render('index',{title:"",layout:"base"});即可實現頁面繼承自base.ejs這個框架頁面。

有時候我們會發現這個繼承機制不成功,當我們的繼承沒有效果的時候,檢查一下當前express的版本,在cmd命令框中輸入express -V,若express版本是3.x,那麼默認是不支持這個功能的,我們需要加載partials組件,這是幫助我們實現這個機制的第三方包,進入當前工程目錄,npm install express-partials,加載成功後node_module目錄下會新增一個express-partials文件夾,接下來我們通過partials = require(‘express-partials’)引入文件,並在configure中添加app.use(partials());

express入門級分享就到這裏了,繼續研究,繼續分享,歡迎大神指點。


發佈了35 篇原創文章 · 獲贊 3 · 訪問量 47萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章