項目2智慧公寓管理系統(tǒng)的服務端數據處理任務2-2

構建與測試Node.js的網絡開發(fā)1HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

（語義化標簽、多媒體標簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務效果房間信息頁面：單擊按鈕獲取不同房間的信息

HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

（語義化標簽、多媒體標簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢知識儲備Postman工具：Postman的下載與安裝、使用Postman測試接口AJAX與Axios：Node.js的發(fā)展歷程、Node.js的必要性Express框架：安裝并使用Express、創(chuàng)建第一個Express項目、Express路由與中間件HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

（語義化標簽、多媒體標簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢2.2.1Postman工具1.下載與安裝PostmanHTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

（語義化標簽、多媒體標簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢2.2.1Postman工具2.使用Postman測試GET接口通過使用Postman，能夠輕松地模擬和發(fā)送各種HTTP請求，包括但不限于GET、POST、PUT和DELETE等，從而全面評估API接口的性能和功能?；诶?-6中的接口地址，演示如何使用Postman工具測試服務器中定義的接口HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

（語義化標簽、多媒體標簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢2.2.2AJAX與Axios1.AJAXAJAX是一種在無需重新加載整個頁面的情況下，能夠更新部分網頁的技術。它使用JavaScript在瀏覽器端與服務器進行異步通信，實現數據的獲取和頁面的更新。AJAX實現步驟：創(chuàng)建XMLHttpRequest對象、發(fā)起請求、接收服務器傳回的數據、傳輸數據varxhr=newXMLHttpRequest();//創(chuàng)建XMLHttpRequest對象xhr.open("GET","/data",true);//true表示異步請求if(xhr.readyState==4){//請求狀態(tài)if(xhr.status==200){//HTTP狀態(tài)碼console.log(xhr.responseText);}}//GET請求xhr.send(null);//POST請求xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send('username=xiaoming');HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

（語義化標簽、多媒體標簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢2.2.2AJAX與Axios2.Axios:封裝了底層AJAX實現和HTTP請求的細節(jié)。（1）安裝Axios

1）瀏覽器環(huán)境中使用Axios：CDN鏈接來使用Axios。

2）Node.js環(huán)境中使用Axios：使用NPM來安裝和管理依賴項。（2）Axios常用方法axios.get、axios.post、axios.put、axios.delete、axios.request。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

（語義化標簽、多媒體標簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢2.2.2AJAX與Axios2.Axios以axios.get與axios.post為例，使用Axios發(fā)起請求。//POST請求axios.post('/api/data',{key:'value'}).then(response=>{console.log(response.data);}).catch(error=>{console.error(error);});//GET請求axios.get('/api/data').then(response=>{console.log(response.data);}).catch(error=>{console.error(error);});HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

（語義化標簽、多媒體標簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢2.2.3Express框架Express是一個基于Node.js平臺的快速、開放、極簡的Web開發(fā)框架，為Web和移動應用程序提供一組強大的功能。1.安裝并使用Express推薦使用npm命令進行安裝：npminstallexpress安裝好Express包后，就可以在JavaScript單文件中引入并使用Express模塊。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

（語義化標簽、多媒體標簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢2.2.3Express框架2.創(chuàng)建第一個Express項目Express框架提供了應用程序生成器，用于快速建立一個Express項目的基礎框架，從而在此基礎上進行后續(xù)開發(fā)。（1）安裝express-generator：npminstall-gexpress-generator（2）創(chuàng)建Express項目安裝完成后，即可使用express命令創(chuàng)建Express項目。express項目名cdmyexpress//切換到項目目錄npminstall//初始化所有依賴包npmstart//啟動服務器HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

（語義化標簽、多媒體標簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢2.2.3Express框架2.創(chuàng)建第一個Express項目（3）Express項目目錄結構項目的目錄結構說明如下。bin：管理啟動項目的腳本文件node_modules：管理所有的項目依賴庫public：用于管理靜態(tài)資源的文件夾routes：用于管理路由文件views：用于管理頁面文件app.js：應用核心配置文件，項目入口文件package.json：項目依賴配置及開發(fā)者信息HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

（語義化標簽、多媒體標簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢2.2.3Express框架3.Express路由與中間件（1）路由在Express中，路由指的是客戶端（如Web瀏覽器）發(fā)出的HTTP請求與服務器上的特定處理函數之間的映射關系。

1）路由工作原理：路由決定了當某個URL被請求時，應該執(zhí)行哪個預定義路由模塊中的方法。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

（語義化標簽、多媒體標簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢2.2.3Express框架3.Express路由與中間件（1）路由

2）創(chuàng)建路由

：在routes目錄下定義和導出一個簡單的路由模塊，然后在app.js文件中使用require函數引入該路由模塊。使用app.use()方法指定路由的匹配路徑與路由處理函數，并將其掛載到應用程序中。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

（語義化標簽、多媒體標簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢2.2.3Express框架3.Express路由與中間件（1）路由

3）參數化路徑

參數化路徑語法格式如下所示。router.get('路徑:參數',function(req,res){});在myexpress項目的hello.js中新增一個參數化路徑函數//參數化路徑router.get('/:name',function(req,res,next){varname=;//從請求參數中獲取nameres.send('Hello'+name);//發(fā)送包含name的響應});訪問http://localhost:3000/hello/xiaomingHTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

（語義化標簽、多媒體標簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢2.2.3Express框架3.Express路由與中間件（2）中間件

Express中間件是Express.js框架中的一個重要概念，它允許在處理HTTP請求和響應的過程中插入自定義的函數或邏輯。中間件本質是一個回調函數，中間件函數可以訪問請求對象（req）、響應對象（res）以及一個名為next的函數，用于將控制權傳遞給下一個中間件或路由處理程序。