筆記目錄:
- 一.Node.js簡介與安裝:
- 1.1 簡介:
- 1.2 安裝:
- 二.計算機的環境變數:
- 2.1 什么是CMD命令:
- 2.2 環境變數的作用:
- 三.Node.js的使用:
- 3.1 宿主環境:
- 3.2 cmd檔案目錄位置執行:
- 四.Node.js搭建服務器:
- 4.1一個簡單demo:
- 4.2 res.end()方法:
- 4.2.1 res.end是不允許輸出多行的,
- 4.2.2 res.end是不能輸入非字串的:
- 4.2.3 res.end里是能識別 html 標簽的:
- 4.3 res.write()方法:
- 五.Node.js的內置功能:
- 5.1 fs模塊:
- 5.2 路由(重點)
- 5.3 路由頂層設計例子:
- 5.4頂層路由設計遇到的問題:
- 六.模塊(重點):
- 6.1 html多檔案參考:
- 6.2 node.js的多檔案參考:
- 6.3 Node.js 中的 js 檔案作用域天生隔離:
- 6.4 exports命令:
- 6.5 exports命名空間:
- 6.6 module.exports命令:
- 6.7 檔案夾的使用:
- 6.8 node_modules檔案夾:
- 七.npm的基本使用:
- 7.1 npm的安裝:
- 7.2 npm的身份證和依賴:
- 總結:
一.Node.js簡介與安裝:
1.1 簡介:
??1.Node.js發布于2009年5月,由Ryan Dahl開發,是一個基于Chrome V8引擎的JavaScript運行環境,使用了一個事件驅動、非阻塞式I/O模型,讓JavaScript 運行在服務端的開發平臺,它讓JavaScript成為與PHP、Python、Perl、Ruby等服務端語言平起平坐的腳本語言,
??2.Node.js對一些特殊用例進行優化,提供替代的API,使得V8在非瀏覽器環境下運行得更好,V8引擎執行Javascript的速度非常快,性能非常好,基于Chrome JavaScript運行時建立的平臺, 用于方便地搭建回應速度快、易于擴展的網路應用,
1.2 安裝:
1.2.1 到官網去按照自己系統下載安裝包然后安裝就好,
Node.js中文網
1.2.2 安裝完成后,打開命令控制臺,輸入 node -v 出現版本號便是安裝完成,

二.計算機的環境變數:
2.1 什么是CMD命令:
??cmd 的英文意思就是 command ,就是在 cmd 視窗輸入的指令都是對計算機的命令,比如 node -v就是查看 node 的版本指令,
2.2 環境變數的作用:
??在任何作業系統都有環境變數,在環境變數里面配置的檔案夾內部 exe 程式,都能被系統 cmd 視窗呼叫,
??比如,你在cmd視窗直接輸入qq,是沒辦法執行的,因為你沒配置環境變數,所以你首先看看 qq.exe 的所在檔案夾的路徑位置,把它粘貼配置在環境變數里就能被cmd視窗呼叫了,

三.Node.js的使用:
3.1 宿主環境:
js檔案的運行必須要在宿主環境里,否則不能執行,而我們以前學習到的宿主環境只有一個,就是 HTML ,現在學習另一個宿主環境,就是 Node.js 平臺,
3.2 cmd檔案目錄位置執行:
我們可以打開 cmd 命令視窗運行 js 檔案,
如我在路徑 D:\node_Study 下有一個名為 01.js 檔案,內容為:
for(let i=0;i<10;i++){
console.log(i);
}
那我們就在該目錄下 node 這個檔案執行它:

