01.Node.js 講解

什么是 Node.js，有什么用，為何能獨(dú)立執(zhí)行 JS 代碼，演示安裝和執(zhí)行 JS 文件內(nèi)代碼

1. Node.js 是一個(gè)獨(dú)立的 JavaScript 運(yùn)行環(huán)境，能獨(dú)立執(zhí)行 JS 代碼，因?yàn)檫@個(gè)特點(diǎn)，它可以用來編寫服務(wù)器后端的應(yīng)用程序

2. Node.js 作用除了編寫后端應(yīng)用程序，也可以對(duì)前端代碼進(jìn)行壓縮，轉(zhuǎn)譯，整合等等，提高前端開發(fā)和運(yùn)行效率

3. Node.js 基于Chrome V8 引擎封裝，獨(dú)立執(zhí)行 JS 代碼，但是語法和瀏覽器環(huán)境的 V8 有所不同，沒有 document 和 window 但是都支持 ECMAScript 標(biāo)準(zhǔn)的代碼語法

4. 想要得到 Node.js 需要把這個(gè)軟件安裝到電腦，在素材里有安裝程序（window 和 mac 環(huán)境的）參考 PPT 默認(rèn)下一步安裝即可

5. Node.js 沒有圖形化界面，需要使用 cmd 終端命令行（利用一些命令來操控電腦執(zhí)行某些程序軟件）輸入，node -v 檢查是否安裝成功

/*** 目標(biāo)：編寫 js 代碼，用 node 命令執(zhí)行* 終端作用：敲擊命令，調(diào)用對(duì)應(yīng)程序執(zhí)行* 終端打開：目標(biāo)文件->右鍵->在集成終端中打開* 命令：node xxx.js （注意路徑）*/
for (let i = 0; i < 3; i++) {console.log(i)   
}

02.fs模塊 讀寫文件

1. 模塊：類似插件，封裝了方法和屬性供我們使用

2. fs 模塊：封裝了與本機(jī)文件系統(tǒng)進(jìn)行交互的，方法和屬性

/*** 目標(biāo)：使用 fs 模塊，讀寫文件內(nèi)容* 語法：* 1. 引入 fs 模塊* 2. 調(diào)用 writeFile 寫入內(nèi)容* 3. 調(diào)用 readFile  讀取內(nèi)容*/
const fs = require('fs') // 引入 fs 模塊fs.readFile('./text.txt',(err,data)=>{   // 調(diào)用 readFile  讀取內(nèi)容  data 是文件內(nèi)容的 Buffer 數(shù)據(jù)流if (err) {console.log(err)        } else {// 讀取出來的數(shù)據(jù)默認(rèn)是Buffer數(shù)據(jù)流，得toString（）轉(zhuǎn)成字符串，用戶能看懂console.log(data.toString())        }
})
// fs.writeFile('寫入的文件','寫入的內(nèi)容',回調(diào)函數(shù)（err）)
// 寫入的數(shù)據(jù)，新的替換舊的 會(huì)覆蓋原文件的所有內(nèi)容；沒有這個(gè)文件則自動(dòng)創(chuàng)建這個(gè)文件
fs.writeFile('./text11.txt','我是鴻蒙6期的~~~',err=>{ // 寫入內(nèi)容console.log('恭喜寫入成功')    
})

03.path 模塊（絕對(duì)路徑）

• Node.js 執(zhí)行 JS 代碼時(shí)，代碼中的路徑都是以終端所在文件夾出發(fā)查找相對(duì)路徑，而不是以我們認(rèn)為的從代碼本身出發(fā)，會(huì)遇到問題，所以在 Node.js 要執(zhí)行的代碼中，訪問其他文件，建議使用絕對(duì)路徑
• path模塊內(nèi)置變量 __dirname配合 path.join() 來得到絕對(duì)路徑使用

