《Web应用开发实战》课件-单元4 构建Web应用

4.1HTTP协议引入为什么输入网址就会跳转到指定网页呢？目录01HTTP协议原理02请求报文响应报文03HTTP原理什么是网络协议？就像我们要用双方都能理解的语言才能进行沟通和交流一样，网络上的各台计算机之间要互换信息，也要用一种双方都明白的、约定好的语言才能进行。这种双方约定的沟通语言就称为网络协议。HTTP原理什么是HTTP?简单的说，HTTP协议就是用于规范客户端浏览器和服务器端以什么样的格式进行通信数据交互，作为应用层的面向对象的协议，HTTP由请求和响应构成，是一个标准的客户端服务器模型，也是一个无状态的协议。HTTP协议的请求过程HTTP原理

/index.html协议名：http主机名：端口：80对象路径：/index.htm主机名为域名，需要域名系统DNS解析域名为IP地址。Web服务器接收请求并向浏览器发送响应报文封装HTTP请求报文Web服务器关闭TCP连接浏览器向Web服务器发送请求报文建立TCP连接地址解析HTTP协议的请求过程HTTP原理

/index.html协议名：http主机名：端口：80对象路径：/index.htm主机名为域名，需要域名系统DNS解析域名为IP地址。Web服务器接收请求并向浏览器发送响应报文封装HTTP请求报文Web服务器关闭TCP连接浏览器向Web服务器发送请求报文建立TCP连接地址解析存放在客户端的Socket对象中请求报文包含：请求行（requestline）请求消息头（headers）空行（blankline）请求体（requestbody）HTTP协议的请求过程HTTP原理在HTTP工作开始之前，浏览器首先要通过网络与Web服务器建立连接TCP连接。因为HTTP是应用层的协议，根据连接规则，高层协议要在低层协议建立连接之后才能进行。因此，首先要建立TCP连接。

/index.html协议名：http主机名：端口：80对象路径：/index.htm主机名为域名，需要域名系统DNS解析域名为IP地址。Web服务器接收请求并向浏览器发送响应报文封装HTTP请求报文Web服务器关闭TCP连接浏览器向Web服务器发送请求报文地址解析存放在客户端的Socket对象中请求报文包含：请求行（requestline）请求消息头（headers）空行（blankline）请求体（requestbody）建立TCP连接HTTP协议的请求过程HTTP原理在HTTP工作开始之前，浏览器首先要通过网络与Web服务器建立连接TCP连接。因为HTTP是应用层的协议，根据连接规则，高层协议要在低层协议建立连接之后才能进行。因此，首先要建立TCP连接。

/index.html协议名：http主机名：端口：80对象路径：/index.htm主机名为域名，需要域名系统DNS解析域名为IP地址。Web服务器接收请求并向浏览器发送响应报文封装HTTP请求报文Web服务器关闭TCP连接浏览器向Web服务器发送请求报文地址解析存放在客户端的Socket对象中请求报文包含：请求行（requestline）请求消息头（headers）空行（blankline）请求体（requestbody）建立TCP连接浏览器与Web服务器建立了TCP连接之后，就会将存放在客户端Socket对象中的请求报文通过TCP协议发送给Web服务器。HTTP协议的请求过程HTTP原理Web服务器从Socket对象中获取报文，并且使用HTTP协议规定的方式进行解析。响应报文包含：状态行（statusline）响应消息头（Headers）空行（blankline）响应体（responsebody）在HTTP工作开始之前，浏览器首先要通过网络与Web服务器建立连接TCP连接。因为HTTP是应用层的协议，根据连接规则，高层协议要在低层协议建立连接之后才能进行。因此，首先要建立TCP连接。