可以看到有運行結果了,如果執行 02.js 就輸入 node 02.js,執行什么js檔案就node什么檔案,
四.Node.js搭建服務器:
4.1一個簡單demo:
01.js檔案里寫入以下代碼:
//得到內置的模塊,引入Node.js的內置http的模塊
var http = require('http');
//創建服務器,使用createServer方法
//回呼函式里的引數req表示請求,引數res表示回應
var server = http.createServer(function(req,res){
// 設定字符集
res.setHeader("Content-Type","text/html;charset=UTF8")
// 輸出一句話
res.end('北極光之夜,')
})
//監聽,默認埠是80,咱們用3000埠
server.listen(3000)
cmd視窗或者PowerShell視窗運行 node 01.js,再到瀏覽器運行網址 127.0.0.1:3000/ 得到效果:
注意事項:
?? 1.如果要改變這個檔案的內容,那么就要重新執行 node,
ctrl + c 是打斷連接
??2.與PHP一樣,Node搭建的服務器也是將所有的計算結果扁平化后回傳給計算機的,
??3.即使一個沒有安裝Node.js的計算機也是可以請求我們本地有Node.js的計算機的功能的,因為Node.js本身即是搭建服務器的,所有我們只要把id給對應的通信網路下的計算機就都可以進行訪問,因為本質上訪問的并不是Node,而是搭建好服務器,
4.2 res.end()方法:
4.2.1 res.end是不允許輸出多行的,
//得到內置的模塊,引入Node.js的內置http的模塊
var http = require('http');
//創建服務器,使用createServer方法
//回呼函式里的引數req表示請求,引數res表示回應
var server = http.createServer(function(req,res){
// 設定字符集
res.setHeader("Content-Type","text/html;charset=UTF8")
// 輸出一句話
res.end('北極光之夜,1')
res.end('北極光之夜,2')
res.end('北極光之夜,4')
res.end('北極光之夜,4')
res.end('北極光之夜,5')
res.end('北極光之夜,6')
})
//監聽,默認埠是80,咱們用3000埠
server.listen(3000)
輸出:

4.2.2 res.end是不能輸入非字串的:
如這樣是錯誤的:
res.end(123455)
4.2.3 res.end里是能識別 html 標簽的:
如:
res.end("<h1>北極光之夜,</h1>")
輸出:

4.3 res.write()方法:
若使用res.write()最后必須要有res.end,否則瀏覽器會一直處于請求狀態,
res.write好處是可以多條輸出和識別html標簽,但也不能輸入非字串,
//得到內置的模塊,引入Node.js的內置http的模塊
var http = require('http');
//創建服務器,使用createServer方法
//回呼函式里的引數req表示請求,引數res表示回應
var server = http.createServer(function(req,res){
// 設定字符集
res.setHeader("Content-Type","text/html;charset=UTF8")
// 輸出一句話
res.write("<h1>one</h1>");
res.write("<h1>two</h1>");
res.write("<h1>three</h1>");
res.end("結束請求")
})
//監聽,默認埠是80,咱們用3000埠
server.listen(3000)
結果:

五.Node.js的內置功能:
這是Node.js中文檔案的全部內置模塊,
5.1 fs模塊:
fs模塊最重要的就是異步讀取檔案(readFile),第一個引數檔案,第二個引數是回呼函式,
fs.readFile("檔案路徑與名字",function(err,data){
if(err) throw err;
res.end(data);
})
例子:
有個index.html檔案:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1> Hello World. </h1>
</body>
</html>
js讀取它:
//得到內置的模塊,引入Node.js的內置http的模塊
var http = require('http');
//引入Node.js的內置fs的模塊
var fs = require('fs');
var server = http.createServer(function(req,res){
fs.readFile("./index.html",function(err,data){
res.end(data);
})
})
//監聽,默認埠是80,咱們用3000埠
server.listen(3000)
結果:

5.2 路由(重點)
?5.1的例子有個問題就是我們不論地址輸入什么地址url,都是顯示同樣的內容,如:


…等
?那么我們可以引入設計路由的概念,當用戶輸入不同的url地址,我們獲取不同內容回傳,
例子:
var http = require('http');
var fs = require('fs');
var server = http.createServer(function(req,res){
res.setHeader("Content-Type","text/html;charset=UTF8");
//當地址為 /index則讀取index.html這個檔案,當然這個自定義
if(req.url === "/index"){
fs.readFile("./index.html",function(err,data){
res.end(data);
})
//否則顯示Nothing
}else{
res.end('Nothing');
}
})
server.listen(3000)
效果:


