快捷導(dǎo)航

教你從零開始在Windows系統(tǒng)上搭建一個(gè)node.js后端服務(wù)項(xiàng)目

更新時(shí)間：2024年11月09日 10:19:03 作者：梅禿頭

這篇文章詳細(xì)介紹了如何在Windows環(huán)境下搭建一個(gè)Node.js項(xiàng)目并使用Express框架,包括安裝Node.js、配置環(huán)境、創(chuàng)建項(xiàng)目、安裝Express、編輯代碼、運(yùn)行項(xiàng)目、集成Nodemon實(shí)現(xiàn)熱部署等步驟

一、下載node.js及配置環(huán)境

網(wǎng)上很多安裝教程，此處就不再贅述了

版本信息

C:\Users\XXX>node -v
v20.15.0

C:\Users\XXX>npm -v
10.7.0

了解更多npm知識(shí)：npm 中文網(wǎng) (nodejs.cn)

二、搭建node.js項(xiàng)目及安裝express框架

在任意位置創(chuàng)建一個(gè)項(xiàng)目文件夾，此處項(xiàng)目文件夾名為test（文件夾路徑：D:\test）

以管理員身份打開windows命令行工具或powershell命令行工具（記?。罕仨氁怨芾韱T身份打開，不要使用win+R的方式或者文件夾輸入cmd的方式打開，否則后面安裝express會(huì)失?。?/p>

左下角搜索框輸入命令提示符，打開windows命令行工具（沒有安裝powershell，推薦使用這種方式）

打開powershell命令行工具（需要安裝好powershell才可以打開）

打開命令行，進(jìn)入創(chuàng)建的test項(xiàng)目文件夾

創(chuàng)建package.json，命令行輸入下列命令

npm init

name 項(xiàng)目名稱
version 項(xiàng)目版本號(hào)
description 項(xiàng)目描述信息
entry point 項(xiàng)目入口文件
test command 項(xiàng)目啟動(dòng)時(shí)腳本命令
git repository Git倉(cāng)庫(kù)地址
keywords 關(guān)鍵詞
author 作者

一路回車鍵

創(chuàng)建test項(xiàng)目的文件夾出現(xiàn)了pakage.json文件，打開查看里面的信息

安裝express

npm install express --save

安裝完成，如果是以管理員身份打開的命令行一般不會(huì)報(bào)錯(cuò)

安裝好了后出現(xiàn)下列兩個(gè)文件（夾）

package文件內(nèi)容隨之改變，由于程序主入口是index.js，所以要?jiǎng)?chuàng)建index.js文件，（文件后綴必須是js）

編輯index.js文件內(nèi)容，為了快速，我們直接找到express官網(wǎng)，打開里面的示例

Express - 基于 Node.js 平臺(tái)的 web 應(yīng)用開發(fā)框架 - Express中文文檔 | Express中文網(wǎng) (expressjs.com.cn)

package.json |npm 文檔 (npmjs.com)

復(fù)制Hello World示例到index.js文件中

修改下打印日志的內(nèi)容

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on http://localhost:${port}`)
})

運(yùn)行項(xiàng)目，輸入命令node 入口文件.js

咱這邊的入口文件是index.js，稍微修改下

node index.js

啟動(dòng)成功后，瀏覽器訪問服務(wù)，輸入控制臺(tái)輸出的訪問地址：http://localhost:3000

到這，就成功了

為了方便后續(xù)管理代碼，新建一個(gè)名為src文件夾，將之前創(chuàng)建的index.js文件移入src中（index.js移動(dòng)到src文件夾后，啟動(dòng)時(shí)要進(jìn)入index.js的上一級(jí)文件夾再進(jìn)行啟動(dòng)，D:\test\src> node index.js）

三、集成nodemon，實(shí)現(xiàn)代碼熱部署

不需要熱部署，可以不用跟著下面的步驟

安裝nodemon，命令行輸入：npm i nodemon -g

接下來開始實(shí)現(xiàn)熱部署，修改pakage.json文件，修改兩處：main入口文件和scripts對(duì)象

"main": "路徑從點(diǎn)擊進(jìn)入項(xiàng)目的下一級(jí)開始，直到index.js文件"

{
  "name": "test",
  "version": "1.0.0",
  "description": "測(cè)試創(chuàng)建node項(xiàng)目",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"start":"nodemon --watch src --watch config src/index.js"
  },
  "author": "小紅",
  "license": "ISC",
  "dependencies": {
    "express": "^4.21.1"
  }
}

輸入npm run start啟動(dòng)項(xiàng)目，終止項(xiàng)目ctrl+C

熱部署的好處在于，不需要重啟項(xiàng)目，刷新瀏覽器即可完成代碼更新，如何判斷是否成功熱部署，一是命令行綠色部分執(zhí)行代碼，二是不重啟項(xiàng)目，修改index.js項(xiàng)目的內(nèi)容，保存后刷新瀏覽器查看顯示內(nèi)容是否變化，有變化則成功（修改端口則需要重啟服務(wù)）

四、Express 應(yīng)用程序生成器

照舊，第一步創(chuàng)建項(xiàng)目文件夾，管理員身份進(jìn)入命令行，創(chuàng)建pakage.json文件，執(zhí)行npm init

通過應(yīng)用生成器工具 express-generator 可以快速創(chuàng)建一個(gè)應(yīng)用的骨架。

你可以通過 npx （包含在 Node.js 8.2.0 及更高版本中）命令來運(yùn)行 Express 應(yīng)用程序生成器

npx express-generator

執(zhí)行完npx express-generator命令就可以快速生成以下項(xiàng)目結(jié)構(gòu)文件

由于項(xiàng)目結(jié)構(gòu)是使用生成器生成的，需要安裝項(xiàng)目?jī)?nèi)的依賴包，執(zhí)行一下npm install

打開app.js（原默認(rèn)是index.js，沒有選擇直接回車，而是在后面輸入app.js后再回車，因此我的入口文件就改成了app.js），可以看到，文件內(nèi)是沒有配置端口，以及啟動(dòng)打印的數(shù)據(jù)的，在這里可以自行手動(dòng)配置下（app.get()或app.set()需要在var app = express();后面使用）

pakage.json

啟動(dòng)項(xiàng)目npm run start

沒有設(shè)置打印日志是這樣的

實(shí)現(xiàn)代碼熱部署

1.項(xiàng)目安裝nodemon，執(zhí)行npm install nodemon --save

2.優(yōu)化目錄結(jié)構(gòu)，創(chuàng)建src文件夾，將app.js移入

3.修改app.js文件內(nèi)容，app.js引用路由文件不再是同級(jí)關(guān)系，二是上一級(jí)文件夾，因此將.改為..

4.修改pakage.json文件的scripts對(duì)象start的配置，監(jiān)聽src目錄

啟動(dòng)項(xiàng)目后，任意修改app.js文件在瀏覽器上顯示的內(nèi)容

總結(jié)

到此這篇關(guān)于在Windows系統(tǒng)上搭建一個(gè)node.js后端服務(wù)項(xiàng)目的文章就介紹到這了,更多相關(guān)Windows搭建node.js后端服務(wù)項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: