《Web應(yīng)用開發(fā)實戰(zhàn)》課件-單元4 構(gòu)建Web應(yīng)用

4.1HTTP協(xié)議引入為什么輸入網(wǎng)址就會跳轉(zhuǎn)到指定網(wǎng)頁呢？目錄01HTTP協(xié)議原理02請求報文響應(yīng)報文03HTTP原理什么是網(wǎng)絡(luò)協(xié)議？就像我們要用雙方都能理解的語言才能進行溝通和交流一樣，網(wǎng)絡(luò)上的各臺計算機之間要互換信息，也要用一種雙方都明白的、約定好的語言才能進行。這種雙方約定的溝通語言就稱為網(wǎng)絡(luò)協(xié)議。HTTP原理什么是HTTP?簡單的說，HTTP協(xié)議就是用于規(guī)范客戶端瀏覽器和服務(wù)器端以什么樣的格式進行通信數(shù)據(jù)交互，作為應(yīng)用層的面向?qū)ο蟮膮f(xié)議，HTTP由請求和響應(yīng)構(gòu)成，是一個標準的客戶端服務(wù)器模型，也是一個無狀態(tài)的協(xié)議。HTTP協(xié)議的請求過程HTTP原理

/index.html協(xié)議名：http主機名：端口：80對象路徑：/index.htm主機名為域名，需要域名系統(tǒng)DNS解析域名為IP地址。Web服務(wù)器接收請求并向瀏覽器發(fā)送響應(yīng)報文封裝HTTP請求報文Web服務(wù)器關(guān)閉TCP連接瀏覽器向Web服務(wù)器發(fā)送請求報文建立TCP連接地址解析HTTP協(xié)議的請求過程HTTP原理

/index.html協(xié)議名：http主機名：端口：80對象路徑：/index.htm主機名為域名，需要域名系統(tǒng)DNS解析域名為IP地址。Web服務(wù)器接收請求并向瀏覽器發(fā)送響應(yīng)報文封裝HTTP請求報文Web服務(wù)器關(guān)閉TCP連接瀏覽器向Web服務(wù)器發(fā)送請求報文建立TCP連接地址解析存放在客戶端的Socket對象中請求報文包含：請求行（requestline）請求消息頭（headers）空行（blankline）請求體（requestbody）HTTP協(xié)議的請求過程HTTP原理在HTTP工作開始之前，瀏覽器首先要通過網(wǎng)絡(luò)與Web服務(wù)器建立連接TCP連接。因為HTTP是應(yīng)用層的協(xié)議，根據(jù)連接規(guī)則，高層協(xié)議要在低層協(xié)議建立連接之后才能進行。因此，首先要建立TCP連接。

/index.html協(xié)議名：http主機名：端口：80對象路徑：/index.htm主機名為域名，需要域名系統(tǒng)DNS解析域名為IP地址。Web服務(wù)器接收請求并向瀏覽器發(fā)送響應(yīng)報文封裝HTTP請求報文Web服務(wù)器關(guān)閉TCP連接瀏覽器向Web服務(wù)器發(fā)送請求報文地址解析存放在客戶端的Socket對象中請求報文包含：請求行（requestline）請求消息頭（headers）空行（blankline）請求體（requestbody）建立TCP連接HTTP協(xié)議的請求過程HTTP原理在HTTP工作開始之前，瀏覽器首先要通過網(wǎng)絡(luò)與Web服務(wù)器建立連接TCP連接。因為HTTP是應(yīng)用層的協(xié)議，根據(jù)連接規(guī)則，高層協(xié)議要在低層協(xié)議建立連接之后才能進行。因此，首先要建立TCP連接。

