2019-6-20 seo達(dá)人
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
NodeJs基礎(chǔ)
nodejs的本質(zhì):不是一門新的編程語言,nodejs是javascript運(yùn)行在服務(wù)端的運(yùn)行環(huán)境,編程語言還是javascript
global模塊-全局變量
Node.js 中的全局對(duì)象是 global, 類似于瀏覽器中的window
常用的global屬性
console: 用于打印日志
setTimeout/clearTimeout: 設(shè)置清除延時(shí)器
setInterval/clearInterval: 設(shè)置清除定時(shí)器
__dirname: 當(dāng)前文件的路徑,不包括文件名
__filename: 獲取當(dāng)前文件的路徑,包括文件名
//與模塊化相關(guān)的,模塊化的時(shí)候會(huì)用到
require
exports
module
除了global模塊中的內(nèi)容可以直接使用,其他模塊都是需要加載的。
其他模塊不是全局的,不能直接使用。因此需要導(dǎo)入才能使用。
fs模塊
fileSystem-- 文件系統(tǒng),提供了一系列操作文件的API接口,可以方便我讀寫文件
讀取文件
語法:fs.readFile(path[, options], callback)
方式一:不傳編碼參數(shù)
//參數(shù)1: 文件的名字
//參數(shù)2: 讀取文件的回調(diào)函數(shù)
//參數(shù)1:錯(cuò)誤對(duì)象,如果讀取失敗,err會(huì)包含錯(cuò)誤信息,如果讀取成功,err是null
//參數(shù)2:讀取成功后的數(shù)據(jù)(是一個(gè)Buffer對(duì)象)
fs.readFile("data.txt", function(err, data){
console.log(err);
console.log(data);
// 可以通過data.toString() 把二進(jìn)制數(shù)據(jù)轉(zhuǎn)成文本,當(dāng)然前提是讀取的文件本來就是文本,如果是圖片獲取的二進(jìn)制就無法轉(zhuǎn)換成文本
});
方式二:傳編碼參數(shù)
//參數(shù)1: 文件的路徑
//參數(shù)2: 編碼,如果設(shè)置了,返回一個(gè)字符串,如果沒有設(shè)置,會(huì)返回一個(gè)buffer對(duì)象
//參數(shù)3: 回調(diào)函數(shù)
fs.readFile("data.txt", "utf8",function(err, data){
console.log(err);
console.log(data);
});
關(guān)于Buffer對(duì)象
1. Buffer對(duì)象是Nodejs用于處理二進(jìn)制數(shù)據(jù)的。
2. 其實(shí)任意的數(shù)據(jù)在計(jì)算機(jī)底層都是二進(jìn)制數(shù)據(jù),因?yàn)橛?jì)算機(jī)只認(rèn)識(shí)二進(jìn)制。
3. 所以讀取任意的文件,返回的結(jié)果都是二進(jìn)制數(shù)據(jù),即Buffer對(duì)象
4. Buffer對(duì)象可以調(diào)用toString()方法轉(zhuǎn)換成字符串。
寫文件
語法:fs.writeFile(file, data[, options], callback)
//參數(shù)1:寫入的文件名(如果文件不存在,會(huì)自動(dòng)創(chuàng)建)
//參數(shù)2:寫入的文件內(nèi)容(注意:寫入的內(nèi)容會(huì)覆蓋以前的內(nèi)容)
//參數(shù)3:寫文件后的回調(diào)函數(shù)
fs.writeFile("2.txt", "hello world, 我是一個(gè)中國人", function(err){
if(err) {
return console.log("寫入文件失敗", err);
}
console.log("寫入文件成功");
});
1
2
3
4
5
6
7
8
9
注意:
寫文件的時(shí)候,會(huì)把原來的內(nèi)容給覆蓋掉
追加文件
語法:fs.appendFile(path, data[, options], callback)
//參數(shù)1:追加的文件名(如果文件不存在,會(huì)自動(dòng)創(chuàng)建)
//參數(shù)2:追加的文件內(nèi)容(注意:寫入的內(nèi)容會(huì)覆蓋以前的內(nèi)容)
//參數(shù)3:追加文件后的回調(diào)函數(shù)
fs.appendFile("2.txt", "我是追加的內(nèi)容", function(err){
if(err) {
return console.log("追加文件內(nèi)容失敗");
}
console.log("追加文件內(nèi)容成功");
})
思考:如果沒有appendFile,通過readFile與writeFile應(yīng)該怎么實(shí)現(xiàn)?
文件同步與異步的說明
fs中所有的文件操作,都提供了異步和同步兩種方式
異步方式:不會(huì)阻塞代碼的執(zhí)行
同步方式:會(huì)阻塞代碼的執(zhí)行
//同步方式
console.log(111);
var result = fs.readFileSync("2.txt", "utf-8");
console.log(result);
console.log(222);
總結(jié):同步操作使用雖然簡(jiǎn)單,但是會(huì)影響性能,因此盡量使用異步方法,尤其是在工作過程中。
stream
stream是Node.js提供的又一個(gè)僅在服務(wù)區(qū)端可用的模塊,目的是支持“流”這種數(shù)據(jù)結(jié)構(gòu)。
什么是流?流是一種抽象的數(shù)據(jù)結(jié)構(gòu)。想象水流,當(dāng)在水管中流動(dòng)時(shí),就可以從某個(gè)地方(例如自來水廠)源源不斷地到達(dá)另一個(gè)地方(比如你家的洗手池)。我們也可以把數(shù)據(jù)看成是數(shù)據(jù)流,比如你敲鍵盤的時(shí)候,就可以把每個(gè)字符依次連起來,看成字符流。這個(gè)流是從鍵盤輸入到應(yīng)用程序,實(shí)際上它還對(duì)應(yīng)著一個(gè)名字:標(biāo)準(zhǔn)輸入流(stdin)。
如果應(yīng)用程序把字符一個(gè)一個(gè)輸出到顯示器上,這也可以看成是一個(gè)流,這個(gè)流也有名字:標(biāo)準(zhǔn)輸出流(stdout)。流的特點(diǎn)是數(shù)據(jù)是有序的,而且必須依次讀取,或者依次寫入,不能像Array那樣隨機(jī)定位。
有些流用來讀取數(shù)據(jù),比如從文件讀取數(shù)據(jù)時(shí),可以打開一個(gè)文件流,然后從文件流中不斷地讀取數(shù)據(jù)。有些流用來寫入數(shù)據(jù),比如向文件寫入數(shù)據(jù)時(shí),只需要把數(shù)據(jù)不斷地往文件流中寫進(jìn)去就可以了。
在Node.js中,流也是一個(gè)對(duì)象,我們只需要響應(yīng)流的事件就可以了:data事件表示流的數(shù)據(jù)已經(jīng)可以讀取了,end事件表示這個(gè)流已經(jīng)到末尾了,沒有數(shù)據(jù)可以讀取了,error事件表示出錯(cuò)了。
下面是一個(gè)從文件流讀取文本內(nèi)容的示例:
'use strict';
var fs = require('fs');
// 打開一個(gè)流:
var rs = fs.createReadStream('sample.txt', 'utf-8');
rs.on('data', function (chunk) {
console.log('DATA:')
console.log(chunk);
});
rs.on('end', function () {
console.log('END');
});
rs.on('error', function (err) {
console.log('ERROR: ' + err);
});
要注意,data事件可能會(huì)有多次,每次傳遞的chunk是流的一部分?jǐn)?shù)據(jù)。
要以流的形式寫入文件,只需要不斷調(diào)用write()方法,最后以end()結(jié)束:
'use strict';
var fs = require('fs');
var ws1 = fs.createWriteStream('output1.txt', 'utf-8');
ws1.write('使用Stream寫入文本數(shù)據(jù)...\n');
ws1.write('END.');
ws1.end();
var ws2 = fs.createWriteStream('output2.txt');
ws2.write(new Buffer('使用Stream寫入二進(jìn)制數(shù)據(jù)...\n', 'utf-8'));
ws2.write(new Buffer('END.', 'utf-8'));
ws2.end();
所有可以讀取數(shù)據(jù)的流都繼承自stream.Readable,所有可以寫入的流都繼承自stream.Writable。
pipe
就像可以把兩個(gè)水管串成一個(gè)更長(zhǎng)的水管一樣,兩個(gè)流也可以串起來。一個(gè)Readable流和一個(gè)Writable流串起來后,所有的數(shù)據(jù)自動(dòng)從Readable流進(jìn)入Writable流,這種操作叫pipe。
在Node.js中,Readable流有一個(gè)pipe()方法,就是用來干這件事的。
讓我們用pipe()把一個(gè)文件流和另一個(gè)文件流串起來,這樣源文件的所有數(shù)據(jù)就自動(dòng)寫入到目標(biāo)文件里了,所以,這實(shí)際上是一個(gè)復(fù)制文件的程序:
'use strict';
var fs = require('fs');
var rs = fs.createReadStream('sample.txt');
var ws = fs.createWriteStream('copied.txt');
rs.pipe(ws);
默認(rèn)情況下,當(dāng)Readable流的數(shù)據(jù)讀取完畢,end事件觸發(fā)后,將自動(dòng)關(guān)閉Writable流。如果我們不希望自動(dòng)關(guān)閉Writable流,需要傳入?yún)?shù):
readable.pipe(writable, { end: false });
1
path模塊
路徑操作的問題
具體的說明可以參考 NodeJs學(xué)習(xí).md
在讀寫文件的時(shí)候,文件路徑可以寫相對(duì)路徑或者絕對(duì)路徑
//data.txt是相對(duì)路徑,讀取當(dāng)前目錄下的data.txt, 相對(duì)路徑相對(duì)的是指向node命令的路徑
//如果node命令不是在當(dāng)前目錄下執(zhí)行就會(huì)報(bào)錯(cuò), 在當(dāng)前執(zhí)行node命令的目錄下查找data.txt,找不到
fs.readFile("data.txt", "utf8", function(err, data) {
if(err) {
console.log("讀取文件失敗", err);
}
console.log(data);
});
相對(duì)路徑:相對(duì)于執(zhí)行node命令的路徑
絕對(duì)路徑:__dirname: 當(dāng)前文件的目錄,__filename: 當(dāng)前文件的目錄,包含文件名
path模塊的常用方法
關(guān)于路徑,在linux系統(tǒng)中,路徑分隔符使用的是/,但是在windows系統(tǒng)中,路徑使用的\
在我們拼寫路徑的時(shí)候會(huì)帶來很多的麻煩,經(jīng)常會(huì)出現(xiàn)windows下寫的代碼,在linux操作系統(tǒng)下執(zhí)行不了,path模塊就是為了解決這個(gè)問題而存在的。
常用方法:
path.join();//拼接路徑
//windows系統(tǒng)下
> path.join("abc","def","gg", "index.html")
"abc\def\gg\a.html"
//linux系統(tǒng)下
> path.join("abc","def","gg", "index.html")
'abc/def/gg/index.html'
http模塊
創(chuàng)建服務(wù)器步驟
// 移入http模塊
const http = require('http')
// 調(diào)用創(chuàng)建http 服務(wù)器的方法
const server = http.createServe()
// 給服務(wù)器注冊(cè)request事件監(jiān)聽,每次瀏覽器像服務(wù)器發(fā)送請(qǐng)求的時(shí)候都會(huì)被監(jiān)聽到
server.on('request', function(request, response){
// request 瀏覽器請(qǐng)求的數(shù)據(jù),包括請(qǐng)求方式method 請(qǐng)求的地址 url等
// response 瀏覽器的響應(yīng),可以設(shè)置響應(yīng)頭、響應(yīng)體、響應(yīng)狀態(tài)碼
const method = request.method
const url = request.url
// 設(shè)置響應(yīng)的狀態(tài)碼
response.StatusCode = 404
// 設(shè)置響應(yīng)的頭
response.setHeader('Content-Type', 'text/html');
// 設(shè)置響應(yīng)體內(nèi)容,write可以調(diào)用多次
response.write('hello world!')
// 響應(yīng)結(jié)束
response.end()
// 如果在end(content),這樣的寫法相當(dāng)于是讓write和end的合寫
response.end('hello world!')
})
// 給服務(wù)器設(shè)置監(jiān)聽,相當(dāng)于啟動(dòng)服務(wù)器
server.listen(8888,function(){
console.log('服務(wù)器啟動(dòng)成功')
})
// 簡(jiǎn)寫方式
http.createServer((req,res) => {
....
}).listen(8888,() => {
....
})
詳細(xì)說明
給服務(wù)器注冊(cè)request事件,只要服務(wù)器接收到了客戶端的請(qǐng)求,就會(huì)觸發(fā)request事件
request事件有兩個(gè)參數(shù),request表示請(qǐng)求對(duì)象,可以獲取所有與請(qǐng)求相關(guān)的信息,response是響應(yīng)對(duì)象,可以獲取所有與響應(yīng)相關(guān)的信息。
服務(wù)器監(jiān)聽的端口范圍為:1-65535之間,推薦使用3000以上的端口,因?yàn)?000以下的端口一般留給系統(tǒng)使用
response對(duì)象詳解
常見的屬性和方法:
res.write(data): 給瀏覽器發(fā)送請(qǐng)求體,可以調(diào)用多次,從而提供連續(xù)的請(qǐng)求體
res.end(); 通知服務(wù)器,所有響應(yīng)頭和響應(yīng)主體都已被發(fā)送,即服務(wù)器將其視為已完成。
res.end(data); 結(jié)束請(qǐng)求,并且響應(yīng)一段內(nèi)容,相當(dāng)于res.write(data) + res.end()
res.statusCode: 響應(yīng)的的狀態(tài)碼 200 404 500
res.statusMessage: 響應(yīng)的狀態(tài)信息, OK Not Found ,會(huì)根據(jù)statusCode自動(dòng)設(shè)置。
res.setHeader(name, value); 設(shè)置響應(yīng)頭信息, 比如content-type
res.writeHead(statusCode, statusMessage, options); 設(shè)置響應(yīng)頭,同時(shí)可以設(shè)置狀態(tài)碼和狀態(tài)信息。
1
2
3
4
5
6
7
注意:必須先設(shè)置響應(yīng)頭,才能設(shè)置響應(yīng)。
實(shí)現(xiàn)靜態(tài)WEB服務(wù)器
服務(wù)器響應(yīng)首頁
注意:瀏覽器中輸入的URL地址,僅僅是一個(gè)標(biāo)識(shí),不與服務(wù)器中的目錄一致。也就是說:返回什么內(nèi)容是由服務(wù)端的邏輯決定
server.on('request', function(req, res) {
var url = req.url
if(url === '/') {
fs.readFile('./index.html', function(err, data) {
if(err) {
return res.end('您訪問的資源不存在~')
}
res.end(data)
})
}
})
根據(jù)根據(jù)不同url,響應(yīng)不同文件
content-type設(shè)置-MIME類型
MIME(Multipurpose Internet Mail Extensions)多用途Internet郵件擴(kuò)展類型 是一種表示文檔性質(zhì)和格式的標(biāo)準(zhǔn)化方式
瀏覽器通常使用MIME類型(而不是文件擴(kuò)展名)來確定如何處理文檔;因此服務(wù)器將正確的MIME類型附加到響應(yīng)對(duì)象的頭部是非常重要的
MIME類型的通用處理-mime模塊
作用:獲取文件的MIME類型
安裝:npm i mime
var mime = require('mime')
// 獲取路徑對(duì)應(yīng)的MIME類型
mime.getType('txt') // ? 'text/plain'
// 根據(jù)MIME獲取到文件后綴名
mime.getExtension('text/plain') // ? 'txt'
1
2
3
4
5
6
有了這個(gè)模塊我們就可以把設(shè)置響應(yīng)頭的代碼改寫成下面
// mime 不僅可以只寫一個(gè)后綴名,還可以通過url來解析出后綴名來,因此這里可以直接寫url
response.setHeader('content-type',mime.getType(request.url))
1
2
npm - Node包管理工具
初始化包
npm init; //這個(gè)命令用于初始化一個(gè)包,創(chuàng)建一個(gè)package.json文件,我們的項(xiàng)目都應(yīng)該先執(zhí)行npm init
npm init -y; //快速的初始化一個(gè)包, 不能是一個(gè)中文名
1
2
安裝包
npm install 包名; //安裝指定的包名的版本到項(xiàng)目中
npm install 包名@版本號(hào); //安裝指定包的指定版本
npm i 包名; //簡(jiǎn)寫
卸載包
npm uninstall 包名; //卸載已經(jīng)安裝的包
1
清除緩存
npm cache clean -f // 如果npm安裝失敗了,可以用這個(gè)命令來清除緩存
1
package.json文件
package.json文件,包(項(xiàng)目)描述文件,用來管理組織一個(gè)包(項(xiàng)目),它是一個(gè)純JSON格式的。
作用:描述當(dāng)前項(xiàng)目(包)的信息,描述當(dāng)前包(項(xiàng)目)的依賴項(xiàng)
如何生成:npm init或者npm init -y
作用
作為一個(gè)標(biāo)準(zhǔn)的包,必須要有package.json文件進(jìn)行描述
一個(gè)項(xiàng)目的node_modules目錄通常都會(huì)很大,不用拷貝node_modules目錄,可以通過package.json文件配合npm install直接安裝項(xiàng)目所有的依賴項(xiàng)
描述內(nèi)容
{
"name": "03-npm", //描述了包的名字,不能有中文
"version": "1.0.0", //描述了包的的版本信息, x.y.z 如果只是修復(fù)bug,需要更新Z位。如果是新增了功能,但是向下兼容,需要更新Y位。如果有大變動(dòng),向下不兼容,需要更新X位。
"description": "", //包的描述信息
"main": "index.js", //入口文件(模塊化加載規(guī)則的時(shí)候詳細(xì)的講)
"scripts": { //配置一些腳本,在vue的時(shí)候會(huì)用到,現(xiàn)在體會(huì)不到
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [], //關(guān)鍵字(方便搜索)
"author": "", //作者的信息
"license": "ISC", //許可證,開源協(xié)議
"dependencies": { //重要,項(xiàng)目的依賴, 方便代碼的共享 通過 npm install可以直接安裝所有的依賴項(xiàng)
"bootstrap": "^3.3.7",
"jquery": "^3.3.1"
}
}
注意:一個(gè)合法的package.json,必須要有name和version兩個(gè)屬性
本地安裝和全局安裝
有兩種方式用來安裝 npm 包:本地安裝和全局安裝。選用哪種方式來安裝,取決于你如何使用這個(gè)包。
全局安裝:如果你想將其作為一個(gè)命令行工具,那么你應(yīng)該將其安裝到全局。這種安裝方式后可以讓你在任何目錄下使用這個(gè)命令。比如less命令,webpack命令,hcc-md命令 。
本地安裝:如果你自己的模塊依賴于某個(gè)包,并通過 Node.js 的 require 加載,那么你應(yīng)該選擇本地安裝,這種方式也是 npm install 命令的默認(rèn)行為。
// 全局安裝,會(huì)把npm包安裝到C:\Users\HUCC\AppData\Roaming\npm目錄下,作為命令行工具使用
npm install -g 包名;
//本地安裝,會(huì)把npm包安裝到當(dāng)前項(xiàng)目的node_modules文件中,作為項(xiàng)目的依賴
npm install 包名;
常見的命令行工具
nrm
nrm:npm registry manager(npm倉庫地址管理工具)
安裝:npm i -g nrm
# 帶*表示當(dāng)前正在使用的地址
# 查看倉庫地址列表
nrm ls
# 切換倉庫地址
nrm use taobao
nodemon 自動(dòng)重啟
作用:監(jiān)視到j(luò)s文件修改后,自動(dòng)重啟node程序
安裝:npm i -g nodemon
使用:nodemon app.js 運(yùn)行node程序
模塊化(module)
基本概念
在nodejs中,應(yīng)用由模塊組成,nodejs中采用commonJS模塊規(guī)范。
一個(gè)js文件就是一個(gè)模塊
每個(gè)模塊都是一個(gè)獨(dú)立的作用域,在這個(gè)而文件中定義的變量、函數(shù)、對(duì)象都是私有的,對(duì)其他文件不可見。
node中模塊分類
1 核心模塊
由 node 本身提供,不需要單獨(dú)安裝(npm),可直接引入使用
2 第三方模塊
由社區(qū)或個(gè)人提供,需要通過npm安裝后使用
3 自定義模塊
由我們自己創(chuàng)建,比如:tool.js 、 user.js
核心模塊
fs:文件操作模塊
http:網(wǎng)絡(luò)操作模塊
path:路徑操作模塊
url: 解析地址的模塊
querystring: 解析參數(shù)字符串的模塊
基本使用:1 先引入 2 再使用
// 引入模塊
var fs = require('fs');
1
2
第三方模塊
第三方模塊是由 社區(qū)或個(gè)人 提供的
比如:mime模塊/art-template/jquery…
基本使用:1 先通過npm下載 2 再引入 3 最后使用
用戶自定義模塊
由開發(fā)人員創(chuàng)建的模塊(JS文件)
基本使用:1 創(chuàng)建模塊 2 引入模塊
注意:自定義模塊的路徑必須以./獲取../開頭
// 加載模塊
require('./a') // 推薦使用,省略.js后綴!
require('./a.js')
1
2
3
4
模塊導(dǎo)入
/*
nodejs中模塊分為3大類
1. nodejs本身提供的核心模塊 fs http path url querystring
核心模塊不需要安裝,直接導(dǎo)入即可。
核心模塊的加載語法: const fs = require('fs')
2. 第三方模塊 mime art-template
第三方模塊: 必須先安裝(npm install XXX) 才能導(dǎo)入
第三方模塊的加載語法: npm install XXX const mime = require('mime')
3. 自定義的模塊 一個(gè)js文件
不需要安裝 只需要自己創(chuàng)建一個(gè)js文件
自定義模塊的加載語法: require('模塊的路徑') 模塊不能是名字,必須是路徑 ./ ../ .js后綴是可以省略
require加載規(guī)則(以mime模塊為例)
1. 判斷是否是路徑, 如果是 就是自定義模塊
2. 如果是名字 判斷是否是核心模塊
3. 如果是第三方模塊 在當(dāng)前目錄找node_modules
4. 在node_modules中查找mime文件夾
5. 查找是否有package.json, 查看是否main屬性
6. 判斷是否有main, 如果沒有,默認(rèn)查找index.js index.json index.node
7. 如果沒有
8. 如果找不到,就去上一層目錄,一直找到根目錄
9, 如果還沒有,就說明模塊不存在
*/
模塊導(dǎo)出
/*
1. 模塊中定義的變量和函數(shù)都是私有的
2. 任意的一個(gè)模塊中, 都有自帶一個(gè)屬性 module (全局屬性) module代表的就是當(dāng)前的這個(gè)模塊。
3. module中有一個(gè)屬性 exports ,這個(gè)exports屬性是一個(gè)對(duì)象,代表的就是當(dāng)前模塊的導(dǎo)出 module.exports當(dāng)前模塊唯一能夠被外界訪問到的
*/
//通過module.exports對(duì)外導(dǎo)出一些值
module.exports = 值 只能導(dǎo)出一個(gè)值
module.exports = {} 可以把所有要導(dǎo)出的內(nèi)容都放到一個(gè)新的對(duì)象中
module.export.xxx = 值
/*
在任意的模塊中 module.exports表示該模塊的導(dǎo)出
為了我們方便導(dǎo)出, 每個(gè)模塊中還提供了 exports
exports 初始狀態(tài)下,和module.exports指向了同一個(gè)對(duì)象。
注意點(diǎn): 如果通過exports的方式來導(dǎo)出內(nèi)容,只能給對(duì)象增加屬性 不能替換這個(gè)對(duì)象
*/
// 我們真正到處的對(duì)象是module.exports指向的對(duì)象
exports = {} // 這樣只是改了exports的指向,而module.exports的指向沒有改變,所以這樣是不對(duì)的
// 以下這種是允許的
exports.xxx = '值'
express與mysql
首先需要安裝mysql模塊
npm i mysql
1
基本使用
// 導(dǎo)入第三方包
const mysql = require('mysql')
// 創(chuàng)建連接
var connection = mysql.createConnection({
// 本地
host: 'localhost',
user: 'root',
password: 'root',
// 數(shù)據(jù)庫名稱
database: 'mydb',
port: 3306
})
// 連接數(shù)據(jù)庫
connection.connect()
// 執(zhí)行sql語句
connection.query('select * from user where id = 8', (err, result) => {
if (err) return console.log('查詢失敗', err)
// result返回的是數(shù)組, 數(shù)組中是一個(gè)對(duì)象
console.log(result)
})
// 關(guān)閉連接
connection.end()
查詢語句
var name = 'zs'
// 使用?表示占位,可以防止sql注入
connect.query(`select * from user where name=?`, name, (err, result) => {
if (err) return console.log('錯(cuò)誤了', err)
console.log(result)
})
1
2
3
4
5
6
插入語句
connect.query(
'insert into user (name, age, gender, content) values (?, ?, ?, ?)',
['zs', 18, '男', '哈哈哈哈'],
err => {
if (err) return console.log('錯(cuò)誤', err)
console.log('添加成功了')
}
)
// 方式2
connect.query(
'insert into user set ?',
{
name: 'zs',
age: 30,
gender: '男',
content: '哈哈哈'
},
(err, result) => {
if (err) return console.log('錯(cuò)誤', err)
console.log('添加成功了', result)
}
)
修改語句
connect.query(
'update user set ? where id = ?',
[
{
name: 'zs',
age: 30,
gender: '男',
content: '哈哈哈'
},
10
],
(err, result) => {
if (err) return console.log('錯(cuò)誤', err)
console.log('添加成功了', result)
}
)
刪除語句
connect.query('delete from user where id = ?', 10, (err, result) => {
if (err) return console.log('失敗', err)
console.log(result)
})
1
2
3
4
登錄狀態(tài)保持
http是無狀態(tài)的,但是隨著技術(shù)的發(fā)展,我們需要記住某些東西,但是因?yàn)閔ttp是無狀態(tài)的,無法讓服務(wù)器記住東西,因此就引入了cookie和session這兩個(gè)東西,cookie用于瀏覽器端,session用于服務(wù)器端。
以用戶登錄為例:
當(dāng)用戶登錄時(shí),瀏覽器會(huì)給服務(wù)器發(fā)送請(qǐng)求,這時(shí)候服務(wù)器就會(huì)開辟一個(gè)空間用于存放session數(shù)據(jù),并且會(huì)把生成的sessionId返回給瀏覽器,存放在瀏覽器的cookie中,之后瀏覽器在請(qǐng)求服務(wù)器的時(shí)候,就會(huì)去比對(duì)是否存在這個(gè)session。這樣你的登錄狀態(tài)就已經(jīng)保持下來了
cookie的特點(diǎn)
cookie大小只有4k
cookie每次請(qǐng)求的時(shí)候,都會(huì)自動(dòng)攜帶
cookie可以設(shè)置過期時(shí)間
為了方便使用,我們可以使用express-session這個(gè)包,可以很方便使用session
express-session步驟:
1. 下載 npm i express-session
2. 導(dǎo)入 const session = require("express-session")
3. 使用session中間件
app.use(session({
secret: 'itcast',
// 設(shè)置瀏覽器端cookie的名字, 默認(rèn)connect.sid
name: 'itcast',
resave: false,
// 在瀏覽器和服務(wù)器連接的第一時(shí)間,分配session 給瀏覽器指定一個(gè)cookie
saveUninitialized: true
}))
可以通過req.session訪問到session
4. 登錄成功,把登錄成功的用戶信息存儲(chǔ)到 req.session.xxx中
5. 提供一個(gè)中間件,這個(gè)中間件在路由的前面,判斷 req.session.xxx是否有值,有值,放走,沒值,去登錄,細(xì)節(jié): 如果是/login 直接放走
6. 退出功能: 把req.session.xxx 清空即可
瀏覽器登錄和退出
1. 登錄做什么 把用戶名和密碼給服務(wù)器
2. 退出做什么, 1. 告訴服務(wù)器,要退出 2.(清緩存也行)
yarn和npm的說明
官網(wǎng):https://yarn.bootcss.com/
Yarn是由Facebook、Google、Exponent 和 Tilde 聯(lián)合推出了一個(gè)新的 JS 包管理工具 ,Yarn 是為了彌補(bǔ) npm 的一些缺陷而出現(xiàn)的。
Yarn 緩存了每個(gè)下載過的包,所以再次使用時(shí)無需重復(fù)下載。
同時(shí)利用并行下載以最大化資源利用率,因此安裝速度更快。
yarn的用法和npm的用法差不多
yarn命令
初始化一個(gè)新項(xiàng)目
yarn init
1
添加依賴包
yarn add 包名
1
升級(jí)依賴包
yarn upgrade 包名
1
移除依賴包
yarn remove 包名
1
安裝項(xiàng)目的全部依賴
yarn
1
全局安裝
yarn global add 包名
1
使用gulp自動(dòng)化構(gòu)建
官網(wǎng):https://gulpjs.com/
中文文檔:https://www.gulpjs.com.cn/
用自動(dòng)化構(gòu)建工具增強(qiáng)你的工作流程!
在開發(fā)過程中,有很多重復(fù)性的工作需要執(zhí)行。
less轉(zhuǎn)成css
對(duì)css代碼壓縮混淆
對(duì)js代碼壓縮混淆
寫完代碼后需要刷新瀏覽器
無法共用模版
gulp是前端開發(fā)過程中對(duì)代碼進(jìn)行構(gòu)建的工具,是自動(dòng)化項(xiàng)目的構(gòu)建利器;她不僅能對(duì)網(wǎng)站資源進(jìn)行優(yōu)化,而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成;使用她,我們不僅可以很愉快的編寫代碼,而且大大提高我們的工作效率。
gulp -----> grunt ------>webpack
環(huán)境安裝
初始化項(xiàng)目
npm init -y
1
全局安裝gulp
npm install gulp -g
yarn global add gulp
1
2
作為項(xiàng)目的依賴進(jìn)行安裝
yarn add gulp --save-dev 或者
yarn add gulp --save-dev
--save-dev 等同于 -D
如果這個(gè)依賴包只是在開發(fā)階段需要用到,需要加-D
1
2
3
4
新建gulpfile.js文件
// 參數(shù)1: 任務(wù)名
// 參數(shù)2: 任務(wù)需要執(zhí)行的內(nèi)容
gulp.task('aa', function() {
console.log('哈哈')
})
1
2
3
4
5
執(zhí)行任務(wù)
gulp 任務(wù)名;
gulp; 如果不接任務(wù)名,那么會(huì)執(zhí)行默認(rèn)的 default任務(wù)
1
2
3
glup任務(wù)-文件拷貝-lib
文件拷貝使用到了gulp提供的幾個(gè)核心方法
gulp.task: 定義任務(wù)
gulp.src() 讀取文件
gulp.pipe() 把文件交給管道處理
gulp.dest() 輸出文件到某個(gè)目錄
gulp.task定義任務(wù)
gulp.src('./src/lib/**/*.*')把文件讀取成一個(gè)文件流
gulp.pipe() 把文件流交給下一個(gè)流
gulp.dest('./dist/lib')輸出文件
// 簡(jiǎn)單拷貝, 處理 lib文件夾, lib文件不需要做任何的處理,只需要拷貝到dist目錄
// 任務(wù)需要加一個(gè)return, 表示任務(wù)完成
gulp.task('lib', function() {
// 讀取文件
// gulp.src() 讀取文件
// gulp.pipe() 管道
// gulp.dest() 放到哪兒
return gulp.src('./src/lib/**/*.*').pipe(gulp.dest('./dist/lib'))
})
1
2
3
4
5
6
7
8
9
gulp任務(wù)-js代碼壓縮與混淆
gulp-uglify-es: 給js代碼進(jìn)行壓縮,處理ES6的代碼
gulp-rename: 重命名
安裝依賴
yarn add gulp-uglify-es --save-dev
1
配置任務(wù)
const uglify = require('gulp-uglify-es').default
gulp.task('js', function() {
return gulp
.src('./js/*.js')
.pipe(uglify())
.pipe(gulp.dest('./dist/js'))
})
1
2
3
4
5
6
7
8
安裝重命名依賴
yarn add gulp-rename -D
1
重命名配置
task('js', function() {
return src('./js/*.js')
.pipe(dest('./dist/js'))
.pipe(uglify())
.pipe(
rename({
// 配置重命名的后綴名
suffix: '.min'
})
)
.pipe(dest('./dist/js'))
})
1
2
3
4
5
6
7
8
9
10
11
12
gulp任務(wù)-less處理
gulp-less: 把less變成css
gulp-rename: 重命名
gulp-minify-css: 壓縮css代碼
安裝依賴包
yarn add gulp-less -D
1
less任務(wù)
// less任務(wù)
task('less', function() {
return src('./less/*.less')
.pipe(less())
.pipe(
rename({
extname: '.css'
})
)
.pipe(dest('./dist/css'))
})
1
2
3
4
5
6
7
8
9
10
11
安裝css壓縮處理包
yarn add gulp-minify-css -D
1
壓縮css
// less任務(wù)
task('less', function() {
return src('./less/*.less')
.pipe(less())
.pipe(
rename({
extname: '.css'
})
)
.pipe(dest('./dist/css'))
.pipe(minifycss())
.pipe(
rename({
suffix: '.min'
})
)
.pipe(dest('./dist/css'))
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
gulp任務(wù)-圖片壓縮
gulp-imagemin: 可以對(duì)圖片進(jìn)行壓縮
gulp-cache: 圖片壓縮比較耗時(shí)的一個(gè)任務(wù), 如果每次都對(duì)所有的圖片進(jìn)行重新壓縮,比較浪費(fèi)時(shí)間, 會(huì)緩存下來所有已經(jīng)壓縮過的圖片
安裝依賴
yarn add gulp-imagemin -D
1
壓縮圖片的任務(wù)
task('image', function() {
return src('./img/*')
.pipe(imagemin())
.pipe(dest('./dist/img'))
})
1
2
3
4
5
安裝gulp-cachae
yarn add gulp-cache -D
1
壓縮圖片是比較耗時(shí)的,我們可以使用gulp-cache來緩存已經(jīng)壓縮過的圖片
task('image', function() {
return src('./img/*')
.pipe(cache(imagemin()))
.pipe(dest('./dist/img'))
})
1
2
3
4
5
參考資料:https://www.cnblogs.com/yuzhongwusan/p/5417090.html
gulp任務(wù)-處理html
gulp-minify-html: 壓縮html文件
gulp-html-extend: 語句當(dāng)前html去導(dǎo)入另一個(gè)html
壓縮html
yarn add gulp-minify-html -D
1
使用
// 處理html
task('html', function() {
return src('./src/*.html')
.pipe(minifyHtml())
.pipe(dest('./dist'))
})
1
2
3
4
5
6
導(dǎo)入html
yarn add gulp-html-extend -D
1
// 處理html
task('html', function() {
return src('./src/*.html')
.pipe(extender())
.pipe(minifyHtml())
.pipe(dest('./dist'))
})
1
2
3
4
5
6
7
在頁面中,如何導(dǎo)入html
<!-- @@include ./template/header.html -->
1
gulp任務(wù)-清空任務(wù)
安裝
yarn add del -D
1
配置任務(wù)
task('clean', function() {
return del('./dist')
})
1
2
3
gulp-任務(wù)整合series
task('build', gulp.series('clean', 'html', 'less', 'js', 'image', 'lib'))
1
gulp任務(wù)-監(jiān)聽文件的變化
// 實(shí)現(xiàn)一個(gè),修改代碼,會(huì)自動(dòng)執(zhí)行任務(wù)
// 監(jiān)聽的任務(wù),,,,,,做一件事件,當(dāng)我們修改了對(duì)應(yīng)的文件,需要執(zhí)行對(duì)應(yīng)的任務(wù)
// gulp.watch() 監(jiān)視文件
task('watch', function() {
// 參數(shù)1:監(jiān)視的文件
// 參數(shù)2: 對(duì)應(yīng)的任務(wù), 多個(gè)任務(wù)
watch('./src/**/*.html', series('html'))
watch('./src/less/*.less', series('less'))
watch('./src/js/*.js', series('js'))
watch('./src/lib/**/*.*', series('lib'))
watch('./src/img/*.*', series('img'))
})
gulp任務(wù)-自動(dòng)刷新
安裝
yarn add gulp-connect -D
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com