前言

当我们用node写一个全栈项目时,当项目运行起来时候前端部分是跑在浏览器上加载，而后端部分是跑在服务器上。这时候我们就不得不提到前后端交互了

前端通过发送HTTP请求（GET、POST、PUT、DELETE等）与后端交互，后端处理请求并返回JSON对象或数组、文件等资源格式的数据。具体实现呢我们可以用XHR、 Fetch、Axios、jQuery。

node web服务实现

初始化项目

首先我们新建文件夹node-web2 屏幕截图 2024-07-05 095550.png 并使用如下指令

屏幕截图 2024-07-05 095337.png 初始化为后端项目

简单版node.js HTTP服务器

屏幕截图 2024-07-05 104633.png 以上的代码便创建了一个简单的node.js HTTP服务器,服务器监听在3000端口.res.end() 标志着响应的结束,res.end('hello world') 来结束响应并发送 "hello world" 字符串给前端。当我们在浏览器上访问localhost:3000便可以看到所展示的hello world了

url模块

url 模块提供了丰富的工具来解析、格式化和操作 URL。在处理网络请求和响应时，这些功能非常有用。url 模块是 Node.js 中的一个核心模块，用于解析和处理 URL（统一资源定位符）。这个模块可以帮助我们解析、格式化和处理 URL 字符串。可以让我们清晰的看明白前端请求的路径！！！。

屏幕截图 2024-07-05 113031.png 这样我们便可以看到格式画好的路径啦！

响应头

响应头（Response Headers）是 HTTP 响应的一部分，它包含了关于响应的信息，如内容类型、内容长度、服务器信息等。这些头部信息由服务器发送到客户端，用于描述响应的性质和处理方式。响应头帮助浏览器或客户端理解如何处理返回的数据。

常见的响应头

Content-Type：指定响应内容的媒体类型。例如，Content-Type: text/html 表示响应内容是 HTML 文本。
Content-Length：表示响应体的字节长度。例如，Content-Length: 1234 表示响应内容长度为 1234 字节。
Server：指示服务器的软件信息。例如，Server: Apache/2.4.1 (Unix)。
Set-Cookie：用于设置 HTTP cookie。例如，Set-Cookie: sessionId=abc123; Path=/; HttpOnly。
Location：用于重定向时指定新 URL。例如，Location: http://www.example.com/。

那我们就以 Content-Type为例看看效果如何吧！！

屏幕截图 2024-07-05 121212.png

我们可以看到代码

res.writeHead(200,{'content-type':'application/json;charset=utf-8'})
res.end(JSON.stringify(data))

其中writeHead()函数包含了两个参数第一个参数设置HTTP状态码为200，表示“OK”。第二个参数是一个对象，用来设置相应的头部信息。

'content-type': 'application/json;charset=utf-8' 设置响应的内容类型为JSON，并指定字符编码为UTF-8。
其中JSON.stringify(data) 是JavaScript中的一个方法，
用于将JavaScript对象或数组转换为JSON字符

前端展示

屏幕截图 2024-07-05 121335.png

响应页面给前端

首先呢先介绍一下fs。 Node.js 中的 fs 模块是用于与文件系统进行交互的模块。它提供了用于读取、写入、删除和操作文件和目录的功能。当我们在浏览器上输入的路径访问不到时例如输入http://localhost:3100/kkm ,这时候我们希望后端响应回来一个404页面我们只需要写如下代码

屏幕截图 2024-07-06 092208.png 浏览器显示结果如下