正文

node教程-http协议，开发一个简单的静态网站(代码片段)

BM老李  BM老李  2022-12-25  358

关键词：

明确目标：

我们要开发一个静态的网站，下面就是它的网站首页

四、做一些开发前的知识储备

重要！：在js中的事件监听一般都是这样的格式

obj.on(event,callback)

表示的意思是：我们的对象正在监听event事件的发生，一旦发生了 我们有一个处理函数(回调函数callback)去处理它

(一)、有关于服务器嗨哟客户端之间的通信

这个非常的重要，你要知道所有的app之间是要建立起通信的，要不然你只是一个单机的版本，这就没什么意思了，只有联网，才能让你的应用更加的出色

开发网站服务器第一步建立起浏览器还有服务器之间的通信？

建立通信的第一步：找到对应服务器的地址还有端口，这就需要问你的URL地址

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

注意：端口80是默认可以省略的

实例：https://y.qq.com/n/yqq/playlist/7382629476.html

https:是协议
这里的y.qq.com是网站的域名，
n/yqq/playlist/7382629476.html是请求支援所在的路径
注意这里的端口号没有了，其实是有一个默认的80端口，这里80是可以省略的
也就是你怎么写也是ok的
https://www.baidu.com:80

服务器是什么？
我们的客户端是浏览器，我们的服务器就是node，其实就是一个软件，这个软件里面跑的就是我们的网站代码

我们如何通过URL访问在本电脑下的服务端呢？答案就是通过
本机域名：localhost
本机ip：127.0.0.1
别着急接下里我们来创建一个网站服务器，让你了解

创建web服务器

网站服务器实际上就是一台电脑

下面的代码都是固定死的，你记住就好
下面的代码在app.js中

// nodejs和js一样都是事件驱动，当什么什么时，做是什么什么事情

