node.js - 包、express

首先，要先在這裡分享一下我的喜悅，從昨天開始其實一直都在喜悅當中的，我收到了我的第一份offer，這感覺不擺了，比第一桶金都還舒服，雖然我還沒收到第一桶金哈哈，不過offer都得了應該也快了。

今天的內容有點小多，容我慢慢道來

1.

首先我們看到包的管理配置文件以及下包慢的問題，在我們多人協作下，是不是要經常把自己的代碼共用出去通過git、github之類的，那麼我應該發現一個問題，一個項目文件，有30M大小，而代碼只有區區2M左右的記憶體，剩餘的都給誰了？都給了第三方包也就是node_modules裡面的內容，所以為了輕量化，我們在共用代碼的時候肯定是不能帶node_modules這個文件夾的，把她扔進.gitignore文件裡面忽略掉，那我們沒有了第三方包的依賴怎麼執行代碼呢，第三方包肯定還是要的，沒有怎麼能行，我們有一個package.json的文件在這裡面存放了安裝的所有的第三方包的內容。

1.1

快速創建packagejson

只需要在項目的文件中執行node init -y

要註意一下，只能在英文目錄下去創建這個文件，這裡的英文是當前目錄為英文，也就是上一級為中文都沒的關係，然後就是當我們運行npm i安裝第三方包的時候就會把信息給到這個json文件中，所以我們在安裝前要先創建json文件。

1.2

dependencies節點

這是這個json裡面的節點名，記錄了npm安裝了哪些包

1.3

既然我們沒有包，又知道了所有需要的包名，那麼怎麼來一次性安裝所有的包？

npm install或者i不添加包名即可安裝所有的包

1.4

卸載包

npm uninstall 包名沒有簡寫

1.5

devDependencies節點

這個節點也是保存的安裝的包，有些包是我們在項目開發過程中才會用到，而有些包使我們開發上線都會用到的包，我們一般把前者放在devDependencies節點裡面，把後者放在dependencies節點裡面。

當然他也有特定的安裝方式

npm i 包名 -D

2.

然後我們看到下包會慢的一些原因，是因為我們的npm的伺服器是國外的，通過海底光纜傳過來的數據當然慢，所以這個時候我們需要把npm的鏡像伺服器換掉，通過npm config set registry可以查看當前npm的伺服器

再通過npm config set registry='淘寶或者騰訊的鏡像地址'就可以設置過來了。

之所以粗略帶過，是因為我們有簡便方法，通過npm先安裝一個nrm全局可用工具，全局就需要在包名後面添加一個-g

然後nrm ls 可查看當前可設置的伺服器地址，再用nrm use 加這個伺服器名字即可使用。

3.

包的分類

我們把包分為兩大類，一個是項目包，就是被安裝到node_modules裡面的包，這裡面又有開發依賴包放在devDependencies節點裡面的和核心依賴包開發上線都用得到的，

二個是全局包，放在c盤目錄下麵的，安裝的時候通過-g參數安裝的。

註意一下：只有工具性質的包才有全局安裝的必要，因為他們提供了終端的一些命令

3.1

i5ting_toc

可以把md文件轉換為html的小工具，註意是工具，這個其實挺方便的，前面一直用的Markdownpad2。

怎麼來使用呢？

i5ting_toc  -f  md文件路徑 -o表示瀏覽器打開

3.2

一個規範包的結構必須要包含三個東西

①每個包必須是單獨目錄

②包的頂級目錄下必須包含package.json

③packag.json必須包含name、version、main三個屬性

接下來我們就來做一個 屬於自己的包：要實現的功能就為：可以格式化日期、可以對html中的字元轉義為特殊字元又轉義回來。

首先要初始化包的基本結構，創建一個包的文件夾，裡面放三個文件，index.js、package.json、README.md分別表示包入口文件、包的配置文件、包說明文檔。

接下來在初始化package.json裡面的內容，｛name：使我們包的名字到時候npm網站上搜索也是這個名字，所以使用前先去網站看一下有沒有重名的，

version：版本號，

main：入口文件，說明瞭我們的導入就為這個文件要註意一下，如果說外界導入的時候只是導入了一個目錄，並不是這個js文件，那麼node就會去找這個目錄下的package.json裡面的main再去找入口文件,

description:詳細介紹，

keywords：關鍵字是一個數組，

license：開原許可協議｝