/index.html協(xié)議名：http主機名：端口：80對象路徑：/index.htm主機名為域名，需要域名系統(tǒng)DNS解析域名為IP地址。Web服務(wù)器接收請求并向瀏覽器發(fā)送響應(yīng)報文封裝HTTP請求報文Web服務(wù)器關(guān)閉TCP連接瀏覽器向Web服務(wù)器發(fā)送請求報文地址解析存放在客戶端的Socket對象中請求報文包含：請求行（requestline）請求消息頭（headers）空行（blankline）請求體（requestbody）建立TCP連接瀏覽器與Web服務(wù)器建立了TCP連接之后，就會將存放在客戶端Socket對象中的請求報文通過TCP協(xié)議發(fā)送給Web服務(wù)器。HTTP協(xié)議的請求過程HTTP原理Web服務(wù)器從Socket對象中獲取報文，并且使用HTTP協(xié)議規(guī)定的方式進行解析。響應(yīng)報文包含：狀態(tài)行（statusline）響應(yīng)消息頭（Headers）空行（blankline）響應(yīng)體（responsebody）在HTTP工作開始之前，瀏覽器首先要通過網(wǎng)絡(luò)與Web服務(wù)器建立連接TCP連接。因為HTTP是應(yīng)用層的協(xié)議，根據(jù)連接規(guī)則，高層協(xié)議要在低層協(xié)議建立連接之后才能進行。因此，首先要建立TCP連接。

/index.html協(xié)議名：http主機名：端口：80對象路徑：/index.htm主機名為域名，需要域名系統(tǒng)DNS解析域名為IP地址。封裝HTTP請求報文Web服務(wù)器關(guān)閉TCP連接瀏覽器向Web服務(wù)器發(fā)送請求報文地址解析存放在客戶端的Socket對象中請求報文包含：請求行（requestline）請求消息頭（headers）空行（blankline）請求體（requestbody）瀏覽器與Web服務(wù)器建立了TCP連接之后，就會將存放在客戶端Socket對象中的請求報文通過TCP協(xié)議發(fā)送給Web服務(wù)器。建立TCP連接Web服務(wù)器接收請求并向瀏覽器發(fā)送響應(yīng)報文HTTP協(xié)議的請求過程HTTP原理Web服務(wù)器從Socket對象中獲取報文，并且使用HTTP協(xié)議規(guī)定的方式進行解析。響應(yīng)報文包含：狀態(tài)行（statusline）響應(yīng)消息頭（Headers）空行（blankline）響應(yīng)體（responsebody）在HTTP工作開始之前，瀏覽器首先要通過網(wǎng)絡(luò)與Web服務(wù)器建立連接TCP連接。因為HTTP是應(yīng)用層的協(xié)議，根據(jù)連接規(guī)則，高層協(xié)議要在低層協(xié)議建立連接之后才能進行。因此，首先要建立TCP連接。

/index.html協(xié)議名：http主機名：端口：80對象路徑：/index.htm主機名為域名，需要域名系統(tǒng)DNS解析域名為IP地址。Web服務(wù)器接收請求并向瀏覽器發(fā)送響應(yīng)報文封裝HTTP請求報文Web服務(wù)器關(guān)閉TCP連接瀏覽器向Web服務(wù)器發(fā)送請求報文地址解析存放在客戶端的Socket對象中請求報文包含：請求行（requestline）請求消息頭（headers）空行（blankline）請求體（requestbody）瀏覽器與Web服務(wù)器建立了TCP連接之后，就會將存放在客戶端Socket對象中的請求報文通過TCP協(xié)議發(fā)送給Web服務(wù)器。瀏覽器或服務(wù)器在其頭信息加入Connection:keep-alive，TCP連接在發(fā)送后將仍保持打開狀態(tài)。保持連接節(jié)省了為每個請求建立新連接所需的時間，還節(jié)約了網(wǎng)絡(luò)帶寬。建立TCP連接HTTP協(xié)議的主要特點HTTP原理客戶向服務(wù)器請求服務(wù)時，只需傳送請求方法和路徑。請求方法常用的有GET、HEAD、POST簡單快速01HTTP允許傳輸任意類型的數(shù)據(jù)對象靈活02限制每次連接只處理一個請求采用這種方式可以節(jié)省傳輸時間無連接03無狀態(tài)是指協(xié)議對于事務(wù)處理沒有記憶能力無狀態(tài)04支持B/S及C/S模式05請求/響應(yīng)報文客戶端和服務(wù)器在發(fā)送請求和做出響應(yīng)時都是從Socket對象中獲取對方的IP地址和端口號，那么Socket中信息以什么格式進行發(fā)送？請求報文1響應(yīng)報文2HTTP協(xié)議中信息的格式以報文的形式呈現(xiàn)，報文就是有一定格式的字符串，只是這里的格式需要遵守HTTP協(xié)議規(guī)范，報文分為兩種請求報文由四部分組成：請求行（requestline）請求消息頭（headers）空行（blankline）請求體（requestbody）請求報文1

