【前端】Node.js一本通

近兩天更新完畢，建議關注收藏點贊。

復習

為什么JS可以在瀏覽器中執行
原理：待執行的JS代碼->JS解析引擎
不同的瀏覽器使用不同的 JavaScript 解析引擎：其中，Chrome 瀏覽器的 V8 解析引擎性能最好！
Chrome 瀏覽器 => V8
Firefox 瀏覽器 => OdinMonkey（奧丁猴）
Safari 瀏覽器 => JSCore
IE 瀏覽器 => Chakra（查克拉）
為什么 JavaScript 可以操作 DOM 和 BOM
每個瀏覽器都內置了 DOM、BOM 這樣的 API 函數，因此，瀏覽器中的 JavaScript 才可以調用它們。
瀏覽器中JS運行環境
總結：V8 引擎負責解析和執行 JavaScript 代碼。內置 API 是由運行環境提供的特殊接口，只能在所屬的運行環境中被調用。
學習路徑總結

瀏覽器中的 JavaScript 學習路徑：
JavaScript 基礎語法 + 瀏覽器內置 API（DOM + BOM） + 第三方庫（jQuery、art-template 等）
Node.js 的學習路徑：
JavaScript 基礎語法 + Node.js 內置 API 模塊（fs、path、http等）+ 第三方 API 模塊（express、mysql 等）

Node.js概述

Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環境。nodejs官網
運行環境
瀏覽器是 JavaScript 的前端運行環境。
Node.js 是 JavaScript 的后端運行環境。
Node.js 中無法調用 DOM 和 BOM 等瀏覽器內置 API。
功能
Node.js 作為一個 JavaScript 的運行環境，僅僅提供了基礎的功能和 API。在此基礎上，運用很多強大的工具和框架。
基于 Express 框架（http://www.expressjs.com.cn/），可以快速構建 Web 應用
基于 Electron 框架（https://electronjs.org/），可以構建跨平臺的桌面應用
基于 restify 框架（http://restify.com/），可以快速構建 API 接口項目
讀寫和操作數據庫、創建實用的命令行工具輔助前端開發…

工具/框架	簡介	特點
Express.js	用于構建Web應用和API的輕量級框架	簡潔、快速、支持RESTful API、強大的路由功能
NestJS	基于TypeScript的現代化Node.js框架，適用于企業級應用	支持TypeScript、模塊化架構、易于集成各種庫
Koa.js	由Express原班人馬開發的框架，目標是更小更強大	支持async/await、靈活的中間件機制
Hapi.js	強大的Web框架，注重可擴展性和靈活性	強大的插件系統、內置驗證、路由和錯誤處理功能
Sails.js	基于Express的MVC框架，適合數據驅動的API應用	支持WebSockets、ORM、MVC結構
Socket.io	實現實時、雙向通信的JavaScript庫	支持WebSocket、易于集成、支持廣播和房間功能
Electron.js	使用Web技術構建跨平臺桌面應用	跨平臺、支持豐富的原生API
Gulp.js	基于流的JavaScript任務運行器，用于自動化前端任務	流式任務系統、插件豐富、易于配置
Grunt.js	JavaScript任務運行器，自動化前端開發流程	配置簡潔、插件支持廣泛
PM2	Node.js進程管理工具，支持生產環境的應用管理	進程管理、負載均衡、日志管理、性能監控
Mongoose	MongoDB的ODM庫，簡化與MongoDB的交互	Schema支持、數據驗證、查詢構建、模型功能強大

安裝
LTS是長期穩定版企業項目推薦安裝

node -v #查看版本

使用

在 Node.js 環境中執行 JavaScript 代碼

node js_path

補充終端快捷鍵
tab快速補全路徑
esc快速清空當前已輸入命令
cls清空終端

實例：將html文件中的js css部分拆出來成一單獨文件

[\s\S] 只匹配 一個字符；
[\s\S]* 才是匹配 任意數量的字符（包括 0 個）；
[\s\S]*? 是非貪婪地匹配任意數量字符，直到匹配到后續的模式。

const fs=require('fs')
const path=require('path')
const regStyle=/<style>[\s\S]*<\/style>/
const regScript=/<script>[\s\S]*<\/script>/
fs.readFile(path.join(__dirname,'index.html'),'utf8',(err,datastr)=>{if(err)return console.log('文件讀取失敗'+err.message)resolveCSS(datastr)resolveJS(datastr)resolveHTML(datastr)
})function resolveCSS(htmlstr){const r1=regStyle.exec(htmlstr)const newcss=r1[0].replace('<style>','').replace('</style>','')fs.writeFile(path.join(__dirname,'index.css'),newcss,err=>{if(err)return console.log('文件寫入失敗'+err.message)console.log('css寫入成功')})
}function resolveJS(htmlstr){const r2=regScript.exec(htmlstr)const newjs=r2[0].replace('<script>','').replace('</script>','')fs.writeFile(path.join(__dirname,'./index.js'),newjs,err=>{if(err)return console.log('文件寫入失敗'+err.message)console.log('js寫入成功')})
}function resolveHTML(htmlstr){const newhtml=htmlstr.replace(regStyle,'<link rel="stylesheet" href="./index.css"/>').replace(regScript,'<script src="./index.js"></script>')fs.writeFile(path.join(__dirname,'./index.html'),newhtml,err=>{if(err)return console.log('文件寫入失敗'+err.message)console.log('html寫入成功')})
}

