摘要:原生node和express框架開發有和區別,所謂的express,就是基於框架的開發,人家已經提供了一個成型的基本骨架,在這個基礎之上來進行開發,大大提高了開發效率,前一篇文章在構建一個express項目,還是需要我們寫很多的代碼,還不夠強大。我們可以借助應用生成器,幫我們把項目的基本骨架搭建好。一般提到開發,通常有如下幾種:
- 原生開發,所有的代碼從0開始。自己做,一磚一瓦。
- 框架開發,底層的代碼,人家已經幫我們寫好了,我們要寫的是具體的功能。買的毛坯房,房子成型了,但還不直接入住,需要裝修。
- 二次開發,本身就已經是一個完整的項目,能夠運行,但是有些地方需要修改,在原來的基礎之上進行開發。已裝修的房子或二手房,拎包入住。
1. 安裝生成器 (npm install express-generator -g)
所謂的生成器,可以理解為腳手架工具。
需要全局安裝,確保在任何目錄下都可以使用。
2. 創建應用 (express 項目名稱)
在指定目錄下,使用express 項目名稱 來創建應用。
3.安裝依賴包 (cd目錄 && npm install)
按照命令行的提示,操作即可。
這其實是兩個命令
1.cd app,切換目錄,進入app目錄
2.npm install,安裝依賴包
說明:這個兩個命令,可以使用 邏輯與 (&&) 形成一個命令。如果左邊的成立的話, 右邊會執行。如果左邊的不成立的話,右邊也不會執行。
我們也可以分開寫。
實際上,在項目的根目錄下,有一個配置文件---package.json,如下:
其中有一個配置項 --- dependencies,就列出了當前這個項目所依賴的包(模塊)。如果我們在安裝包的使用,沒有指定包名,它就會找這個package.json文件,逐個安裝dependencies中所列出的這些包和模塊。
4.啟動應用 (npm start 或 node ./bin/www)
按照剛才第二步的提示。
直接使用npm start 命令啟動項目。
其中,啟動應用時,還可以使用node ./bin/www
5.瀏覽 (localhost:3000)
在瀏覽器中使用 localhost:3000訪問之,如下:
6.項目結構分析
我們需要搞清楚,項目結構,然后才可以自己寫代碼。
項目目錄結構划分如下:
bin目錄,如下
其核心的代碼如下:
剛才執行 npm start命令,其實就是執行這個www文件。
public目錄:存放的就是靜態資源目錄,所謂的靜態資源就是指圖片、css和js文件。
routes目錄:路由目錄,保存的是路由文件。
其中,index.js是實現首頁路由的,如下:
而user.js則是實現/user路由的。
訪問 /users,效果如下:
如果我們需要增加新的路由,就可以在這里寫上路由的處理。
Views目錄:視圖目錄,也就說存在模板文件的,這些模板文件,其實都是基於html的,Express默認使用了jade模板。
我們還可以使用ejs模板。其中index.jade,就是訪問首頁時,載入的模板,如下:
package.json:項目的配置文件。任何基於npm的的項目,都應該具備這個package.json文件。
app.js:整個項目的入口文件。
功能分解如下:
第一步,載入相應模塊
第二步,實例化一個app對象
第三步,設置模板相關參數
第四步,使用中間件
不同的中間件實現的是不同的功能。其中,如下兩個是實現路由功能
如果輸入的是localhost:3000/,就交給index處理,如果輸入的是localhost:3000/users,就交給users處理
Index和users就是上面引入的自定義模塊
查看routes/index.js,就知道是怎么回事了
第五步,導出模塊
導出給WWW文件來使用。
當服務器開啟的時候,app對象就已經可以使用了。