為什么Nodejs成為后端開發(fā)者的新寵?
1. 認(rèn)識 nodejs
nodejs 是基于 Chrome V8 引擎構(gòu)建的一個(gè)開源、跨平臺的 JS 運(yùn)行時(shí)環(huán)境,它允許開發(fā)者在服務(wù)器端運(yùn)行 JS 代碼。
眾所周知,Chrome 瀏覽器是谷歌公司開發(fā)的一個(gè)超級好用的瀏覽器,而 V8 引擎是谷歌公司開源的一種技術(shù),它在 Chrome 瀏覽器中主要用來提高編譯 JS 的執(zhí)行速度。
nodejs 也用到了 Chrome 的 V8 引擎,也能編譯執(zhí)行 JS 代碼。
那 nodejs 可以在服務(wù)器端運(yùn)行 JS 代碼什么意思呢?
我們可以基于 Node 環(huán)境開發(fā)后臺項(xiàng)目,處理用戶在瀏覽器發(fā)起的各種請求。
圖片
2. 安裝配置 nodejs
2.1 下載安裝
https://nodejs.cn/download/
圖片
直接下一步下一步安裝即可,建議安裝在 C 盤之外的其他盤符
安裝完成之后,Win+r 輸入 cmd,然后輸入 node -v 和 npm -v 驗(yàn)證安裝結(jié)果
圖片
2.2 配置
1)配置環(huán)境變量
windows系統(tǒng):
系統(tǒng)環(huán)境變量 -> 新建:NODE_HOME,值為 node.js 的安裝目錄。path 變量新增 %NODE_HOME%
2)配置 npm 依賴位置
在 nodejs 安裝目錄下,創(chuàng)建 node_global 和 node_cache 兩個(gè)文件夾
圖片
設(shè)置 npm 依賴下載位置
npm config set cache "D:\Software\Node\npm_cache"
npm config set prefix "D:\Software\Node\npm_global"
3)配置淘寶鏡像
npm config set registry https://registry.npmmirror.com
4)驗(yàn)證
npm config get registry
圖片
3. nodejs 和 npm 的關(guān)系
npm 全稱 Node Package Manager,npm 是隨著 nodejs 一起安裝的一個(gè)包管理工具,nodejs 內(nèi)含 npm。
我們在開發(fā) nodejs 應(yīng)用的時(shí)候,可能需要用到很多不同的功能模塊,這些模塊由其他開發(fā)者開發(fā)并共放在一個(gè)倉庫里面。
如果我們想要使用某個(gè)第三方模塊,例如 axios ,只需要使用 npm install xxx 安裝即可,非常的方便。
圖片
npm 倉庫地址:
https://www.npmjs.com/
圖片
4. 內(nèi)置模塊
學(xué)習(xí) nodejs 主要就是學(xué)習(xí)它的一些內(nèi)置 API 和一些常用的第三方 API。
接下來我們先看一些常用的內(nèi)置模塊。
4.1 文件操作:fs
fs 模塊是 nodejs 官方提供的、用來操作文件的模塊。
在 nodejs 中,如果需要使用內(nèi)部的模塊,我們需要通過 require 加載模塊。
4.1.1 讀文件
圖片
// 1. 加載 fs 模塊,
const fs = require('fs')
// 參數(shù)1:讀取文件的存放路徑
// 參數(shù)2:編碼格式,默認(rèn) utf8
// 參數(shù)3:回調(diào)函數(shù)
fs.readFile('./zhifou.txt', 'utf8', function (err, data) {
if (err) {
return console.log('讀取失??!' + err.message)
}
console.log(data)
})
圖片
4.1.2 寫文件
// 1. 加載 fs 模塊,
const fs = require('fs')
// 參數(shù)1:文件路徑
// 參數(shù)2:寫入的內(nèi)容
// 參數(shù)3:回調(diào)函數(shù)
fs.writeFile('./hello.txt', '鋤禾日當(dāng)午,汗滴禾下土', function (err) {
if (err) {
return console.log('寫入失敗!' + err.message)
}
console.log('寫入成功!')
})
圖片
__dirname 表示當(dāng)前文件所處的目錄,可以用來解決路徑動拼接的問題
// 1. 加載 fs 模塊,
const fs = require('fs')
// 參數(shù)1:文件路徑
// 參數(shù)2:寫入的內(nèi)容
// 參數(shù)3:回調(diào)函數(shù)
console.log(__dirname)
fs.writeFile(__dirname + '/hello.txt', '鋤禾日當(dāng)午,汗滴禾下土', function (err) {
if (err) {
return console.log('寫入失?。? + err.message)
}
console.log('寫入成功!')
})
圖片
如果寫入同一個(gè)文件,新寫入的內(nèi)容會覆蓋之前的舊內(nèi)容
4.2 路徑操作:path
path 模塊是 nodejs 官方提供的、用來處理路徑的模塊。
4.2.1 join
const path = require('path');
let pathA = "/a";
let pathB = "/b";
let pathC = "/c";
let finalPath = path.join(pathA, pathB, pathC);
console.log(finalPath);
圖片
4.2.2 basename
path.basename(path,ext) 可以獲取路徑中的最后一部分,經(jīng)常通過這個(gè)方法獲取路徑中的文件名
- path 必選參數(shù),表示一個(gè)路徑的字符串
- ext 可選參數(shù),表示文件擴(kuò)展名
const path = require('path');
const fpath = '/a/b/zhifou.js'
const fullName = path.basename(fpath)
console.log("name1:", fullName)
const fileName = path.basename(fpath, '.js')
console.log("namew:", fileName)
圖片
4.2.3 extname
path.extname(path) 可以獲取路徑中的擴(kuò)展名
const path = require('path');
const filePath = '/a/b/zhifou.js'
const name = path.extname(filePath)
console.log("name:", name)
4.3 http
http 模塊是 Node.js 官方提供的用來創(chuàng)建 web 服務(wù)器的模塊
通過 http 模塊提供的 http.createServer() 方法,就能方便的把一臺普通的電腦,變成一臺 Web 服務(wù)器,從而對外提供 Web 資源服務(wù)。
// 1. 導(dǎo)入 http 模塊
const http = require('http')
// 2. 創(chuàng)建 web 服務(wù)實(shí)例
const server = http.createServer()
// 3. 為服務(wù)器實(shí)例綁定 request 事件,監(jiān)聽客戶端的請求
server.on('request', (req, res) => {
// req.url 是客戶端請求的 URL 地址
const url = req.url
// 調(diào)用 res.setHeader() 方法,設(shè)置 Content-Type 響應(yīng)頭,解決中文亂碼的問題
res.setHeader('Content-Type', 'text/html; charset=utf-8')
// req.method 是客戶端請求的 method 類型
const method = req.method
const str = `請求的的 url 是 ${url}, 請求的方法類型是 ${method}`
console.log(str)
// 響應(yīng)數(shù)據(jù)
res.end(str)
})
// 4. 啟動服務(wù)器
server.listen(8081, function () {
console.log('server running at http://127.0.0.1:8081')
})
圖片
5. 模塊化
5.1 nodejs 模塊化
我們說的前端模塊化,其實(shí)就是 JS 模塊化。模塊化是前端指定的一種開發(fā)規(guī)范。
在實(shí)際項(xiàng)目開發(fā)中,我們將常用的一些變量或者方法放到一個(gè) js 文件中,然后暴露出來,一個(gè) js 文件可以看做一個(gè)功能模塊。如果想要使用該模塊,只需要導(dǎo)入即可。
剛開始 JS 沒有模塊系統(tǒng)、標(biāo)準(zhǔn)庫較少、缺乏包管理工具。后來 CommonJS 橫空出世。
CommonJS 的模塊規(guī)范:
一個(gè)文件就是一個(gè)模塊,擁有單獨(dú)的作用域。普通方式定義的變量、函數(shù)、對象都屬于該模塊內(nèi)。
- 通過 require 來加載模塊。
- 通過 exports 和 module.exports 來暴露模塊中的內(nèi)容
nodejs 遵循了 CommonJS 模塊化規(guī)范。
nodejs 模塊化案例:
導(dǎo)出:
module.exports
圖片
exports:
圖片
導(dǎo)入:
const math = require('./math');
const testPrint = require('./print');
console.log(math.add(100, 200));
console.log(testPrint.print('知否技術(shù)'));
圖片
5.2 ES6 模塊化
目前大家最常用的就是 ES6 的模塊化,因?yàn)?ES6 模塊化將更好地與其他前端技術(shù)棧(如React、Vue等)進(jìn)行整合。
ES6 模塊化語法:
- 使用 import 關(guān)鍵字導(dǎo)入其他 js 文件
- 使用 export 關(guān)鍵字向外共享 js 文件
5.2.1 搭建 node 環(huán)境
我們在 node 環(huán)境下體驗(yàn) ES6 模塊化。
首先在項(xiàng)目終端輸入以下命令初始化項(xiàng)目:
npm init -y
這時(shí)會立即生成 package.json 文件,然后配置 "type":"module" ,這樣我們就可以在 node 環(huán)境下體驗(yàn) ES6 模塊化了。
圖片
5.2.2 導(dǎo)出方式
1)默認(rèn)導(dǎo)出:export default
let name = "知否君";
let age = 23;
function desc() {
console.log("公眾號:知否技術(shù)");
}
export default {
name, age, desc
}
export default {
name: "知否君",
age: 23,
desc: function () {
console.log("公眾號:知否技術(shù)");
}
}
2)統(tǒng)一導(dǎo)出:export
let name = "知否君";
let age = 23;
function desc() {
console.log("公眾號:知否技術(shù)");
}
export {
name, age, desc
}
3)分別導(dǎo)出
export let name = "知否君";
export let age = 23;
export function desc() {
console.log("公眾號:知否技術(shù)");
}
5.2.3 導(dǎo)入方式
1)默認(rèn)導(dǎo)入
import common from './common.js'
console.log(common);
2)解構(gòu)賦值導(dǎo)入
注意:解構(gòu)賦值導(dǎo)入其實(shí)就是分別導(dǎo)入,只適用于統(tǒng)一導(dǎo)出和分別導(dǎo)出。
import { name, age } from './common.js'
console.log(name);
console.log(age);
6. 第三方 API
第三方 API 太多了,例如 axios、pinia、vuex、myqsql、express 等,這里不再詳細(xì)介紹。
大家根據(jù)學(xué)習(xí)和工作需要,去 npm 倉庫或者網(wǎng)上單獨(dú)查找學(xué)習(xí)即可。
圖片
7.node 常見問題
1)npm 是什么?
npm 就好比是一個(gè)前端的插件商店,里面有各種開發(fā)者寫的包,你需要的時(shí)候就從命令行安裝就可以了。
2)node 和 vue 有什么聯(lián)系
vue 的開發(fā)本身是不依賴 node 的,不過 vue 的腳手架 vue-cli 里面集成的 webpack 是基于 node 開發(fā)出來的,因此只能說 webpack 是依賴 node 的。
3)vite 和 node 什么關(guān)系
Vite 是一個(gè)前端構(gòu)建工具,它需要 nodejs 環(huán)境來運(yùn)行,因?yàn)樗拿钚泄ぞ吆蜆?gòu)建腳本都是基于 nodejs 的。
4)node 和 npm 什么關(guān)系
npm 是 nodejs 的包管理器(package manager)。我們在 nodejs 上開發(fā)時(shí),會用到很多別人已經(jīng)寫好的 JS 代碼,
如果每當(dāng)我們需要別人的代碼時(shí),都根據(jù)名字搜索一下,下載源碼,解壓,再使用,會非常麻煩。于是就出現(xiàn)了包管理器 npm 。
大家把自己寫好的源碼上傳到 npm 官網(wǎng)上,如果要用某個(gè)插件,直接通過 npm 安裝就可以了,不用管那個(gè)源碼在哪里。
并且如果我們要使用模塊 A ,而模塊 A 又依賴模塊 B ,模塊 B 又依賴模塊 C 和 D,此時(shí) npm 會根據(jù)依賴關(guān)系,把所有依賴的包都下載下來并且管理起來。
5)npm run dev 的本質(zhì)
通常,當(dāng)你在項(xiàng)目中執(zhí)行 “npm run dev” 時(shí),它會啟動一個(gè)開發(fā)服務(wù)器。這個(gè)服務(wù)器的主要目的是在開發(fā)過程中為你的前端應(yīng)用提供服務(wù)。
例如,在一個(gè) Vue 項(xiàng)目中,這個(gè)開發(fā)服務(wù)器可能是由 vite 提供的。它會監(jiān)聽項(xiàng)目中的文件變化,當(dāng)你修改了代碼后,服務(wù)器會自動重新加載頁面,讓你能夠立即看到修改后的效果,而無需手動刷新頁面。這樣可以大大提高開發(fā)效率,讓你能夠快速迭代和調(diào)試代碼。
- 依賴管理
在執(zhí)行 “npm run dev” 之前,你的項(xiàng)目通常會有一個(gè) “package.json” 文件,其中列出了項(xiàng)目所需的各種依賴包。當(dāng)你運(yùn)行這個(gè)命令時(shí),npm 會首先檢查這些依賴包是否已經(jīng)安裝。如果沒有安裝,它會自動從 npm 倉庫中下載并安裝這些依賴包。
這些依賴包可能包括前端框架本身(如 Vue 或 React)、各種插件、庫以及開發(fā)工具等。
- 構(gòu)建過程
對于一些復(fù)雜的項(xiàng)目,“npm run dev” 可能還會執(zhí)行一系列的構(gòu)建任務(wù)。例如,在 Vue 項(xiàng)目中,它可能會使用 Webpack 或 Vite 等構(gòu)建工具對項(xiàng)目進(jìn)行打包和優(yōu)化。
這個(gè)構(gòu)建過程可能包括將 ES6+ 的代碼轉(zhuǎn)換為瀏覽器可以理解的 ES5 代碼、合并多個(gè) CSS 文件和 JavaScript 文件、對圖片和字體等資源進(jìn)行優(yōu)化處理等。