理解服务器端：HTTP协议与请求处理-优快云博客

本文链接：https://blog.youkuaiyun.com/Ulrica_Amaris/article/details/108664339

本文介绍了服务器端的基本概念，包括客户端与服务器端的职责、Node.js网站服务器、IP地址、端口和URL。讲解了HTTP协议的工作原理，重点阐述了HTTP请求报文和响应报文的结构，以及GET和POST请求参数的处理。此外，还讨论了路由、静态资源和动态资源的概念，帮助读者深入理解服务器端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本概念

网站的组成

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

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

3.服务器端：在服务器中运行的部分，负责存储数据和处理应用逻辑。
在这里插入图片描述

Node网站服务器

1.能够提供网站访问服务的机器就是网站服务器，它能够接收客户端的请求，能够对请求做出响应。
在这里插入图片描述

ip地址

1.互联网中设备的唯一标识。
IP是Internet Protocol Address的简写，代表互联网协议地址。
在这里插入图片描述

端口

1.端口是计算机与外界通讯交流的出口，用来区分服务器电脑中提供的不同的服务。
在这里插入图片描述

URL

1.统一资源定位符，URL（Uniform Resource Locator），是为internet网上资源位置而设的一种编址模式。网页地址。

2.组成：传输协议://服务器IP或域名:端口/资源所在位置标识。

http：超文本传输协议，提供了一种发布和接收HTML的方法
参考此文章最后URL介绍

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

开发阶段，服务端和客户端使用同一台电脑。
本机域名：localhost
本机IP：127.0.0.1

创建web服务器

在这里插入图片描述
1.

//用于创建网站的模块
const http = require('http');
//app对象就是网站服务器对象
const app = http.createServer();
//当客户端有请求来的时候
app.on('request',(require,response) => {
	res.end('<h2>hello user</h2>');

});

app.listen(3000);

console.log('网站服务器启动成功');

2.在终端输入nodemon app.js

3.网页地址栏localhost:3000

HTTP协议

1.超文本传输协议（Hype Text Transfer Protocol）规定了如何从网站服务器传输超文本到本地服务器，它是基于客户端服务器架构工作，是客户端和服务器端请求和应答的标准。
在这里插入图片描述

报文

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

请求报文

1.请求方式（Request Method）
GET 请求数据
POST 发送数据

2.请求地址
req.headers 获取请求报文
req.url 获取请求地址
req.method 获取请求方法
在这里插入图片描述

响应报文

1.HTTP状态码
200 请求成功
400 请求资源没有被找到
500 服务器端错误
400 客户端请求有语法错误

2.内容类型
text/html
text/css
application/javascript
image/jpg
application/json
在这里插入图片描述

//用于创建网站的模块
const http = require('http');
//app对象就是网站服务器对象
const app = http.createServer();

//当客户端有请求来的时候
app.on('request',(req,res) => {
	
	res.writeHead(200,{
	'content-type': 'text/html'
});
	res.end('<h2>hello user</h2>');

});

app.listen(3000);

console.log('网站服务器启动成功');

content-type 文本类型
charset 编码类型

HTTP的请求与处理

请求参数

客户端向服务端发送请求时，有时会携带一些客户信息，客户信息需要通过请求参数的形式传递到服务器，比如登录操作
在这里插入图片描述

GET请求参数

参数被放置在浏览器地址栏中
在这里插入图片描述
req.url获取
url.parse处理

const url = require('url');
 console.log(url.parse(req.url));

在这里插入图片描述
加上true以后

console.log(req.url);
    //参数1是要解析的url
    //参数2是解析成对象形式
    console.log(url.parse(req.url,true));

在这里插入图片描述
获取到数据

let params = url.parse(req.url,true).query;

    console.log(params.name);
    console.log(params.age);

在这里插入图片描述

POST请求参数

1.参数被放置在请求体中进行传输
2.获取POST参数需要使用data事件和end事件
3.使用querystring系统模块将参数转换成对象格式
在这里插入图片描述
实例演示：
创建post.js文件,用来开启服务器等待客户端请求

// 用于创建网站服务器的模块
const http = require('http');
// app对象就是网站服务器对象
const app = http.createServer();
// 处理请求参数模块
const querystring = require('querystring');
// 当客户端有请求来的时候
app.on('request', (req, res) => {
	// post参数是通过事件的方式接受的
	// data 当请求参数传递的时候触发data事件
	// end 当参数传递完成的时候触发end事件
	
	let postParams = '';

	req.on('data', params => {
		postParams += params;
	});

	req.on('end', () => {
		console.log(postParams);
	});

	res.end('ok');

});
// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');

let postParams = ''; 设置变量名称接受传递的数据

此时在命令行输入 nodemon post.js打开服务端

然后运行form.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--
		method: 指定当前表单提交的方式
		action: 指定当前表单提交的地址
	-->
	<form method="post" action="http://localhost:3000">

		<input type="text" name="username">

		<input type="password" name="password">
		
		<input type="submit">
	</form>
</body>
</html>

输入数据后命令行中打印出
在这里插入图片描述
代表post请求参数成功

querystring处理post请求中返回的对象

const querystring = require('querystring');

req.on('end', () => {
		console.log(querystring.parse(postParams));
	});

返回结果如下：
在这里插入图片描述

路由

1.路由是指客户端请求地址与服务器端程序代码的对应关系。
简单的说，就是请求什么响应什么。
在这里插入图片描述
核心代码：

代码举例：

// 1.引入系统模块http
// 2.创建网站服务器
// 3.为网站服务器对象添加请求事件
// 4.实现路由功能
// 	1.获取客户端的请求方式
// 	2.获取客户端的请求地址
const http = require('http');
const url = require('url');

const app = http.createServer();

app.on('request', (req, res) => {
	// 获取请求方式
	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') {

	}

});

app.listen(3000);
console.log('服务器启动成功')

静态资源

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

const http = require('http');
const url = require('url');
const path = require('path');
const fs = require('fs');
const mime = require('mime');

const app = http.createServer();

app.on('request', (req, res) => {
	// 获取用户的请求路径
	let pathname = url.parse(req.url).pathname;

	pathname = pathname == '/' ? '/default.html' : pathname;

	// 将用户的请求路径转换为实际的服务器硬盘路径
	let realPath = path.join(__dirname, 'public' + pathname);

	let type = mime.getType(realPath)

	// 读取文件
	fs.readFile(realPath, (error, result) => {
		// 如果文件读取失败
		if (error != null) {
			res.writeHead(404, {
				'content-type': 'text/html;charset=utf8'
			})
			res.end('文件读取失败');
			return;
		}

		res.writeHead(200, {
			'content-type': type
		})

		res.end(result);
	});
});

app.listen(3000);
console.log('服务器启动成功')