http协议&如何获取请求参数

最新推荐文章于 2024-12-30 16:18:53 发布

碼德浮樂

最新推荐文章于 2024-12-30 16:18:53 发布

阅读量2k

点赞数 1

本文链接：https://blog.csdn.net/weixin_45583708/article/details/100834370

版权

本文详细介绍了HTTP协议的基础知识，包括URL的组成、GET和POST请求参数的处理，以及如何在Node.js中创建Web服务器并处理路由。通过实例展示了如何获取GET和POST请求的参数，讲解了异步编程的关键概念，如Promise和async/await。

摘要由CSDN通过智能技术生成

目标

能够搭建Web服务器
能够使用获取GET、POST参数的方式获取参数
能够掌握如何制作路由
能够知道同步异步的概念
能够知道回调函数的概念

服务器端基础概念

网站的组成

网站应用程序主要分为两大部分：客户端和服务器端。

**客户端：**在浏览器中运行的部分，就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。

**服务器端：**在服务器中运行的部分，负责存储数据和处理应用逻辑。

[外链图片转存失败(img-W8uadwRU-1568462670754)(images/fuwuqi-01.png)]

Node网站服务器

能够提供网站访问服务的机器就是网站服务器，它能够接收客户端的请求，能够对请求做出响应。

[外链图片转存失败(img-58Dbba93-1568462670757)(images/fuwuqi-02.png)]

IP地址

互联网中设备的唯一标识。
IP是Internet Protocol Address的简写，代表互联网协议地址.

[外链图片转存失败(img-YehHaHZE-1568462670762)(images/ip.png)]

域名

由于IP地址难于记忆，所以产生了域名的概念，所谓域名就是平时上网所使用的网址

http://www.itheima.com => http://124.165.219.100/
虽然在地址栏中输入的是网址, 但是最终还是会将域名转换为ip才能访问到指定的网站服务器。

端口

使用端口区分不同的服务，它是一些具有一定范围的数字, 范围是0到65535, 每一个向外界提供服务的软件, 都要占用一个端口

[外链图片转存失败(img-IXrKApDq-1568462670763)(images/duankou.png)]

URL(★★★)

统一资源定位符，又叫URL（Uniform Resource Locator），是专为标识Internet网上资源位置而设的一种编址方式，我们平时所说的网页地址指的即是URL。

URL的组成

传输协议://服务器IP或域名:端口/资源所在位置标识

http://www.itcast.cn/news/20181018/09152238514.html

http：超文本传输协议，提供了一种发布和接收HTML页面的方法。

开发过程中客户端和服务器端说明

在开发阶段，客户端和服务器端使用同一台电脑，即开发人员电脑。

**本机域名：**localhost
**本地IP ：**127.0.0.1

创建web服务器(★★★)

引用系统模块
```
 const http = require('http');
```
创建web服务器
```
const app = http.createServer();
```

当客户端发送请求的时候(监听客户端发送过来的请求)

 app.on('request', (req, res) => {
        //  响应
       res.end('<h1>hi, user</h1>');
 });

监听端口

// 监听3000端口
app.listen(3000);
console.log('服务器已启动，监听3000端口，请访问 localhost:3000')

HTTP协议

HTTP协议概念

超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）规定了如何从网站服务器传输超文本到本地浏览器，它基于客户端服务器架构工作，是客户端（用户）和服务器端（网站）请求和应答的标准。

[外链图片转存失败(img-FvF9Ejnz-1568462670765)(images/http协议.png)]

报文

在HTTP请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，并且要遵守规定好的格式。

[外链图片转存失败(img-K447kV9o-1568462670769)(images/报文.png)]

请求报文

请求方式（Request Method）

GET 请求数据
POST 发送数据

请求地址（Request URL）

 app.on('request', (req, res) => {
     req.headers  // 获取请求报文
     req.url      // 获取请求地址
     req.method   // 获取请求方法
 });

响应报文

HTTP状态码

200 请求成功
404 请求的资源没有被找到
500 服务器端错误
400 客户端请求有语法错误

内容类型

text/html
text/css
application/javascript
image/jpeg
application/json

 app.on('request', (req, res) => {
     // 设置响应报文
     res.writeHead(200, {
         'Content-Type': 'text/html;charset=utf8‘
     });
 });

HTTP请求与响应处理

请求参数(★★★)

客户端向服务器端发送请求时，有时需要携带一些客户信息，客户信息需要通过请求参数的形式传递到服务器端，比如登录操作。

GET请求参数

参数被放置在浏览器地址栏中，例如：http://localhost:3000/?name=zhangsan&age=20
参数获取需要借助系统模块url，url模块用来处理url地址

const http = require('http');
 // 导入url系统模块 用于处理url地址
 const url = require('url');
 const app = http.createServer();
 app.on('request', (req, res) => {
     // 将url路径的各个部分解析出来并返回对象
         // true 代表将参数解析为对象格式
     let {query} = url.parse(req.url, true);
     console.log(query);
 });
 app.listen(3000);

