nodejs初步实现静态资源服务器功能

曾经终败给现在 2022-12-14 03:38 200阅读 0赞

### 静态资源服务器 ###

*   *  Web资源服务器简介
     *   *  什么是静态资源
         *  什么是动态资源
         *  静态资源和动态资源的区别
         *  Web服务器
     *  端口号
     *  HTTP报文头
     *   *  请求报文
         *  响应报文
     *  初步实现服务器功能
     *   *  通俗写法
         *  简化写法
     *  初步实现静态资源
     *   *  res.write()和res.end()区别
     *  初步实现静态资源服务器的功能
     *   *  封装方法
     *  案例--实现成绩查询功能

## Web资源服务器简介 ##

首先，我们先了解一下**Web资源**：  
所谓 Web 资源即放在 Internet 网上供外界访问的文件或程序，又根据它们呈现的效果及原理不同，将它们划分为`静态资源`和`动态资源`。

### 什么是静态资源 ###

静态资源是浏览器能够直接打开的，一个 js 文件，在打开方式中选择 IE 浏览器打开，浏览器可以直接打开没有出现问题，那么就说明它是一个静态资源。**html 文件、css 文件、 js 文件等这些都是静态资源**。

### 什么是动态资源 ###

动态资源是有一些资源浏览器是不能够直接打开的，但是经过翻译之后浏览器能够打开的资源称之为动态资源。比如说 **jsp 文件、servlet、php、ASP 等这些都是动态资源**。

### 静态资源和动态资源的区别 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]

### Web服务器 ###

*  Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以处理浏览器等Web客户端的请求并返回相应响应，也可以放置网站、数据文件；
 *  当Web浏览器（客户端）连到服务器上并请求文件时，服务器将处理该请求并将文件反馈到该浏览器上，附带的信息会告诉浏览器如何查看该文件（即文件类型）。服务器使用HTTP（超文本传输协议）与客户机浏览器进行信息交流；
 *  Web服务器的作用是接收客户端的请求，给客户端作出响应。

## 端口号 ##

*  所谓的端口，就好像是门牌号一样，客户端可以通过ip地址找到对应的服务器端，但是服务器端是有很多端口的，每个应用程序对应一个端口号，通过类似门牌号的端口号，客户端才能真正的访问到该服务器。为了对端口进行区分，将每个端口进行了编号，这就是端口号；
 *  **端口号的主要作用是表示一台计算机中的特定进程所提供的服务** 。网络中的计算机是通过IP地址来代表其身份的，它只能表示某台特定的计算机，但是一台计算机上可以同时提供很多个服务，如数据库服务、FTP服务、Web服务等，我们就通过端口号来区别相同计算机所提供的这些不同的服务一个
 *  端口号是不固定的，即可以由用户手工可以分配（当然，一般在软件编写时就已经定义）。

## HTTP报文头 ##

HTTP报文是面向文本的，报文中的每一个字段都是一些ASCII码串，各个字段的长度是不确定的。HTTP有两类报文：`请求报文`和`响应报文`。

### 请求报文 ###

一个HTTP请求报文由请求行（request line）、请求头部（header）、空行和请求数据4个部分组成，下图给出了请求报文的一般格式。  
![在这里插入图片描述][20201012213935111.png_pic_center]

### 响应报文 ###

http响应报文由响应行，响应头，响应体三部分组成。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]

## 初步实现服务器功能 ##

### 通俗写法 ###

1.引入http模块：

const http = require('http');

2.创建服务器实例对象：

let server = http.createServer();

3.绑定请求事件

server.on('request',(req,res)=>{ 
        res.end('hello');
    })

4.监听端口

server.listen(3000,()=>{ 
        //测试服务是否连接
        console.log('running...')
    })

浏览器访问的方式是：`localhost:端口号`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 2]

### 简化写法 ###

第一种访问方式：通过 `localhost:端口号`访问

http.createServer((req,res)=>{ 
        res.end('你好');
    }).listen(3000,()=>{ 
        console.log('running...')
    });

![在这里插入图片描述][20201012212611369.png_pic_center]  
我们会发现，中文字符‘你好’会相应在页面上，但是它是乱码，解决办法：**设置响应报文头**

