如何快速搭建一個 Node.JS 項目並進入開發?


了解:如何快速搭建一個項目並進入開發?

在此不概述 Node.JS 的歷史以及發展過程。

 

因為之前接觸過通過 Java 開發語言,所以明確地知道一個服務器所需的文件,以及一個服務器所需要的操作。

那么,我們細分一下,所有的服務器都至少需要什么呢?

  • 靜態文件訪問
  • 路由分發
  • 數據庫連接

這三者是最重要的服務器基礎功能:

  靜態文件是類似如圖片、CSS、JS、HTML等前端需要的界面資源

  路由分發則是當瀏覽器 OR 客戶端訪問某個URL地址時,服務器會自行解析並分發給某段處理代碼中。

  而數據庫連接則是將數據保存至磁盤(即數據庫)而不至於關閉服務器便消失了(靜態服務器可忽略數據庫)

 

一個服務器最要緊的是讓瀏覽器訪問到相關 URL 時,就會自行解析 URL ,之后分發給相關處理程序進行處理,即路由分發功能。

所以第一步,讓我們了解一個 Node.JS 項目的基礎文件並知道怎樣進行創建。

 

1.1 引入 npm 概念

npm 是一個包管理器,它可以對項目的依賴文件進行加載,卸載等操作,同時可以創建一個項目的配置文件(package.json)(目前我初學了解的)
同樣的,一個項目需要怎樣的依賴環境,都需要 npm 來配置

 

1.2 創建一個 Node.JS 項目

打開文件管理器,在你想要的索引位置上新建一個文件夾,文件夾的名稱即是項目名

打開 DOS / 終端 ,執行 npm 進行項目的創建(注意,在項目的當前文件夾)

npm init

 

將會在項目目錄下創建一個 package.json 文件

 

箭頭所指的即是創建過程中填寫的配置信息,比方:author,指的是開發者名稱,而 main,指的是初始化時指定的主文件入口

至於其它,我相信網上有一個更全面的 配置文件屬性介紹文章。

 

創建好 package.json 后,需再創建項目必備文件夾以及文件(有些方法可以一鍵生成,這里不作推薦)

 

1.3 創建項目必備文件夾以及文件

 

 

注意:package-lock.json 不必手動創建,以及 node_modules 文件夾亦無需創建。

僅需創建:bin、public、routes、views 文件夾,同時創建一個名為 app.js ,它將作為主函數入口。

 

【重要】請在 package.json 中手動將其中的 main 屬性配置為 app.js ( 自動生成的默認為 index.js )

 

1.4 安裝 Express 框架

 

引言:

  express 框架是 node.js 官方唯一推薦的框架(當前,從一些書上了解的)

  所以我覺得,它應該可以作為入門框架,同時可以開發一些小項目。

 

安裝:在當前的項目根目錄中打開 DOS / 終端,之后執行以下命令:

 

npm install express -save

 

關於 npm 安裝參數中的 -save 或是 -dev 的說明:

當項目中依賴某個模塊時,或者項目中使用的某個模塊依賴另外一個模塊時,正常情況下需要安裝它們。

一般而言,模塊依賴什么模塊,便會在其 package.json 中的 dependencies 寫上需要什么依賴模塊。

比如 express 框架的 package.json :

我們再來看看它其中的的內容,沒有全部復制,僅復制其中的 dependencies 屬性

"dependencies": {
    "accepts": "~1.3.7",
    "array-flatten": "1.1.1",
    "body-parser": "1.19.0",
    "content-disposition": "0.5.3",
    "content-type": "~1.0.4",
    "cookie": "0.4.0",
    "cookie-signature": "1.0.6",
    "debug": "2.6.9",
    "depd": "~1.1.2",
    "encodeurl": "~1.0.2",
    "escape-html": "~1.0.3",
    "etag": "~1.8.1",
    "finalhandler": "~1.1.2",
    "fresh": "0.5.2",
    "merge-descriptors": "1.0.1",
    "methods": "~1.1.2",
    "on-finished": "~2.3.0",
    "parseurl": "~1.3.3",
    "path-to-regexp": "0.1.7",
    "proxy-addr": "~2.0.5",
    "qs": "6.7.0",
    "range-parser": "~1.2.1",
    "safe-buffer": "5.1.2",
    "send": "0.17.1",
    "serve-static": "1.14.1",
    "setprototypeof": "1.1.1",
    "statuses": "~1.5.0",
    "type-is": "~1.6.18",
    "utils-merge": "1.0.1",
    "vary": "~1.1.2"
  }

這樣一來,需要什么依賴便知道得一清二楚了。

但是我們的項目,總不能說模塊依賴什么時,我們手動加上,如果有成千上百個依賴模塊呢

所以,引入了 npm -save 的概念,也就是當你為項目安裝什么模塊時,它會把這個模塊的名稱,版本寫入你的項目依賴中

-save 和 -save -dev 省掉了手寫或修改 package.json 的步驟,各自功能如下:

-save :自動將模塊和版本號添加到 dependencies 部分

-save -dev :自動將模塊和版本號添加到 devdependencies 部分

 

配置文件中的這兩個屬性,具體區別可以在網絡中搜索一下,相信會有更好的解釋,這里不作說明。

 

1.5 編寫 app.js 文件

// 引入 express 框架 -> 需 npm 安裝
var express = require('express');

/**
 * 初始化框架,並將初始化后的函數給予 '當前頁面'全局變量 app
 * 也就是說, app 是 express 
 */
var app = express();


/* 配置框架環境 S */


// 設置 public 為靜態文件的存放文件夾
app.use('/public', express.static('public'));


/* 配置框架環境 E */


app.get('/', function(req, res) {
    res.send('Hello World');
})

var server = app.listen(8081, function() {

    var host = server.address().address
    var port = server.address().port
    
    console.log("Node.JS 服務器已啟動,訪問地址: http://%s:%s", host, port)

})

注意:部分網絡中,訪問地址會出現  http://:::8081 的情況,在瀏覽器中輸入 localhost:8081 便可以訪問了。

因為 Node.JS 啟用了 IPv6 的緣故,並不影響網址的訪問。

 

1.6 啟動服務器

在項目根目錄中打開 DOS / 終端,執行 node app.js 

 

 

終端出現的錯誤請忽略,因為出於習慣我總是拼寫成 note,現在已經不會犯同樣的錯誤了。

到這里,你也可以訪問到 node.js 服務器了。

 

至於框架類的學習,后續再發一篇文章,順便,我也需要練手一些項目了。

 

 

2020-02-11 寫於揭陽

轉載請附上本博客地址:https://www.cnblogs.com/chongsaid/ 或當前文章鏈接。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM