JavaScript+Vue.jsWeb開發(fā)項目教程（微課版） 課件 項目2 構建與測試Node.js的網(wǎng)絡開發(fā)(任務2-任務實施)_第1頁
JavaScript+Vue.jsWeb開發(fā)項目教程（微課版） 課件 項目2 構建與測試Node.js的網(wǎng)絡開發(fā)(任務2-任務實施)_第2頁
JavaScript+Vue.jsWeb開發(fā)項目教程（微課版） 課件 項目2 構建與測試Node.js的網(wǎng)絡開發(fā)(任務2-任務實施)_第3頁
JavaScript+Vue.jsWeb開發(fā)項目教程（微課版） 課件 項目2 構建與測試Node.js的網(wǎng)絡開發(fā)(任務2-任務實施)_第4頁
JavaScript+Vue.jsWeb開發(fā)項目教程（微課版） 課件 項目2 構建與測試Node.js的網(wǎng)絡開發(fā)(任務2-任務實施)_第5頁
已閱讀5頁，還剩11頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

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

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

解決了跨瀏覽器的問題

新增多個新特性

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

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務背景

在Web開發(fā)中，構建高效的后端服務與前端交互系統(tǒng)至關重要。為提升效率和可擴展性，采用現(xiàn)代工具和框架如Postman、Axios及Express變得關鍵。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

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

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務概述

本任務要求我們實現(xiàn)一個房間信息頁面，在任務實踐過程中，我們將掌握從服務端搭建到前端請求處理的全流程。使用Express生成器構建項目框架，并引入Node.js模塊。設計Express路由邏輯，創(chuàng)建前端頁面集成Axios，實現(xiàn)用戶交互時向服務器發(fā)送GET請求。服務器接收請求后，通過路由找到處理函數(shù)，檢索本地房間信息并響應客戶端。前端接收數(shù)據(jù)后渲染，展現(xiàn)房間信息。此過程不僅能夠加深我們對Express的理解，也能夠進一步掌握前后端數(shù)據(jù)交互的基本流程。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

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

用戶優(yōu)先原則

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

HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

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

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務實施任務準備：

在ch02文件夾創(chuàng)建一個Example2-10的文件夾，并在該文件夾下使用Express應用程序生成器創(chuàng)建一個名為homeServer的Express項目。在Example2-10的文件夾下創(chuàng)建一個web文件夾，用于存放index.html前端頁面。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

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

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務實施1．創(chuàng)建homeServer項目首先，使用“expresshomeServer”命令創(chuàng)建一個homeServer項目。在homeServer項目的data目錄下新建一個localData.json文件用于存儲房間信息，該文件在本任務中作為服務器所請求的本地數(shù)據(jù)源存在。localData.json文件示例代碼如下所示。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

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

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務實施localData.json{"homeA":{"type":"A類房間","price":"398","stock":"28","service":"含早","equipment":["超大投影","吹風機","烘干機","WIFI","浴室","音響"]},"homeB":{"type":"B類房間","price":"198","stock":"34","service":"不含早","equipment":["吹風機","WIFI","浴室"]}}HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

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

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務實施在homeServer項目的routes目錄下新建一個index.js文件實現(xiàn)獲取房間信息的基礎路由與參數(shù)化路徑。routes/index.js文件示例代碼如下所示。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

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

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務實施routes/index.jsconstexpress=require('express');constrouter=express.Router();constfs=require('fs');constpath=require('path');router.get('/',function(req,res,next){constfilePath=path.join(__dirname,'../data/localData.json');fs.readFile(filePath,'utf8',(err,data)=>{constformatData=JSON.parse(data);res.writeHead(200,{'Content-Type':'application/json'});if(req.query.type=="1"){//獲取url后面的type參數(shù)res.end(JSON.stringify(formatData.homeA));}else{res.end(JSON.stringify(formatData.homeB));}})});module.exports=router;HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

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

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務實施在homeServer項目的app.js文件中引入routes目錄下的路由模塊，使用app.use()方法掛載該路由并指定路由的匹配路徑。app.js文件中新增代碼如下所示。//引入路由模塊varindexRouter=require('./routes/index');//掛載路由app.use('/homeMessage',indexRouter);//指定匹配路徑HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

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

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務實施2．創(chuàng)建index.html前端頁面在index.html文件中引入Axios的CDN鏈接，設計獲取A類房間信息與B類房間信息的觸發(fā)按鈕，將獲取到的房間信息渲染到頁面上。Web/index.json文件示例代碼如下所示。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

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

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務實施Web/index.json<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>獲取房間信息</title><linkrel="stylesheet"href="./style.css">//省略CSS樣式代碼</head><body><divclass="box"><h3>獲取房間信息</h3><divid="getData"><buttonid="1"class="menu">獲取A類房間信息</button><buttonid="2"class="menu">獲取B類房間信息</button></div><divid="content"><imgsrc="./logo.jpg"alt=""></div></div><scriptsrc="/npm/axios/dist/axios.min.js"></script><script>functionrenderPage(data){document.getElementById('content').innerHTML=`<div>房間類型：${data.type}</div><div>房間價格：${data.price}</div><div>房間庫存：${data.stock}</div><div>房間服務：${data.service}</div><div>房間設施：${data.equipment}</div>`}//發(fā)起數(shù)據(jù)請求的函數(shù)asyncfunctionfetchDataAndRender(id){try{constresponse=awaitaxios.get(`http://localhost:3000/homeMessage?type=${id}`);if(!response.status===200)thrownewError('請求失敗');console.log(response,'服務器響應')//使用數(shù)據(jù)渲染頁面renderPage(response.data);}catch(error){console.error('請求數(shù)據(jù)出錯:',error);}}HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

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

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務實施//button監(jiān)聽constgetDataButton=document.getElementById('getData');getDataButton.addEventListener('click',function(e){fetchDataAndRender(e.target.id)//獲取并發(fā)送元素id})</script></body></html>HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個新特性

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

用戶優(yōu)先原則

化

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論