項(xiàng)目2智慧公寓管理系統(tǒng)的服務(wù)端數(shù)據(jù)處理HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢項(xiàng)目導(dǎo)入

在智慧公寓管理系統(tǒng)的日常運(yùn)營中，服務(wù)端的數(shù)據(jù)處理能力扮演著至關(guān)重要的角色。隨著用戶需求的日益增長和訂單量的不斷攀升，如何高效地處理并響應(yīng)這些訂單信息，成為提升系統(tǒng)性能和用戶體驗(yàn)的關(guān)鍵所在。當(dāng)用戶輕點(diǎn)導(dǎo)航菜單，期望立即看到最新的訂單狀態(tài)時(shí)，背后是服務(wù)端如何迅速響應(yīng)請求、精準(zhǔn)提取數(shù)據(jù)，并將這些信息準(zhǔn)確無誤地傳遞給前端進(jìn)行展示的復(fù)雜過程。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢項(xiàng)目導(dǎo)入

在實(shí)際應(yīng)用中，我們常常會遇到服務(wù)端數(shù)據(jù)處理效率低下、響應(yīng)延遲、數(shù)據(jù)錯(cuò)誤等問題，這些問題不僅影響了用戶的操作體驗(yàn)，還可能對公寓的日常管理造成不便。為了有效解決這些問題，我們需要深入學(xué)習(xí)和掌握服務(wù)端數(shù)據(jù)處理的核心技術(shù)，確保系統(tǒng)能夠穩(wěn)定、高效地運(yùn)行。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢項(xiàng)目目標(biāo)

在深入探索Web開發(fā)的廣闊天地中，掌握Node.js及其相關(guān)技術(shù)棧無疑是為未來之路鋪設(shè)堅(jiān)實(shí)基石的關(guān)鍵一步。知識目標(biāo)了解Node.js的發(fā)展歷程與必要性理解CommonJS的開發(fā)規(guī)范了解Node.js的第三方模塊了解AJAX與Axios的概念及區(qū)別HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢項(xiàng)目目標(biāo)技能目標(biāo)能夠熟練下載與安裝Node.js，并啟動Node.js應(yīng)用程序利用Node.js核心模塊實(shí)現(xiàn)文件讀寫、網(wǎng)絡(luò)請求、路徑處理等功能能夠下載并安裝Postman，熟悉其用戶界面和基本功能能夠使用Postman測試API接口并驗(yàn)證響應(yīng)結(jié)果能夠使用Axios發(fā)起請求安裝并使用Express創(chuàng)建Express項(xiàng)目，使用Express路由與中間件實(shí)現(xiàn)路由分發(fā)和請求處理邏輯HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢項(xiàng)目目標(biāo)素質(zhì)目標(biāo)培養(yǎng)學(xué)生的技術(shù)理解與應(yīng)用能力，使學(xué)生形成對Node.js技術(shù)棧的全面認(rèn)識增強(qiáng)學(xué)生的實(shí)踐操作能力，提升學(xué)生的動手能力和問題解決能力提升學(xué)生的技術(shù)探索精神與自主學(xué)習(xí)能力，鼓勵(lì)學(xué)生主動了解Node.js的第三方模塊，通過自學(xué)和實(shí)驗(yàn)，拓寬技術(shù)視野，增強(qiáng)對新技術(shù)的敏銳度和適應(yīng)能力培養(yǎng)學(xué)生的模塊化編程能力，掌握模塊化編程的思想HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢項(xiàng)目效果

本項(xiàng)目要求我們實(shí)現(xiàn)從服務(wù)端獲取智慧公寓管理系統(tǒng)的訂單信息并渲染到訂單頁面中。該頁面由導(dǎo)航菜單和內(nèi)容列表區(qū)域組成，導(dǎo)航菜單由待處理訂單、已完成訂單和待評價(jià)訂單3個(gè)菜單項(xiàng)組成。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢項(xiàng)目實(shí)現(xiàn)

項(xiàng)目準(zhǔn)備：

