天天看點

Nodejs初階之express

Node和NPM的安裝夠便捷了,不細說...有幾點基礎順手提一下:

  1. 安裝指令中的 “-g” 表示全局(global)
  2. express的版本不是通常的 “-v” 來檢視,而是 “-V”
  3. 安裝express項目的指令如下

    express -e nodejs-product

    -e, --ejs add ejs engine support 

    -J, --jshtml add jshtml engine support (defaults to jade)

    PS:模闆引擎之類暫時不必care,不過俺當初學習搭建Node+express時用的是ejs,是以也就順手一直用着了

  Node的小基友supervisor  

  每次修改代碼後會自動重新開機。懶程式員就指望這種省事省力的工具活着了:)

  安裝:npm install -g supervisor

  執行:supervisor app.js

  另一個小基友forever

  虛拟機一關node服務就關了,不過forever可以讓node服務不停止,介紹如下,安裝和執行不細說啦,我懶:

  forever是一個簡單的指令式nodejs的守護程序,能夠啟動,停止,重新開機App應用。forever完全基于指令行操作,在forever程序之下,建立node的子程序,通過monitor監控node子程序的運作情況,一旦檔案更新,或者程序挂掉,forever會自動重新開機node伺服器,確定應用正常運作。

https://cncat.cn/post-244.html

  express項目目錄  

Nodejs初階之express

  如上圖就是一個express項目結構,簡單過一下:

  • app.js: 項目入口,反正express愛叫app.js沒轍,你可以改成index.js或者main.js都成。相當于php項目中的 index.php、index.html
  • node_modules: 存放項目的依賴庫
  • package.json: 項目依賴配置及開發者資訊(這個要說就說多了,還是看文檔好,俺就不誤人子弟了。下期看看抽個小段單說Node子產品)
  • public: 靜态檔案如 css,js,img (PS:俺其實習慣叫static)
  • routes: 路由檔案(學習的重要攻克對象。尼瑪業務好不好,路由是關鍵)
  • Views: 頁面檔案(Ejs或者jade的模闆,預設是jade,俺這用Ejs,在初階練手最重要,是以都可以試試)

     打開View 檔案發現index.ejs比較不習慣,是以對app.js進行小改動:

  1. “app.set('view engine', 'ejs');” 變成 “app.engine('.html', ejs.__express);app.set('view engine', 'html');”
  2. 上一行出現的ejs變量需要require ejs子產品,增加代碼“var ejs = require('ejs');”

     最終的app.js如下:

Nodejs初階之express

  代碼小解:  

     因為針對的是初階入門,俺們還是繼續過一下express的使用與Node的方法哈:

     require() 用于在目前子產品中加載和使用其他子產品;此方法是子產品的基礎,使用中大概有路徑的概念就行。PS:JS檔案可以去掉".js"字尾

   exports 表示子產品的導出對象,用于導出子產品的屬性和公共方法。在項目routes檔案夾下有index.js和users.js(路由有細說),都使用到exports對象導出對象,如33行的routes.index和34行的user.list;

   PS:一個子產品的代碼隻會在子產品第一次被使用時執行,不會因require多次而被初始化多次。

     express() 表示建立express應用程式。簡單幾行代碼其實就可以建立一個應用,如下:

Nodejs初階之express
var express = require('express'); 
     var app = express(); 
     app.get('/', function(req, res){ 
          res.send('hello world'); 
          console.log('hello world');
     }); 
     app.listen('8808');
           
Nodejs初階之express

     app.listen() 就是在給定的主機和端口上監聽請求,這個和node中http子產品的http.createServer(function(){...}).listen()效果一緻;

     app.set(name, value)和app.get(name)就是你想的那樣,set()為設定 name 的值設為 value,get()為擷取設定項 name 的值。如俺app.js的圖檔16行中的一句“app.set('port', process.env.PORT || 3000)”就是設定項目的port,在下面使用http.createServer時就可以使用app.get('port')來擷取,隻是俺偷懶沒用來着

Nodejs初階之express

     了解app.engine()方法之前先看看express應用的安裝指令:“express -e nodejs-product”,其中的 -e 和 -J 我們一開始已經提到,表示ejs和jade模闆。

     如果想把模闆字尾改成“.html”時就會用到app.engine方法,來重新設定模闆檔案的擴充名,比如想用ejs模闆引擎來處理“.html”字尾的檔案:app.engine('.html', require('ejs').__express);

     app.engine(ext, callback) 注冊模闆引擎的 callback 用來處理ext擴充名的檔案。

   PS:__express不用去care,其實就是ejs子產品的一個公共屬性,表示要渲染的檔案擴充名。

     app.use([path], function) 使用中間件 function,可選參數path預設為"/"。使用 app.use() “定義的”中間件的順序非常重要,它們将會順序執行,use的先後順序決定了中間件的優先級(經常有搞錯順序的時候);

     最後介紹個很有用的express API:

     app.render(view, [options], callback) 渲染 view, callback 用來處理傳回的渲染後的字元串。

  路由實戰:  

     路徑代碼應該是項目中最本機的一部分了。express中建立一個或者一套新的handle非常簡單,先看看express現有的,一會兒我們建立倆個實際的規則。

Nodejs初階之express

     變量 routes 和 user 都是剛才require的子產品,他們各自exports了index方法和list方法;其中Response.render()表示渲染view,同時傳進對應的資料,Response.send()為發送一個響應;在設定路由時index和list方法作為回調函數最終執行。

   

   流程大概了解啦,俺們也就實際搞一把,最easy的一種方式,簡單倆步:

  1. 第一種方式就是在目前的routes/index.js或者routes/test.js中加幾行代碼如下
    exports.test = function(req, res){
      res.send('test welcome.');
    };
               
  2. 在app.js檔案設定路由那塊加上app.get('/test', routes.test);

   第二種方式就是多了兩步,先建立一個子產品如test.js檔案,輸出然後exports對應的方法;在app.js中require這個子產品,再加一行設定路由即完成了。

  快速炫起來,內建Bootstrap:  

     JS工程師使用Nodejs上手還是以快速搭建網站為主,是以才會介紹Express,那麼為了讓網站更快的體面起來,內建使用Bootstrap就是上佳選擇,非常喜歡其響應式布局和整體系的腳手架。

     PS:因為Bootstrap的JS插件都依賴jQeury,是以jQuery也一并引入了。

   前文已經說到了,靜态檔案都放在public檔案夾中,切檔案夾内已經幫我們把類目都分好了,images、 javascripts、 stylesheets。

   分别引入bootstrap.min.css檔案至stylesheets目錄下;jquery-1.x.x.min.js和bootstrap.min.js放到javascripts檔案夾下。

   然後俺們修改view/index.html把檔案引入使用即可,下面放出俺在bootstrap demo的基礎改的index.html,大家随意拿去使用和修改。

  

Nodejs初階之express

 View Code

   如果樣式有問題請檢查下bootstrap的路徑是否正确引入。

   啟動項目之後覺得 高大上 很簡單,有木有!!

  

  FAQ&總結:  

     俺們的express項目暫時,且express也并沒有涉及到任何資料庫,這個事情需要第三方node子產品,比如mysql或者MongoDB,後續俺會有一章單獨介紹這塊。

   express也不是Node中web架構的唯一選擇,不過由于其文檔較全,是以才以其為示例為大家介紹,其原理和實作其實細化之後并不複雜,也希望更多的JS工程師折騰出自己的Web架構。

繼續閱讀