JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目2 构建与测试Node.js的网络开发(任务2-知识储备)

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

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

解决了跨浏览器的问题

新增多个新特性

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

用户优先原则

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

HTML5的优势

解决了跨浏览器的问题

新增多个新特性

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

用户优先原则

化繁为简的优势知识储备Postman工具：Postman的下载与安装、使用Postman测试接口AJAX与Axios：Node.js的发展历程、Node.js的必要性Express框架：安装并使用Express、创建第一个Express项目、Express路由与中间件HTML5的优势

解决了跨浏览器的问题

新增多个新特性

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

用户优先原则

化繁为简的优势2.2.1Postman工具1.下载与安装PostmanHTML5的优势

解决了跨浏览器的问题

新增多个新特性

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

用户优先原则

化繁为简的优势2.2.1Postman工具2.使用Postman测试GET接口通过使用Postman，能够轻松地模拟和发送各种HTTP请求，包括但不限于GET、POST、PUT和DELETE等，从而全面评估API接口的性能和功能。基于例2-6中的接口地址，演示如何使用Postman工具测试服务器中定义的接口HTML5的优势

解决了跨浏览器的问题

新增多个新特性

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

用户优先原则

化繁为简的优势2.2.2AJAX与Axios1.AJAXAJAX是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。它使用JavaScript在浏览器端与服务器进行异步通信，实现数据的获取和页面的更新。AJAX实现步骤：创建XMLHttpRequest对象、发起请求、接收服务器传回的数据、传输数据varxhr=newXMLHttpRequest();//创建XMLHttpRequest对象xhr.open("GET","/data",true);//true表示异步请求if(xhr.readyState==4){//请求状态if(xhr.status==200){//HTTP状态码console.log(xhr.responseText);}}//GET请求xhr.send(null);//POST请求xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send('username=xiaoming');HTML5的优势

解决了跨浏览器的问题

新增多个新特性

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

用户优先原则

化繁为简的优势2.2.2AJAX与Axios2.Axios:封装了底层AJAX实现和HTTP请求的细节。（1）安装Axios

1）浏览器环境中使用Axios：CDN链接来使用Axios。

2）Node.js环境中使用Axios：使用NPM来安装和管理依赖项。（2）Axios常用方法axios.get、axios.post、axios.put、axios.delete、axios.request。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

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

用户优先原则

化繁为简的优势2.2.2AJAX与Axios2.Axios以axios.get与axios.post为例，使用Axios发起请求。//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的优势

解决了跨浏览器的问题

新增多个新特性

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

用户优先原则

化繁为简的优势2.2.3Express框架Express是一个基于Node.js平台的快速、开放、极简的Web开发框架，为Web和移动应用程序提供一组强大的功能。1.安装并使用Express推荐使用npm命令进行安装：npminstallexpress安装好Express包后，就可以在JavaScript单文件中引入并使用Express模块。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

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

用户优先原则

化繁为简的优势2.2.3Express框架2.创建第一个Express项目Express框架提供了应用程序生成器，用于快速建立一个Express项目的基础框架，从而在此基础上进行后续开发。（1）安装express-generator：npminstall-gexpress-generator（2）创建Express项目安装完成后，即可使用express命令创建Express项目。express项目名cdmyexpress//切换到项目目录npminstall//初始化所有依赖包npmstart//启动服务器HTML5的优势

解决了跨浏览器的问题

新增多个新特性

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

用户优先原则

化繁为简的优势2.2.3Express框架2.创建第一个Express项目（3）Express项目目录结构项目的目录结构说明如下。bin：管理启动项目的脚本文件node_modules：管理所有的项目依赖库public：用于管理静态资源的文件夹routes：用于管理路由文件views：用于管理页面文件app.js：应用核心配置文件，项目入口文件package.json：项目依赖配置及开发者信息HTML5的优势

解决了跨浏览器的问题

新增多个新特性

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

用户优先原则

化繁为简的优势2.2.3Express框架3.Express路由与中间件（1）路由在Express中，路由指的是客户端（如Web浏览器）发出的HTTP请求与服务器上的特定处理函数之间的映射关系。

1）路由工作原理：路由决定了当某个URL被请求时，应该执行哪个预定义路由模块中的方法。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

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

用户优先原则

化繁为简的优势2.2.3Express框架3.Express路由与中间件（1）路由

2）创建路由

：在routes目录下定义和导出一个简单的路由模块，然后在app.js文件中使用require函数引入该路由模块。使用app.use()方法指定路由的匹配路径与路由处理函数，并将其挂载到应用程序中。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

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

用户优先原则

化繁为简的优势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);//发送包含name的响应});访问http://localhost:3000/hello/xiaomingHTML5的优势

解决了跨浏览器的问题

新增多个新特性

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

用户优先原则

化繁为简的优势2.2.3Express框架3.Express路由与中间件（2）中间件

Express中间件是Express.js框架中的一个重要概念，它允许在处理HTTP请求和响应的过程中插入自定义的函数或逻辑。中间件本质是一个回调函数，中间件函数可以访问请求对象（req）、响应对象（res）以及一个名为next的函数，用于将控制权传递给下一个中间件或路由处理程序。