《學(xué)習(xí)使用外部模塊》
目標(biāo)
建立一個(gè) lesson2 項(xiàng)目另绩,在其中編寫代碼儒陨。
當(dāng)在瀏覽器中訪問(wèn) http://localhost:3000/?q=alsotang
時(shí)花嘶,輸出 alsotang
的 md5 值,即 bdd5e57b5c0040f9dc23d430846e68a3
蹦漠。
挑戰(zhàn)
訪問(wèn) http://localhost:3000/?q=alsotang
時(shí)椭员,輸出 alsotang
的 sha1 值,即 e3c766d71667567e18f77869c65cd62f6a1b9ab9
笛园。
知識(shí)點(diǎn)
- 學(xué)習(xí) req.query 的用法
- 學(xué)習(xí)建立 package.json 來(lái)管理 Node.js 項(xiàng)目隘击。
課程內(nèi)容
臥槽,不寫 package.json 就寫項(xiàng)目我覺(jué)得好不爽啊研铆,所以這個(gè) lesson2 我就得跟大家介紹一下 package.json 這個(gè)文件的用法了埋同。
簡(jiǎn)單說(shuō)來(lái)呢,這個(gè) package.json 文件就是定義了項(xiàng)目的各種元信息蚜印,包括項(xiàng)目的名稱莺禁,git repo 的地址留量,作者等等窄赋。最重要的是,其中定義了我們項(xiàng)目的依賴楼熄,這樣這個(gè)項(xiàng)目在部署時(shí)忆绰,我們就不必將 node_modules
目錄也上傳到服務(wù)器,服務(wù)器在拿到我們的項(xiàng)目時(shí)可岂,只需要執(zhí)行 npm install
错敢,則 npm 會(huì)自動(dòng)讀取 package.json 中的依賴并安裝在項(xiàng)目的 node_modules
下面,然后程序就可以在服務(wù)器上跑起來(lái)了缕粹。
里面的示例代碼都會(huì)帶上一份 package.json稚茅,大家可以去看看它的大概樣子。
我們來(lái)新建一個(gè) lesson2 項(xiàng)目平斩,并生成一份它的 package.json亚享。
$ mkdir lesson2 && cd lesson2
$ npm init
OK,這時(shí)會(huì)要求我們輸入一些信息绘面,亂填就好了欺税,反正這個(gè)地方也不用填依賴關(guān)系。
npm init
這個(gè)命令的作用就是幫我們互動(dòng)式地生成一份最簡(jiǎn)單的 package.json 文件揭璃,init
是 initialize
的意思晚凿,初始化。
當(dāng)亂填信息完畢之后瘦馍,我們的目錄下就會(huì)有個(gè) package.json 文件了歼秽。
這時(shí)我們來(lái)安裝依賴,這次的應(yīng)用情组,我們依賴 express
和 utility
兩個(gè)模塊燥筷。
$ npm install express utility --save
這次的安裝命令與上節(jié)課的命令有兩點(diǎn)不同扛吞,一是沒(méi)有指定 registry,沒(méi)有指定的情況下荆责,默認(rèn)從 npm 官方安裝滥比,上次我們是從淘寶的源安裝的。二是多了個(gè) --save
參數(shù)做院,這個(gè)參數(shù)的作用盲泛,就是會(huì)在你安裝依賴的同時(shí),自動(dòng)把這些依賴寫入 package.json键耕。命令執(zhí)行完成之后寺滚,查看 package.json,會(huì)發(fā)現(xiàn)多了一個(gè) dependencies
字段屈雄,如下圖:
[圖片上傳失敗...(image-520e71-1584695367557)]
這時(shí)查看 node_modules
目錄村视,會(huì)發(fā)現(xiàn)有兩個(gè)文件夾,分別是 express 和 utility
我們開(kāi)始寫應(yīng)用層的代碼酒奶,建立一個(gè) app.js
文件蚁孔,復(fù)制以下代碼進(jìn)去:
// 引入依賴
var express = require('express');
var utility = require('utility');
// 建立 express 實(shí)例
var app = express();
app.get('/', function (req, res) {
// 從 req.query 中取出我們的 q 參數(shù)。
// 如果是 post 傳來(lái)的 body 數(shù)據(jù)惋嚎,則是在 req.body 里面杠氢,不過(guò) express 默認(rèn)不處理 body 中的信息,需要引入 https://github.com/expressjs/body-parser 這個(gè)中間件才會(huì)處理另伍,這個(gè)后面會(huì)講到鼻百。
// 如果分不清什么是 query,什么是 body 的話摆尝,那就需要補(bǔ)一下 http 的知識(shí)了
var q = req.query.q;
// 調(diào)用 utility.md5 方法温艇,得到 md5 之后的值
// 之所以使用 utility 這個(gè)庫(kù)來(lái)生成 md5 值,其實(shí)只是習(xí)慣問(wèn)題堕汞。每個(gè)人都有自己習(xí)慣的技術(shù)堆棧勺爱,
// 我剛?cè)肼毎⒗锏臅r(shí)候跟著蘇千和樸靈混,所以也混到了不少他們的技術(shù)堆棧臼朗,僅此而已邻寿。
// utility 的 github 地址:https://github.com/node-modules/utility
// 里面定義了很多常用且比較雜的輔助方法,可以去看看
var md5Value = utility.md5(q);
res.send(md5Value);
});
app.listen(3000, function (req, res) {
console.log('app is running at port 3000');
});
OK视哑,運(yùn)行我們的程序
$ node app.js
訪問(wèn) http://localhost:3000/?q=alsotang
绣否,完成。
題外話
如果直接訪問(wèn) http://localhost:3000/
會(huì)拋錯(cuò)
可以看到挡毅,這個(gè)錯(cuò)誤是從 crypto.js
中拋出的蒜撮。
這是因?yàn)椋?dāng)我們不傳入 q
參數(shù)時(shí),req.query.q
取到的值是 undefined
段磨,utility.md5
直接使用了這個(gè)空值取逾,導(dǎo)致下層的 crypto
拋錯(cuò)。