?注意:設計的路由地址并不是說要真正的物理上要存在這個路徑檔案,這個是自定義的,
?頂層路由設計概念:
?物理檔案層次和 URL是沒有任何關系的,
?NodeJS 是可以做頂層路由設計的! 一個頁面URL是可以自定義的,
?用戶的輸 入的URL是可以映射任何HTML頁面的,
5.3 路由頂層設計例子:
設定有一個地址 http://127.0.0.1:3000/user/…/… 為有效路由,
//得到內置的模塊,引入Node.js的內置http的模塊
var http = require('http');
var fs = require('fs');
//創建服務器,使用createServer方法
//回呼函式里的引數req表示請求,引數res表示回應
var server = http.createServer(function(req,res){
res.setHeader("Content-Type","text/html;charset=UTF8");
//獲取用戶輸入的地址
var url = req.url;
//利用正則運算式獲取地址/user 后的第一個 /.. 和第二個 /..
var arr = url.match(/\/user\/(.+)\/(.+)$/);
//如果無對應地址,報錯
if(!arr){
res.end("<h1>無對應頁面</h1>")
return;
}
// 正則的第一個獲取的
var $1 = arr[1];
//正則的第二個獲取的
var $2 = arr[2];
//模擬一些資料
var user = {
"liuyifei":"劉亦菲",
"dilireba":"迪麗熱巴",
"yangyin":"楊穎"
}
// 模擬一些資料
var list = {
"page":"文章",
"ask":"提問"
}
//根據用戶輸入回傳內容
res.write("<h1>我是"+user[$1]+"~</h1>")
res.end("<h2>歡迎來到"+list[$2]+"模塊</h2>")
})
//監聽,默認埠是80,咱們用3000埠
server.listen(3000)
效果:



5.4頂層路由設計遇到的問題:
??比如我們有一個 02.js的檔案如下:
?當地址為 /satr/dilireba 則讀取 dilireba.html 這個檔案,
var http = require('http');
var fs = require('fs');
var server = http.createServer(function(req,res){
res.setHeader("Content-Type","text/html;charset=UTF8");
//當地址為 //satr/dilireba則讀取dilireba.html這個檔案,當然這個自定義
if(req.url === "/satr/dilireba"){
fs.readFile("./dilireba.html",function(err,data){
res.end(data);
})
//否則顯示Nothing
}else{
res.end('Nothing');
}
})
server.listen(3000)
?? dilireba.html 這個檔案內容如下:
? 有句話和一張圖:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>我是迪麗熱巴~</h1>
<img src="dilireba.jpg">
</body>
</html>
? 運行結果如下:

問題:頁面中只有文字的展示,沒有圖片的展示,但是HTML結構中是有img標簽的,為什么不能加載?
?答:該圖片的ur1路徑是沒有物理檔案夾的,現在這張圖片的真實物理地址是我們自定義的http://127.0.0.1:3000/satr/dilireba.jpg,但是圖片物理存放地址是在我們本地D:\node_Study, 不一樣,所以一定不能按需加載,
解決:文字和圖片都進行請求:
var http = require('http');
var fs = require('fs');
var server = http.createServer(function(req,res){
res.setHeader("Content-Type","text/html;charset=UTF8");
//當地址為 /index則讀取index.html這個檔案,當然這個自定義
if(req.url === "/satr/dilireba"){
fs.readFile("./dilireba.html",function(err,data){
res.end(data);
})
//否則顯示Nothing
}else if(req.url === "/satr/dilireba.jpg"){
res.setHeader("Content-Type","image/jpg");
//得到圖片
fs.readFile("./dilireba.jpg",function(err,data){
res.end(data);
})
}
else{
res.end('Nothing');
}
})
server.listen(3000)
結果:

