JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目2 构建与测试Node.js的网络开发(任务2-任务实施)_第1页
JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目2 构建与测试Node.js的网络开发(任务2-任务实施)_第2页
JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目2 构建与测试Node.js的网络开发(任务2-任务实施)_第3页
JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目2 构建与测试Node.js的网络开发(任务2-任务实施)_第4页
JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目2 构建与测试Node.js的网络开发(任务2-任务实施)_第5页
已阅读5页，还剩11页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目2智慧公寓管理系统的服务端数据处理任务2-2

构建与测试Node.js的网络开发1HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务背景

在Web开发中，构建高效的后端服务与前端交互系统至关重要。为提升效率和可扩展性，采用现代工具和框架如Postman、Axios及Express变得关键。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务概述

本任务要求我们实现一个房间信息页面，在任务实践过程中，我们将掌握从服务端搭建到前端请求处理的全流程。使用Express生成器构建项目框架，并引入Node.js模块。设计Express路由逻辑，创建前端页面集成Axios，实现用户交互时向服务器发送GET请求。服务器接收请求后，通过路由找到处理函数，检索本地房间信息并响应客户端。前端接收数据后渲染，展现房间信息。此过程不仅能够加深我们对Express的理解，也能够进一步掌握前后端数据交互的基本流程。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务效果房间信息页面：单击按钮获取不同房间的信息

HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施任务准备：

在ch02文件夹创建一个Example2-10的文件夹，并在该文件夹下使用Express应用程序生成器创建一个名为homeServer的Express项目。在Example2-10的文件夹下创建一个web文件夹，用于存放index.html前端页面。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施1．创建homeServer项目首先，使用“expresshomeServer”命令创建一个homeServer项目。在homeServer项目的data目录下新建一个localData.json文件用于存储房间信息，该文件在本任务中作为服务器所请求的本地数据源存在。localData.json文件示例代码如下所示。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施localData.json{"homeA":{"type":"A类房间","price":"398","stock":"28","service":"含早","equipment":["超大投影","吹风机","烘干机","WIFI","浴室","音响"]},"homeB":{"type":"B类房间","price":"198","stock":"34","service":"不含早","equipment":["吹风机","WIFI","浴室"]}}HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施在homeServer项目的routes目录下新建一个index.js文件实现获取房间信息的基础路由与参数化路径。routes/index.js文件示例代码如下所示。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施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参数res.end(JSON.stringify(formatData.homeA));}else{res.end(JSON.stringify(formatData.homeB));}})});module.exports=router;HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施在homeServer项目的app.js文件中引入routes目录下的路由模块，使用app.use()方法挂载该路由并指定路由的匹配路径。app.js文件中新增代码如下所示。//引入路由模块varindexRouter=require('./routes/index');//挂载路由app.use('/homeMessage',indexRouter);//指定匹配路径HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施2．创建index.html前端页面在index.html文件中引入Axios的CDN链接，设计获取A类房间信息与B类房间信息的触发按钮，将获取到的房间信息渲染到页面上。Web/index.json文件示例代码如下所示。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施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>`}//发起数据请求的函数asyncfunctionfetchDataAndRender(id){try{constresponse=awaitaxios.get(`http://localhost:3000/homeMessage?type=${id}`);if(!response.status===200)thrownewError('请求失败');console.log(response,'服务器响应')//使用数据渲染页面renderPage(response.data);}catch(error){console.error('请求数据出错:',error);}}HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施//button监听constgetDataButton=document.getElementById('getData');getDataButton.addEventListener('click',function(e){fetchDataAndRender(e.target.id)//获取并发送元素id})</script></body></html>HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论