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

我們繼續看到怎么來撰寫包的說明檔案，就是把包的作用以及用法，注意事項說明清楚即可

## 安裝 ```
npm i mybag-huang
```
## 匯入 ```js
const mybag = require('mybag-huang')
```
## 格式化時間
```js
const time = mybag.dateFormat(new Date())
``` ## 轉義html代碼中的特殊字符 ```js
 mybag.getHtmlCode('<h2>我是一個大溫柔"嘻嘻"ss&</h2>')
 ```
 ## 轉義html代碼中的正常字符  ```js
 mybag.getHtml('&lt;h2&gt;我是一個大溫柔&quot;嘻嘻&quot;ss&amp;&lt;/h2&gt;')
```
## 開源協議 ISC 3.4 發布包 首先注冊npm賬號，然后登陸 賬號是在終端上登錄：npm login 然后到所處的包的 目錄下 npm pbulish既可以發布在npm網站上，但是要注意一下，需要切回到官方的服務器才能夠發布成功， 洗掉已發布的包npm unpublish 包名 --force 只能洗掉發布后72小時內的包，洗掉后二十四小時內不可再發布相同的包 4. 模塊加載機制 我們的模塊都是優先從快取當中來加載的，當我們匯入過后就會第一時間加載在快取中，所以匯入相同的檔案不管你匯入多少次，都是加載的第一個檔案， 內置模塊的加載機制 內置模塊加載的優先級最高，比如說內置模塊和我們的自定義模塊如果名字一樣，那么匯入的時候是認為這是一個內置模塊的， 自定義模塊的加載機制 require里面的檔案必須以./或者../開頭不然就會被當為內置或者第三方模塊， 如果說省略了擴展名，那么node會依次開始查找js、json、node的檔案擴展名都沒有找到就會報錯， 第三方模塊的加載機制 require不是內置模塊也不是,/開頭那么就會從當前目錄的modules檔案夾里面開始照這個第三方模塊而且沒找到的話會繼續往上一級找，直到找到根目錄為止， 當你把目錄作為require的路徑時，會首先去找package里面的main如果沒有指定，就會加載當前目錄下的index.js都沒有就會報錯，   5. express 5.1 首先什么叫做express 他和http內置模塊相同，專門創建web服務器的 5.2 基本使用 1.安裝 npm i express 2.創建web服務器 ①匯入express ②創建服務器 const app = express（） ③diaoyong app.listen(埠號，回呼函式) 3. 監聽get、post app.get/post（url，回呼函式）

// 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一樣

 

 

 

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/458134.html

標籤：JavaScript

上一篇：Vue快速入門（二）

下一篇：Node.js基礎入門第八天