// 1.用于创建网站服务器的模块
const http = require(\'http\');

// 2. app对象就是网站服务器对象
const app = http.createServer(); //返回的是一个----对象
// 3. 当客户端有请求来的时候
app.on(\'request\', (req, res) =>  
    // 响应
    // req表示的就是请求，res表示的就是回送
    res.end(\'哈哈哈哈\')
);
// 4. 监听端口
app.listen(3000);

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

在之后，去到命令行，node app.js
你看：一个非常简单的node服务器就启动成功了
然后你去到浏览器地址栏输入 localhost:3000就能访问我们的服务器了

(二)、详解http协议

必背单词-请求：request，简写req
必背单词-响应：response，简写res

所谓的http协议指的就是服务器还有客户端之间的沟通介质
http介质里面包含的传输的数据块就是报文

报文有两类，

报文在哪儿看？

打开你游览器的控制台就能看到了

我们随便点开一个报文看看里面都有什么

请求报文

简称 req

给服务器发数据使用的报文就是请求报文。有如下的请求方式

get请求数据。post发送数据

接下来我们来看看，req报文（请求报文以下简称req）里面的数据如何获得和如何处理


// 1.req对象， req对象里面就包含了 请求的所有信息，不管你是post还是get 只要是req，你们req对象里面就是你的请求数据

// 2.  服务器拿到req之后，你就可以使用对应的方法去处理请求报文里的数据了
// 3. 处理报文

// 3.1 req.method  获取请求方式就是看看你是get还是post
// console.log(req.method);

// 3.2 获取请求地址
// req.url
// console.log(req.url);
// 3.3 获取请求报文信息
// req.headers
// console.log(req.headers[\'accept\']);//其实这个就是对象[]键的方式就ok了

响应报文

// res就是我们响应出去的报文，以下简称res(响应报文)


// 1.首先我们来了解以下HTTP状态码，这也是我们res做的事情之一
// 200 请求成功
// 404 请求的资源没有被找到
// 500 服务器端错误
// 400 客户端请求有语法错误


// 2.我们看看如何设置响应的内容类型，下面的就是我们的可以定义的res类型，
// text/html
// text/css
// application/javascript
// image/jpeg
// application/json

//3.代码示例writeHead是一个res的方法，可以用来设置HTTP状态码还有相应数据类型
app.on(\'request\', (req, res) => 
     // 设置响应报文，
     res.writeHead(200, \'Content-Type\': \'text/html;charset=utf8‘
     );
 );

如何在报文中传递数据

其实这个也非常的简单，主要有如下的几种格式

注意啊，这里说的格式是就像你写信的格式还有写作文的格式，而他们的本质都是字写在纸上，在我们的http中，不管你是用那种格式传输，最终都是以字符串的形式传递出去！这一点你一定要注意

对于get请求参数
参数的形式

url?键1=值1&键2=值2&....
多个键值对用&隔开

代码举例：http://localhost:3000/?name=zhangsan&age=20
这个就代表你给服务器发了这样的数据：
name(键)=zhangsan(值)&age(键)=20(值)

那么问题来了，我们如何获得req中的url?
别担心，我们有内置的url系统模块,接下来我们就来详细的介绍以下它的使用

代码示例：

+++
 // 1.导入url系统模块 用于处理url地址
 const url = require(\'url\');
 
 app.on(\'request\', (req, res) => 
     // 将url路径的各个部分解析出来并返回对象
     // true 代表将参数解析为对象格式，然后我们在起那面用另一个对象的query去接收它
     console.log(url.parse(req.url);//你发现它这个对象里面有所有的关于url的数据，其中有一个query就是表示的是rul后面的请求参数
     
     /*你将会获得如下的数据
    Url 
        protocol: null,
        slashes: null,
        auth: null,
        host: null,
        port: null,
        hostname: null,
        hash: null,
        search: \'?name=zhangsan&age=20\',
        query: \'name=zhangsan&age=20\',
        pathname: \'/\',
        path: \'/?name=zhangsan&age=20\',
        href: \'/?name=zhangsan&age=20\' 

     */


     //我们把query解构出来，放到一个对象里面
     let query = url.parse(req.url, true);
     console.log(query);
//你能获得的结果： name: \'zhangsan\', age: \'20\' 

 );
 app.listen(3000);


//url.paares是一个方法，在经过它处理之后会返回一个对象，true就是该方法的选项，它的作用是参数解析成对象形式，说白了就是把返回对象里面的query搞成对象，这里做了一个解构
let  query, pathname  = url.parse(req.url, true);
    console.log(query.name)
    console.log(query.age)

对于POST的请求，

首先你需要明白我们的post的参数是附在报文里的，get是附在url上的,也就是说post比较安全

对于get的请求的发送给服务器还是比较简单的，直接在浏览器rul里附加就完事，但是问题又来了，难不成我们每次请求都在浏览器后面输入？那么肯定不是这样的，接下里我们通过一个 html表单的提交事件，来演示到底如何发数据给服务器，在真实的网页中

<body>
    <!--
        method: 指定当前表单提交的方式.,有get还有post处理方式
        action: 指定当前表单提交的地址
        action：指定提交给谁

	-->
    <form method="post" action="http://localhost:3000">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit">
    </form>
</body>

说明：通过post的方式我的请求数据就丢到了报文里面 ，接下里我们就去服务器看看如何处理这些post请求数据

我们看一下post的报文请求信息在哪儿，由于我们的

说完了我们的发送之后，我们看一下post的请求参数在服务器中如何处理
注意：我们在这里又要用到我们的一个系统模块，这个模块专门用来处理POST的请求数据

 // 1.导入系统模块querystring 用于将HTTP参数转换为对象格式
 // 注意：万物皆对象的思想是非常非常的重要的

 const querystring = require(\'querystring\');
 
 app.on(\'request\', (req, res) => 
     let postData = \'\';

     // 2.监听参数传输事件
     req.on(\'data\', (chunk) => postData += chunk;);
     // 3.监听参数传输完毕事件
     req.on(\'end\', () =>  
         console.log(querystring.parse(postData)); 
     ); 
 );

说明：在post请求参数比较特殊，在服务器它不是一下子就给你获取完的，而是一点一点的获取。所以有一个传输事件data。还有一个传输完成事件end，

注意一些data事件发生后都会出一个数据，我们用chunk去接受它，然后就拼在我们的postData变量中，注意这个chunk不一定是chunk随便你定义，总之你data后会给一个数据处理结果出来，我们拿一个变量接受它就完事

最后我们end的时候，用querystring对象下的parse()方法可以处理一下数据。把字符串转对象，如何取出来

(三)、路由

指的是:请求什么就响应什么，请求还有响应要一一对应起来，完成这件事的就是路由，本质上就是一段判断代码，这样的业务逻辑非常的简单，这里就不一一讲解了

接下来我们演示最原始的处理

// 1.引入系统模块http
// 2.创建网站服务器
// 3.为网站服务器对象添加请求事件
// 4.实现路由功能 需求分析：默认的就是给出首页提示，如果是index也是给出首页提示 如果是list给出列表页提示，如果是没有，提示不存在
// 	1.获取客户端的请求方式
// 	2.获取客户端的请求地址

// 1-引入相关的模块
const http = require(\'http\');
const url = require(\'url\');

// 2-创建服务器
const app = http.createServer();

app.on(\'request\', (req, res) => 

    //5-业务逻辑-
    /*
        核心孙算法：根据url地址给出不同响应
    */
    // 获取请求方式 tolowcat装换成小小写
    const method = req.method.toLowerCase();
    // 获取请求地址，弄成一个 不带参数的请求地址 获取的是请求地址，
    const pathname = url.parse(req.url).pathname;
    
    //这里的是，响应报文的处理
    res.writeHead(200, 
        \'content-type\': \'text/html;charset=utf8\'
    );

    // 注意：对于请求是地址的，两个方法都是一样的 get 和post
    if (method == \'get\') 

        if (pathname == \'/\' || pathname == \'/index\') 
            res.end(\'欢迎来到首页\')
         else if (pathname == \'/list\') 
            res.end(\'欢迎来到列表页\')
         else 
            res.end(\'您访问的页面不存在\')
        

     else if (method == \'post\') 

    

);
//4-监听端口
app.listen(3000);
console.log(\'服务器启动成功\')

(四)、资源

有两种，静态的还有动态的，两者搭配是最妙的

静态资源
指的是：服务器端不需要处理，可以直接响应给客户端的资源就是静态资源,比如css比如js比如img等等
动态资源
指的是：相同的请求地址不同的响应资源，这种资源就是动态资源。
实战
接下来我们来做这样的一个事情：

先说一个事情：我们现在处于初级阶段，这里的访问指的是我们直接在地址栏中输入

我的app同级目录下有一个静态页面，我需要在访问http://localhost:3000的时候或则http://localhost:3000/index.html的时候就能直接到我们的index页面，如果我访问http://localhost:3000/list.html就能去到对应的页面，如果我输入
http://localhost:3000/images/1.jpg我也能拿到对应的图片

核心算法分析

其实就是更几乎url里面的请求地址拿出来。进行判断，如何用fs把对于的路径文件响应回去就可以，同时要足以细节，我们的响应类型，应该根据我们的url走，你拿什么我就给什么，而且要注意路径的拼接问题

1 首先我们把文件目录搭建起来
img
2 搭建核心代码

//处理服务器的业务逻辑

//1.引入模块
const http = require(\'http\');
const url = require(\'url\');//处理url
const path = require(\'path\'); //路径拼接的模块
const fs = require(\'fs\'); ////文件处理的模块

//这个是一个第三方某块。这个模块就是可以判断路径从而返回资源的类型
const mime = require(\'mime\');
//2.创建服务器
const app = http.createServer();
//3.开启
app.on(\'request\', (req, res) => 
    
    // 5.核心业务代码
    // 5.1 获取用户的请求路径，注意我们获取的是路径们也就是，url.parse(req.url)身上的pathname
    let pathname = url.parse(req.url).pathname;

    //5.2 拼接 注意这里的三元运算符
    pathname = pathname == \'/\' ? \'/default.html\' : pathname;

    //  5.3 将用户的请求路径转换为实际的服务器硬盘路径
    // __dirname获取当前文件所在的绝对路径
    let realPath = path.join(__dirname, \'public\' + pathname);
    let type = mime.getType(realPath)//拿到请求类型,这个方法没有必要深究，反正就是可以获取出来
    
    

    // 5.4 读取文件，第二个是可选参数,读取文件然后返送回去
    fs.readFile(realPath, (error, result) => 
        // 如果文件读取失败
        if (error != null) 
            res.writeHead(404, 
                \'content-type\': \'text/html;charset=utf8\' 
            )
            res.end(\'文件读取失败\');
            return;
        

        // 5.5 给一个200的响应，然后重新设置类型
        res.writeHead(200, 
            \'content-type\': type //由于 你是不知道返回的是什么类型的文件，因为有外链情况
        )

        res.end(result);
    );
);
//4.监听端口
app.listen(3000);
console.log(\'服务器启动成功\')

一定要注意外联文件的情况，我们的核心算法：
根据当前请求的类型返回对应的类型资源

项目利用node开发一个博客网站

...发一个博客网站首先你要先安装node（这个在网上都是有教程的）[点击前往中文网站]：（http://nodejs.cn/）[点击前往英文网站]：（https://nodejs.org/en/）其次写的是各个页面的布局这个项目主要还是实现添加随笔的功能，以及如何把... 查看详情

搭建静态网站——基于http协议的静态网站(代码片段)

目录403错误搭建一个web服务器基于ip地址访问的网站（1）添加两个ip地址（2）创建两个网页文件根目录，并定义网页内容（3）定义基于不同ip地址来访问网站的配置文件（4）调试并查看 403错误... 查看详情

node入门教程(11)第九章：node的网络模块(代码片段)

net网络模块net模块是node对TCP或者IPC开发的封装，包括了客户端和服务器端相关API。对于阅读本文，请您有一定的网络编程的基础。您需要已经了解了：ip协议，会配置ip地址了解dns解析过程，了解dns的概念了解基本的TCP的协议的... 查看详情

node15---cookiesession

二、Cookie和Session2.1Cookie●HTTP是无状态协议。简单地说，当你浏览了一个页面，然后转到同一个网站的另一个页面，服务器无法认识到，这是同一个浏览器在访问同一个网站。每一次的访问，都是没有任何关系的。那么世界就乱... 查看详情

利用node.js搭建简单web服务器的方法教程

前言使用Nodejs搭建Web服务器是学习Node.js比较全面的入门教程，因为要完成一个简单的Web服务器，你需要学习Nodejs中几个比较重要的模块，比如：http协议模块、文件系统、url解析模块、路径解析模块、以及301重定向问题，下面我... 查看详情

node-请求响应原理http协议(代码片段)

...1.服务器端基础概念IP地址域名端口URL2.创建web服务器3.HTTP协议报文4.HTTP请求与相应处理GET请求参数POST请求参数路由静态资源访问1.服务器端基础概念网站的组成：网站应用程序主要分为两大部分：客户端和服务器端。客... 查看详情

node入门教程(12)第十章：node的http模块(代码片段)

RyanDahl开发node的初衷就是：把Nginx非阻塞IO功能和一个高度封装的WEB服务器结合在一起的东东。所以Node初衷就是为了高性能的Web服务器去的，所以：Node的HTTP模块也是核心的核心。本文需要您了解的前置知识点：HTTP协议Web请求模... 查看详情

最简单的方式创建node.js静态服务器

...ver-a127.0.0.1-p7070http-server关闭按ctrlc上面的一句命令启动了一个node.js的静态服务器.监听本地7070端口.静态目录就是当前运行命令所在的目录如果你的当前项目中存在public文件夹,那么默认静态目录会指定到查看详情

node教程——express框架简约教程(代码片段)

Express框架学习(一导学)框架入门这个也是是一个开发框架，是一个第三方模块，使用这个框架可以很方便的创建网站服务器我们先来看看它的特点：1.提供了方便简洁的路由定义方式2.对获取HTTP请求参数进行了简化处理3.对模板... 查看详情

http协议3-5

HTTP协议要理解Web服务器程序的工作原理，首先，我们要对HTTP协议有基本的了解。如果你对HTTP协议不太熟悉，先看一看HTTP协议简介。HTTP服务器要开发HTTP服务器程序，从头处理TCP连接，解析HTTP是不现实的。这些工作实... 查看详情

菜鸟教程——http和https、ssl

参考技术AHTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。HTTPS：是以安全... 查看详情

将js进行到底：node学习6

...web开发的真正开始呢？首先任何企业都不会用原生的http协议API去开发一个完整的网站，除非她们先开发一个框架出来，其次我们之前的所谓http，connect都只是打开了一个http服务器而已，顶多只能算个工具集（中间件），最后使... 查看详情

大型网站之网站静态化（综合篇）

...上的一个网页，web服务器接收到请求后在网络上使用http协议将网页返回给浏览器，浏览器通过解析http协议最终将页面展示在浏览器里，有时这个网页会比较复杂点，里面包含了一些额外的资源例如：图片、外部的css文件、外部... 查看详情

Node 中的简单静态 HTML 服务器

...:03:34【问题描述】：我想制作一个简单的服务器，以便在开发时提供本地html和JS文件。我试图让一个节点应用程序只获取URL中的任何内容，并用页面进行响应，但没有运气（这是我对express的尝试）。varfs=要求（“fs”）；变种主... 查看详情

nginx在前端中的简单应用

...务和Nginx服务。Node服务最常见的，就是WebpackServer,在前端开发联调时经常用到,启动后我们就可以通过http://localhost:8907/bundle.05a01f6e.js的形式来访问构建资源；除此之外，我给大家安利另一款Node服务库：serve,它也能快速启动一个静... 查看详情

如何在 node.js 中创建一个简单的 http 代理？

】如何在node.js中创建一个简单的http代理？【英文标题】：Howtocreateasimplehttpproxyinnode.js?【发布时间】：2013-12-1912:55:57【问题描述】：我正在尝试创建一个代理服务器以将来自客户端的HTTPGET请求传递到第三方网站（比如google）。... 查看详情

web协议-http协议实现(代码片段)

生活中充满了各种网站，那么网站的基础HTTP协议是什么样的，平时都是使用网页，或者看书上说HTTP协议。最近讲实现HTTP到Webservice系列协议的简单程序，并且开发代码，供爱学习的人理解HTTP协议到Webservice协... 查看详情

观察http协议中客户端向服务器发送的请求,理解并实现一个最简单的ajax请求案例

一.什么是HTTP协议 HTTP协议即超文本传输协议,网站就是基于HTTP协议的,例如网站的图片、CSS、JS等都是基于HTTP协议进行传输的。HTTP协议是由从客户机到服务器的请求(Request)和从服务器到客户机的响应(Response)进行了约束和... 查看详情

正文