res.writeHead(200,{ 
        'Content-Type':'text/plain;charset=utf8'
    });

![在这里插入图片描述][20201012213327135.png_pic_center]

第二种访问方式：通过 `ip地址:端口号` 访问

http.createServer((req,res)=>{ 
        res.end('hello');
    }).listen(3000,'ip地址',()=>{ 
        console.log('running...');
    })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 3][]

## 初步实现静态资源 ##

处理请求路径的分发：  
req的对象是`Class：http.IncomingMessage`的实例对象  
res的对象是`Class：http.SeverResponse`的实例对象

![在这里插入图片描述][20201012215652513.png_pic_center]  
![在这里插入图片描述][20201012215708140.png_pic_center]  
![在这里插入图片描述][20201012215721908.png_pic_center]

### res.write()和res.end()区别 ###

*  write方法向客户端响应内容，可以写多次
 *  end方法用来完成响应，只能执行一次
 *  两种方法可以同时使用

if(req.url.startsWith('/index')){ 
            res.write('hello');
            res.write('world');
            res.end('index')
        }

![在这里插入图片描述][20201013130655596.png_pic_center]

## 初步实现静态资源服务器的功能 ##

/** * 初步实现静态资源服务器的功能 */
    const http = require('http');
    const fs = require('fs');
    const path = require ('path');
    
    http.createServer((req,res)=>{ 
        if(req.url.startsWith('/index')){ 
            fs.readFile(path.join(__dirname,'www','index.html'),'utf8',(err,fileContent)=>{ 
                if(err){ 
                    res.end('sever error');
                }else{ 
                    res.end(fileContent);
                }
            });
        }else if(req.url.startsWith('/about')){ 
    
        }else if(req.url.startsWith('/list')){ 
    
        }
    }).listen(3000,()=>{ 
        console.log('running');
    })

我们会发现，后面的方法都是一样的，所以可以考虑封装方法

### 封装方法 ###

/** * 初步实现静态资源服务器的功能 */
    const http = require('http');
    const fs = require('fs');
    const path = require ('path');
    
    
    let readFile = (file,res)=>{ 
        fs.readFile(path.join(__dirname,'www',file),'utf8',(err,fileContent)=>{ 
            if(err){ 
                res.end('sever error');
            }else{ 
                res.end(fileContent);
            }
        })
    }
    http.createServer((res,req)=>{ 
        if(req.url.startsWith('/index')){ 
            readFile('index.html',res);
        }else if(req.url.startsWith('/about')){ 
            readFile('about.html',res);
        }else if(req.url.startsWith('/list')){ 
            readFile('list.html',res);
        }else{ 
            res.end('页面被狗狗叼走了')
        }
    }).listen(3000,()=>{ 
        console.log('running...')
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 4]

## 案例–实现成绩查询功能 ##

[利用nodejs实现成绩查询功能][nodejs]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/923ad72a3b4d461e9a41952a7943ed00.png
[20201012213935111.png_pic_center]: /images/20221123/9a3efab78f614acdb151232204b3b217.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/ffbed429bd5f4af48b14c5935e840a4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/d254ec6f1d234f46b23f0d12d5ae474e.png
[20201012212611369.png_pic_center]: /images/20221123/1620e1e44302433697cad186d74384ad.png
[20201012213327135.png_pic_center]: /images/20221123/689073a7fbd54963834b97dda4d00215.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/fa9d8af7e2584a6487281db67efff799.png
[20201012215652513.png_pic_center]: /images/20221123/626513b9ba90458b98397a393458471d.png
[20201012215708140.png_pic_center]: /images/20221123/61d05d012fea4f75adddea6ea06ccdfa.png
[20201012215721908.png_pic_center]: /images/20221123/fc80897d92254810942dfab8e4d839f0.png
[20201013130655596.png_pic_center]: /images/20221123/45fc02e3d0f64a67b05b335f1a583d42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/e605e2f5e0ef45a7891bb01033aae280.png
[nodejs]: https://blog.csdn.net/PILIpilipala/article/details/109002613