在ch02文件夾創(chuàng)建一個(gè)Project2的文件夾，并在該文件夾中創(chuàng)建一個(gè)Web文件夾，用于存放index.html前端頁面；使用“expressorderServer”命令創(chuàng)建一個(gè)orderServer項(xiàng)目。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢項(xiàng)目實(shí)現(xiàn)1．創(chuàng)建homeServer項(xiàng)目首先，使用“expressorderServer”命令創(chuàng)建一個(gè)orderServer項(xiàng)目。在orderServer項(xiàng)目的data目錄下依次創(chuàng)建todoList.json、finishList.json與evaluateList.json文件，分別用于存儲待完成的訂單列表信息、已完成的訂單列表信息和待評價(jià)的訂單列表信息，這些文件在本項(xiàng)目中作為服務(wù)器所請求的本地?cái)?shù)據(jù)源存在HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢項(xiàng)目實(shí)現(xiàn)todoList.json文件示例代碼如下所示。{"list":[{"id":"1","number":"0321345","homeMessage":"特惠單人間","price":109,"haveBreakfast":"不含早","time":"2024-06-21","status":"進(jìn)行中","customer":"何先生"},//此處省略其余待完成訂單列表的數(shù)據(jù)]}HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢項(xiàng)目實(shí)現(xiàn)finishList.json文件示例代碼如下所示。{"list":[{"id":"1","number":"0123432","homeMessage":"風(fēng)雅商務(wù)標(biāo)間","price":100,"haveBreakfast":"含早","time":"2019-05-01","status":"已完成","customer":"劉先生"},//此處省略其余已完成訂單列表的數(shù)據(jù)]}HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢項(xiàng)目實(shí)現(xiàn)evaluateList.json文件示例代碼如下所示。{"list":[{"id":"1","number":"0212345","homeMessage":"風(fēng)雅商務(wù)標(biāo)間","price":100,"haveBreakfast":"含早","time":"2019-05-01","status":"待評價(jià)","customer":"李先生"},//此處省略其余待評價(jià)訂單列表的數(shù)據(jù)]}HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢項(xiàng)目實(shí)現(xiàn)2．路由規(guī)劃本項(xiàng)目主要由1個(gè)父級路由和4個(gè)子路由組成。其中，/order是父路由，/order/todoList、/order/finishList、/order/evaluateList、order/getDetail是子路由。所有子路由共享相同的路徑前綴/order，并各自處理與訂單相關(guān)的不同操作。我們可為每個(gè)子路由定義單獨(dú)的路由處理器函數(shù)，這些函數(shù)將根據(jù)路由地址處理對應(yīng)的HTTP請求，例如，/order/todoList路由用于獲取待完成的訂單列表信息。在routes文件夾中創(chuàng)建order.js文件，將與訂單相關(guān)的路由組合在order.js路由文件中，從而可以迅速定位與訂單相關(guān)的所有路由處理函數(shù)。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢項(xiàng)目實(shí)現(xiàn)order.js文件示例代碼如下所示。varexpress=require('express');varrouter=express.Router();varfs=require('fs')varpath=require('path')router.get('/todoList',function(req,res,next){constfileUrl=path.resolve(__dirname,'../data/todoList.json')fs.readFile(fileUrl,'utf-8',(err,data)=>{if(err){console.log(err)return}console.log(data)res.writeHead(200,{'Content-Type':'application/json'})res.end(data)})});router.get('/finishList',function(req,res,next){constfileUrl=path.resolve(__dirname,'../data/finishList.json')fs.readFile(fileUrl,'utf-8',(err,data)=>{if(err){console.log(err)return}res.writeHead(200,{'Content-Type':'application/json'})res.end(data)console.log(data);})});router.get('/evaluateList',function(req,res,next){constfileUrl=path.resolve(__dirname,'../data/evaluateList.json')fs.readFile(fileUrl,'utf-8',(err,data)=>{if(err){console.log(err)return}HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢項(xiàng)目實(shí)現(xiàn)res.writeHead(200,{'Content-Type':'application/json'})res.end(data)})});router.get('/getDetail',function(req,res,next){const{id,reqPath}=req.queryconstfileUrl=path.resolve(__dirname,`../data/${reqPath}.json`)fs.readFile(fileUrl,'utf-8',(err,data)=>{if(err){console.log(err)return}constlistData=JSON.parse(data).list.filter(item=>item.id===id)res.writeHead(200,{'Content-Type':'application/json'})res