Node.js的web模块教程（已经入门的继续学习）

Autumn_Xiao

已于 2023-09-01 23:11:09 修改

阅读量189

点赞数 1

分类专栏： Node.js 继入门后教程文章标签： node.js 前端学习

于 2023-08-28 23:21:50 首次发布

本文链接：https://blog.csdn.net/Autumn_Xiao/article/details/132546039

版权

Node.js 继入门后教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了Web服务器的功能，着重讲解了如何使用Node.js创建HTTP服务器，包括使用内置http模块、HTTP协议详解（如GET/POST请求、URL结构、响应头设置）、MIME类型和静态资源的管理。还提及了socket服务器和流媒体服务器的应用。

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

1.web服务器简介

Web服务器一般指网站服务器，Web服务器的基本功能就是提供Web信息浏览服务(文本、音视频、流)。

服务器种类
Web服务器: 处理HTTP请求的服务器
Socket服务器(即时通讯): 通过socket传输
- 即时通讯(IM): 允许两人或多人使用网路即时的传递文字讯息、档案、语音与视频交流
流媒体服务器: 音视频处理程序, 接受流媒体格式文件,flv/ts等

2.node创建web服务器

Nodejs内置了http模块，可以用来快速搭建HTTP服务器和客户端。

代码示例：

/创建HTTP服务器

//1.加载http模块
// const http = require("node:http");
const http = require("http");
//2.创建http服务器
const server = http.createServer();
server.on("request", (request, response) => {
//参数: 请求的回调, 当访问服务器的时候,就会自动调用回调函数
//接收客户请求
//给客户端响应
  console.log("请求访问服务器");
});
server.listen(3000);

上方代码成功执行后执行效果如下：

//创建一个简单的服务器
const http=require("node:http");//http模块

//1.创建一个服务器
const server =http.createServer();

//2.监听请求
server.on('request',(request,response)=>{

    console.log("收到客户端请求....");
    response.write("ok");//响应给客户端的数据
    // response.end();//关闭响应
})


//监听指定端口
// server.listen(8080,()=>{
//     console.log('服务器已启动');
// })


//监听指定端口
server.listen(8080)

3.HTTP协议

3.1 HTTP协议概述

HTTP协议的概念：超文本传输协议（Hypertext Transfer Protocol，HTTP）是一个简单的请求-响应协议

3.2 URL说明

http://www.baidu.com:80/search?keyword=http协议&enc=utf-8#main
   协议：
       主机名
           域名:   是IP的面具
                 IP地址：  32位      唯一标识
                     DNS服务器：记录了域名和IP地址之间的映射关系
                       端口:      计算机数据唯一出口       0-6xxxx
                           资源地址：资源目录
                              参数:传输给服务器的数据
                                 键值对  key=value&key=value&key=value
                                   哈希：页面路径

3.3 HTTP请求(Request)

客户端的请求对象

常用的属性：

url --获取有关当前请求的 URL 的信息
(Http)method--获取客户端使用的HTTP 数据传输方法（包含请求的方法（GET，POST等））
httpVersion--包含请求这个http协议的版本
headers--包含请求相关的Headers对相关
referrer--包含请求的来源
...

3.4 HTTP响应(Response)

服务端给客户端用来响应信息的对象

常见的属性：

statusCode--设置状态码
statudsMessage--设置描述信息

常见的方法：

end()--关闭响应
write()--响应给客户端的额数据
setHeader()--设置请求头
writeHead()--设置请求头

setHeader()与writeHeader（）区别

setHeader 只能一个一个设置标头，writeHead可以一下设置很多
setHeader 可以重复调用，writeHead只能调用一次
同时出现setHeader和writeHead，setHeader会合并到writeHead，并且writeHead优先级高
writeHead 可以设状态码和状态信息，setHeader不能设置，只能设置标头

writeHead（）返回的是一个ServerResponse对象，我们可以进行链式调用

require("node:http")
    .createServer((req, res) => {
        // res.write("ok")
        // res.end();
        console.log('接收到了请求....');
        
        //头信息
        res.setHeader("content-type","text/plain;charset=utf8")
        res.setHeader("content-length",6)

        //设置状态码、描述信息
        res.statusCode=201;
        res.statusMessage="Ok"

        res.end('ok,哈哈哈')
    })
    .listen(9001)

3.5 HTTP原理

4.常用模块

4.1 path模块

path 模块提供用于处理文件路径和目录路径的实用工具

常见的方法：

basename()--当前请求文件的名称
dirname()--请求文件所在的目录信息
extname()--请求文件的后缀名
join()--类似于命令：模板字符串，其属于拼接字符串的方法
resolve()--把一个路径或路径片段的序列解析为一个绝对路径
isAbsolute()--判断是否为绝对路径

代码示例：

const path=require("node:path");

/*
    basename()
    extname()
    dirname()
    join()
    resolve()
    isAbsolute()
*/

let filepath1=__dirname;//  E:\郑州20230816\day09\code\web_demo2\src
let filepath2=__filename;//  E:\郑州20230816\day09\code\web_demo2\src\index.js

// console.log(filepath1);
// console.log(filepath2);

// let extName=path.extname(filepath2);//后缀名
// let extName=path.extname("E:\郑州20230816\day09\code\web_demo2\src\index.css");//后缀名
// let baseName=path.basename(filepath2);
// let dirName=path.dirname(filepath2);// 目录信息

// console.log(path.isAbsolute(filepath2));//是否为绝对路径


let myPath=path.join("demo","xx","index.mp4")

console.log(myPath);//  demo\xx\index.mp4

console.log(path.join(__dirname,"public",'css','index.css'));

// let myPath=path.resolve("./file/demo/admin.txt");//   E:\郑州20230816\day09\code\web_demo2\src\file\demo\admin.txt

// console.log(myPath);


// console.log(extName);// .js
// console.log(baseName);// index.js
// console.log(dirName);//E:\郑州20230816\day09\code\web_demo2\src

4.2 url模块

url模块经常用来处理地址

常用的方法：

parse()--方法用来解析 JSON 字符串，构造由字符串描述的 JavaScript 值或对象。

代码示例：

const url=require("node:url");
const qs=require("node:querystring")

// let myUrl=" http://www.baidu.com:80/search?keyword=http协议&enc=utf-8#main";

// // let nUrl=url.parse(myUrl);
// let nUrl=url.parse(myUrl,true);

4.3 querystring模块

用于解析和格式化 URL 查询字符串

parse()
stringify()--将一个 JavaScript 对象或值转换为 JSON 字符串

代码示例：

/*
    path
        
    url
        parse()    将URL---->对象
    querystring
        stringify()
        parse()
*/

const url=require("node:url");
const qs=require("node:querystring")

// let myUrl=" http://www.baidu.com:80/search?keyword=http协议&enc=utf-8#main";

// // let nUrl=url.parse(myUrl);
// let nUrl=url.parse(myUrl,true);

// let {keyword} =nUrl.query;
// // console.log(nUrl);
// console.log(keyword);

// url.resolve()
/*
Url {
  protocol: 'http:',        
  slashes: true,
  auth: null,
  host: 'www.baidu.com:80', 
  port: '80',
  hostname: 'www.baidu.com',
  hash: '#main',
  search: '?keyword=http协议&enc=utf-8',
  query: 'keyword=http协议&enc=utf-8',
  pathname: '/search',
  path: '/search?keyword=http协议&enc=utf-8',
  href: 'http://www.baidu.com:80/search?keyword=http协议&enc=utf-8#main'
}
*/

/*
Url {
  protocol: 'http:',        
  slashes: true,
  auth: null,
  host: 'www.baidu.com:80', 
  port: '80',
  hostname: 'www.baidu.com',
  hash: '#main',
  search: '?keyword=http协议&enc=utf-8',
  query: [Object: null prototype] { keyword: 'http协议', enc: 'utf-8' },
  pathname: '/search',
  path: '/search?keyword=http协议&enc=utf-8',
  href: 'http://www.baidu.com:80/search?keyword=http协议&enc=utf-8#main'
}
*/




//   public/css/index.css
// let to="/public/css/index.css";

// let mm=url.resolve("E:",to)

// console.log(mm);


let str="keyword=http协议&enc=utf-8";
let obj=qs.parse(str)
console.log(obj);// { keyword: 'http协议', enc: 'utf-8' }

let objx={
    id:111,
    username:"admin",
    pwd:1233
}

let s=qs.stringify(objx)
console.log(s);//id=111&username=admin&pwd=1233

5.2 POST请求

post方式提交的数据，在请求体中，可以通过监听事件的方式获取。

代码示例：

const http = require("http");

http.createServer((req, res) => {
    if (req.url == '/favicon.ico') return

    if (req.method == 'GET') {//get
        console.log('get....');
        console.log(req.url);
    } else if (req.method == 'POST') {
        console.log('post....');
        // console.log(req.url);
        //思考题：Nodejs如何读取post方式提交的参数      
    }

    res.end('ok')
}).listen(5001)

5.3 get和post总结

GET和POST请求的区别：

1）get请求的参数在地址后面，POST参数在请求体 http://23.234.23.77/login/admin?usdernam=jack&pwd=2342

2）可以携带的参数的大小不一样

GET 2kb

POST 无限制

3）安全性

5.4 设置响应头

setHeader()
writeHead()

代码示例：

 //通过设置头信息，添加MIME类型
    res.setHeader("content-type","video/mp4")
    
    
    response.writeHead(200, "OK", {
        "Content-type": "text/html;charset=utf-8",
        "content-length":3
    })

6.静态资源

6.1静态资源

一般存在于public目录下：html、css、JavaScript、图片、音频、视频等文件

代码示例：

const http = require('http');
const fs=require('fs');
const PORT = 9001

http.createServer((req, res) => {
    // let buf=fs.readFileSync(`${__dirname}/public/html/index.html`)
    // let buf=fs.readFileSync(`${__dirname}/public/css/index.css`)
    // let buf=fs.readFileSync(`${__dirname}/public/imgs/1.jpg`)

    //通过设置头信息，添加MIME类型
    res.setHeader("content-type","video/mp4")

    let buf=fs.readFileSync(`${__dirname}/public/video/11.mp4`)


    res.write(buf)
    // res.end('ok')
    res.end();
}).listen(PORT, () => {
    console.log('running........');
})


/*
    0-6xxxx

    21  文件
    3306  Mysql
    ...
*/

6.2 MIME类型

概念：MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。

参考：MIME 参考手册

代码示例：

MIME类型：
    1)文本类型
        text/plain
        text/html
        text/css
        text/javascript
        text/json
        ...

    2）图片类型
        image/gif, image/png, image/jpeg, image/bmp, image/webp

    3）音频类型
        audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav

    4）视频类型
        video/webm, video/ogg

    5）二进制数据
        application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml,  application/pdf

    6）细分领域的文件类型
        multipart/form-data
        multipart/byteranges

有任何问题可私信，诚邀你来反馈