/*** 目標(biāo)：讀取 test.txt 文件內(nèi)容* 注意：代碼中，使用絕對(duì)路徑* 原因：Node.js 執(zhí)行時(shí)會(huì)以終端所在文件夾作為相對(duì)路徑，去拼接代碼中路徑使用（導(dǎo)致找不到目標(biāo)文件）* 解決：使用 path.join() 和 __dirname 來填寫要查找的目標(biāo)文件絕對(duì)地址*/const fs = require('fs')
const path = require('path')  // 引入path模塊
fs.readFile(path.join(__dirname,'..','text.txt'),(err,data)=>{  // 讀取if (err) {console.log(err)        } else {console.log(data.toString())        }
})

04.案例 壓縮前端的html

/*** 目標(biāo)一：壓縮 html 里代碼* 需求：把 public/index.html 里的，回車/換行符去掉，寫入到 dist/index.html 中*  1.1 讀取 public/index.html 內(nèi)容*  1.2 使用正則替換內(nèi)容字符串里的，回車符\r 換行符\n*  1.3 確認(rèn)后，寫入到 dist/index.html 內(nèi)*/
// 讀取public里面的index.html→格式化壓縮→壓縮完的代碼寫入到dist里面的newIndex.html
// 讀取文件fs模塊+路徑path
const fs = require('fs')
const path = require('path')
// 讀取原h(huán)tml文件
// fs.readFile（文件，回調(diào)函數(shù)）
fs.readFile(path.join(__dirname, 'public', 'index.html'), (err, data) => {if (err) console.log(err)//  else console.log(data.toString())        const htmlStr = data.toString() // 代碼→去掉回車換行\(zhòng)r\n→用正則找到\r\n替換成空字符const newStr = htmlStr.replace(/[\r\n]/g, '') // g表示替換所有的\r\nconsole.log(newStr)// 寫入到新的html文件//  fs.writeFile（文件路徑，要寫入的內(nèi)容，回調(diào)函數(shù)）fs.writeFile(path.join(__dirname, 'dist', 'newIndex.html'), newStr, (err) => {if (err) console.log(err)else console.log('恭喜，壓縮成功')})
})

05.案例 壓縮前端的js（壓縮 js 里代碼，并整合到 html 中一起運(yùn)行）

/*** 目標(biāo)二：壓縮 js 里代碼，并整合到 html 中一起運(yùn)行*  2.1 讀取 public/index.js 內(nèi)容*  2.2 使用正則替換內(nèi)容字符串里的，回車符\r 換行符\n 打印語句console.log('xxx');*  2.3 確認(rèn)后，拼接 html 內(nèi)容寫入到 dist/index.html 內(nèi)*/
const fs = require('fs')
const path = require('path')
// 讀取html文件
fs.readFile(path.join(__dirname, 'public', 'index.html'), (err, data) => {if (err) console.log(err)// else console.log(data.toString())const htmlStr = data.toString()const newStr = htmlStr.replace(/[\n\r]/g, '') //已經(jīng)去掉\r\n的html代碼// console.log(newStr) // 讀取html成功// 讀取js代碼fs.readFile(path.join(__dirname, 'public/index.js'), (err, data) => {if (err) console.log(err)// else console.log(data.toString())//  有script標(biāo)簽再放js代碼const myjs = data.toString()//代碼→去掉\r\n;去掉log輸出→把html和js拼一起寫入到新html文件const jsStr = myjs.replace(/[\r\n]/g, '').replace(/console.log\('.+?'\);/g, '')// console.log(jsStr)      const newjs = `<script>${jsStr}</script>`  //帶script標(biāo)簽的js// 把html文件和js一起寫到其他文件夾// fs.writeFile（文件路徑，寫入的內(nèi)容，回調(diào)函數(shù)）把html代碼和js代碼憑借到一起fs.writeFile(path.join(__dirname, './dist/new.html'), newStr + newjs, (err) => {if (err) console.log(err)else console.log('成功')})})
})

06.URL 端口號(hào)

