Node.js簡介
概念：是一個基於 Chrome V8 引擎的 JavaScript 運行環境。
Node.js 的官網地址： https://nodejs.org/zh-cn/
Node.js 中的 JavaScript 運行環境
注意：
① 瀏覽器是 JavaScript 的前端運行環境。
② Node.js 是 JavaScript 的后端運行環境。
③ Node.js 中無法調用 DOM 和 BOM 等
瀏覽器內置 API。
Node.js 環境的安裝
Node.js 的官網首頁（https://nodejs.org/en/）雙擊下載
LTS 版本和 Current 版本的區別
① LTS 為長期穩定版，對於
追求穩定性的
企業級項目來說，推薦安裝 LTS 版本的 Node.js。
② Current 為新特性嘗鮮版，對熱衷於
嘗試新特性的用戶來說，推薦安裝 Current 版本的 Node.js。但是，Current 版本中可
能存在隱藏的 Bug 或安全性漏洞，因此不推薦在企業級項目中使用 Current 版本的 Node.js。
查看已安裝的 Node.js 的版本號
使用快捷鍵（
Windows徽標鍵 + R）打開運行面板，輸入
cmd 后直接回車，即可打開終端
打開終端，在終端輸入命令
node –v 后，即可查看下載的版本
終端中的快捷鍵
① 使用
↑ 鍵，可以快速定位到上一次執行的命令
② 使用
tab 鍵，能夠快速補全路徑
③ 使用
esc 鍵，能夠快速清空當前已輸入的命令
④ 輸入
cls 命令，可以清空終端
fs 文件系統模塊
fs 模塊是 Node.js 官方提供的、用來操作文件的模塊。它提供了一系列的方法和屬性，用來滿足用戶對文件的操作需求
JavaScript 代碼中，使用 fs 模塊來操作文件，則需要使用如下的方式先導入它：
讀取指定文件中的內容
1、
fs.readFile() 的語法格式
參數解讀：
• 參數1：必選參數，字符串，表示文件的路徑。
• 參數2：可選參數，表示以什么編碼格式來讀取文件。
• 參數3：必選參數，文件讀取完成后，通過回調函數拿到讀取的結果。
示列：
1 // 1. 導入 fs 模塊，來操作文件 2 const fs = require('fs') 3 // 2. 調用 fs.readFile() 方法讀取文件 4 // 參數1：讀取文件的存放路徑 5 // 參數2：讀取文件時候采用的編碼格式，一般默認指定 utf8 6 // 參數3：回調函數，拿到讀取失敗和成功的結果 err dataStr 7 fs.readFile('./files/11.txt', 'utf8', function(err, dataStr) { 8 // 2.1 打印失敗的結果 9 // 如果讀取成功，則 err 的值為 null 10 // 如果讀取失敗，則 err 的值為 錯誤對象，dataStr 的值為 undefined 11 // console.log(err) 12 // console.log('-------') 13 // 2.2 打印成功的結果 14 console.log(dataStr) 15 // 判斷文件是否讀取成功 16 if (err) { 17 return console.log("讀取文件失敗！" + err.message) 18 } 19 console.log("讀取文件成功！" + dataStr) 20 })
向指定的文件中寫入內容
2、fs.writeFile() 的語法格式
參數解讀：
• 參數1：必選參數，需要指定一個文件路徑的字符串，表示文件的存放路徑。
• 參數2：必選參數，表示要寫入的內容。
• 參數3：可選參數，表示以什么格式寫入文件內容，默認值是 utf8。
• 參數4：必選參數，文件寫入完成后的回調函數。
示列：
1 // 1. 導入 fs 文件系統模塊 2 const fs = require('fs') 3 // 2. 調用 fs.writeFile() 方法，寫入文件的內容 4 // 參數1：表示文件的存放路徑 5 // 參數2：表示要寫入的內容 6 // 參數3：回調函數 7 fs.writeFile('./files/3.txt', 'ok123', function(err) { 8 // 2.1 如果文件寫入成功，則 err 的值等於 null 9 // 2.2 如果文件寫入失敗，則 err 的值等於一個 錯誤對象 10 console.log(err) 11 // 3判斷文件是否寫入成功 12 if (err) { 13 return console.log('文件寫入失敗！' + err.message) 14 } 15 console.log('文件寫入成功！') 16 })
fs 模塊 - 路徑動態拼接的問題
在使用 fs 模塊操作文件時，如果提供的操作路徑是以 ./ 或 ../ 開頭的相對路徑時，很容易出現路徑動態拼接錯誤的問題。
原因：代碼在運行的時候，會以執行 node 命令時所處的目錄，動態拼接出被操作文件的完整路徑。
解決方案：在使用 fs 模塊操作文件時，直接提供完整的路徑，不要提供 ./ 或 ../ 開頭的相對路徑，從而防止路徑動態拼接的問題。
path 路徑模塊
概念：是 Node.js 官方提供的、用來處理路徑的模塊
1、path.join() 方法，用來將多個路徑片段拼接成一個完整的路徑字符串
語法格式
參數解讀：
• ...paths <string> 路徑片段的序列
• 返回值: <string>
代碼示例
注意：今后凡是涉及到路徑拼接的操作，都要使用 path.join() 方法進行處理。不要直接使用 + 進行字符串的拼接。
2、path.basename() 獲取路徑中的文件名
參數解讀：
• path <string> 必選參數，表示一個路徑的字符串
• ext <string> 可選參數，表示文件擴展名
• 返回: <string> 表示路徑中的最后一部分
代碼示例
3、path.extname() 獲取路徑中的文件擴展名
語法格式
參數解讀：
• path <string>必選參數，表示一個路徑的字符串
• 返回: <string> 返回得到的擴展名字符串
代碼示例
綜合案例 - 時鍾案例
需求：
將素材目錄下的 page.html 頁面，拆分成三個文件，分別是：
• index.css
• index.js
• index.html
素材 page.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <style> 10 html, 11 body { 12 margin: 0; 13 padding: 0; 14 height: 100%; 15 background-image: linear-gradient(to bottom right, red, gold); 16 } 17 18 .box { 19 width: 400px; 20 height: 250px; 21 background-color: rgba(255, 255, 255, 0.6); 22 border-radius: 6px; 23 position: absolute; 24 left: 50%; 25 top: 40%; 26 transform: translate(-50%, -50%); 27 box-shadow: 1px 1px 10px #fff; 28 text-shadow: 0px 1px 30px white; 29 30 display: flex; 31 justify-content: space-around; 32 align-items: center; 33 font-size: 70px; 34 user-select: none; 35 padding: 0 20px; 36 37 /* 盒子投影 */ 38 -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .2))); 39 } 40 </style> 41 </head> 42 43 <body> 44 <div class="box"> 45 <div id="HH">00</div> 46 <div>:</div> 47 <div id="mm">00</div> 48 <div>:</div> 49 <div id="ss">00</div> 50 </div> 51 52 <script> 53 window.onload = function () { 54 // 定時器，每隔 1 秒執行 1 次 55 setInterval(() => { 56 var dt = new Date() 57 var HH = dt.getHours() 58 var mm = dt.getMinutes() 59 var ss = dt.getSeconds() 60 61 // 為頁面上的元素賦值 62 document.querySelector("#HH").innerHTML = padZero(HH) 63 document.querySelector("#mm").innerHTML = padZero(mm) 64 document.querySelector("#ss").innerHTML = padZero(ss) 65 }, 1000) 66 } 67 // 補零函數 68 function padZero(n) { 69 return n > 9 ? n : "0" + n 70 } 71 72 </script> 73 </body> 74 75 </html>
拆分代碼如下所示：
1 // 1 導入 2 // 導入fs文件模塊 3 const fs = require("fs") 4 // 導入路徑 5 const path = require("path") 6 // const { join } = require("path/posix") 坑：敲resove這幾個字代碼后，會自動形成此句代碼，導致報錯，將其注釋或者刪除即可正常運行 7 // 2 定義正在表達式 8 // \代表轉義符，\s匹配空格（包含換行符、制表符空格符），\S非空格 9 // []匹配方括號中的任意字符, *重復0次或更多次， 10 const regStyle = /<style>[\s\S]*<\/style>/ 11 const regStcript = /<script>[\s\S]*<\/script>/ 12 // 3 讀取文件 13 fs.readFile(path.join(__dirname, "./index.html"), "utf8", function (err, data) { 14 // 判斷文件是否讀取成功 15 if (err) { 16 // 讀取文件失敗 17 console.log("讀取文件失敗" + err.message) 18 } else { 19 // 讀取文件成功 20 console.log("讀取文件成功" + data) 21 // 讀取文件成功后，調用對應的 3 個方法，解析出 css、js、html 內容 22 resoveCss(data) 23 resoveJs(data) 24 resoveHTML(data) 25 } 26 // 3 寫入html.css樣式表 27 function resoveCss(htmlStr) { 28 // 使用正則提取頁面中的 <style></style> 29 const r1 = regStyle.exec(htmlStr) 30 // cnsole.log(r1[0]) 31 // 將提取出來的樣式字符串，做進一步的處理 32 const newCss = r1[0].replace("<style>", "").replace("</style>", "")
//###注意： 寫入文件時，需要先建個文件(如index.css)，然后再終端運行 node .\clock.js,樣式表里才會顯示出來 33 fs.writeFile( 34 path.join(__dirname, "./index.css"), 35 newCss, 36 function (err, data) { 37 if (err) { 38 console.log("CSS樣式文件寫入失敗" + err.message) 39 } else { 40 console.log("CSS樣式文件寫入成功") 41 } 42 } 43 ) 44 } 45 // 4 寫入html.js樣式表 46 function resoveJs(htmlJs) { 47 // exec 檢索字符串 中的正在表達式的匹配 48 const r2 = regStcript.exec(htmlJs) 49 // r2[0]拿到匹配成功后索引為0的元素 50 const newJS = r2[0].replace("<script>", "").replace("</script>", "") 51 fs.writeFile( 52 path.join(__dirname, "./index.js"), 53 newJS, 54 function (err, data) { 55 if (err) { 56 console.log("JS文件寫入成功" + err.message) 57 } else { 58 console.log("JS文件寫入成功！") 59 } 60 } 61 ) 62 } 63 // 4 寫入index.html樣式表 64 function resoveHTML(html) { 65 const newHTML = html 66 .replace(regStyle, '<link rel="stylesheet" href="./index.css">') 67 .replace(regStcript, '<script src="./index.js"></script>') 68 fs.writeFile(path.join(__dirname, "./index.html"), newHTML, function (err) { 69 if (err) { 70 console.log("HTML文件寫入失敗！" + err.message) 71 } else { 72 console.log("HTML文件寫入成功！") 73 } 74 }) 75 } 76 })