接下來就是在index.js中定義三個功能的函數了 ，這裡有一個很重要的概念，模塊化，我們的格式化時間是不是需要一個函數，還要補零是不是又要一個函數，那麼這兩個函數可以放在一個單獨的js文件裡面，我們的html轉為特殊字元、特殊字元返回html也需要一個單獨的js文件，完成過後需要在各自的文件把函數放進exports裡面，然後index.js導入兩個js文件他此時得到的是一個放有這幾個函數的對象，我們需要通過es6語法中的擴展運演算法，給她解構出來，就只有逗號分隔的函數了，這裡有點繞可以配合代碼好好理解下。

// 1.格式化時間
function dateFormat(time) {
    const date = new Date(time)
    let y = date.getFullYear()
    let m = getZero(date.getMonth() + 1)
    let d = getZero(date.getDate())
    let h = getZero(date.getHours())
    let mm = getZero(date.getMinutes())
    let s = getZero(date.getSeconds())
    return `${y}-${m}-${d} ${h}:${mm}:${s}`
}

// 2.補零函數
function getZero(n) {
    return n < 10 ? '0' + n : n
}
//  6.1共用成員
module.exports = {
    dateFormat
}

// 4.html轉義函數
function getHtmlCode(htmlStr) {
    return htmlStr.replace(/<|>|"|&/g, match => {
        switch(match) {
            case '<':
                return '&lt;'
            case '>':
                return '&gt;'
            case '"':
                return '&quot;'
            case '&':
                return '&amp;'
        }
    })
}
// 5.還原html
function getHtml(htmlStr) {
        return htmlStr.replace(/&lt;|&gt;|&quot;|&amp;/g, match => {
            switch(match) {
                case '&lt;':
                    return '<'
                case '&gt;':
                    return '>'
                case '&quot;':
                    return '"'
                case '&amp;':
                    return '&'
            }
        })
}

// 6.2共用成員
module.exports = {
    getHtmlCode,
    getHtml
}

index.js
// 6.3 導入
const date = require('./src/dateFormat')
const strEscape = require('./src/strEscape')

// 3.共用成員
module.exports = {
   ...date,
   ...strEscape
}

test.js

const bag = require('./index')
console.log(bag.dateFormat(new Date()));
console.log(bag.getHtmlCode('<h2>我是一個大溫柔"嘻嘻"ss&</h2>'));
console.log(bag.getHtml('&lt;h2&gt;我是一個大溫柔&quot;嘻嘻&quot;ss&amp;&lt;/h2&gt;'));

 3.3

我們繼續看到怎麼來編寫包的說明文檔，就是把包的作用以及用法，註意事項說明清楚即可

// 1.導入
const express = require('express')
// 2.創建伺服器
const app = express()

// 4.監聽客戶端的get和post請求並響應
app.get('/index.html ', (req, res) => {
    res.send({
        "name" : "zs",
        "sex" : "男",
        "age" : 19
    })
})
app.post('/index', (req, res) => res.send('post成功'))
// 3.開啟伺服器
app.listen(80, () => {
    console.log(
        'express server running at http://127.0.0.1'
    )
})

4

獲取url中的參數

通過req.query獲得一個對象保存的參數

const express = require('express')
const app = express()
app.get('/', (req, res) => {
    res.send(req.query)
})
app.listen(80, () => {
    console.log('express server running at http://127.0.0.1');
})

獲取url當中的動態參數

req.params

const express = require('express')
const app = express()
app.get('/:id', (req, res) => {
    console.log(req.params);
})
app.listen(80, () => {
    console.log('express server running at http://127.0.0.1');
})

5.3

托管靜態資源

express.static（）這個方法可以創建靜態伺服器的時候，將文件目錄下的css、圖片、js等共用出去對外開放。

app.use(express.static('文件夾'))要註意一點對誰開放那麼這個目錄是不會出現在url路徑當中的

const express = require('express')
const app = express()

app.use(express.static('./clock'))


app.listen(80, () => console.log('express server running at http://127.0.0.1'))

 如果要托管多個目錄就把代碼執行多次即可，但是要註意如果訪問的文件名有幾個目錄都有的話，會按照順序執行前面的。

掛在路徑首碼

const express = require('express')
const app = express()

app.use('/abc',express.static('./clock'))


app.listen(80, () => console.log('express server running at http://127.0.0.1'))

 5.4

今天最後的內容更新一個很實用的小工具，nodemon直接全局安裝，他的作用就是我們平時改了一下代碼，比如伺服器必須重新斷開重新連接，才會看到效果就會很麻煩，而有了這個工具後直接執行nodemon 文件名他就會檢測到我們的代碼修改情況自動去重新啟動，就跟我們html的live一樣