實例：實現clock時鐘的web服務器
把文件的實際存放路徑，作為每個資源的請求 url 地址。

const http=require('http')
const fs=require('fs')
const path=require('path')
const server=http.createServer()
server.on('request',function(req,res){const url=req.urllet fpath=''//const fpath=path.join(__dirname,url)if(url==='/'){fpath=path.join(__dirname,'./clock/index.html')}else{fpath=path.join(__dirname,'./clock',url)}fs.readFile(fpath,'utf8',(err,datastr)=>{if(err)return res.end('404 not found')res.end(datastr)})
})
server.listen(80,function(){console.log('listening')
})

fs文件系統模塊

fs模塊是nodejs提供的用來操作文件的模塊。
fs.writeFile() 方法只能用來創建文件，不能用來創建路徑
重復調用 fs.writeFile() 寫入同一個文件，新寫入的內容會覆蓋之前的舊內容

//js中用fs模塊操作文件
const fs=require('fs')//導入fs.readFile(path,[options],callback)
//參數2 可選 編碼格式
//參數3 文件讀取完成，通過回調函數拿到讀取結果fs.readFile('./path.txt','utf8',function(err,datastr){if(err)return console.log('文件讀取失敗'+err.message)//err=null時讀取成功，反之讀取失敗,datastr=undefinedconsole.log(datastr)
})fs.writeFile(file_path,data.[options],callback)
//data 要寫入file的內容
//callback 文件寫入完成后的回調函數
//是否寫入成功也是判斷err

路徑動態拼接的問題
在使用 fs 模塊操作文件時，如果提供的操作路徑是以 ./ 或 …/ 開頭的相對路徑時，很容易出現路徑動態拼接錯誤的問題。
原因：代碼在運行的時候，會以執行 node 命令時所處的目錄，動態拼接出被操作文件的完整路徑。
解決方案：在使用 fs 模塊操作文件時，直接提供完整的路徑，不要提供 ./ 或 …/ 開頭的相對路徑，從而防止路徑動態拼接的問題。
__dirname 是 Node.js 中的一個全局變量，它表示當前模塊（文件）所在的目錄的絕對路徑。它在所有模塊中都可用，并且通常用于拼接路徑，方便訪問文件系統中的其他文件。

//__dirname: /Users/yourname/projectfs.readFile(__dirname+'/path.txt','utf8',function(err,datastr){if(err)return console.log('文件讀取失敗'+err.message)//err=null時讀取成功，反之讀取失敗console.log(datastr)
})

path路徑模塊

path 模塊是 Node.js 官方提供的、用來處理路徑的模塊。凡是后端（不是前端）涉及路徑拼接的操作，用這個模塊，不要用+進行字符串拼接。

const path=require('path') //導入path.join([...paths])//多個路徑片段連接const filePath = path.join(__dirname, 'data', 'file.txt');
console.log(filePath);
// 輸出：/Users/yourname/project/data/file.txtpath.basename(path,[ext])
//獲取路徑的最后一部分，用于獲取路徑中的文件名
//ext 可選，文件擴展名const fpath='/a/b/c/index.html'
var filename=path.basename(fpath)
var name_without_ext=path.basename(fpath,'.html')path.extname(path)//獲取擴展名部分
const fext=path.extname(fpath)

http模塊

http 模塊是 Node.js 官方提供的、用來創建 web 服務器的模塊。通過 http 模塊提供的 http.createServer() 方法，就能方便的把一臺普通的電腦，變成一臺 Web 服務器，從而對外提供 Web 資源服務。
在 Node.js 中，我們不需要使用 IIS、Apache 等這些第三方 web 服務器軟件。因為我們可以基于 Node.js 提供的 http 模塊，通過幾行簡單的代碼，就能輕松的手寫一個服務器軟件，從而對外提供 web 服務。

創建 web 服務器的基本步驟
導入 http 模塊
創建 web 服務器實例
為服務器實例綁定 request 事件，監聽客戶端的請求
啟動服務器

const http=require('http')//導入
const server=http.createServer()//web服務器實例//為服務器實例綁定request事件 監聽客戶端發送過來的網絡請求
server.on('request',(req,res)=>{//只要有客戶端請求服務器，就會觸發request事件，調用這個事件處理函數const str=`req url is ${req.url},req method is ${req.method}`console.log('welcome',str)//防止中文亂碼res.setHeader('Content-Type','text/html;charset=utf-8')//res.end()向客戶端發送內容，并結束這次請求處理過程res.end(str)
})//根據不同url相應不同html內容
server.on('request',(req,res)=>{//只要有客戶端請求服務器，就會觸發request事件，調用這個事件處理函數const url=req.urllet content='<h1>404 not found</h1>'if(url==='/' || url==='/index.html'){content='<h1>welcome歡迎</h1>'}else if(url==='/about.html'){content='<h1>it\'s me這是我 </h1>'}//防止中文亂碼res.setHeader('Content-Type','text/html;charset=utf-8')//res.end()向客戶端發送內容，并結束這次請求處理過程res.end(content)
})//啟動服務器
server.listen(80,()=>{console.log('running')
})