/*** 目標(biāo)：了解端口號(hào)的作用* 端口號(hào)：用于區(qū)分服務(wù)器中的不同服務(wù)程序* 取值范圍：0-65535* 注意：0-1023 和一些特定端口號(hào)是被占用的，我們自己編寫服務(wù)程序請(qǐng)避開使用*  1. URL 是統(tǒng)一資源定位符，簡稱網(wǎng)址，用于訪問網(wǎng)絡(luò)上的資源2. 端口號(hào)的作用：標(biāo)記服務(wù)器里對(duì)應(yīng)的服務(wù)程序，值為（0-65535 之間的任意整數(shù)）3. 注意：http 協(xié)議，默認(rèn)訪問的是 80 端口4. Web服務(wù)：一個(gè)程序，用于提供網(wǎng)上信息瀏覽功能5. 注意：0-1023 和一些特定的端口號(hào)被占用，我們自己編寫服務(wù)程序請(qǐng)避開使用 * * */

07.http模塊-創(chuàng)建Web服務(wù)

/*** 目標(biāo)：使用 http 模塊，創(chuàng)建 Web 服務(wù)* Web服務(wù)：一個(gè)程序，用于提供網(wǎng)上信息瀏覽服務(wù)* 步驟：*  1. 引入 http 模塊，創(chuàng)建 Web 服務(wù)對(duì)象*  2. 監(jiān)聽 request 事件，對(duì)本次請(qǐng)求，做一些響應(yīng)處理*  3. 啟動(dòng) Web 服務(wù)監(jiān)聽對(duì)應(yīng)端口號(hào)*  4. 運(yùn)行本服務(wù)在終端，用瀏覽器訪問 http://localhost:3000/ 發(fā)起請(qǐng)求（localhost 是本機(jī)域名）* 注意：終端里啟動(dòng)了服務(wù)，如果想要終止按 ctrl c 停止即可*/
// 1.引入 http 模塊，創(chuàng)建 Web 服務(wù)對(duì)象
const http = require('http')
// 創(chuàng)建web服務(wù)
const server = http.createServer()
// 發(fā)請(qǐng)求，返回響應(yīng)結(jié)果
// server.on('request事件',回調(diào)函數(shù))
server.on('request',(req,res)=>{// 設(shè)置響應(yīng)頭，內(nèi)容類型，普通 html 文本：編碼格式為 utf-8res.setHeader('Content-Type','text/html;charset=utf-8')res.end('你好，歡迎訪問')// res.end('hallo')
})// 啟動(dòng) Web 服務(wù)監(jiān)聽對(duì)應(yīng)端口號(hào)
// server.listen(端口號(hào)，回調(diào)函數(shù))
server.listen(6656,()=>{console.log('web 服務(wù)已啟動(dòng)')})

08.web服務(wù) - 支持中文字符

/*** 目標(biāo)：Web 服務(wù)支持中文字符* 問題：返回響應(yīng)內(nèi)容為，中文字符，瀏覽器無法正確顯示* 原因：Web 服務(wù)沒有設(shè)置響應(yīng)頭，指定說明內(nèi)容類型和編碼格式* 解決：設(shè)置響應(yīng)頭內(nèi)容類型，讓請(qǐng)求方能正確解析* 語法：res.setHeader('Content-Type', 'text/html;charset=utf-8')*/const http = require('http')
const server = http.createServer()
server.on('request', (req, res) => {res.end('你好，親愛的世界') 
})
server.listen(3000, () => {console.log('Web 服務(wù)啟動(dòng)了')
})

09.案例 - 省份列表接口

