node基礎(chǔ) ,http（二）

路人甲Java 2022-12-25 發(fā)布于北京

展開全文

#### 包（文件夾）

* 多個文件，有效的被組織與管理的一個單位
* 留一個入口
* __包就是一個:文件夾__

#### npm|| yarn

* 自己先有一個包描述文件（__package.json__)
* 創(chuàng)建一個包描述文件 `npm init [-y]`
  * 會根據(jù)當前的文件夾來自動生成包名（__不允許中文，不允許大寫英文字母__)
  * 默認生成```npm init [-y]```
* 下載一個包 `npm install art-template jquery@1.5.1 --save`
  - 記錄依賴`--save`
* 根據(jù)package.json文件中的`dependencies`屬性恢復依賴
  - 恢復包 `npm install`   簡單: ```npm i ```
* 卸載一個包 `npm uninstall jquery@1.5.1 --save`
* 簡寫```npm un jquery@1.5.1 --S`
  * 下載簡單些:```npm i 包名```
* __小結(jié):以上簡寫:  uninstall -> un ,install -> i , --save -> -S
* 查看包的信息
  - `npm info jquery`
* 查看包的信息中的某個字段(版本)(掌握)
  - `npm info jquery versions`
* 查看包的文檔
  - `npm docs jquery`
* 安裝全局命令行工具
  - `npm install -g http-server`
* 卸載全局命令行工具
  - `npm uninstall -g http-server`
* 查看全局包的下載路徑
  - `npm root -g`

包的區(qū)別

凡是我們下載到項目的node_modules中的包，基本都是拿來做require('xxx') 調(diào)用其函數(shù)和屬性
還有一類屬于工具性的包（全局命令行工具)
- 在命令行直接使用的
全局工具和項目包的區(qū)別
- 全局工具哪個目錄都可以通過命令行啟動，通過任意目錄啟動該工具，給相對路徑傳遞任意目錄的文件給該工具
- 項目中的包，部分具備命令行工具的能力，需要命令行環(huán)境變量的支持

http核心模塊，參考博客；https://www.cnblogs.com/fsg6/p/14499743.html

http超文本傳輸協(xié)議

#### 主體對象（核心對象http)

* 服務(wù)器對象 ```http.createServer();```
* 客戶端對象```http.request({host:'www.baidu.com'});```
* 請求報文對象(對于服務(wù)器來說，是可讀)  req
* 響應(yīng)報文對象(對于服務(wù)器來說，是可寫) res



#### 狀態(tài)碼分類

* 1 開頭，正在進行中
* 2開頭，完成
* 3開頭 ，重定向
* 4開頭 ， 客戶端異常
* 5開頭， 服務(wù)器異常

#### 創(chuàng)建服務(wù)器步驟

* 1:引入http核心對象
* 2:利用http核心對象的.createServer(callback); 創(chuàng)建服務(wù)器對象
* 3:使用服務(wù)器對象.listen(端口,ip地址) 開啟服務(wù)器
* 4:callback(req,res) 根據(jù)請求處理響應(yīng)

#### 請求報文對象(只讀)

* 請求首行中的url `req.url ` 
* 請求首行中的請求方式 `req.method`
* 請求頭中的數(shù)據(jù)`req.headers`  是一個對象
* 頭信息中，也可以作為與服務(wù)器交互的一種途徑

#### 響應(yīng)對象

* 響應(yīng)首行 `res.writeHead(狀態(tài)碼)`
* 寫響應(yīng)頭 
  * 一次性寫回頭信息
    * `res.writeHead(200,headers)`
  * 多次設(shè)置頭信息
    * `res.setHeader(key,value);`
* 寫響應(yīng)體
  * 一次性寫回響應(yīng)體
    * `res.end();`
  * 多次寫回響應(yīng)體
    * `res.write();`

#### 請求與響應(yīng)

* 頭行體
* content-type是對請求或者響應(yīng)體數(shù)據(jù)，做出的說明

#### 響應(yīng)體數(shù)據(jù)

* res.write('字符串'||讀出文件的二進制數(shù)據(jù))

* res.end('字符串'||讀出文件的二進制數(shù))

server.js

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

// 設(shè)計兩個接口， / 返回index.html
//  /test 只用write 不用end  =>  默認來講 頁面會一直轉(zhuǎn)
//    但是，如果我用ajax 
http.createServer((req,res)=>{
  if(req.url === '/' ) {
    fs.readFile('./index.html',(err,data)=>{
        res.writeHead(200,{'content-type':'text/html;charset=utf-8'});
        res.end(data);
    });
  } else if (req.url === '/test' && req.method === 'GET') {
        // 告知客戶端，可以一點一點的顯示，流式寫入
        res.writeHead(200,{'content-type':'application/octet-stream'});
        setInterval(function() {
            res.write(''+Date.now() +'^_^');
        },1000);

  }
}).listen(8888);

index.html

<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

      <span id="info"></span>

      <button id="btn">點我發(fā)</button>
      <script type="text/javascript">
        var info = document.querySelector('#info');
        document.querySelector('#btn').onclick = function () {
            //  發(fā)起ajax請求
            var xhr = new XMLHttpRequest();
            xhr.open('get','/test');
            xhr.send();
            // 處理響應(yīng)
            xhr.onreadystatechange = function () {
              // readyState = 3 的時候是響應(yīng)中
              console.log(xhr.readyState); //1,2,3,4
              console.log(xhr.responseText);
              var arr = xhr.responseText.split('^_^')
              console.log(arr[arr.length-2]);
              info.innerText = arr[arr.length-2];
            }
        }


      </script>
</body>
</html>