天天看點

使用Express快速搭建前端項目架構 原

使用Express快速搭建前端項目架構

    Express是基于Node.js的前端Web開發架構,使用其可以簡潔快速的建立健壯友好的API服務。在前端或移動端的開發過程中,可以借助Express的這項功能模拟API資料,友善開發調試。

    Express是基于Node.js平台的,是以在安裝Express之前,需要先安裝Node.js。使用如下指令來檢查系統中所安裝的node版本:

node -v           

複制

如果系統中沒有安裝Node.js,可以在如下網站進行下載下傳安裝:

https://nodejs.org/en/。

    建立一個測試工程目錄,用于存放Express項目架構,首先在終端,使用如下指令進行Express的全局安裝:

npm install express-generator -g           

複制

需要注意,很多時候國内網絡使用npm的時候會非常慢,可以通過如下指令來修改倉庫源。

npm install -g cnpm --registry=https://registry.npm.taobao.org           

複制

之後使用cnpm來進行包的安裝:

cnpm install express-generator -g           

複制

    安裝好Express後,在建立的檔案夾目錄下,執行Express的初始化:

express           

複制

如果檔案夾不為空,會提示是否繼續操作,輸入yes後回車即可。

    初始化完成後的Express項目結構如下:

使用Express快速搭建前端項目架構 原

其中會預設建立一個package.json檔案,其中會添加許多依賴包,在項目目錄中執行如下指令來安裝這些依賴:

npm install           

複制

依賴安裝完成後,工程中會多一個node_modules的檔案夾,裡面是所有依賴封包件。

    再來看Express模闆中的檔案,其中bin檔案夾下面的www.js檔案是服務的啟動檔案,其中啟動了HTTP的服務,預設端口為3000。routes檔案夾下面的檔案用于配置api路由,預設有index.js與users.js兩個。app.js檔案中對api進行了初始化與配置。可以在users.js中添加一個測試api如下:

var express = require('express');
var router = express.Router();

/* 這個是預設生成的. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});
/* 添加一個測試api*/
router.get('/testAPi',function(rep,res,next){
  res.send('{name:jaki,age:24}');
});
module.exports = router;           

複制

在項目目錄下通過終端執行如下指令來将服務開啟:

node bin/www           

複制

如果服務啟動成功,在浏覽器輸入http://127.0.0.1:3000/users/testAPi會傳回我們send()方法傳遞的字元串。

小提示:MacOS系統在服務進行中,可以使用control+c來釋放端口的監聽,如果不小心使用control+z或者關閉了終端,會導緻所監聽端口的無法釋放,下次如果再次啟動node服務,會報Port 3000 is already in use的錯誤,可以使用如下方法來進行所監聽端口的釋放:

首先使用如下指令檢視所有監聽某個端口的服務,例如3000端口:

sudo lsof -i:3000           

複制

之後終端會将服務名與進行id告訴我們,如下:

COMMAND PID USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
node    829  vip   13u  IPv6 0x9c3536500e84e203      0t0  TCP *:hbci (LISTEN)           

複制

使用如下指令來殺死對應程序即可:

sudo kill -9 829           

複制