/index.html协议名：http主机名：端口：80对象路径：/index.htm主机名为域名，需要域名系统DNS解析域名为IP地址。封装HTTP请求报文Web服务器关闭TCP连接浏览器向Web服务器发送请求报文地址解析存放在客户端的Socket对象中请求报文包含：请求行（requestline）请求消息头（headers）空行（blankline）请求体（requestbody）浏览器与Web服务器建立了TCP连接之后，就会将存放在客户端Socket对象中的请求报文通过TCP协议发送给Web服务器。建立TCP连接Web服务器接收请求并向浏览器发送响应报文HTTP协议的请求过程HTTP原理Web服务器从Socket对象中获取报文，并且使用HTTP协议规定的方式进行解析。响应报文包含：状态行（statusline）响应消息头（Headers）空行（blankline）响应体（responsebody）在HTTP工作开始之前，浏览器首先要通过网络与Web服务器建立连接TCP连接。因为HTTP是应用层的协议，根据连接规则，高层协议要在低层协议建立连接之后才能进行。因此，首先要建立TCP连接。

/index.html协议名：http主机名：端口：80对象路径：/index.htm主机名为域名，需要域名系统DNS解析域名为IP地址。Web服务器接收请求并向浏览器发送响应报文封装HTTP请求报文Web服务器关闭TCP连接浏览器向Web服务器发送请求报文地址解析存放在客户端的Socket对象中请求报文包含：请求行（requestline）请求消息头（headers）空行（blankline）请求体（requestbody）浏览器与Web服务器建立了TCP连接之后，就会将存放在客户端Socket对象中的请求报文通过TCP协议发送给Web服务器。浏览器或服务器在其头信息加入Connection:keep-alive，TCP连接在发送后将仍保持打开状态。保持连接节省了为每个请求建立新连接所需的时间，还节约了网络带宽。建立TCP连接HTTP协议的主要特点HTTP原理客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST简单快速01HTTP允许传输任意类型的数据对象灵活02限制每次连接只处理一个请求采用这种方式可以节省传输时间无连接03无状态是指协议对于事务处理没有记忆能力无状态04支持B/S及C/S模式05请求/响应报文客户端和服务器在发送请求和做出响应时都是从Socket对象中获取对方的IP地址和端口号，那么Socket中信息以什么格式进行发送？请求报文1响应报文2HTTP协议中信息的格式以报文的形式呈现，报文就是有一定格式的字符串，只是这里的格式需要遵守HTTP协议规范，报文分为两种请求报文由四部分组成：请求行（requestline）请求消息头（headers）空行（blankline）请求体（requestbody）请求报文1

1.请求行（requestline）请求报文的起始行称为请求行。请求行由请求方法字段、URL字段和HTTP协议版本字段组成，它们用空格分隔，例如：GET/index.htmlHTTP/1.1。

