请求响应原理

首先理解一下网页的组成：

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

客户端：就是在浏览器中运行的部分，就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。也就是我们平时使用网站，软件时看到的部分。

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

URL

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

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

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

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

如何在本机创建web服务器

// 引用系统模块
 const http = require('http');
  // 创建web服务器
 const app = http.createServer();
  // 当客户端发送请求的时候  服务器端的处理
 app.on('request', (req, res) => {
// req 请求 一个对象，存储了和请求相关的信息
// res 响应对象 使用该对象的方法对请求作出响应
        //  响应
       res.end('<h1>hi, user</h1>');
 });
  // 监听3000端口
 app.listen(3000);
 console.log('监听3000端口')

服务器端处理请求

先理解HTTP协议的概念和报文：

http协议即超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）规定了如何从网站服务器传输超文本到本地浏览器，它基于客户端服务器架构工作，是客户端（用户）和服务器端（网站）请求和应答的标准。在HTTP请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，并且要遵守规定好的格式。

请求报文：

请求方式：get 请求数据 post 发送数据

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

获取get请求参数

get请求参数一般被放在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);

这样服务器端就可以拿到get 请求参数了

获取POST请求参数：

• 参数被放置在请求体中进行传输

• 获取POST参数需要使用data事件和end事件

• 使用querystring系统模块将参数转换为对象格式

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

响应报文：

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'
     });
 });

路由：

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

// 当客户端发来请求的时候
 app.on('request', (req, res) => {
     // 获取客户端的请求路径
     let { urlData } = url.parse(req.url);
     if (urlData == '/' || urlData == '/index') {
         res.end('首页');
     } else if (urlData == '/list') {
         res.end('{data：[1,2,3]}');
     } else {
        res.end('?????');
     }
 });

客户端如何发送请求:

GET方式

• 浏览器地址栏

• link标签的href属性

• script标签的src属性

• img标签的src属性

• Form表单提交

POST方式

• Form表单提交