|
#### 包（文件夾） * 多個(gè)文件，有效的被組織與管理的一個(gè)單位 * 留一個(gè)入口 * __包就是一個(gè):文件夾__ #### npm|| yarn * 自己先有一個(gè)包描述文件（__package.json__) * 創(chuàng)建一個(gè)包描述文件 `npm init [-y]` * 會(huì)根據(jù)當(dāng)前的文件夾來(lái)自動(dòng)生成包名（__不允許中文，不允許大寫(xiě)英文字母__) * 默認(rèn)生成```npm init [-y]``` * 下載一個(gè)包 `npm install art-template jquery@1.5.1 --save` - 記錄依賴`--save` * 根據(jù)package.json文件中的`dependencies`屬性恢復(fù)依賴 - 恢復(fù)包 `npm install` 簡(jiǎn)單: ```npm i ``` * 卸載一個(gè)包 `npm uninstall jquery@1.5.1 --save` * 簡(jiǎn)寫(xiě)```npm un jquery@1.5.1 --S` * 下載簡(jiǎn)單些:```npm i 包名``` * __小結(jié):以上簡(jiǎn)寫(xiě): uninstall -> un ,install -> i , --save -> -S * 查看包的信息 - `npm info jquery` * 查看包的信息中的某個(gè)字段(版本)(掌握) - `npm info jquery versions` * 查看包的文檔 - `npm docs jquery` * 安裝全局命令行工具 - `npm install -g http-server` * 卸載全局命令行工具 - `npm uninstall -g http-server` * 查看全局包的下載路徑 - `npm root -g`
包的區(qū)別
http核心模塊， 參考博客；https://www.cnblogs.com/fsg6/p/14499743.htmlhttp超文本傳輸協(xié)議#### 主體對(duì)象（核心對(duì)象http) * 服務(wù)器對(duì)象 ```http.createServer();``` * 客戶端對(duì)象```http.request({host:'www.baidu.com'});``` * 請(qǐng)求報(bào)文對(duì)象(對(duì)于服務(wù)器來(lái)說(shuō)，是可讀) req * 響應(yīng)報(bào)文對(duì)象(對(duì)于服務(wù)器來(lái)說(shuō)，是可寫(xiě)) res #### 狀態(tài)碼分類 * 1 開(kāi)頭，正在進(jìn)行中 * 2開(kāi)頭，完成 * 3開(kāi)頭 ，重定向 * 4開(kāi)頭 ， 客戶端異常 * 5開(kāi)頭， 服務(wù)器異常 #### 創(chuàng)建服務(wù)器步驟 * 1:引入http核心對(duì)象 * 2:利用http核心對(duì)象的.createServer(callback); 創(chuàng)建服務(wù)器對(duì)象 * 3:使用服務(wù)器對(duì)象.listen(端口,ip地址) 開(kāi)啟服務(wù)器 * 4:callback(req,res) 根據(jù)請(qǐng)求處理響應(yīng) #### 請(qǐng)求報(bào)文對(duì)象(只讀) * 請(qǐng)求首行中的url `req.url ` * 請(qǐng)求首行中的請(qǐng)求方式 `req.method` * 請(qǐng)求頭中的數(shù)據(jù)`req.headers` 是一個(gè)對(duì)象 * 頭信息中，也可以作為與服務(wù)器交互的一種途徑 #### 響應(yīng)對(duì)象 * 響應(yīng)首行 `res.writeHead(狀態(tài)碼)` * 寫(xiě)響應(yīng)頭 * 一次性寫(xiě)回頭信息 * `res.writeHead(200,headers)` * 多次設(shè)置頭信息 * `res.setHeader(key,value);` * 寫(xiě)響應(yīng)體 * 一次性寫(xiě)回響應(yīng)體 * `res.end();` * 多次寫(xiě)回響應(yīng)體 * `res.write();` #### 請(qǐng)求與響應(yīng) * 頭行體 * content-type是對(duì)請(qǐng)求或者響應(yīng)體數(shù)據(jù)，做出的說(shuō)明 #### 響應(yīng)體數(shù)據(jù) * res.write('字符串'||讀出文件的二進(jìn)制數(shù)據(jù)) * res.end('字符串'||讀出文件的二進(jìn)制數(shù)) server.js const http = require('http'); const fs = require('fs'); // 設(shè)計(jì)兩個(gè)接口， / 返回index.html // /test 只用write 不用end => 默認(rèn)來(lái)講 頁(yè)面會(huì)一直轉(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') { // 告知客戶端，可以一點(diǎn)一點(diǎn)的顯示，流式寫(xiě)入 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">點(diǎn)我發(fā)</button> <script type="text/javascript"> var info = document.querySelector('#info'); document.querySelector('#btn').onclick = function () { // 發(fā)起ajax請(qǐng)求 var xhr = new XMLHttpRequest(); xhr.open('get','/test'); xhr.send(); // 處理響應(yīng) xhr.onreadystatechange = function () { // readyState = 3 的時(shí)候是響應(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>
|
|
|