??問題來了,如果圖片的數量很多怎么辦?
??那么每一張都勢必要進行對路由的請求和渲染,也就是要給每一張圖片都要開辟路由地址,不僅僅是圖片,其他檔案也是一樣的,
??解決辦法就是我們后面要學習的express的中間件來靜態化一個檔案夾,目的就是當前的這個檔案夾內部的檔案自動就有了URL路由,不用每一個都單獨設定,
?需要注意的是使用NodeJS進行請求檔案的時候需要設定對應的ContentType,就是檔案的請求型別,
如:
html檔案:
res.setHeader("Content-Type","text/html;charset=UTF8");
css檔案:
res.setHeader("Content-Type","text/css");
jpg格式圖片:
res.setHeader("Content-Type","image/jpg");
等等…
六.模塊(重點):
什么是模塊?
當一個js檔案可以獨立完成一個功能的時候,這個js檔案就是一個模塊,
當一個多個.js檔案共同完成一個功能的時候,這個些js檔案就是一個模塊,
模塊就是module (模塊的意思),
6.1 html多檔案參考:
在HTML的宿主環境中,多個js檔案公用一個html宿主,此時它們的作用域是公用的,
示例:
index.html內容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="01.js"></script>
<script src="02.js"></script>
</body>
</html>
01.js內容:
var a = 666;
02.js內容:
alert(a);
運行index.html結果:

此時頁面中是可以彈出666的,因為此時01. js檔案中的a是全域變數也就是window的屬性,所以02.js是可以使用window.a的也就是666.
6.2 node.js的多檔案參考:
require()參考檔案在參考的同時也在執行,
如:
01.js內容:
console.log("I am 01.js");
02.js內容:
./ 表示當前目錄下
require("./01.js");
console.log("I am 02.js");
運行02.js結果:

6.3 Node.js 中的 js 檔案作用域天生隔離:
如:
01.js檔案內容:
var a = 666;
02.js檔案內容:
require("./01.js");
console.log(a);
運行結果:

錯誤資訊內容是a沒有被定義,因為 js 檔案在NodeJS中作用域隔離,因為NodeJS沒有window物件,
此時我們想讓檔案之間能夠相互通信,所以需要讓檔案自己暴露,如 6.4
6.4 exports命令:
如:
01.js內容:
var num = 666;
// 向外暴露num引數
exports.num = num;
02.js內容:
var a = require("./01.js");
//輸出獲取到 a檔案的 num 引數
console.log(a.num);
運行結果:

當然建議命名時要統一規范,如6.5
6.5 exports命名空間:
如:
這三個檔案都是平級的,
round.js內容:
function area(r){
return 3.14 * r * r
}
exports.area = area;
rectangle.js內容:
function area(a,b){
return a * b
}
exports.area = area;
app.js內容:
var round = require("./round.js");
var rectangle = require("./rectangle.js");
console.log(round.area(6));
console.log(rectangle.area(2,3));
運行結果:

round.js和rectangle.js都定義了area函式,但是由于我們都各自的命名空間,所以互相不干擾,
exports是可以暴露多個引數的:
如:
round.js變成如下,rectangle.js不變:
function area(r){
return 3.14 * r * r
}
function perimeter(r){
return 3.14 * 2 * r
}
exports.area = area;
exports.perimeter = perimeter;
app.js內容:
var round = require("./round.js");
var rectangle = require("./rectangle.js");
console.log(round.area(6));
console.log(rectangle.area(2,3));
console.log(round.perimeter(6));
結果:

