JavaScript全解析——node介紹
node 的概念
●什么是 node?
○官方原話:
■一個基于 Chrome V8 解析引擎的 JavaScript 運行時環(huán)境
○換句話說:
■從前有一個人, 把瀏覽器內的 JS 解析引擎拿出來, 和其它內容進行了一個組裝
■變成了一個新的東西, 并起了個名字叫做: 'NodeJS'
●前端 JS 和 NodeJS 的區(qū)別 1
○前端 JS
■當 JS 被引入到 HTML 文件中, 放在瀏覽器中執(zhí)行的時候 (JS 的組成: BOM + DOM + ECMAScript)
■他在這個時候, 才會有所謂的 BOM 和 DOM
●BOM: 瀏覽器對象模型 瀏覽器提供給我們的
●DOM: 文檔對象模型 HTML 提供給我們的
○NodeJS
■把 JS 從 HTML 文件中拿出來, 放在 電腦系統中直接運行
■此時沒有所謂的 DOM 和 BOM
■但是因為是在 電腦系統中運行
●可以操作 文件/文件夾 (I/O; input/output)
●可以操作電腦系統
●可以操作數據庫
●...
●前端 JS 和 NodeJS 的區(qū)別 2
○前端 JS
■運行時可以操作模塊發(fā)開發(fā)(ES6 模塊化), 也可以采用非模塊開發(fā)
■為什么可以采用非模塊化
■因為我們把所有的 JS 文件, 引入到某一個 HTML 文件中, 去使用
○ NodeJS
○運行時 必須采用 模塊化開發(fā)
○因為他是直接執(zhí)行 JS 文件, 沒有一個統一的 html 文件去引入所有的 JS 文件
○使用的 模塊化語法 是 CommonJS
●JS 代碼種是沒有錯誤的
○關鍵是我們要把 JS 運行在那個環(huán)境(要把代碼運行在哪里)
○假設 將來需要把這個 JS 文件放在前端使用(引入到 HTML, 并運行在瀏覽器中)
■那么可以在 JS 中書寫 BOM 和 DOM 相關的東西
○ 假設 將來需要把這個 JS 文件放在 NODEJS 中使用
■那么就不能在 JS 中書寫 DOM 和 BOM 相關的 東西
■但是 此時可以書寫 操作 文件/文件夾相關的代碼
●NodeJS 的作用
○按照 CommonJS 模塊化開發(fā)語法的規(guī)范進行書寫代碼
○能夠 使用 JS 這個語言 進行后端代碼的開發(fā)
node 初體驗
●如何利用 node 執(zhí)行 JS 代碼
○因為 node 是直接在電腦操作系統上進行 JS 代碼的執(zhí)行
○其實就是 在 小黑窗 內直接執(zhí)行 JS 文件
○小黑窗內執(zhí)行 JS 代碼
■方式 1:
●打開 小黑窗, 目錄無所謂
●輸入命令: node 按下回車
●會進入 JS 代碼編輯模式
○此時是不能執(zhí)行 cmd 命令的, 只能書寫 JS 代碼
●按下 ctrl + c 退出當前環(huán)境
●缺點: 書寫的代碼無法保存
■方式 2:
●把你要執(zhí)行的 JS 代碼 書寫在一個 .js 文件內
●打開命令行, 切換目錄到 JS 文件所在的目錄
●輸入指令: node 文件名
內置模塊
node 的模塊化開發(fā)
●node 必須模塊化開發(fā)
●node 自帶的所有內容都是以模塊的形式出現的
● 模塊化語法
○導出
■每一個 JS 文件天生自帶一個變量叫做 module
■表示的是當前自己這個模塊的所有信息
■ 每一個文件默認導出一個對象
■語法:
●如果你想向默認導出的對象內添加成員
●module.exports.屬性名 = 屬性值
●exports.屬性名 = 屬性值
●node 的 每一個 JS 文件, 內部天生自帶一個 變量 叫做 exports
● 變量內部存放的是 指向 module.exports 這個對象的 地址
■如果你想修改這個默認導出的內容
●module.exports = 值
○導入
■ 每一個 JS 文件天生自帶一個方法叫做 require()
■語法: require('地址')
●注意: 如果地址書寫的時候, 文件后綴是 .js, 那么可以省略后綴不寫
■返回值: 該文件的 module.exports (該文件向外暴露的內容)
●模塊分類
○自定義模塊
■自己寫的 JS 文件
○內置模塊
■node 給我們提供的模塊, 直接引入使用即可
○第三方模塊
■由其他人寫好上傳到某一個倉庫內(npm)
■我們去這個倉庫內(npm)下載到本地, 然后引入使用
●node 內置模塊 fs
node 給出的內置模塊, 專門用來操作 文件/文件夾
1.異步讀取文件
a.語法: fs.readFile(文件路徑, 配置參數, 回調函數)
b.參數:
i.文件路徑: 必填
ii.配置參數: 不寫默認是 buffer 可以手動配置為 utf-8
iii.回調函數: 必填, 接受兩個參數, 第一個為報錯信息, 第二個為正確讀取到的文件的內容(字符串格式的)
2,同步讀取文件
3.異步寫入文件
a.語法: fs.writeFile(文件地址, 寫入內容, 回調函數)
b.參數:
i.文件地址:
1.這個文件, 直接講內容寫入到指定文件內
2.沒有這個文件, 創(chuàng)建一個出來, 然后寫入到指定文件內
ii.寫入內容:
1.符串格式的內容, 將這段文本直接寫入到指定文件中, 并覆蓋這個文件之前的所有內容
iii.回調函數:
1.必寫, 哪怕這個函數什么也不做, 也必須要寫
4,同步寫入文件
●node 內置模塊 path
node 自帶的模塊, 專門用于和路徑相關的操作
1.絕對路徑
a.C:/a/b/c/d.html
2.相對路徑
a. ./d.html
b. ../c/d.html
●組裝一個相對路徑 path.join(路徑片段 1, 路徑片段 2, 路徑片段 3)
●組裝一個絕對路徑 path.resolve(路徑片段 1, 路徑片段 2, 路徑片段 3)
●組裝一個解析路徑 path.parse(路徑)
●node 內置模塊 url
node 自帶的模塊, 專門用來操作 url 地址的
●url.parse('地址', 是否深度解析);
○地址: 必填
○是否深度解析
■ 默認是 false, 不深度解析, 可以手動配置為 true
■深度解析其實就是把 對象中的 query 解析為 對象格式
●node 內置模塊 http
node 自帶的一個模塊, 用于開啟一個 http 服務
●服務器
○提供 服務 的 機器
■服務: 提供一些內容(文件/數據)
■機器: 電腦
○有一臺電腦, 運行了 一個 '軟件'
■ 這個 "軟件" 可以向外開放一個 "文件夾"(根目錄)
■當其他電腦訪問到這臺電腦的時候, 并且制定了訪問這個 "軟件" 的時候
■那么相當于在訪問這個文件夾
○例子:
■一臺電腦: 10.11.12.13
■軟件: 8080
■開放的文件夾是: D:/a/b
■當你打開瀏覽器訪問 http:10.11.12.13:8080 的時候, 就是在訪問這臺電腦上的 D:/a/b
○node 就可以利用 http 模塊來充當 "軟件" 啟動服務
1.創(chuàng)建服務
a.語法: http.createServer(函數)
b.函數: 每當前端有一個請求訪問這個服務器的時候, 就會執(zhí)行一次
? ? - 返回值: 一個服務
2.給當前服務配置一個端口號
a.語法: server.listen(端口號(0~65535), 回調函數)
3.創(chuàng)建函數時 函數接收的兩個參數
a.第一個 形參: request, 對應的值為前端請求時攜帶的請求報文
b.第二個 形參: response, 表示本次響應的相關信息, 你只要添加到 res 內, 會由服務器自動組裝響應報文返回給前端
補充---請求
●什么算請求?
○在瀏覽器地址欄輸入一個 地址, 然后按下回車
■以瀏覽器為主體在發(fā)送請求
■服務器返回的內容直接給到瀏覽器, 顯示在頁面上
○在瀏覽器內 以 link script iframe img 等標簽請求的內容
■例如:?<link href="./css/a.css"></link>
■例如:?<script src="./js/a.js"></script>
○當前頁面中的 js 代碼內的 ajax 請求
●請求的完整地址是什么
○在一個 html 文件內所有的書寫地址的位置都可以寫 絕對地址 和 相對地址
■絕對地址: 寫什么就是什么
■ 相對地址: 你打開的文件地址是什么, 那么相對地址就按照打開文件的地址進行拼接
○例子: 打開頁面是?http://localhost:8080/a/b/c/index.html
■如果你的地址寫的是 ./a/a.css
●完整地址:?http://localhost:8080/a/b/c/a/a.css
■你的地址寫的是 ../a.css
●完整地址:?http://localhost:8080/a/b/a.css
■你的地址寫的是 ../d/a.css
●完整地址:?http://localhost:8080/a/b/d/a.css
■你的地址寫的是 /a.css
●完整地址:?http://localhost:8080/a.css
搭建簡易服務器
1.初始搭建
2.配置 css
3.接口和靜態(tài)資源
4.接受請求參數