2.请求消息头（headers）请求消息头，由关键字/值对组成，每行一对，关键字和值用英文冒号“:”分隔。请求头部通知服务器关于客户端请求的信息，典型的请求头有：User-Agent：产生请求的浏览器类型；Accept：客户端可识别的响应内容类型列表，星号“*”用于按范围将类型分组，*/*”表示可接受全部类型，“type/*”表示可接受type类型的所有子类型Accept-Language：客户端可接受的自然语言Accept-Encoding：客户端可接受的编码压缩格式Accept-Charset：可接受的应答字符集Host：请求的主机名，允许多个域名同处一个IP地址，即虚拟主机connection：连接方式（close或keepalive）Cookie：存储于客户端的扩展字段，向同一域名的服务端发送属于该域的cookie请求报文13.空行最后一个请求头之后是一个空行，发送回车符和换行符，通知服务器以下不再有请求头。4.请求体请求体也称报文体，它的内容就是请求数据，承载多个请求参数的数据。它将一个页面表单中的组件值通过键值对形式编码成一个格式化串请求报文请求报文consthttp=require('http');varserver=http.createServer();server.on("request",function(req,res){console.log(req.headers);console.log(req.rawHeaders);console.log(req.httpVersion);console.log(req.method);console.log(req.url);res.end();})server.listen(9000,function(){console.log("localhost://9000服务器已开启");}req.headers打印全部请求头信息--对象形式req.rawHeaders全部头信息--数组形式req.httpVersion请求的协议方式req.method请求的方式req.url请求的路径在地址栏输入localhost://9000，按F12，在控制台的Network中的Headers查看结果创建http服务器，认识组成请求头的各部分内容。示例响应报文由四部分组成：状态行（statusline）响应消息头（Headers）空行（blankline）响应体（responsebody）响应报文2响应报文1.状态行响应报文的起始行称为响应状态行。

状态行由HTTP协议版本、一个表示成功或错误的整数代码（状态码）和对状态码进行描述的文本信息三部分组成，它们用空格分隔。例如：HTTP/1.1200OK。状态代码由

3位数字组成，表示请求是否被理解或被满足。HTTP响应状态码的第一个数字定义了响应的类别，后面两位没有具体的分类

2第一个数字有五种可能的取值：1xx：表示请求已接收，需要继续处理2xx：表示请求已成功被服务器接收、理解、并接受3xx：为完成请求，客户端需进一步细化请求4xx：客户端的请求有错误5xx：服务器端出现错误常用的http状态码如下：

200：请求成功；404：请求的资源没有被找到；400：客户端请求语法有误；403：服务器拒绝请求

500：服务器端错误；502：服务器作为网关或代理，从上游服务器收到无效响应响应报文响应报文2.响应消息头状态行后紧接着的是若干响应消息头，服务器端通过响应消息头向客户端传递附加信息，包括服务程序名、被请求资源需要的认证方式、客户端请求资源的最后修改时间、重定向地址等信息。3.空行最后一个响应头之后是一个空行，发送回车符和换行符，通知服务器以下不再有响应头。4.响应体内容就是响应数据，包括服务器返回给客户端的文本信息。2响应报文响应报文varhttp=require("http");varserver=http.createServer();server.on("request",function(req,res){res.statusCode=404;res.statusmessage="notfound";res.setHeader('Content-Type','text/plain;charset=utf-8’);res.writeHead(404,'notfound',{'Content-Type':'text/plain;charset=utf-8’});res.write("这是发向前端的内容！");res.end();res.statusCode=200;res.status.message="OK";res.setHeader('Content-Type','text/plain;charset=utf-8’)res.writeHead(404,'notfound',{'Content-Type':'text/palin;charset=utf-8’});})server.listen(9000,function(){console.log("localhost:9000服务器已开启");});设置响应头的基本信息创建http服务器，认识响应报文的各部分内容。示例小结HTTP协议原理请求/响应报文4.2http模块引入Node.js中如何实现对HTTP请求的管理？目录01http模块介绍02创建Web服务端http模块什么是http模块？Node.js的核心模块，用于创建Web服务器，实现浏览器与Web服务器之间的请求与响应。引入方式：varhttp=require("http");http模块http模块如何实现对客户端和服务器的支持？1.对服务器的支持--http.createServer():创建HTTPWeb服务器--http.Server:服务器实例对象--http.ServerResponse:该对象用于响应处理客户端请求。2.对客户端的支持--http.request(options[,callback])该方法用于创建HTTP请求--http.ClientRequest由http.request()创建并返回，它是一个正在处理的HTTP请求创建Web服务端Web服务器创建11.varserver=http.createServer([options][,requestListener])用于创建http服务器方法有多个可选参数，但一般只接收一个可选传入参数requestListener。返回：新创建的http服务器实例。2.server.listen([port[,host[,backlog]]][,callback])用此方法启动一个服务来监听连接端口信息。调用server.listen()后http.Server

就可以接收客户端传入连接message.rawHeaders原始请求头/响应头的列表数组response.end()此方法用于向服务器发出信号，表明已发送所有响应头和主体，该服务器应该视为此消息已完成。message.headers请求或响应的消息头对象。response.writeHead()此方法用于向请求发送响应头response.setHeader(name,value)

为隐式响应头设置单个响应头的值。Web服务器创建13.http.ServerResponse此对象由HTTP服务器内部创建，而不是由用户创建。

它作为第二个参数传给request事件，内部存在多种方法：response.write()该方法用于发送一块响应主体，可以多次调用该方法以提供连续的响应主体片段。创建Web服务端示例创建http.Server对象，并传入requestListener

事件监听器。varhttp=require("http");varserver=http.createServer();server.on("request",function(req,res){res.writeHead(200,{"content-type":"text/plain;charset=utf-8"});res.write("欢迎学习Node.js!");res.end(); });server.listen(3000,function(){console.log("localhost:3000服务器已开启");});引入http模块，创建后台服务用服务器的listen方法监听端口号3000服务器接收到请求后，触发requst事件代码，发送响应头和响应正文，最后结束响应。创建Web服务端服务器解析客户端请求2服务器需要解析接收到的请求信息，以决定如何进行响应。URL为“/”

主页，“/login”

登录页，“/product”

商品列表页

等。在服务器的事件监听函数内部，回调函数的request对象封装了客户端发送的具体请求信息，包括请求方式、URL、请求头等。request对象的常用属性有：(1)

request.headers--获取请求头对象，消息头名称和值为键值对的对象形式。(2)

request.rawHeaders--将原始请求/响应头完全按照收到的方式列出。(3)

request.httpVersion--在服务器请求的情况下，表示客户端发送的HTTP版本。(4)

request.method--获取请求方式的字符串，只读，如“GET”“POST”。(5)

request.url--获取请求的URL字符串，仅包含实际HTTP请求中存在的URL。(6)

request.statusCode--获取或设置3位HTTP响应状态码，如404。创建Web服务端示例

服务器解析请求。varhttp=require('http');varserver=http.createServer();//创建Web服务器server.on("request",function(request,response){ console.log(request.headers);//以对象形式输出全部请求头信息 console.log(request.rawHeaders);//以数组形式输出全部请求头信息 console.log(request.httpVersion);//输出http请求的协议 console.log(request.method);//输出http请求的方式 console.log(request.url);//输出http请求的路径 response.end();});server.listen(3000,function(){ console.log("localhost:3000listening...");});在控制台输出请求细节信息创建Web服务端通过函数内的request对象，获取请求信息。小结HTTP模块使用方法创建Web服务器1.引入http模块；2.创建Web服务器实例；3.启动监听服务器；4.为服务器实例绑定request事件；5.根据客户端请求进行响应。4.3path模块和url模块引入目录01path模块02url模块path模块为什么要使用path模块？针对多文件和路径操作的相关问题，需要使用path模块中一系列处理和转换文件路径的工具集。path引入方式?varpath=require('path');path.basename(path[,ext])用于获取路径的最后一个部分，即文件名，参数ext

为需要截掉的后缀内容。path.parse(pathString)用于将path字符串转为path对象，其属性表示path的有效元素path.join([...paths])用于将所有给定的path片段连接到一起，然后规范化生成的路径。path.dirname(path)用于获取文件目录path.resolve([from...],to)用于将to参数解析为绝对路径，给定的路径序列会从右到左进行处理，后面的每个path会被追加到前面，直到构造出绝对路径。path.normalize(path)用于规范化给定的path，处理冗余的“..”、“.”、“/”字符。path模块path模块的主要方法path模块varpath=require("path");varmyPath1=path.normalize('');varmyPath2=path.normalize('‘);varmyPath3=path.normalize(‘');console.log(myPath1);console.log(myPath2);console.log(myPath3);用于规范化给定的path，处理冗余的“..”、“.”、“/”字符。如果path是零长度的字符串，则返回'.'，表示当前工作目录。path.normalize('C:\\temp\\\\foo\\bar\\..\\’);规范化时省略了冗余的“..”、“.”、“/”字符，将“/”替换成了“\”。path.normalize方法编程应用。示例path模块varpath=require("path");varpath1='path1',path2='path2/pp',path3='/path3';varmyPath=path.join(path1,path2,path3);console.log(myPath);将所有给定的path片段连接到一起，然后规范化生成的路径。path.join

方法编程应用。示例path模块varpath=require("path");varmyPath=path.resolve('path1','path2','a/b\\c/');console.log(myPath);处理完所有给定的path片段之后还未生成绝对路径，就把当前工作目录追加到前面构成绝对路径。path.resolve

方法编程应用。示例url模块为什么要使用url模块？在实际应用中，经常会涉及到需要从完整的url

请求路径中提取出各个属性及其值的问题，Node.js的url

模块为解决这类问题提供了相应的方法。url引入方式varurl=require('url');url.format(urlObject)把JSON对象形式的url

格式化成字符串形式的url返回：字符串形式的urlformat方法的作用与parse相反，它的参数是一个JSON对象，返回一个组装好的url

地址url.parse(urlString[,parseQueryString[,slashesDenoteHost]])把字符串形式的url

转成对象形式的url返回：url

对象参数说明：urlString

需要解析的url

字符串parseQueryString

为true时将使用查询模块分析查询字符串，默认为falseurl模块url模块的主要方法url模块varurl=require("url")varmyurl="/some/url/?with=query¶m=that#about"；varparsedUrl=url.parse(myurl);console.log(parsedUrl);用的url.parse

方法，只传入字符串形式的url

参数，进行对象形式转换用url.parse

方法，把字符串形式的url

转成对象形式的url。示例url模块varurl=require("url");vartestObj1={protocol:'http:',slashes:true,auth:null,host:'',port:null,hostname:'',hash:'#about’,search:'?with=query¶m=that',query:'with=query¶m=that',pathname:'/some/url/',path:'/some/url/?with=query¶m=that',

href:'/some/url/?with=query¶m=that#about'}varrsUrl=url.format(testObj1);console.log(rsUrl);JSON格式的数据用url.format()方法，返回一个组装好的url

地址。使用url.format()方法，把JSON对象形式的url

格式化成字符串形式的url。示例小结path模块的用法url模块的用法4.4动态处理静态资源请求引入Node.js中的静态资源是如何管理与访问的呢？静态资源动态资源请求网址客户端浏览器服务器端目录01静态资源02服务器动态处理静态资源静态资源静态资源是指不需要程序处理、不需要查数据库直接就能够显示的页面资源。多次访问，源代码不变，访问效率高。前端页面HttpNode.js服务端HttpHttppageRequestResponseMySQL数据库动态资源是指需要程序处理或者从数据库中读数据，能够根据不同的条件在页面显示不同的数据。静态资源将静态资源与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。客户端Node.js服务端pageRequestResponse静态资源动态资源静态资源

动静分离静态资源读文件if(req.url=="/0.jpg"){

fs.readFile("./0.jpg",function(err,data){

res.end(data);

})}实际URL/0.jpg读取文件static文件夹是一个静态站点，包含以下文件：--css/main.css样式文件--images文件夹下有3张图片--三个静态页面：首页、商品页和404页--favicon.ico网站图标服务器动态处理静态资源通过服务器到磁盘中读取静态文件并响应给客户端当页面包含多个静态文件时，需根据页面链接查找到文件静态文件正常渲染原理根据请求url动态拼接静态文件磁盘路径读取静态文件响应到客户端注意处理首页特例服务器动态处理请求varhttp=require('http');varserver=http.createServer();使用http模块创建服务器服务器动态处理静态资源示例使用http模块创建服务器，动态处理静态资源。服务器动态处理静态资源varhttp=require('http');varfs=require('fs');varpath=require('path');varserver=http.createServer();server.on('request',function(req,res){varurl=req.url;console.log(url);//每次请求获取的资源路径在服务端输出

varfullPath=path.join(__dirname,'static',url);//static为站点文件夹名//当用户访问/的时候，默认让用户访问index.htmlif(url==='/'){ fullPath=path.join(__dirname,'static','index.html');}fs.readFile(fullPath,function(err,data){//读取文件响应到客户端res.end(data);});});......server.listen(3000,function(){console.log('serverisrunnigatport3000');});关键：根据请求url值灵活构建对应文件路径当请求地址为”/”时，到磁盘中读取index.html文件返回监听3000端口服务器动态处理静态资源

server_static.js示例代码运行项目启动项目nodemonserver_static.js服务器动态处理静态资源http://localhost:3000/product.html运行项目服务器动态处理静态资源静态资源通过网址访问，默认进入设置的静态文件夹读取静态资源。http://localhost:3000/小结静态资源不需要程序处理就能显示的页面资源，主要包含HTML、CSS、JS和JSON代码文件，以及图片和Web字体文件等服务器动态处理静态资源理解原理：服务器根据请求url，灵活构建文件路径，读取文件响应到客户端。处理特例：请求url为”/”时，找到站点中的index.html读取响应到客户端4.5前后端商品数据交互引入如何实现前后端交互，显示数据信息？前端页面HttpNode.js服务端JSON文件HttpHttppage目录01实验需求02实验步骤03项目实现实验需求创建后端服务，并解决跨域，将product.json

文件数据响应到前端，在模板页面中将商品信息渲染出来。实验步骤修改index.html模板页面，向服务器发送请求，并接收响应数据03准备product.json文件01编写server_json.js文件，构建服务器02运行项目04{

"data":[{"id":"1","name":"PC008-1BENZ.withdiode","cat_id":"1","size":"93mm","image":"./images/pro-1.jpg","price":"2000","add_time":"2022-10-11","sort":"10"},

…… //此处省略一些商品数据

]}项目实现1.准备product.json-商品数据文件JSON文件varhttp=require('http');varfs=require('fs');varserver=http.createServer();server.on('request',function(request,response){//解决跨域问题,*表示所有地址都可以访问response.setHeader('Access-Control-Allow-Origin','*');

response.writeHead(200,{'Content-Type':'text/plain;charset=utf-8'});fs.readFile('product.json',function(err,data){ response.end(data);}); });server.listen(3000,function(err){ console.log('服务器创建成功！http://localhost:3000');});项目实现加载http模块和fs模块处理前端请求解决跨域问题读取文件数据响应到前端设置监听3000端口2.编写js文件，构建服务器，监听3000端口server_json.js服务器代码<!--（略，可见附录index.html）--><sectionclass="product"> <h2>产品展示</h2> <ahref="#">更多产品</a> <scriptsrc="/ajax/libs/jquery/3.5.1/jquery.js"></script> <script> $.ajax({ url:'http://localhost:3000'//服务器地址 }).then(res=>{ varpArr=JSON.parse(res).data;

for(i=0;i<pArr.length;i++){ console.log(pArr[i].name);//测试输出，浏览器的console查看 $('.product').append(`<li><ahref="#"><imgsrc="${pArr[i].image}"alt=""><p>${pArr[i].name}<br><span>长度：${pArr[i].size}</span></p></a></li>`); } }) </script></section><!--（略，可见附录index.html）-->项目实现通过ajax向服务器地址:3000发送请求http接受请求后，读取json文件内容响应给页面，通过JSON.parse()解析数据；根据json文件的数据结构，JSON.parse(res).data取得所有的商品数据；for循环解析出每个商品数据在已有页面模板中输出index.html客户端代码3.修改index.html模板页面，向服务器发送请求，接收响应数据4.运行项目，查看结果项目实现运行server_json.js打开index.html小结实验需求创建后端服务，并解决跨域，将product.json

文件数据发向前端，并在模板页面渲染出来。实现步骤创建项目

编写代码

运行项目项目实现product.json-商品数据文件server_json.js-构建服务器index.html-客户端接受响应数据4.6网络接口数据请求与展示引入如何充分利用网络资源，获取实时数据？前端页面HttpNode.js服务端JSON文件HttpHttppage目录01实验需求02实验步骤03项目实现实验需求创建服务器，并解决跨域，将