Node.js 与Web服务通信入门当你在浏览器上运行一个前端项目时，它会向作为服务器的你的电脑（或远程服务器）上的后端
前言
当你在浏览器上运行一个前端项目时，它会向作为服务器的你的电脑（或远程服务器）上的后端项目发送请求。后端接收到请求后会进行处理并返回响应内容，浏览器接收到这些响应数据后，将其解析并渲染成可视化的网页界面展示给用户。简而言之，前端负责显示界面，而后端负责处理逻辑和数据，两者通过网络请求-响应模式进行通信。
学习node，让node服务于前端，可以为做后端开发打好基础。这里放上了Node.js的官方文档，可以自行查看（Node.js 官方文档）。
正文
创建一个文件夹node-web，在终端打开输入npm init -y，快速初始化Node.js项目，生成package.json文件。
简单的后端服务
下面这段代码演示了如何使用Node.js创建一个最基础的HTTP服务器，能够响应所有请求并返回"Hello Node"作为响应体。
const http = require('http');
const server = http.createServer((req, res) => {
// console.log(req);
res.end('Hello Node')
})
server.listen(3000, () => {
console.log('Listening on port 3000');
})
下面是对代码的解析：
-
模块导入：
require('http')用于导入Node.js的内置http模块，提供创建HTTP服务器和客户端的功能。 -
创建服务器：
http.createServer()用于创建一个新的HTTP服务器实例，需要传入一个处理请求的回调函数。 -
请求处理：在回调函数中，
req对象用于获取请求信息，res对象用于发送响应。res.end()用于结束响应，并发送响应体数据。 -
启动服务器：
server.listen()方法用于启动服务器，使其开始监听特定端口上的网络请求。
在终端运行代码，打印出来 Listening on port 3000 ，表明服务器正在3000端口上监听。
在浏览器上输入 localhost:3000，可以看到 Hello Node 文本出现在浏览器窗口中时，这意味着服务器成功地响应了请求，并且浏览器正确地呈现了响应体的数据。其中 localhost 通常被解析为IPv4地址 127.0.0.1，在浏览器上输入127.0.0.1：3000也可以出现结果。
在终端输入 ipconfig 可以查看电脑上的网络IP地址，找到无线局域网适配器 WLAN中的IPv4，这个就是你联网后电脑上的IP地址。这样如果后面需要访问别人电脑上的接口，就可以让对方将IP地址发给你。
朝后端发请求携带参数
const http = require("http");
const url = require("url");
const server = http.createServer((req, res) => {
const reqUrl = url.parse(req.url);
console.log(reqUrl);
console.log(reqUrl.pathname);
});
server.listen(3000, () => {
console.log("Listening on port 3000");
});
在浏览器中输入http://localhost:3000/user?id=123，在终端会打印出来解析后的UPL对象。其中path 属性包含整个路径加上查询字符串， pathname 属性包含URL中的路径部分，不包含查询字符串。
当前端访问的是/user路径时，会返回Hello Node，否则返回Not Found。
const http = require('http')
const url = require('url')
const server = http.createServer((req, res) => {
const reqUrl = url.parse(req.url)
if (reqUrl.pathname === '/user') {
res.end('Hello Node')
} else {
res.end('Not found')
}
})
server.listen(3000, () => {
console.log('Listening on port 3000')
})
设置响应头，让浏览器可以读懂html
当响应体数据为 <h2>Hello Node</h2> 时，希望浏览器可以读懂html结构，就要设置响应头。
res.end('<h2>Hello Node</h2>')
设置一个响应头，HTTP响应的状态码为200，表示请求成功，并且定义响应体的类型为HTML文本，字符集为UTF-8。这样浏览器渲染出来的就是比普通文本大且加粗的Hello Node。
访问 /user 路径，返回一个JSON对象
const http = require('http')
const url = require('url')
const server = http.createServer((req, res) => {
const data = {
name: '昔年',
age: 18
}
const reqUrl = url.parse(req.url)
if (reqUrl.pathname === '/') {
res.writeHead(200, {
'Content-Type': 'text/html;charset=utf8'
})
res.end('<h2>你好</h2>')
} else if (reqUrl.pathname === '/user') {
res.end(JSON.stringify(data))
} else {
res.end('Not found')
}
})
server.listen(3000, () => {
console.log('Listening on port 3000')
})
这样得出来的结果中文是乱码，这是因为没有告诉浏览器返回的内容中有中文。这时候还是要去设置响应头，告诉浏览器返回的内容是JSON对象，这样浏览器就会按照加载JSON的方式将其渲染到页面。
这样浏览器就可以成功展示JSON对象。
除了用浏览器来发请求外，还可以用专门的请求测试工具，比如Postman软件或者 Apifox 。如下图是用Postman软件请求的。
出现错误时出现404页面
首先创建一个assets文件夹，在里面添加404.html，代码如下所示。
<body>
<h1>404</h1>
<h3>你访问的页面不存在哦</h3>
<img src="assets/404.gif" alt="">
</body>
要读取文件，引入 fs 模块，再引入 path 模块，需要得到404.html的绝对路径。__dirname是当前模块所在的目录的绝对路径，path.resolve()会返回一个绝对路径，该路径指向assets目录中的404.html文件。最后用 fs.readFileSync(_url, {encoding: 'utf-8'}) 读取到404.html中的内容，并调用res.end()返回内容。
const http = require('http');
const url = require('url');
const fs = require('fs');
const path = require('path')
const server = http.createServer((req, res) => {
const reqUrl = url.parse(req.url)
if (reqUrl.pathname === '/') {
res.writeHead(200, {'Content-Type': 'text/html'})
res.end('<h2>hello world</h2>')
}
else if (req.method === 'POST' && reqUrl.pathname === '/login'){
// 拿到前端传递的参数
// 去数据库里面校验该参数合法性
console.log(登录成功);
}
else {
const _url = path.resolve(__dirname, 'assets/404.html')
const content = fs.readFileSync(_url, {encoding: 'utf-8'})
res.end(content)
}
})
server.listen(3000, () => {
console.log('Listening on port 3000');
})
结语
在这一系列的教程中，我们深入了解了如何使用Node.js搭建一个基本的后端服务，从创建最简单的HTTP服务器到处理不同的请求路径，再到响应不同类型的数据，包括文本、HTML和JSON。我们还探索了如何优雅地处理错误，提供友好的404页面，以及如何通过设置正确的响应头来确保浏览器能够正确解析服务器返回的内容。希望可以给你带来帮助！
转载自:https://juejin.cn/post/7388438687124357174