/*** 目標(biāo)：基于 Web 服務(wù)，開發(fā)-省份列表數(shù)據(jù)接口* 步驟：*  1. 創(chuàng)建 Web 服務(wù)*  2. 使用 req.url 獲取請(qǐng)求的資源路徑，讀取 json 文件數(shù)據(jù)返回*  3. 其他請(qǐng)求的路徑，暫時(shí)返回不存在的提示*  4. 運(yùn)行 Web 服務(wù)，用瀏覽器請(qǐng)求地址查看效果*/
const fs = require('fs')const http =  require('http')
const path = require('path')//  創(chuàng)建web服務(wù)
const server = http.createServer()// 3.發(fā)請(qǐng)求，監(jiān)聽請(qǐng)求，返回響應(yīng)結(jié)果
server.on('request',(req,res)=>{
if(req.url ==='/api/provin'){// console.log('查詢地址成功') // 讀取json文件里面的內(nèi)容，響應(yīng)給用戶→ 中文 → 支持中文  → 設(shè)置響應(yīng)頭內(nèi)容類型fs.readFile(path.join(__dirname,'data/province.json'),(err,data)=>{res.setHeader('content-type','application/json;charset=utf-8')res.end(data.toString()) //響應(yīng)給用戶})
}else{// console.log('請(qǐng)求地址錯(cuò)誤，查無此地址')res.setHeader('content-type','text/html;charset=utf-8')res.end('不好意思，您訪問的資源不存在') //響應(yīng)給用戶
}
})// 4.監(jiān)聽某個(gè)端口號(hào)
server.listen(3333,()=>{console.log('服務(wù)器啟動(dòng)成功')})

10.案例 - 城市列表接口

/*** 目標(biāo)：基于 Web 服務(wù)，開發(fā)-城市列表數(shù)據(jù)接口* 步驟：*  1. 判斷 req.url 資源路徑+查詢字符串，路徑前綴匹配/api/city*  2. 借助 querystring 模塊的方法，格式化查詢參數(shù)字符串*  3. 讀取 city.json 城市數(shù)據(jù)，匹配省份名字下屬城市列表*  4. 返回城市列表，啟動(dòng) Web 服務(wù)測(cè)試*/
const fs = require('fs')
const path = require('path')
const http = require('http')
// const { queryObjects } = require('v8')
const qs = require('querystring')
//  創(chuàng)建web服務(wù)
const server = http.createServer()// 03.發(fā)請(qǐng)求監(jiān)聽請(qǐng)求，返回響應(yīng)結(jié)果
server.on('request',(req,res)=>{//判斷條件－url是否以/api/city開頭→是以這個(gè)開頭的，拿到pname的值，去查找數(shù)據(jù)if(req.url.startsWith('/api/city')){console.log('地址正確')const str =req.url.split('?')[1]const pname = qs.parse(str).pname// console.log(pname)fs.readFile(path.join(__dirname,'data/city.json'),(err,data)=>{const result = JSON.parse(data.toString())[pname] // 數(shù)組，不能直接返回?cái)?shù)組，返回jsonres.setHeader('content-type','application/json;charset=utf-8')res.end(JSON.stringify(result))})}else{res.setHeader('content-type','application/json;charset=utf-8')res.end('資源不存在')}
})// 04.監(jiān)聽某個(gè)端口
server.listen(3333,()=>{console.log('服務(wù)啟動(dòng)成功')})

11.案例-瀏覽時(shí)鐘

/*** 目標(biāo)：編寫 web 服務(wù)，監(jiān)聽請(qǐng)求的是 /index.html 路徑的時(shí)候，返回 dist/index.html 時(shí)鐘案例頁面內(nèi)容* 步驟：*  1. 基于 http 模塊，創(chuàng)建 Web 服務(wù)*  2. 使用 req.url 獲取請(qǐng)求資源路徑，并讀取 index.html 里字符串內(nèi)容返回給請(qǐng)求方*  3. 其他路徑，暫時(shí)返回不存在提示*  4. 運(yùn)行 Web 服務(wù)，用瀏覽器發(fā)起請(qǐng)求*/
const http = require('http')
const fs = require('fs')
const path = require('path')
// 創(chuàng)建web服務(wù)
const server = http.createServer()// 發(fā)請(qǐng)求監(jiān)聽請(qǐng)求，返回響應(yīng)結(jié)果
server.on('request',(rep,res)=>{if(rep.url === '/index.html'){fs.readFile(path.join(__dirname,'dist/index.html'),(err,data)=>{res.setHeader('content-type','text/html;charset=utf-8')res.end(data.toString())})}else{res.setHeader('content-type','text/html;charset=utf-8')res.end('訪問的資源不存在')}
})// 
server.listen(3333,()=>{console.log('服務(wù)啟動(dòng)成功')
})