POST请求参数

参数被放置在请求体中进行传输
获取POST参数需要使用data事件和end事件
使用querystring系统模块将参数转换为对象格式

 // 导入系统模块querystring 用于将HTTP参数转换为对象格式
 const querystring = require('querystring');
 app.on('request', (req, res) => {
     let postData = '';
     // 监听参数传输事件
     req.on('data', (chunk) => postData += chunk;);
     // 监听参数传输完毕事件
     req.on('end', () => { 
         console.log(querystring.parse(postData)); 
     }); 
 });
 app.listen(3000);

路由(★★★)

http://localhost:3000/index
http://localhost:3000/login
路由是指客户端请求地址与服务器端程序代码的对应关系。简单的说，就是请求什么响应什么。

[外链图片转存失败(img-YE0ZWeEB-1568462670773)(images/路由.png)]

核心代码

// 当客户端发来请求的时候
 app.on('request', (req, res) => {
     // 获取客户端的请求路径
     let { pathname } = url.parse(req.url);
     if (pathname == '/' || pathname == '/index') {
         res.end('欢迎来到首页');
     } else if (pathname == '/list') {
         res.end('欢迎来到列表页页');
     } else {
        res.end('抱歉, 您访问的页面出游了');
     }
 });

示例demo

引入系统模块http

//服务器模块
const http = require('http');
//操作url的模块
const url = require('url');

创建网站服务器
```
const app = http.createServer();
```

为网站服务器对象添加请求事件，添加监听端口

app.on('request', (req, res) => {
	...
}
app.listen(3000);

实现路由功能

获取客户端的请求方式
获取客户端的请求地址

// 获取请求方式
	const method = req.method.toLowerCase();
	// 获取请求地址
	const pathname = url.parse(req.url).pathname;

	res.writeHead(200, {
		'content-type': 'text/html;charset=utf8'
	});

	if (method == 'get') {

		if (pathname == '/' || pathname == '/index') {
			res.end('欢迎来到首页')
		}else if (pathname == '/list') {
			res.end('欢迎来到列表页')
		}else {
			res.end('您访问的页面不存在')
		}

	}else if (method == 'post') {

	}

静态资源

服务器端不需要处理，可以直接响应给客户端的资源就是静态资源，例如CSS、JavaScript、image文件。

动态资源

相同的请求地址不同的响应资源，这种资源就是动态资源

客户端请求途径

GET方式

浏览器地址栏
link标签的href属性
script标签的src属性
img标签的src属性
Form表单提交

POST方式

Form表单提交

Node.js异步编程

同步API和异步API

**同步API：**只有当前API执行完成后，才能继续执行下一个API

console.log('before'); 
console.log('after');

**异步API：**当前API的执行不会阻塞后续代码的执行

console.log('before');
setTimeout(
   () => { console.log('last');
}, 2000);
console.log('after');

区别

返回值不同，同步API可以从返回值中拿到API执行的结果, 但是异步API是不可以的

// 同步
function sum (n1, n2) { 
      return n1 + n2;
} 
const result = sum (10, 20);
// 异步
function getMsg () { 
      setTimeout(function () { 
          return { msg: 'Hello Node.js' }
      }, 2000);
}
const msg = getMsg ();

代码执行顺序，

同步API从上到下依次执行，前面代码会阻塞后面代码的执行

for (var i = 0; i < 100000; i++) { 
    console.log(i);
}
console.log('for循环后面的代码');

异步API不会等待API执行完成后再向下执行代码

console.log('代码开始执行'); 
setTimeout(() => { console.log('2秒后执行的代码')}, 2000);
setTimeout(() => { console.log('"0秒"后执行的代码')}, 0); 
console.log('代码结束执行');

Node.js中的Promise

Promise出现的目的是解决Node.js异步编程中回调地狱的问题

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        if (true) {
            resolve({name: '张三'})
        }else {
            reject('失败了') 
        } 
    }, 2000);
});
promise.then(result => console.log(result); // {name: '张三'})
       .catch(error => console.log(error); // 失败了)

异步函数(★★★)

异步函数是异步编程语法的终极解决方案，它可以让我们将异步代码写成同步的形式，让代码不再有回调函数嵌套，使代码变得清晰明了。

async关键字

const fn = async () => {};
async function fn () {}

普通函数定义前加async关键字普通函数变成异步函数
异步函数默认返回promise对象
在异步函数内部使用return关键字进行结果返回结果会被包裹的promise对象中 return关键字代替了resolve方法
在异步函数内部使用throw关键字抛出程序异常
调用异步函数再链式调用then方法获取异步函数执行结果
调用异步函数再链式调用catch方法获取异步函数执行的错误信息

await关键字

await关键字只能出现在异步函数中
await promise await后面只能写promise对象写其他类型的API是不可以的
await关键字可是暂停异步函数向下执行直到promise返回结果