Node.js 入門筆記源碼
01、如何在終端中執(zhí)行js 文件
目標(biāo)：將下面的代碼語句在中斷中執(zhí)行
- 代碼演示：
`console.log('Hello World')
for (let i = 0;i < 3;i++) {
console.log(6)
}`
- 方法：在文件上右擊打開在終端中執(zhí)行，然后輸入node空格 輸入需要執(zhí)行的文件名字
02、基于 fs 模塊讀寫文件內(nèi)容
目標(biāo)：使用fs模代碼操作文件在終端中的讀寫操作
+ 1、加載 fs 模塊對(duì)象
- 2、寫入文件內(nèi)容-----》writeFile文件中沒有文件會(huì)自動(dòng)幫我們創(chuàng)建
- 3、讀取文件
- 代碼演示：
@@
// 1、加載 fs 模塊對(duì)象 const fs = require('fs') // 2、寫入文件內(nèi)容 // 2.1：test.txt為文件路徑名字 // 2.2：寫入的內(nèi)容 // 2.3：回調(diào)函數(shù)，返回錯(cuò)誤打印出來， 否則成功 fs.writeFile('test.txt','Hello World',(err) => { if(err) console.log(err) else console.log('寫入成功') }) // 3、讀取文件 fs.readFile('test.txt',(err,data) => { if (err) console.log(err) // else console.log(data) //<Buffer 48 65 6c 6c 6f 20 57 6f 72 6c 64> else console.log(data.toString()) //toString() 轉(zhuǎn)為字符串形式 })
-
執(zhí)行結(jié)果為:
寫入成功
Hello World
03、path模塊-路徑問題
問題： Node.js代碼中，相對(duì)路徑是根據(jù)終端所在路徑在查找的，可能無法找到你想要的文件
因此，建議在Node.js代碼中，使用絕對(duì)路徑（也就是需要在終端執(zhí)行的代碼內(nèi)容）
__dirname 內(nèi)置變量 （動(dòng)態(tài)獲取當(dāng)前模塊目錄-絕對(duì)路徑）
**path.join()**會(huì)使用特定于平臺(tái)的分隔符，作為定界符，將所有給定的路徑片段連接在一起
語法：1.加載path模塊
? 2.使用path.join(__dirname, 目標(biāo)文件的路徑)方法，拼接路徑
- 代碼演示
- 錯(cuò)誤例子
//1、 引入 fs 模塊 通過終端讀取文件內(nèi)容
// const fs = require('fs')
// fs.readFile('test.txt',(err,data) => {
// if (err) console.log(err)
// else console.log(data.toString()) //執(zhí)行成功，將十六進(jìn)制轉(zhuǎn)換為字符串形式返回結(jié)果
// })
// 這里使用相對(duì)路徑就發(fā)生報(bào)錯(cuò)error
- 正確示例
- path.join()方法里面，第一個(gè)參數(shù)就是__dirname 當(dāng)前所在文件的文件夾地址（終端的位置） ，第二個(gè)就是目標(biāo)文件的路徑
// 2、解決方式：只有采用絕對(duì)路徑
// 1、引入 fs 模塊
const fs = require('fs')
// 2、引入 path 模塊對(duì)象
const path = require('path')
// 3、調(diào)用path.join()方法 配合 __dirname 組成目標(biāo)文件的絕對(duì)路徑
console.log(__dirname)
fs.readFile(path.join(__dirname,'../test.txt'),(err,data) => {
if (err) console.log(err)
else console.log(data.toString())
})
04、基于node.js 壓縮前端文件
- 目標(biāo)：把回車符（\r） 和 換行符（\n）去掉后，寫入到新html文件中。
實(shí)現(xiàn)方法：
讀取源html文件內(nèi)容
- 源html文件 === (public文件夾下面的index.html文件) 未經(jīng)過壓縮的源代碼
正則替換字符串
寫入到新的html文件中
- 新的html文件 === （dist文件夾下面的index.html文件） 經(jīng)過node使用正則壓縮后的代碼
// 讀取public文件夾里面的前端源代碼
// 1.引入讀取模塊fs
const fs = require('fs')
// 2.拼接路徑獲取絕對(duì)路徑
const path = require('path')
// 3、 __dirname當(dāng)前文件夾所在的地址 進(jìn)行查找文件
fs.readFile(path.join(__dirname,'public/index.html'),(err,data) => {
if (err) console.log(err)
else {
// 4、將返回的內(nèi)容轉(zhuǎn)為字符串顯示
const htmlStr = data.toString()
// 5、進(jìn)行字符串替換 正則查找全局
// replace()是一個(gè)字符串方法，用于將指定的字符或子串替換為新的字符或子串。
const resultStr = htmlStr.replace(/[\r\n]/g,'')
console.log(resultStr)
// 6、寫入到新的 html 文件中
fs.writeFile(path.join(__dirname,'dist/index.html'),resultStr,err => {}) //writeFile文件中沒有文件會(huì)自動(dòng)幫我們創(chuàng)建
if (err) console.log(err)
else {
console.log('寫入成功')
}
}
})
05、URL中的端口號(hào)
1.URL:簡(jiǎn)稱網(wǎng)址，用于訪問服務(wù)器里的資源
2. http://hmajax.itheima.net:80/api/province ==> 這里面：80就是 端口號(hào)
3.端口號(hào)范圍：0~65535之間的任意整數(shù) 端口號(hào)默認(rèn)為：80（注意1023之前的端口號(hào)是特定的被系統(tǒng)占用不可使用）
06、http模塊-創(chuàng)建Web服務(wù)
實(shí)現(xiàn)步驟：
1、加載http模塊，創(chuàng)建Web服務(wù)對(duì)象
2、監(jiān)聽require請(qǐng)求事件，設(shè)置響應(yīng)頭和響應(yīng)體
3、配置端口號(hào)并啟動(dòng)Web服務(wù)
4、瀏覽器請(qǐng)求 http：//localhost:3000則是我們的創(chuàng)建的web服務(wù)對(duì)象
?
- 代碼示例
// 1、加載http模塊，創(chuàng)建Web服務(wù)對(duì)象
const http = require('http')
const server = http.createServer()//調(diào)用http里面的方法
// 2、監(jiān)聽require請(qǐng)求事件，設(shè)置響應(yīng)頭和響應(yīng)體
server.on('request',(req,res) => {
// 設(shè)置響應(yīng)頭-內(nèi)容類型-普通文本以及中文編碼格式
res.setHeader('Content-Type','text/plain;charset=utf-8') //這里都是固定的內(nèi)容類型
// 設(shè)置響應(yīng)體內(nèi)容，結(jié)束本次請(qǐng)求與相應(yīng)
res.end('歡迎使用 Node.js 和 http 模塊創(chuàng)建的 Web服務(wù)')
})
// 3、配置端口號(hào)并啟動(dòng)Web服務(wù)
server.listen(3000,() => {
console.log('Web 服務(wù)啟動(dòng)成功了')
})
代碼詳細(xì)說明
這段代碼是使用Node.js的http模塊創(chuàng)建一個(gè)簡(jiǎn)單的Web服務(wù)，以下是對(duì)代碼的逐行解釋：
- 第一行代碼
const http = require('http')，加載了Node.js的http模塊，并將其賦值給變量http，以便后續(xù)使用該模塊提供的功能。- 第二行代碼
const server = http.createServer()，調(diào)用http模塊中的createServer()方法創(chuàng)建一個(gè)HTTP服務(wù)器對(duì)象，并將其賦值給變量server。此時(shí)的服務(wù)器對(duì)象還沒有進(jìn)行具體的請(qǐng)求處理配置。- 第四行代碼
server.on('request', (req, res) => { ... })，通過server對(duì)象的on方法監(jiān)聽request事件，該事件會(huì)在有客戶端請(qǐng)求到達(dá)服務(wù)器時(shí)觸發(fā)?；卣{(diào)函數(shù)接收兩個(gè)參數(shù)：req表示請(qǐng)求對(duì)象，res表示響應(yīng)對(duì)象。- 在回調(diào)函數(shù)中，通過
res.setHeader('Content-Type', 'text/plain;charset=utf-8')設(shè)置響應(yīng)頭，將內(nèi)容類型設(shè)為普通文本以及中文編碼格式。- 接著，通過
res.end('歡迎使用 Node.js 和 http 模塊創(chuàng)建的 Web服務(wù)')設(shè)置響應(yīng)體內(nèi)容，并結(jié)束本次請(qǐng)求與相應(yīng)。- 最后一行代碼
server.listen(3000, () => { ... })，通過server對(duì)象的listen方法配置服務(wù)器監(jiān)聽的端口號(hào)為3000，并啟動(dòng)Web服務(wù)。當(dāng)服務(wù)器成功啟動(dòng)后，回調(diào)函數(shù)會(huì)被執(zhí)行，輸出一條信息表示服務(wù)器啟動(dòng)成功。綜上，這段代碼創(chuàng)建了一個(gè)簡(jiǎn)單的Web服務(wù)，監(jiān)聽在本地主機(jī)的3000端口上。當(dāng)有請(qǐng)求到達(dá)時(shí)，會(huì)返回固定的歡迎消息。你可以通過訪問
http://localhost:3000來查看Web服務(wù)的響應(yīng)。
07、基于Web服務(wù)，開發(fā)提供網(wǎng)頁(yè)資源的功能
基于Web服務(wù)，開發(fā)提供網(wǎng)頁(yè)資源的功能
- 目標(biāo)：基于 Web 服務(wù)，開發(fā)提供網(wǎng)頁(yè)資源的功能
- 步驟：
- 基于 http 模塊，創(chuàng)建 Web 服務(wù)
- 使用 req.url 獲取請(qǐng)求資源路徑，并讀取 index.html 里字符串內(nèi)容返回給請(qǐng)求方
- 其他路徑，暫時(shí)返回不存在提示
- 運(yùn)行 Web 服務(wù)，用瀏覽器發(fā)起請(qǐng)求
- 代碼示例
// 1. 基于 http 模塊，創(chuàng)建 Web 服務(wù)
const fs = require('fs')
const path = require('path')
const http = require('http')
const server = http.createServer()
server.on('request',(req,res) => { //req為代表客戶端發(fā)送的HTTP請(qǐng)求對(duì)象。res為代表服務(wù)端發(fā)送的HTTP響應(yīng)對(duì)象
// 2、使用 req.url 獲取請(qǐng)求資源路徑，并讀取 index.html 里字符串內(nèi)容返回給請(qǐng)求方
if (req.url === '/index.html') {
fs.readFile(path.join(__dirname,'dist/index.html'),(err,data) => {
if (err) console.log(err)
else {
// 設(shè)置響應(yīng)內(nèi)容的類型為html超文本字符串 ，讓瀏覽器解析成標(biāo)簽網(wǎng)頁(yè)等
res.setHeader('Content-Type','text/html;charset=utf-8')
res.end(data.toString())
}
})
} else {
// 3. 其他路徑，暫時(shí)返回不存在提示
res.setHeader('Content-Type','text/html;charset=utf-8')
res.end('你要訪問的資源路徑不存在')
}
})
server.listen(8080,() => {
console.log('Web 服務(wù)啟動(dòng)成功')
})
《代碼解析》
這段代碼的詳細(xì)原理如下：
- 首先，引入了
http、fs和path模塊，并通過http.createServer()創(chuàng)建了一個(gè)HTTP服務(wù)器對(duì)象，并將其賦值給server變量。同時(shí)，使用server.on('request', (req, res) => { ... })監(jiān)聽request事件，傳入回調(diào)函數(shù)處理請(qǐng)求。- 在回調(diào)函數(shù)中，首先通過
req.url獲取到客戶端請(qǐng)求的資源路徑。如果資源路徑為/index.html，則進(jìn)入條件判斷塊。- 在條件判斷塊中，使用
fs.readFile()方法讀取指定路徑下的index.html文件內(nèi)容。其中，通過path.join(__dirname, 'dist/index.html')構(gòu)建出index.html的完整路徑。在回調(diào)函數(shù)中，判斷是否有讀取錯(cuò)誤，若有錯(cuò)誤則輸出錯(cuò)誤信息；若沒有錯(cuò)誤，則設(shè)置響應(yīng)頭的Content-Type為text/html;charset=utf-8，表示響應(yīng)內(nèi)容類型為HTML文檔，然后通過res.end(data.toString())將讀取到的文件內(nèi)容作為響應(yīng)體發(fā)送給客戶端。- 如果資源路徑不是
/index.html，則執(zhí)行默認(rèn)的else分支，設(shè)置響應(yīng)頭的Content-Type為text/html;charset=utf-8，并通過res.end('你要訪問的資源路徑不存在')返回一個(gè)提示消息給客戶端。- 最后，通過
server.listen(8080, () => { ... })配置服務(wù)器監(jiān)聽的端口號(hào)為8080，并在服務(wù)器成功啟動(dòng)后輸出一條提示信息。總結(jié)來說，這段代碼創(chuàng)建了一個(gè)簡(jiǎn)單的HTTP服務(wù)器，當(dāng)客戶端請(qǐng)求的資源路徑為
/index.html時(shí)，會(huì)讀取指定路徑下的index.html文件內(nèi)容并返回給客戶端，否則返回一個(gè)資源不存在的提示消息。通過監(jiān)聽request事件和處理回調(diào)函數(shù)，實(shí)現(xiàn)了對(duì)不同請(qǐng)求路徑的處理和響應(yīng)。最后，通過server.listen()方法指定監(jiān)聽的端口號(hào)，并在服務(wù)器成功啟動(dòng)后輸出啟動(dòng)成功的提示信息。
關(guān)于request監(jiān)聽函數(shù)中的req和res的詳細(xì)解釋
在Node.js的http模塊中，
req和res是通常用于表示HTTP請(qǐng)求對(duì)象和HTTP響應(yīng)對(duì)象的變量名。
req（或者常見的縮寫）是request的縮寫，代表客戶端發(fā)送的HTTP請(qǐng)求對(duì)象。它包含了與請(qǐng)求相關(guān)的各種信息，如請(qǐng)求方法、URL、請(qǐng)求頭、請(qǐng)求參數(shù)等。通過req對(duì)象，我們可以獲取和解析客戶端發(fā)送的請(qǐng)求數(shù)據(jù)，以便在服務(wù)器端進(jìn)行處理和響應(yīng)。res（或者常見的縮寫）是response的縮寫，代表服務(wù)端發(fā)送的HTTP響應(yīng)對(duì)象。它用于設(shè)置和發(fā)送服務(wù)端的響應(yīng)給客戶端。通過res對(duì)象，我們可以設(shè)置響應(yīng)的狀態(tài)碼、響應(yīng)頭、響應(yīng)體內(nèi)容等。最終，將響應(yīng)發(fā)送給客戶端，完成HTTP請(qǐng)求-響應(yīng)周期。在HTTP請(qǐng)求過程中，客戶端發(fā)送請(qǐng)求給服務(wù)器，服務(wù)器接收到請(qǐng)求后創(chuàng)建一個(gè)
req對(duì)象來表示該請(qǐng)求。然后，服務(wù)器處理請(qǐng)求并生成相應(yīng)的內(nèi)容，將其存放在一個(gè)res對(duì)象中，并通過網(wǎng)絡(luò)將res對(duì)象發(fā)送給客戶端。文章來源：http://www.zghlxwxcb.cn/news/detail-621530.html所以，
req和res分別代表了客戶端發(fā)送的HTTP請(qǐng)求對(duì)象和服務(wù)端返回的HTTP響應(yīng)對(duì)象，在開發(fā)Web應(yīng)用時(shí)，我們可以使用這兩個(gè)對(duì)象來實(shí)現(xiàn)對(duì)請(qǐng)求的處理和對(duì)響應(yīng)的配置。文章來源地址http://www.zghlxwxcb.cn/news/detail-621530.html
到了這里，關(guān)于Node.js入門筆記（包含源代碼）以及詳細(xì)解析的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
