Node.js 實例與基礎 · 前端知識備忘錄

# 章節導航 [TOC] # Node.js-API * `path.basename()`取得一個路徑的最后一部分文件名 * `path.normalize()`幫助修正路徑 * `path.join()`用于路徑拼接（參數為多個路徑參數） * `path.resolve()`將一個相對路徑解析為絕對路徑 * `{basename, dirname, extname}` * `basename` 完整名 * `dirname` 上級路徑名 * `extname` 后綴名 * `{parse, format}` * `parse`用于解析當前路徑為一個json格式的數據 * `format`相當于格式化json數據為一個字符串說明：`__dirname`、`__filename`總是返回文件的絕對路徑 ? `process.cwd()`總是返回node命令所在文件夾 #### Buffer 三個要點： * Buffer用于處理二進制數據流 * 實例類似整數數組，大小固定 * C++代碼在V8堆外分配物理內存 Buffer常用的方法 * `byteLength`統計buffer所占字節數 * `isBuffer`用來判斷目標數據是不是一個Buffer * `concat`合并連接Buffer * `from`將目標數據轉換為Buffer * `toString`用來轉換Buffer為字符串 #### events * `eventEmitter.on('eventName',callback())`用于注冊監聽器 * `eventEmitter.emit('eventName')`用于觸發事件 ``` const EventEmitter = require('events'); class CustomEvent extends EventEmitter { } const ce = new CustomEvent(); ce.on('eventName',callback); ce.emit('eventName','your msg to eventEmit',....); //有一個通用參數就叫error ce.on('error',fn); //Example ce.on('error',(err, item) => { console.log(err); console.log(item); }); ce.emit('error', new Error('出錯了'), Date().now); ``` 針對事件只需要響應一次： ~~~ ce.once('test', ()=> { console.log(test); }); 復制代碼 ~~~ 針對事件需要移除的話： ~~~ ce.removeListener('eventName',fn); //or ce.removeAllListeners('test'); 復制代碼 ~~~ ## fs 首先需要注意的就是Node.js的設計模型就是錯誤優先的模式 ``` fs.readFile('fileUrl','utf8',(err,data) => { if(err) throw err; console.log(data) }) ``` stat( ) 查看文件詳細信息 ``` const fs = require('fs'); fs.stat('filerUrl',(err,data) => { if(err){ throw err; } console.log(data) }) ``` rename( ) 更改文件名 ``` fs.rename('./text.tex','hahah.ttx'); ``` unlink( ) 刪除文件 ``` fs.unlink('fileName',err => err); ``` readdir( ) 讀取文件夾 mkdir（）創建文件夾 rmdir( ) 刪除文件夾 watch（）監視文件或目錄變化 ``` fs.watch('fileUrl', { recursive:true //是否監視子文件夾 }, (eventType, fileName) => { console.log(eventType, fileName); }) ``` * `readStream()`讀取流 ~~~ const rs = fs.createReadStream('urlPath'); rs.pipe(process.stdout);//導出文件到控制臺復制代碼 ~~~ * `writeStream()`寫入流 * `pipe()`管道，導通流文件 ~~~ const ws = fscreateWriteStream('urlPath'); ws.write('some content'); ws.end(); ws.on('finish',()=>{ console.log('done!!!'); }); ~~~ ## 靜態資源服務器 #### `http`模塊 ~~~ const http = require('http'); const chalk = require('chalk'); const hostname = '127.0.0.1'; const port = '3000'; const server = http.createServe((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Hello World'); }); server.listen(port, hostname, () => { const addr = `Server running at http://${hostname}:${port}/`; console.log(`${chalk.green(addr)}`); }) ~~~ * `supervisor`監視文件模塊 * `hotnode`熱啟動模塊 # 額外項目案例 ~~~ // 1. 引入 http 模塊 var http = require("http"); // 2. 用 http 模塊創建服務 /** * req 獲取 url 信息 (request) * res 瀏覽器返回響應信息 (response) */ http.createServer(function (req, res) { // 設置 HTTP 頭部，狀態碼是 200，文件類型是 html，字符集是 utf8 res.writeHead(200, { "Content-Type": "text/html;charset=UTF-8" }); // 往頁面打印值 res.write('<h1 style="text-align:center">Hello NodeJS</h1>'); // 結束響應 res.end(); }).listen(3000); // 監聽的端口復制代碼 ~~~ ?那么，上面代碼，我們要怎么用呢？ ?**首先**，將上面的代碼復制粘貼到 `01_http.js` 中。 ?**然后**，啟動 VS Code 終端：`Ctrl + ~`。 ?**接著**，輸入 `node 01_http.js` 并回車。 ?**最后**，打開 `localhost:3000`： 1. **首先**，我們需要先開啟仙人模式。哦，不是，是 HTTP 模式。我們都知道，像 PHP 這類老牌子的后端語言，需要 Apache 或者 Nginx 開啟 HTTP 服務。然而我們的 Node 不需要： ~~~ var http = require("http"); 復制代碼 ~~~ 2. **然后**，開啟 HTTP 服務，并設置開啟的端口： ~~~ /** * req 獲取 url 信息 (request) * res 瀏覽器返回響應信息 (response) */ http.createServer(function (req, res) { // ... 步驟 3 代碼 }).listen(3000); // 監聽的端口復制代碼 ~~~ 3. **接著**，我們設置 HTTP 頭部，并往頁面打印值，最后結束響應： ~~~ // 設置 HTTP 頭部，狀態碼是 200，文件類型是 html，字符集是 utf8 res.writeHead(200, { "Content-Type": "text/html;charset=UTF-8" }); // 往頁面打印值 res.write('<h1 style="text-align:center">Hello NodeJS</h1>'); // 結束響應 res.end(); ~~~ ~~~ // 1. 引入 url 模塊 var url = require("url"); // 2. 引入 http 模塊 var http = require("http"); // 3. 用 http 模塊創建服務 /** * req 獲取 url 信息 (request) * res 瀏覽器返回響應信息 (response) */ http.createServer(function (req, res) { // 4. 獲取服務器請求 /** * 訪問地址是：http://localhost:3000/?userName=jsliang&userAge=23 * 如果你執行 console.log(req.url)，它將執行兩次，分別返回下面的信息： * / ?userName=jsliang&userAge=23 * / /favicon.ico * 這里為了防止重復執行，所以排除 req.url == /favicon.ico 的情況 */ if(req.url != "/favicon.ico") { // 5. 使用 url 的 parse 方法 /** * parse 方法需要兩個參數： * 第一個參數是地址 * 第二個參數是 true 的話表示把 get 傳值轉換成對象 */ var result = url.parse(req.url, true); console.log(result); /** * Url { * protocol: null, * slashes: null, * auth: null, * host: null, * port: null, * hostname: null, * hash: null, * search: '?userName=jsliang&userAge=23', * query: { userName: 'jsliang', userAge: '23' }, * pathname: '/', * path: '/?userName=jsliang&userAge=23', * href: '/?userName=jsliang&userAge=23' } */ console.log(result.query.userName); // jsliang console.log(result.query.userAge); // 23 } // 設置 HTTP 頭部，狀態碼是 200，文件類型是 html，字符集是 utf8 res.writeHead(200, { "Content-Type": "text/html;charset=UTF-8" }); // 往頁面打印值 res.write('<h1 style="text-align:center">Hello NodeJS</h1>'); // 結束響應 res.end(); }).listen(3000); 復制代碼 ~~~ ?在上面的代碼中： ?**首先**，我們引入該章節的主角 `url` 模塊： ~~~ // 1. 引入 url 模塊 var url = require("url"); 復制代碼 ~~~ ?**然后**，我們引入 `http` 模塊： ~~~ // 2. 引入 http 模塊 var http = require("http"); 復制代碼 ~~~ ?**接著**，我們創建 `http` 模塊，因為 `url` 的監聽，需要 `http` 模塊的開啟： ~~~ // 3. 用 http 模塊創建服務 /** * req 獲取 url 信息 (request) * res 瀏覽器返回響應信息 (response) */ http.createServer(function (req, res) { // ... 第 4 步、第 5 步代碼 // 設置 HTTP 頭部，狀態碼是 200，文件類型是 html，字符集是 utf8 res.writeHead(200, { "Content-Type": "text/html;charset=UTF-8" }); // 往頁面打印值 res.write('<h1 style="text-align:center">Hello NodeJS</h1>'); // 結束響應 res.end(); }).listen(3000); ~~~ ## URL模塊 URL 模塊是什么呢？我們在控制臺（終端）開啟 Node 模式，并打印出`url`來看一下：好家伙，它有`Url`、`parse`、`resolve`、`resolveObject`、`format`、`URL`、`URLSearchParams`、`domainToASCII`、`domainToUnicode`這么多模塊。那么，這些模塊都有什么用呢？ ### 引入代碼url.js ``` // 1. 引入 url 模塊 var url = require("url"); // 2. 引入 http 模塊 var http = require("http"); // 3. 用 http 模塊創建服務 /** * req 獲取 url 信息 (request) * res 瀏覽器返回響應信息 (response) */ http.createServer(function (req, res) { // 4. 獲取服務器請求 /** * 訪問地址是：http://localhost:3000/?userName=jsliang&userAge=23 * 如果你執行 console.log(req.url)，它將執行兩次，分別返回下面的信息： * / ?userName=jsliang&userAge=23 * / /favicon.ico * 這里為了防止重復執行，所以排除 req.url == /favicon.ico 的情況 */ if(req.url != "/favicon.ico") { // 5. 使用 url 的 parse 方法 /** * parse 方法需要兩個參數： * 第一個參數是地址 * 第二個參數是 true 的話表示把 get 傳值轉換成對象 */ var result = url.parse(req.url, true); console.log(result); /** * Url { * protocol: null, * slashes: null, * auth: null, * host: null, * port: null, * hostname: null, * hash: null, * search: '?userName=jsliang&userAge=23', * query: { userName: 'jsliang', userAge: '23' }, * pathname: '/', * path: '/?userName=jsliang&userAge=23', * href: '/?userName=jsliang&userAge=23' } */ console.log(result.query.userName); // jsliang console.log(result.query.userAge); // 23 } // 設置 HTTP 頭部，狀態碼是 200，文件類型是 html，字符集是 utf8 res.writeHead(200, { "Content-Type": "text/html;charset=UTF-8" }); // 往頁面打印值 res.write('<h1 style="text-align:center">Hello NodeJS</h1>'); // 結束響應 res.end(); }).listen(3000); ``` 在上面的代碼中： ?**首先**，我們引入該章節的主角 `url` 模塊： ~~~ // 1. 引入 url 模塊 var url = require("url"); 復制代碼 ~~~ ?**然后**，我們引入 `http` 模塊： ~~~ // 2. 引入 http 模塊 var http = require("http"); 復制代碼 ~~~ ?**接著**，我們創建 `http` 模塊，因為 `url` 的監聽，需要 `http` 模塊的開啟： ~~~ // 3. 用 http 模塊創建服務 /** * req 獲取 url 信息 (request) * res 瀏覽器返回響應信息 (response) */ http.createServer(function (req, res) { // ... 第 4 步、第 5 步代碼 // 設置 HTTP 頭部，狀態碼是 200，文件類型是 html，字符集是 utf8 res.writeHead(200, { "Content-Type": "text/html;charset=UTF-8" }); // 往頁面打印值 res.write('<h1 style="text-align:center">Hello NodeJS</h1>'); // 結束響應 res.end(); }).listen(3000); ~~~ ``` // 4. 獲取服務器請求 /** * 訪問地址是：http://localhost:3000/?userName=jsliang&userAge=23 * 如果你執行 console.log(req.url)，它將執行兩次，分別返回下面的信息： * / ?userName=jsliang&userAge=23 * / /favicon.ico * 這里為了防止重復執行，所以排除 req.url == /favicon.ico 的情況 */ if(req.url != "/favicon.ico") { // 5. 使用 url 的 parse 方法 /** * parse 方法需要兩個參數： * 第一個參數是地址 * 第二個參數是 true 的話表示把 get 傳值轉換成對象 */ var result = url.parse(req.url, true); console.log(result); /** * Url { * protocol: null, * slashes: null, * auth: null, * host: null, * port: null, * hostname: null, * hash: null, * search: '?userName=jsliang&userAge=23', * query: { userName: 'jsliang', userAge: '23' }, * pathname: '/', * path: '/?userName=jsliang&userAge=23', * href: '/?userName=jsliang&userAge=23' } */ console.log(result.query.userName); // jsliang console.log(result.query.userAge); // 23 } ``` 從中，我們可以看出，我們可以通過 `query`，獲取到我們想要的路徑字段。 ?當然，上面只講解了 `parse` 的用法，我們可以將上面代碼中 `if` 語句里面的代碼全部清空。然后，輸入下面的內容，去學習 `url` 模塊更多的內容： 1. url 模塊所有內容： ~~~ console.log(url); /** * Console： { Url: [Function: Url], parse: [Function: urlParse], // 獲取地址信息 resolve: [Function: urlResolve], // 追加或者替換地址 resolveObject: [Function: urlResolveObject], format: [Function: urlFormat], // 逆向 parse，根據地址信息獲取原 url 信息 URL: [Function: URL], URLSearchParams: [Function: URLSearchParams], domainToASCII: [Function: domainToASCII], domainToUnicode: [Function: domainToUnicode] } */ 復制代碼 ~~~ 2. parse 如何使用 ~~~ console.log(url.parse("http://www.baidu.com")); /** * Console： Url { protocol: 'http:', slashes: true, auth: null, host: 'www.baidu.com', port: null, hostname: 'www.baidu.com', hash: null, search: null, query: null, pathname: '/', path: '/', href: 'http://www.baidu.com/' } */ 復制代碼 ~~~ 3. parse 帶參數： ~~~ console.log(url.parse("http://www.baidu.com/new?name=zhangsan")); /** * Console： Url { protocol: 'http:', slashes: true, auth: null, host: 'www.baidu.com', port: null, hostname: 'www.baidu.com', hash: null, search: '?name=zhangsan', query: 'name=zhangsan', pathname: '/new', path: '/new?name=zhangsan', href: 'http://www.baidu.com/new?name=zhangsan' } */ 復制代碼 ~~~ 4. `format` 的使用： ~~~ console.log(url.format({ protocol: 'http:', slashes: true, auth: null, host: 'www.baidu.com', port: null, hostname: 'www.baidu.com', hash: null, search: '?name=zhangsan', query: 'name=zhangsan', pathname: '/new', path: '/new?name=zhangsan', href: 'http://www.baidu.com/new?name=zhangsan' })) // Console： // http://www.baidu.com/new?name=zhangsan 復制代碼 ~~~ 5. `resolve` 的使用： ~~~ console.log(url.resolve("http://www.baidu.com/123", "222")); // Console： // http://www.baidu.com/222 ~~~ ## NPM * `npm -v`：查看 npm 版本。 * `npm list`：查看當前目錄下都安裝了哪些 npm 包。 * `npm info 模塊`：查看該模塊的版本及內容。 * `npm i 模塊@版本號`：安裝該模塊的指定版本。 ?在平時使用 npm 安裝包的過程中，你可能需要知道一些 npm 基本知識： * `i`/`install`：安裝。使用 `install` 或者它的簡寫 `i`，都表明你想要下載這個包。 * `uninstall`：卸載。如果你發現這個模塊你已經不使用了，那么可以通過 `uninstall` 卸載它。 * `g`：全局安裝。表明這個包將安裝到你的計算機中，你可以在計算機任何一個位置使用它。 * `--save`/`-S`：通過該種方式安裝的包的名稱及版本號會出現在 `package.json` 中的 `dependencies` 中。`dependencies` 是需要發布在生成環境的。例如：`ElementUI` 是部署后還需要的，所以通過 `-S` 形式來安裝。 * `--save-dev`/`-D`：通過該種方式安裝的包的名稱及版本號會出現在 `package.json` 中的 `devDependencies` 中。`devDependencies` 只在開發環境使用。例如：`gulp` 只是用來壓縮代碼、打包的工具，程序運行時并不需要，所以通過 `-D` 形式來安裝。 ?例子： * `cnpm i webpack-cli -D` * `npm install element-ui -S` ?那么，這么多的 npm 包，我們通過什么管理呢？ ?答案是 `package.json`。 ?如果我們需要創建 `package.json`，那么我們只需要在指定的包管理目錄（例如 `node_modules`）中通過以下命名進行生成： * `npm init`：按步驟創建 `package.json`。 * `npm init --yes`：快速創建 `package.json` ?當然，因為國內網絡環境的原因，有些時候通過 npm 下載包，可能會很慢或者直接卡斷，這時候就要安裝淘寶的 npm 鏡像：cnpm * `npm install -g cnpm --registry=https://registry.npm.taobao.org` ## fs文件管理 * `fs.stat` 檢測是文件還是目錄 * `fs.mkdir` 創建目錄 * `fs.writeFile` 創建寫入文件 * `fs.appendFile` 追加文件 * `fs.readFile` 讀取文件 * `fs.readdir` 讀取目錄 * `fs.rename` 重命名 * `fs.rmdir` 刪除目錄 * `fs.unlink` 刪除文件我們嘗試通過 `fs.mkdir` 創建目錄： > 05\_fs.js ~~~ // 2. fs.mkdir let fs = require('fs'); /** * 接收參數 * path - 將創建的目錄路徑 * mode - 目錄權限（讀寫權限），默認 0777 * callback - 回調，傳遞異常參數 err */ fs.mkdir('css', (err) => { if(err) { console.log(err); return false; } else { console.log("創建目錄成功！"); // Console：創建目錄成功！ } }) 復制代碼 ~~~ ?通過 `node 05_fs.js`，我們發現目錄中多了一個 `css` 文件夾。 ?**那么**，有創建就有刪除，創建的目錄如何刪除呢？這里講解下 `fs.rmdir`： > 05\_fs.js ~~~ // 8. fs.rmdir let fs = require('fs'); /** * 接收參數 * path - 將創建的目錄路徑 * mode - 目錄權限（讀寫權限），默認 0777 * callback - 回調，傳遞異常參數 err */ fs.rmdir('css', (err) => { if(err) { console.log(err); return false; } else { console.log("創建目錄成功！"); // Console：創建目錄成功！ } }) 復制代碼 ~~~ ?通過 `node 05_fs.js`，我們發現目錄中的 `css` 文件夾被刪除了。 ?**接著**，我們通過 `fs.writeFile` 來創建寫入文件： > 05\_fs.js ~~~ // 3. fs.writeFile let fs = require('fs'); /** * filename (String) 文件名稱 * data (String | Buffer) 將要寫入的內容，可以是字符串或者 buffer 數據。 * · encoding (String) 可選。默認 'utf-8'，當 data 是 buffer 時，該值應該為 ignored。 * · mode (Number) 文件讀寫權限，默認 438。 * · flag (String) 默認值 'w'。 * callback { Function } 回調，傳遞一個異常參數 err。 */ fs.writeFile('index.js', 'Hello jsliang', (err) => { if(err) { console.log(err); return false; } else { console.log('寫入成功！'); } }) 復制代碼 ~~~ ?值得注意的是，這樣的寫入，是清空原文件中的所有數據，然后添加 `Hello jsliang` 這句話。即：存在即覆蓋，不存在即創建。 ?有創建就有刪除，感興趣的可以使用 `fs.unlink` 進行文件的刪除，再次不做過多講解。 ?**既然**，上面的是覆蓋文件，那么有沒有追加文件呢？有的，使用 `fs.appendFile` 吧： > 05\_fs.js ~~~ // 4. fs.appendFile let fs = require('fs'); fs.appendFile('index.js', '這段文本是要追加的內容', (err) => { if(err) { console.log(err); return false; } else { console.log("追加成功"); } }) 復制代碼 ~~~ ?這樣，我們就成功往里面追加了一段話，從而使 `index.js` 變成了： > index.js ~~~ Hello jsliang這段文本是要追加的內容復制代碼 ~~~ ?**在上面**，我們已經做了：新增、修改、刪除操作。那么小伙伴一定很熟悉下一步驟是做什么了： * `fs.readFile` 讀取文件 * `fs.readdir` 讀取目錄 > 05\_fs.js ~~~ let fs = require('fs'); // 5. fs.readFile fs.readFile('index.js', (err, data) => { if(err) { console.log(err); return false; } else { console.log("讀取文件成功！"); console.log(data); // Console： // 讀取文件成功！ // <Buffer 48 65 6c 6c 6f 20 6a 73 6c 69 61 6e 67 e8 bf 99 e6 ae b5 e6 96 87 e6 9c ac e6 98 af e8 a6 81 e8 bf bd e5 8a a0 e7 9a 84 e5 86 85 e5 ae b9> } }) // 6. fs.readdir 讀取目錄 fs.readdir('node_modules', (err, data) => { if(err) { console.log(err); return false; } else { console.log("讀取目錄成功！"); console.log(data); // Console： // 讀取目錄成功！ // [ '03_tool-multiply.js', 'jsliang-module' ] } }) 復制代碼 ~~~ ### rename重命名 ~~~ let fs = require('fs'); // 7. fs.rename 重命名 fs.rename('index.js', 'jsliang.js', (err) => { if(err) { console.log(err); return false; } else { console.log("重命名成功！"); } }) 復制代碼 ~~~ ?當然，如果 `fs.rename` 還有更勁爆的功能：剪切 > _fs.js ~~~ let fs = require('fs'); // 7. fs.rename 重命名 fs.rename('jsliang.js', 'node_modules/jsliang.js', (err) => { if(err) { console.log(err); return false; } else { console.log("剪切成功！"); } }) ~~~