1.請求行（requestline）請求報文的起始行稱為請求行。請求行由請求方法字段、URL字段和HTTP協(xié)議版本字段組成，它們用空格分隔，例如：GET/index.htmlHTTP/1.1。

2.請求消息頭（headers）請求消息頭，由關(guān)鍵字/值對組成，每行一對，關(guān)鍵字和值用英文冒號“:”分隔。請求頭部通知服務(wù)器關(guān)于客戶端請求的信息，典型的請求頭有：User-Agent：產(chǎn)生請求的瀏覽器類型；Accept：客戶端可識別的響應(yīng)內(nèi)容類型列表，星號“*”用于按范圍將類型分組，*/*”表示可接受全部類型，“type/*”表示可接受type類型的所有子類型Accept-Language：客戶端可接受的自然語言Accept-Encoding：客戶端可接受的編碼壓縮格式Accept-Charset：可接受的應(yīng)答字符集Host：請求的主機名，允許多個域名同處一個IP地址，即虛擬主機connection：連接方式（close或keepalive）Cookie：存儲于客戶端的擴展字段，向同一域名的服務(wù)端發(fā)送屬于該域的cookie請求報文13.空行最后一個請求頭之后是一個空行，發(fā)送回車符和換行符，通知服務(wù)器以下不再有請求頭。4.請求體請求體也稱報文體，它的內(nèi)容就是請求數(shù)據(jù)，承載多個請求參數(shù)的數(shù)據(jù)。它將一個頁面表單中的組件值通過鍵值對形式編碼成一個格式化串請求報文請求報文consthttp=require('http');varserver=http.createServer();server.on("request",function(req,res){console.log(req.headers);console.log(req.rawHeaders);console.log(req.httpVersion);console.log(req.method);console.log(req.url);res.end();})server.listen(9000,function(){console.log("localhost://9000服務(wù)器已開啟");}req.headers打印全部請求頭信息--對象形式req.rawHeaders全部頭信息--數(shù)組形式req.httpVersion請求的協(xié)議方式req.method請求的方式req.url請求的路徑在地址欄輸入localhost://9000，按F12，在控制臺的Network中的Headers查看結(jié)果創(chuàng)建http服務(wù)器，認識組成請求頭的各部分內(nèi)容。示例響應(yīng)報文由四部分組成：狀態(tài)行（statusline）響應(yīng)消息頭（Headers）空行（blankline）響應(yīng)體（responsebody）響應(yīng)報文2響應(yīng)報文1.狀態(tài)行響應(yīng)報文的起始行稱為響應(yīng)狀態(tài)行。

狀態(tài)行由HTTP協(xié)議版本、一個表示成功或錯誤的整數(shù)代碼（狀態(tài)碼）和對狀態(tài)碼進行描述的文本信息三部分組成，它們用空格分隔。例如：HTTP/1.1200OK。狀態(tài)代碼由

3位數(shù)字組成，表示請求是否被理解或被滿足。HTTP響應(yīng)狀態(tài)碼的第一個數(shù)字定義了響應(yīng)的類別，后面兩位沒有具體的分類

2第一個數(shù)字有五種可能的取值：1xx：表示請求已接收，需要繼續(xù)處理2xx：表示請求已成功被服務(wù)器接收、理解、并接受3xx：為完成請求，客戶端需進一步細化請求4xx：客戶端的請求有錯誤5xx：服務(wù)器端出現(xiàn)錯誤常用的http狀態(tài)碼如下：

200：請求成功；404：請求的資源沒有被找到；400：客戶端請求語法有誤；403：服務(wù)器拒絕請求

500：服務(wù)器端錯誤；502：服務(wù)器作為網(wǎng)關(guān)或代理，從上游服務(wù)器收到無效響應(yīng)響應(yīng)報文響應(yīng)報文2.響應(yīng)消息頭狀態(tài)行后緊接著的是若干響應(yīng)消息頭，服務(wù)器端通過響應(yīng)消息頭向客戶端傳遞附加信息，包括服務(wù)程序名、被請求資源需要的認證方式、客戶端請求資源的最后修改時間、重定向地址等信息。3.空行最后一個響應(yīng)頭之后是一個空行，發(fā)送回車符和換行符，通知服務(wù)器以下不再有響應(yīng)頭。4.響應(yīng)體內(nèi)容就是響應(yīng)數(shù)據(jù)，包括服務(wù)器返回給客戶端的文本信息。2響應(yīng)報文響應(yīng)報文varhttp=require("http");varserver=http.createServer();server.on("request",function(req,res){res.statusCode=404;res.statusmessage="notfound";res.setHeader('Content-Type','text/plain;charset=utf-8’);res.writeHead(404,'notfound',{'Content-Type':'text/plain;charset=utf-8’});res.write("這是發(fā)向前端的內(nèi)容！");res.end();res.statusCode=200;res.status.message="OK";res.setHeader('Content-Type','text/plain;charset=utf-8’)res.writeHead(404,'notfound',{'Content-Type':'text/palin;charset=utf-8’});})server.listen(9000,function(){console.log("localhost:9000服務(wù)器已開啟");});設(shè)置響應(yīng)頭的基本信息創(chuàng)建http服務(wù)器，認識響應(yīng)報文的各部分內(nèi)容。示例小結(jié)HTTP協(xié)議原理請求/響應(yīng)報文4.2http模塊引入Node.js中如何實現(xiàn)對HTTP請求的管理？目錄01http模塊介紹02創(chuàng)建Web服務(wù)端http模塊什么是http模塊？Node.js的核心模塊，用于創(chuàng)建Web服務(wù)器，實現(xiàn)瀏覽器與Web服務(wù)器之間的請求與響應(yīng)。引入方式：varhttp=require("http");http模塊http模塊如何實現(xiàn)對客戶端和服務(wù)器的支持？1.對服務(wù)器的支持--http.createServer():創(chuàng)建HTTPWeb服務(wù)器--http.Server:服務(wù)器實例對象--http.ServerResponse:該對象用于響應(yīng)處理客戶端請求。2.對客戶端的支持--http.request(options[,callback])該方法用于創(chuàng)建HTTP請求--http.ClientRequest由http.request()創(chuàng)建并返回，它是一個正在處理的HTTP請求創(chuàng)建Web服務(wù)端Web服務(wù)器創(chuàng)建11.varserver=http.createServer([options][,requestListener])用于創(chuàng)建http服務(wù)器方法有多個可選參數(shù)，但一般只接收一個可選傳入?yún)?shù)requestListener。返回：新創(chuàng)建的http服務(wù)器實例。2.server.listen([port[,host[,backlog]]][,callback])用此方法啟動一個服務(wù)來監(jiān)聽連接端口信息。調(diào)用server.listen()后http.Server

就可以接收客戶端傳入連接message.rawHeaders原始請求頭/響應(yīng)頭的列表數(shù)組response.end()此方法用于向服務(wù)器發(fā)出信號，表明已發(fā)送所有響應(yīng)頭和主體，該服務(wù)器應(yīng)該視為此消息已完成。message.headers請求或響應(yīng)的消息頭對象。response.writeHead()此方法用于向請求發(fā)送響應(yīng)頭response.setHeader(name,value)

為隱式響應(yīng)頭設(shè)置單個響應(yīng)頭的值。Web服務(wù)器創(chuàng)建13.http.ServerResponse此對象由HTTP服務(wù)器內(nèi)部創(chuàng)建，而不是由用戶創(chuàng)建。

它作為第二個參數(shù)傳給request事件，內(nèi)部存在多種方法：response.write()該方法用于發(fā)送一塊響應(yīng)主體，可以多次調(diào)用該方法以提供連續(xù)的響應(yīng)主體片段。創(chuàng)建Web服務(wù)端示例創(chuàng)建http.Server對象，并傳入requestListener

事件監(jiān)聽器。varhttp=require("http");varserver=http.createServer();server.on("request",function(req,res){res.writeHead(200,{"content-type":"text/plain;charset=utf-8"});res.write("歡迎學習Node.js!");res.end(); });server.listen(3000,function(){console.log("localhost:3000服務(wù)器已開啟");});引入http模塊，創(chuàng)建后臺服務(wù)用服務(wù)器的listen方法監(jiān)聽端口號3000服務(wù)器接收到請求后，觸發(fā)requst事件代碼，發(fā)送響應(yīng)頭和響應(yīng)正文，最后結(jié)束響應(yīng)。創(chuàng)建Web服務(wù)端服務(wù)器解析客戶端請求2服務(wù)器需要解析接收到的請求信息，以決定如何進行響應(yīng)。URL為“/”

主頁，“/login”

登錄頁，“/product”

商品列表頁

等。在服務(wù)器的事件監(jiān)聽函數(shù)內(nèi)部，回調(diào)函數(shù)的request對象封裝了客戶端發(fā)送的具體請求信息，包括請求方式、URL、請求頭等。request對象的常用屬性有：(1)

request.headers--獲取請求頭對象，消息頭名稱和值為鍵值對的對象形式。(2)

request.rawHeaders--將原始請求/響應(yīng)頭完全按照收到的方式列出。(3)

request.httpVersion--在服務(wù)器請求的情況下，表示客戶端發(fā)送的HTTP版本。(4)

request.method--獲取請求方式的字符串，只讀，如“GET”“POST”。(5)

request.url--獲取請求的URL字符串，僅包含實際HTTP請求中存在的URL。(6)

request.statusCode--獲取或設(shè)置3位HTTP響應(yīng)狀態(tài)碼，如404。創(chuàng)建Web服務(wù)端示例

服務(wù)器解析請求。varhttp=require('http');varserver=http.createServer();//創(chuàng)建Web服務(wù)器server.on("request",function(request,response){ console.log(request.headers);//以對象形式輸出全部請求頭信息 console.log(request.rawHeaders);//以數(shù)組形式輸出全部請求頭信息 console.log(request.httpVersion);//輸出http請求的協(xié)議 console.log(request.method);//輸出http請求的方式 console.log(request.url);//輸出http請求的路徑 response.end();});server.listen(3000,function(){ console.log("localhost:3000listening...");});在控制臺輸出請求細節(jié)信息創(chuàng)建Web服務(wù)端通過函數(shù)內(nèi)的request對象，獲取請求信息。小結(jié)HTTP模塊使用方法創(chuàng)建Web服務(wù)器1.引入http模塊；2.創(chuàng)建Web服務(wù)器實例；3.啟動監(jiān)聽服務(wù)器；4.為服務(wù)器實例綁定request事件；5.根據(jù)客戶端請求進行響應(yīng)。4.3path模塊和url模塊引入目錄01path模塊02url模塊path模塊為什么要使用path模塊？針對多文件和路徑操作的相關(guān)問題，需要使用path模塊中一系列處理和轉(zhuǎn)換文件路徑的工具集。path引入方式?varpath=require('path');path.basename(path[,ext])用于獲取路徑的最后一個部分，即文件名，參數(shù)ext

為需要截掉的后綴內(nèi)容。path.parse(pathString)用于將path字符串轉(zhuǎn)為path對象，其屬性表示path的有效元素path.join([...paths])用于將所有給定的path片段連接到一起，然后規(guī)范化生成的路徑。path.dirname(path)用于獲取文件目錄path.resolve([from...],to)用于將to參數(shù)解析為絕對路徑，給定的路徑序列會從右到左進行處理，后面的每個path會被追加到前面，直到構(gòu)造出絕對路徑。path.normalize(path)用于規(guī)范化給定的path，處理冗余的“..”、“.”、“/”字符。path模塊path模塊的主要方法path模塊varpath=require("path");varmyPath1=path.normalize('');varmyPath2=path.normalize('‘);varmyPath3=path.normalize(‘');console.log(myPath1);console.log(myPath2);console.log(myPath3);用于規(guī)范化給定的path，處理冗余的“..”、“.”、“/”字符。如果path是零長度的字符串，則返回'.'，表示當前工作目錄。path.normalize('C:\\temp\\\\foo\\bar\\..\\’);規(guī)范化時省略了冗余的“..”、“.”、“/”字符，將“/”替換成了“\”。path.normalize方法編程應(yīng)用。示例path模塊varpath=require("path");varpath1='path1',path2='path2/pp',path3='/path3';varmyPath=path.join(path1,path2,path3);console.log(myPath);將所有給定的path片段連接到一起，然后規(guī)范化生成的路徑。path.join

方法編程應(yīng)用。示例path模塊varpath=require("path");varmyPath=path.resolve('path1','path2','a/b\\c/');console.log(myPath);處理完所有給定的path片段之后還未生成絕對路徑，就把當前工作目錄追加到前面構(gòu)成絕對路徑。path.resolve

方法編程應(yīng)用。示例url模塊為什么要使用url模塊？在實際應(yīng)用中，經(jīng)常會涉及到需要從完整的url

請求路徑中提取出各個屬性及其值的問題，Node.js的url

模塊為解決這類問題提供了相應(yīng)的方法。url引入方式varurl=require('url');url.format(urlObject)把JSON對象形式的url

格式化成字符串形式的url返回：字符串形式的urlformat方法的作用與parse相反，它的參數(shù)是一個JSON對象，返回一個組裝好的url

地址url.parse(urlString[,parseQueryString[,slashesDenoteHost]])把字符串形式的url

轉(zhuǎn)成對象形式的url返回：url

對象參數(shù)說明：urlString

需要解析的url

字符串parseQueryString

為true時將使用查詢模塊分析查詢字符串，默認為falseurl模塊url模塊的主要方法url模塊varurl=require("url")varmyurl="/some/url/?with=query¶m=that#about"；varparsedUrl=url.parse(myurl);console.log(parsedUrl);用的url.parse

方法，只傳入字符串形式的url

參數(shù)，進行對象形式轉(zhuǎn)換用url.parse

方法，把字符串形式的url

轉(zhuǎn)成對象形式的url。示例url模塊varurl=require("url");vartestObj1={protocol:'http:',slashes:true,auth:null,host:'',port:null,hostname:'',hash:'#about’,search:'?with=query¶m=that',query:'with=query¶m=that',pathname:'/some/url/',path:'/some/url/?with=query¶m=that',

href:'/some/url/?with=query¶m=that#about'}varrsUrl=url.format(testObj1);console.log(rsUrl);JSON格式的數(shù)據(jù)用url.format()方法，返回一個組裝好的url

地址。使用url.format()方法，把JSON對象形式的url

格式化成字符串形式的url。示例小結(jié)path模塊的用法url模塊的用法4.4動態(tài)處理靜態(tài)資源請求引入Node.js中的靜態(tài)資源是如何管理與訪問的呢？靜態(tài)資源動態(tài)資源請求網(wǎng)址客戶端瀏覽器服務(wù)器端目錄01靜態(tài)資源02服務(wù)器動態(tài)處理靜態(tài)資源靜態(tài)資源靜態(tài)資源是指不需要程序處理、不需要查數(shù)據(jù)庫直接就能夠顯示的頁面資源。多次訪問，源代碼不變，訪問效率高。前端頁面HttpNode.js服務(wù)端HttpHttppageRequestResponseMySQL數(shù)據(jù)庫動態(tài)資源是指需要程序處理或者從數(shù)據(jù)庫中讀數(shù)據(jù)，能夠根據(jù)不同的條件在頁面顯示不同的數(shù)據(jù)。靜態(tài)資源將靜態(tài)資源與后臺應(yīng)用分開部署，提高用戶訪問靜態(tài)代碼的速度，降低對后臺應(yīng)用訪問?？蛻舳薔ode.js服務(wù)端pageRequestResponse靜態(tài)資源動態(tài)資源靜態(tài)資源

動靜分離靜態(tài)資源讀文件if(req.url=="/0.jpg"){

fs.readFile("./0.jpg",function(err,data){

res.end(data);

})}實際URL/0.jpg讀取文件static文件夾是一個靜態(tài)站點，包含以下文件：--css/main.css樣式文件--images文件夾下有3張圖片--三個靜態(tài)頁面：首頁、商品頁和404頁--favicon.ico網(wǎng)站圖標服務(wù)器動態(tài)處理靜態(tài)資源通過服務(wù)器到磁盤中讀取靜態(tài)文件并響應(yīng)給客戶端當頁面包含多個靜態(tài)文件時，需根據(jù)頁面鏈接查找到文件靜態(tài)文件正常渲染原理根據(jù)請求url動態(tài)拼接靜態(tài)文件磁盤路徑讀取靜態(tài)文件響應(yīng)到客戶端注意處理首頁特例服務(wù)器動態(tài)處理請求varhttp=require('http');varserver=http.createServer();使用http模塊創(chuàng)建服務(wù)器服務(wù)器動態(tài)處理靜態(tài)資源示例使用http模塊創(chuàng)建服務(wù)器，動態(tài)處理靜態(tài)資源。服務(wù)器動態(tài)處理靜態(tài)資源varhttp=require('http');varfs=require('fs');varpath=require('path');varserver=http.createServer();server.on('request',function(req,res){varurl=req.url;console.log(url);//每次請求獲取的資源路徑在服務(wù)端輸出

varfullPath=path.join(__dirname,'static',url);//static為站點文件夾名//當用戶訪問/的時候，默認讓用戶訪問index.htmlif(url==='/'){ fullPath=path.join(__dirname,'static','index.html');}fs.readFile(fullPath,function(err,data){//讀取文件響應(yīng)到客戶端res.end(data);});});......server.listen(3000,function(){console.log('serverisrunnigatport3000');});關(guān)鍵：根據(jù)請求url值靈活構(gòu)建對應(yīng)文件路徑當請求地址為”/”時，到磁盤中讀取index.html文件返回監(jiān)聽3000端口服務(wù)器動態(tài)處理靜態(tài)資源

server_static.js示例代碼運行項目啟動項目nodemonserver_static.js服務(wù)器動態(tài)處理靜態(tài)資源http://localhost:3000/product.html運行項目服務(wù)器動態(tài)處理靜態(tài)資源靜態(tài)資源通過網(wǎng)址訪問，默認進入設(shè)置的靜態(tài)文件夾讀取靜態(tài)資源。http://localhost:3000/小結(jié)靜態(tài)資源不需要程序處理就能顯示的頁面資源，主要包含HTML、CSS、JS和JSON代碼文件，以及圖片和Web字體文件等服務(wù)器動態(tài)處理靜態(tài)資源理解原理：服務(wù)器根據(jù)請求url，靈活構(gòu)建文件路徑，讀取文件響應(yīng)到客戶端。處理特例：請求url為”/”時，找到站點中的index.html讀取響應(yīng)到客戶端4.5前后端商品數(shù)據(jù)交互引入如何實現(xiàn)前后端交互，顯示數(shù)據(jù)信息？前端頁面HttpNode.js服務(wù)端JSON文件HttpHttppage目錄01實驗需求02實驗步驟03項目實現(xiàn)實驗需求創(chuàng)建后端服務(wù)，并解決跨域，將product.json

文件數(shù)據(jù)響應(yīng)到前端，在模板頁面中將商品信息渲染出來。實驗步驟修改index.html模板頁面，向服務(wù)器發(fā)送請求，并接收響應(yīng)數(shù)據(jù)03準備product.json文件01編寫server_json.js文件，構(gòu)建服務(wù)器02運行項目04{

"data":[{"id":"1","name":"PC008-1BENZ.withdiode","cat_id":"1","size":"93mm","image":"./images/pro-1.jpg","price":"2000","add_time":"2022-10-11","sort":"10"},

…… //此處省略一些商品數(shù)據(jù)

]}項目實現(xiàn)1.準備product.json-商品數(shù)據(jù)文件JSON文件varhttp=require('http');varfs=require('fs');varserver=http.createServer();server.on('request',function(request,response){//解決跨域問題,*表示所有地址都可以訪問response.setHeader('Access-Control-Allow-Origin','*');

response.writeHead(200,{'Content-Type':'text/plain;charset=utf-8'});fs.readFile('product.json',function(err,data){ response.end(data);}); });server.listen(3000,function(err){ console.log('服務(wù)器創(chuàng)建成功！http://localhost:3000');});項目實現(xiàn)加載http模塊和fs模塊處理前端請求解決跨域問題讀取文件數(shù)據(jù)響應(yīng)到前端設(shè)置監(jiān)聽3000端口2.編寫js文件，構(gòu)建服務(wù)器，監(jiān)聽3000端口server_json.js服務(wù)器代碼<!--（略，可見附錄index.html）--><sectionclass="product"> <h2>產(chǎn)品展示</h2> <ahref="#">更多產(chǎn)品</a> <scriptsrc="/ajax/libs/jquery/3.5.1/jquery.js"></script> <script> $.ajax({ url:'http://localhost:3000'//服務(wù)器地址 }).then(res=>{ varpArr=JSON.parse(res).data;

for(i=0;i<pArr.length;i++){ console.log(pArr[i].name);//測試輸出，瀏覽器的console查看 $('.product').append(`<li><ahref="#"><imgsrc="${pArr[i].image}"alt=""><p>${pArr[i].name}<br><span>長度：${pArr[i].size}</span></p></a></li>`); } }) </script></section><!--（略，可見附錄index.html）-->項目實現(xiàn)通過ajax向服務(wù)器地址:3000發(fā)送請求http接受請求后，讀取json文件內(nèi)容響應(yīng)給頁面，通過JSON.parse()解析數(shù)據(jù)；根據(jù)json文件的數(shù)據(jù)結(jié)構(gòu)，JSON.parse(res).data取得所有的商品數(shù)據(jù)；for循環(huán)解析出每個商品數(shù)據(jù)在已有頁面模板中輸出index.html客戶端代碼3.修改index.html模板頁面，向服務(wù)器發(fā)送請求，接收響應(yīng)數(shù)據(jù)4.運行項目，查看結(jié)果項目實現(xiàn)運行server_json.js打開index.html小結(jié)實驗需求創(chuàng)建后端服務(wù)，并解決跨域，將product.json

文件數(shù)據(jù)發(fā)向前端，并在模板頁面渲染出來。實現(xiàn)步驟創(chuàng)建項目

編寫代碼

運行項目項目實現(xiàn)product.json-商品數(shù)據(jù)文件server_json.js-構(gòu)建服務(wù)器index.html-客戶端接受響應(yīng)數(shù)據(jù)4.6網(wǎng)絡(luò)接口數(shù)據(jù)請求與展示引入如何充分利用網(wǎng)絡(luò)資源，獲取實時數(shù)據(jù)？前端頁面HttpNode.js服務(wù)端JSON文件HttpHttppage目錄01實驗需求02實驗步驟03項目實現(xiàn)實驗需求創(chuàng)建服務(wù)器，并解決跨域，將