一 .Node.js 基礎(chǔ)
目錄
Node開發(fā)概述
Node運(yùn)行環(huán)境搭建
Node.js快速入門
1. Node開發(fā)概述
1.1 為什么要學(xué)習(xí)服務(wù)器端開發(fā)基礎(chǔ)
能夠和后端程序員更加緊密的配合
網(wǎng)站業(yè)務(wù)邏輯前置，學(xué)習(xí)前端技術(shù)需要后端技術(shù)支撐（Ajax）
擴(kuò)寬知識視野失都，能夠站在更高的角度審視整個項(xiàng)目
1.2 服務(wù)器端開發(fā)要做的事情
實(shí)現(xiàn)網(wǎng)站的業(yè)務(wù)邏輯
數(shù)據(jù)的增刪改查
1.3 為什么選擇Node
使用JavaScript語法開發(fā)后端應(yīng)用
一些公司要求前端工程師掌握Node開發(fā)
生態(tài)系統(tǒng)活躍蚀同，有大量開源庫可以使用
前端開發(fā)工具大多基于Node開發(fā)
1.4 Node是什么
Node是一個基于Chrome V8引擎的JavaScript代碼運(yùn)行環(huán)境初茶。
運(yùn)行環(huán)境
瀏覽器（軟件）能夠運(yùn)行JavaScript代碼，瀏覽器就是JavaScript代碼的運(yùn)行環(huán)境
Node（軟件）能夠運(yùn)行JavaScript代碼翅娶，Node就是JavaScript代碼的運(yùn)行環(huán)境
2. Node運(yùn)行環(huán)境搭建
2.1 Node.js運(yùn)行環(huán)境安裝
官網(wǎng)：https://nodejs.org/en/
Current 擁有最新特性 實(shí)驗(yàn)版LTS = Long Term
Support 長期支持版 穩(wěn)定版
2.2 Node環(huán)境安裝失敗解決辦法
1. 錯誤代號2502叉趣、2503
失敗原因：系統(tǒng)帳戶權(quán)限不足。
解決辦法：
以管理員身份運(yùn)行powershell命令行工具
輸入運(yùn)行安裝包命令 msiexec /package node安裝包位置
2. 執(zhí)行命令報(bào)錯
失敗原因：Node安裝目錄寫入環(huán)境變量失敗
解決辦法：將Node安裝目錄添加到環(huán)境變量中
2.3 PATH環(huán)境變量
存儲系統(tǒng)中的目錄吞加，在命令行中執(zhí)行命令的時(shí)候系統(tǒng)會自動去這些目錄中查找命令的位置。
3. Node.js快速入門
3.1 Node.js 的組成
JavaScript 由三部分組成，ECMAScript衔憨，DOM叶圃，BOM。
Node.js是由ECMAScript及Node 環(huán)境提供的一些附加API組成的巫财，包括文件盗似、網(wǎng)絡(luò)哩陕、路徑等等一些更加強(qiáng)大的 API平项。
3.2 Node.js基礎(chǔ)語法
所有ECMAScript語法在Node環(huán)境中都可以使用。
在Node環(huán)境下執(zhí)行代碼悍及，使用Node命令執(zhí)行后綴為.js的文件即可
3.3 Node.js全局對象global
在瀏覽器中全局對象是window闽瓢，在Node中全局對象是global。
Node中全局對象下有以下方法心赶，可以在任何地方使用扣讼，global可以省略。
console.log() 在控制臺中輸出
setTimeout() 設(shè)置超時(shí)定時(shí)器
clearTimeout() 清除超時(shí)時(shí)定時(shí)器
setInterval() 設(shè)置間歇定時(shí)器
clearInterval() 清除間歇定時(shí)器
二.模塊加載及第三方包
目錄
Node.js模塊化開發(fā)
系統(tǒng)模塊
第三方模塊
package.json文件
Node.js中模塊的加載機(jī)制
1. Node.js模塊化開發(fā)
1.1 JavaScript開發(fā)弊端
JavaScript在使用時(shí)存在兩大問題缨叫，文件依賴和命名沖突椭符。
1.2 生活中的模塊化開發(fā)
1.3 軟件中的模塊化開發(fā)
一個功能就是一個模塊，多個模塊可以組成完整應(yīng)用耻姥，抽離一個模塊不會影響其他功能的運(yùn)行销钝。
1.4 Node.js中模塊化開發(fā)規(guī)范
Node.js規(guī)定一個JavaScript文件就是一個模塊，模塊內(nèi)部定義的變量和函數(shù)默認(rèn)情況下在外部無法得到
模塊內(nèi)部可以使用exports對象進(jìn)行成員導(dǎo)出琐簇， 使用require方法導(dǎo)入其他模塊蒸健。
1.5 模塊成員導(dǎo)出exports
// a.js
// 在模塊內(nèi)部定義變量
let version = 1.0;
// 在模塊內(nèi)部定義方法
const sayHi = name => `您好, ${name}`;
// 向模塊外部導(dǎo)出數(shù)據(jù)
exports.version = version;
exports.sayHi = sayHi;
1.6 模塊成員的導(dǎo)入require
// b.js
// 在b.js模塊中導(dǎo)入模塊a
let a = require('./b.js');
// 輸出b模塊中的version變量
console.log(a.version);
// 調(diào)用b模塊中的sayHi方法 并輸出其返回值
console.log(a.sayHi('黑馬講師'));
導(dǎo)入模塊時(shí)后綴可以省略
1.7 模塊成員導(dǎo)出的另一種方式module.exports
module.exports.version = version;
module.exports.sayHi = sayHi;
exports是module.exports的別名(地址引用關(guān)系)，導(dǎo)出對象最終以module.exports為準(zhǔn)
1.8 模塊導(dǎo)出兩種方式的聯(lián)系與區(qū)別
exports是module.exports的別名 他們指向同一塊兒內(nèi)存空間 都是往同一塊兒空間添加屬性值
他們默認(rèn)指向的是同一塊兒內(nèi)存空間
當(dāng)exports對象和moudle.exports對象指向的不是同一個對象時(shí) 以module.exports為準(zhǔn)
// 當(dāng)exports對象和moudle.exports對象指向的不是同一個對象時(shí) 以module.exports為準(zhǔn)
module.exports = {
name: 'zhangsan'
}
exports = {
age: 20
}
2. 系統(tǒng)模塊
2.1 什么是系統(tǒng)模塊
Node運(yùn)行環(huán)境提供的API.
因?yàn)檫@些API都是以模塊化的方式進(jìn)行開發(fā)的, 所以我們又稱Node運(yùn)行環(huán)境提供的API為系統(tǒng)模塊
2.2 系統(tǒng)模塊fs 文件操作
f：file 文件 婉商，s：system 系統(tǒng)似忧，文件操作系統(tǒng)。
讀取文件內(nèi)容
應(yīng)用場景：客戶端請求 服務(wù)端需要先從本地磁盤中讀取文件丈秩，再放回
參數(shù)中帶有中括號：參數(shù)為可選參數(shù)
callback：回調(diào)函數(shù)
回調(diào)函數(shù)作用盯捌？讀取文件內(nèi)容需要時(shí)間，不能通過api返回值直接拿到讀取結(jié)果蘑秽，所以需要定義回調(diào)函數(shù)挽唉，硬盤會在在文件操作結(jié)束通過回調(diào)函數(shù)以參數(shù)的形式通知系統(tǒng)
fs.reaFile('文件路徑/文件名稱'[,'文件編碼'], callback);
// 1.通過模塊的名字fs對模塊進(jìn)行引用
const fs = require('fs');
// 2.通過模塊內(nèi)部的readFile讀取文件內(nèi)容
fs.readFile('./01.helloworld.js', 'utf8', (err, doc) => {
// 如果文件讀取出錯err 是一個對象 包含錯誤信息
// 如果文件讀取正確 err是 null
// doc 是文件讀取的結(jié)果
if (err) {
console.log(err);
return;
}
console.log(doc);
});
寫入文件內(nèi)容
fs.writeFile('文件路徑/文件名稱', '數(shù)據(jù)', callback);
const content = '<h3>正在使用fs.writeFile寫入文件內(nèi)容</h3>';
fs.writeFile('../index.html', content, err => {
if (err != null) {
console.log(err);
return;
}
console.log('文件寫入成功');
});
2.3 系統(tǒng)模塊path 路徑操作
為什么要進(jìn)行路徑拼接
不同操作系統(tǒng)的路徑分隔符不統(tǒng)一
/public/uploads/avatar
Windows 上是 \ /
Linux 上是 /
2.4 路徑拼接語法
path.join('路徑', '路徑', ...)
const fs = require('fs');
const path = require('path');
console.log(__dirname);
console.log(path.join(__dirname, '01.helloworld.js'))
/*
數(shù)據(jù)結(jié)果如下
/Users/dufangyi/Desktop/11-16 前后端交互/11-13node+express/day01/code
/Users/dufangyi/Desktop/11-16 前后端交互/11-13node+express/day01/code/01.helloworld.js
*/
fs.readFile(path.join(__dirname, '01.helloworld.js'), 'utf8', (err, doc) => {
console.log(err)
console.log(doc)
});
2.5 相對路徑VS絕對路徑
大多數(shù)情況下使用絕對路徑，因?yàn)橄鄬β窂接袝r(shí)候相對的是命令行工具的當(dāng)前工作目錄
在讀取文件或者設(shè)置文件路徑時(shí)都會選擇絕對路徑
使用__dirname獲取當(dāng)前文件所在的絕對路徑
3.第三方模塊
3.1 什么是第三方模塊
別人寫好的筷狼、具有特定功能的瓶籽、我們能直接使用的模塊即第三方模塊，由于第三方模塊通常都是由多個文件組成并且被放置在一個文件夾中埂材，所以又名包塑顺。
第三方模塊有兩種存在形式：
以js文件的形式存在，提供實(shí)現(xiàn)項(xiàng)目具體功能的API接口。
以命令行工具形式存在严拒，輔助項(xiàng)目開發(fā)
3.2 獲取第三方模塊
npmjs.com：第三方模塊的存儲和分發(fā)倉庫
如何安裝node第三方模塊扬绪？
npm (node package manager) ： node的第三方模塊管理工具
下載：npm install 模塊名稱
卸載：npm unintall package 模塊名稱全局安裝與本地安裝
命令行工具：全局安裝
庫文件：本地安裝
3.3 第三方模塊 nodemon
nodemon是一個命令行工具，用以輔助項(xiàng)目開發(fā)裤唠。
在Node.js中挤牛，每次修改文件都要在命令行工具中重新執(zhí)行該文件，非常繁瑣
使用步驟
使用npm install nodemon –g 下載它
在命令行工具中用nodemon命令替代node命令執(zhí)行文件
3.4 第三方模塊 nrm
nrm ( npm registry manager )：npm下載地址切換工具
npm默認(rèn)的下載地址在國外种蘸，國內(nèi)下載速度慢
使用步驟
使用npm install nrm –g 下載它
查詢可用下載地址列表 nrm ls
切換npm下載地址 nrm use 下載地址名稱
3.5 第三方模塊 Gulp
基于node平臺開發(fā)的前端構(gòu)建工具
將機(jī)械化操作編寫成任務(wù), 想要執(zhí)行機(jī)械化操作時(shí)執(zhí)行一個命令行命令任務(wù)就能自動執(zhí)行了
用機(jī)器代替手工墓赴，提高開發(fā)效率。
3.6 Gulp能做什么
項(xiàng)目上線航瞭，HTML诫硕、CSS、JS文件壓縮合并
語法轉(zhuǎn)換（es6刊侯、less ...）
公共文件抽離(比如網(wǎng)站的頭部抽取)
修改文件瀏覽器自動刷新
3.7 Gulp使用
1章办、使用npm install gulp下載gulp庫文件
2、在項(xiàng)目根目錄下建立gulpfile.js文件
3滨彻、重構(gòu)項(xiàng)目的文件夾結(jié)構(gòu) src目錄放置源代碼文件 dist目錄放置構(gòu)建后文件
4藕届、在gulpfile.js文件中編寫任務(wù).
5、在命令行工具中執(zhí)行g(shù)ulp任務(wù)
3.8 Gulp中提供的方法
gulp.src()：獲取任務(wù)要處理的文件
gulp.dest()：輸出文件
gulp.task()：建立gulp任務(wù)
gulp.watch()：監(jiān)控文件的變化
1.編寫gulpfile.js
const gulp = require('gulp');
// 使用gulp.task()方法建立任務(wù)
gulp.task('first', () => {
// 獲取要處理的文件
gulp.src('./src/css/base.css')
// 將處理后的文件輸出到dist目錄
.pipe(gulp.dest('./dist/css'));
});
2.終端全局安裝gulp命令
npm install gulp-cli -g --registry=https://registry.npm.taobao.org
3.運(yùn)行g(shù)ulp任務(wù)
gulp first
3.9 Gulp插件
gulp是輕內(nèi)核的第三方模塊 提供方法很少亭饵，提供的內(nèi)容都是通過插件方式完成
gulp-htmlmin ：html文件壓縮
gulp-csso ：壓縮css
gulp-babel ：JavaScript語法轉(zhuǎn)化
gulp-less: less語法轉(zhuǎn)化
gulp-uglify ：壓縮混淆JavaScript
gulp-file-include 公共文件包含
browsersync 瀏覽器實(shí)時(shí)同步
插件使用下載
npm 下載
引入
使用
4. package.json文件
4.1 node_modules文件夾的問題
1.文件夾以及文件過多過碎休偶，當(dāng)我們將項(xiàng)目整體拷貝給別人的時(shí)候,，傳輸速度會很慢很慢.
2.復(fù)雜的模塊依賴關(guān)系需要被記錄冬骚，確保模塊的版本和當(dāng)前保持一致椅贱，否則會導(dǎo)致當(dāng)前項(xiàng)目運(yùn)行報(bào)錯
拷貝給別人項(xiàng)目時(shí)候 node_modules文件夾不用拷貝 node項(xiàng)目會根據(jù)項(xiàng)目描述文件下載package.json中依賴的模塊
4.2 package.json文件的作用
項(xiàng)目描述文件，記錄了當(dāng)前項(xiàng)目信息只冻，例如項(xiàng)目名稱庇麦、版本、作者喜德、github地址山橄、當(dāng)前項(xiàng)目依賴了哪些第三方模塊等。
使用npm init -y命令生成舍悯。
4.3 項(xiàng)目依賴
在項(xiàng)目的開發(fā)階段和線上運(yùn)營階段航棱，都需要依賴的第三方包，稱為項(xiàng)目依賴
使用npm install 包名命令下載的文件會默認(rèn)被添加到 package.json 文件的 dependencies 字段中
{
"dependencies": {
"jquery": "^3.3.1“
}
}
4.4 開發(fā)依賴
在項(xiàng)目的開發(fā)階段需要依賴萌衬，線上運(yùn)營階段不需要依賴的第三方包饮醇，稱為開發(fā)依賴
使用npm install 包名 --save-dev命令將包添加到package.json文件的devDependencies字段中
{
"devDependencies": {
"gulp": "^3.9.1“
}
}
4.5 package-lock.json文件的作用
鎖定包的版本，確保再次下載時(shí)不會因?yàn)榘姹静煌a(chǎn)生問題
加快下載速度秕豫，因?yàn)樵撐募幸呀?jīng)記錄了項(xiàng)目所依賴第三方包的樹狀結(jié)構(gòu)和包的下載地址朴艰，重新安裝時(shí)只需下載即可观蓄，不需要做額外的工作
5. Node.js中模塊加載機(jī)制
5.1 模塊查找規(guī)則-當(dāng)模塊擁有路徑但沒有后綴時(shí)
require('./find.js');
require('./find');
1.require方法根據(jù)模塊路徑查找模塊，如果是完整路徑祠墅，直接引入模塊侮穿。
2.如果模塊后綴省略，先找同名JS文件再找同名JS文件夾
3.如果找到了同名文件夾毁嗦，找文件夾中的index.js
4.如果文件夾中沒有index.js就會去當(dāng)前文件夾中的package.json文件中查找main選項(xiàng)中的入口文件
5.如果找指定的入口文件不存在或者沒有指定入口文件就會報(bào)錯亲茅，模塊沒有被找到
5.2 模塊查找規(guī)則-當(dāng)模塊沒有路徑且沒有后綴時(shí)
require('find');
1.Node.js會假設(shè)它是系統(tǒng)模塊
2.Node.js會去node_modules文件夾中
3.首先看是否有該名字的JS文件
4.再看是否有該名字的文件夾
5.如果是文件夾看里面是否有index.js
6.如果沒有index.js查看該文件夾中的package.json中的main選項(xiàng)確定模塊入口文件
7.否則找不到報(bào)錯