6.6 module.exports命令:
當一個js檔案僅僅希望暴露一個引數,通常是建構式,此時我們可以使用module.exports命令進行暴露,
如:
有一個people.js內容如下:
function people(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
//prototype 屬性使您有能力向物件添加屬性和方法,
people.prototype.sayHello = function(){
console.log("我加"+this.name+",我"+this.age+"了呢,我性別是"+this.sex+"的,");
}
module.exports = people;
app.js內容如下:
var people = require("./people.js");
var xiaohong = new people("小紅",18,"女");
xiaohong.sayHello();
兩個檔案時平級的,
結果:

此時我們發現小紅在new的時候并沒有使用和exports類似的命名空間物件,是因為module. exports默認回傳的不是物件而是結果,
6.7 檔案夾的使用:
假如有個檔案目錄層級如下:

我們此時將round. js和rectangle. js放到了一個result檔案夾內部,被index.js進行整合,
round.js內容:
function area(r){
return 3.14 * r * r
}
function perimeter(r){
return 3.14 * 2 * r
}
exports.area = area;
exports.perimeter = perimeter;
rectangle.js內容:
function area(a,b){
return a * b
}
exports.area = area;
index.js內容:
var round = require("./round.js");
var rectangle = require("./rectangle.js");
exports.round = round;
exports.rectangle = rectangle;
app.js內容:
var result = require("./result");
console.log(result.round.area(3));
console.log(result.rectangle.area(1,2));
如果我們require()沒有.js后綴,此時NodeJS會認為我們在引入一個檔案夾,并且執行這個檔案夾內部的index.js,
var result = require("./result"); 等價于 var result = require("./result/index.js");
運行結果:

6.8 node_modules檔案夾:
?我們發現,在我們上面全部的代碼示例中引入件時,前面都不能省略 ./ ,省略就會報錯,但是,在NodeJS中,如果檔案夾內部存放了node_modules檔案夾,此時內部的檔案引入的時候就不用寫 ./ 了,就這么神奇,
?假如我們在6.7的基礎上,在work檔案夾下創建 node_modules檔案夾,然后把 result檔案夾放在 node_modules 下,這樣app.js在引入就不用寫 ./ 了,
當前目錄如下:

app.js內容:
var result = require("result");
console.log(result.round.area(3));
console.log(result.rectangle.area(1,2));
運行不會報錯:

總結,如果我們使用require去引入檔案,不加 ./ 就是引入node_ modules檔案夾內部的檔案,否則就是本地其他檔案夾,
七.npm的基本使用:
7.1 npm的安裝:
?npm是一個全世界范圍內的模塊分享社區,我們可以免費使用這個社區內別人開發的模塊,社區鏈接,
?npm受到全球超過1100萬開發人員的依賴,致力于使JavaScript開發優雅,高效和安全,
?安裝去官網查找自己想要的模塊,然后根據給出步驟檔案安裝和使用即可,
7.2 npm的身份證和依賴:
我們從npm上下載的node_ modules 檔案夾內容稱之為“依賴”,
我們可以使用package.json去管理這些依賴,此時我們就需要創建自己的身份證,
我們在開發專案的時候第一件事就是要創建身份證,
在終端輸入如下命令:
npm init
然后填寫一些表單資訊,比如名字,描述啥的,可以按需回答,也可以回車跳過,

然后就得到如下package.json:

有了這個身份證后,以后安裝依賴的時候要加- -save
比如我們裝一個叫nzh的模塊:
npm install --save nzh
此時再看身份證,得到nzh依賴項:

為什么要這樣做?
?我們知道node_ modules 都是相互依賴的,所以如果引入的模塊特別多,此時如果進行物理檔案傳輸的時候會造成特別大,特別碎的檔案內容,所以在我們物理傳輸時可以不傳這個node_ modules 檔案夾,只傳身份證就好,所以一定要用身份證保存,物理傳輸完成后,得到者可以根據身份證在下一次進行使用之前,重新安裝需要的依賴,
?以后只要在對應的package.json目錄下輸入:
npm isntall
?此時npm就會檢索對應目錄下面的package . json檔案內部的dependencies的依賴項然后進行安裝,
總結:
持續更新中~

轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/283230.html
標籤:其他
下一篇:CPU與I/O設備的資料傳送方式
