node筆記3——express框架

1. 使用 nodemon 工具來自動重啟web服務(wù)器

  • nodemon的作用：能夠實時監(jiān)聽當前項目中，文件的變化；只要監(jiān)聽到了文件的變化，則 nodemon 工具，會自動重新啟動 web 服務(wù)器，從而使最新的代碼生效；免去了程序員手動重啟服務(wù)器的困擾；
  • 如何安裝：運行 npm i nodemon -g 全局安裝即可；
  • 如何使用：
    • 之前使用 node 要執(zhí)行的文件路徑 來運行 Node.js 代碼；
    • 現(xiàn)在使用 nodemon 要執(zhí)行的文件路徑 來運行 Node.js 代碼；

2. Node 中開發(fā)web項目的框架 - express

定義（什么是Express）：一個快速的網(wǎng)站開發(fā)框架，封裝了原生的http模塊，用起來更方便；API更人性化

express 框架的特點

  1. 基于Node.js平臺之上，進一步封裝了 http 模塊，從而提供了更好用，更友好的 API
  2. 使用Express創(chuàng)建網(wǎng)站，比使用原生的http模塊更加方便；
  3. Express 并沒有覆蓋 原生 http 模塊中的方法，而是基于 原生方法之上，做了更友好的封裝，讓用戶體驗更好

express 框架的安裝和基本使用

  1. 安裝：運行 npm i express -S 即可安裝
  2. 創(chuàng)建基本的 express 服務(wù)器：
    • 導入 express 第三方模塊；
    • 創(chuàng)建服務(wù)器的實例：調(diào)用 const app = express() 方法；
    • 通過 app.get() 或 app.post() 方法，來監(jiān)聽客戶端的 get 或 post 請求，具體語法：
      • 監(jiān)聽 GET 請求：app.get('請求地址', (req, res) => { 處理函數(shù) })
      • 監(jiān)聽 POST 請求： app.post('請求地址', (req, res) => { 處理函數(shù) })
    • 啟動 express 服務(wù)器：通過 app.listen(端口, IP地址, 啟動成功后的回調(diào)函數(shù)) 啟動服務(wù)器；

express 中的快捷方法

  1. res.send()
    1. 支持 發(fā)送 字符串 Content-Type: text/html;
    2. 支持 發(fā)送 對象 或 數(shù)組 Content-Type: application/json
    3. 支持 發(fā)送 Buffer 此時會當作文件下載；
  2. res.sendFile()
    • 用法1：res.sendFile(path.join(__dirname, './view/index.html'))
    • 用法2：res.sendFile('./view/movie.html', { root: __dirname })
    • 注意：res.sendFile() 可以向瀏覽器發(fā)送 靜態(tài)頁面；

使用 express.static() 快速托管靜態(tài)資源

如果我們網(wǎng)站中，有很多靜態(tài)資源需要被外界訪問，此時，使用 res.sendFile 就有點力不從心了;

這時候，express 框架，為我們提供了 express.static('靜態(tài)資源目錄')

來快速托管指定目錄下的所有靜態(tài)資源文件；

  1. 語法1： app.use(express.static('public'));
    • app.use()方法，是專門用來注冊 中間件；
    • express.static 是express的內(nèi)置中間件；
  2. 語法2：app.use('/虛擬目錄', express.static('public'))

為 express 框架配置模板引擎渲染動態(tài)頁面

  1. 安裝 ejs 模板引擎npm i ejs -S
  2. 使用 app.set() 配置默認的模板引擎 app.set('view engine', 'ejs')
  3. 使用 app.set() 配置默認模板頁面的存放路徑 app.set('views', './views')
  4. 使用 res.render() 來渲染模板頁面res.render('index.ejs', { 要渲染的數(shù)據(jù)對象 })，注意，模板頁面的 后綴名，可以省略不寫！

在 express 中配置 art-template

  1. 安裝 兩個包 cnpm i art-template express-art-template -S

  2. 自定義一個模板引擎 app.engine('自定義模板引擎的名稱', 渲染函數(shù))

  3. 將自定義的模板引擎，配置為 express 的默認模板引擎 app.set('view engine', '具體模板引擎的名稱')

  4. 配置 模板頁面得存放路徑 app.set('views', '路徑')

3. 使用 express 框架中提供的路由來分發(fā)請求

  1. 什么是路由：路由就是對應(yīng)關(guān)系；
  2. 什么叫做后端路由：前端請求的URL地址，都要對應(yīng)一個后端的處理函數(shù)，那么 這種URL地址到 處理函數(shù)之間的對應(yīng)關(guān)系，就叫做后端路由；
  3. 在Express中，路由的主要職責 就是 把請求分發(fā)到對應(yīng)的處理函數(shù)中；
  4. 在Express中，如何 定義并使用路由呢？
  // 1. 封裝單獨的 router.js 路由模塊文件
  const express = require('express')
  // 創(chuàng)建路由對象
  const router = express.Router()

  router.get('/', (req, res)=>{})
  router.get('/movie', (req, res)=>{})
  router.get('/about', (req, res)=>{})

  // 導出路由對象
  module.exports = router
  1. express 創(chuàng)建的 app 服務(wù)器，如何使用 路由模塊呢？
  // 導入自己的路由模塊
  const router = require('./router.js')
  // 使用 app.use() 來注冊路由
  app.use(router)

4. Express 框架里 中間件的概念

什么是中間件

定義：中間件就是一個處理函數(shù)；只不過這個函數(shù)比較特殊，包含了三個參數(shù)，分別是 req，res，next

注意：中間件方法中的三個參數(shù)：

  • req：請求對象；
  • res：響應(yīng)對象；
  • next：next()可以被調(diào)用，表示調(diào)用下一個中間件方法；

Express 框架中對中間件的5種分類

  1. 應(yīng)用級別的中間件： 掛載到 app 上的中間件 app.get('URL地址', （req, res, next）=> {})；
  2. 路由級別的中間件： 掛載到 router 對象上的中間件 router.get('url地址', (req, res, next)=>{})
  3. 錯誤級別的中間件： 回調(diào)函數(shù)中，有四個參數(shù) app.use((err, req, res, next)=>{})
  4. 唯一內(nèi)置的中間件： express.static()
  5. 第三方中間件： 非express框架提供的，需要程序員手動安裝才能使用的中間件；body-parser 解析post 表單數(shù)據(jù)

中間件的概念，了解即可，因為實際開發(fā)中，我們都直接使用第三方現(xiàn)成的中間件；

6. 模塊加載機制

優(yōu)先從緩存中加載

  • 當一個模塊初次被 require 的時候，會執(zhí)行模塊中的代碼，當?shù)诙渭虞d相同模塊的時候，會優(yōu)先從緩存中查找，看有沒有這樣的一個模塊！
  • 好處：提高模塊的加載速度；不需要每次都重新執(zhí)行并加載模塊！

核心模塊的加載機制

  • 先查找緩存；如果緩存中沒有，再去加載核心模塊；

用戶模塊的加載機制

  • 先查找緩存；

  • 如果緩存中沒有則嘗試加載用戶模塊；

  • 如果在加載用戶模塊時候省略了后綴名，則：

    首先，嚴格按照指定的名稱去查找
其次，嘗試加載后綴名是 .js 的文件
如果沒有.js的文件，則嘗試加載 .json 結(jié)尾的文件
如果沒有 .json 的文件，則嘗試加載 .node 結(jié)尾的文件
查找規(guī)則：index  ->  index.js   ->   index.json   ->  index.node

第三方模塊的加載機制

  1. 先在項目根目錄中查找node_modules文件夾
  2. 在node_modules文件夾下，查找模塊相關(guān)的文件夾
  3. 在對應(yīng)的文件夾下，查找package.json的文件
  4. 查找package.json文件中的main屬性（指定了模塊的入口文件）
  5. 如果找到了main屬性，同時，main屬性指定的文件路徑存在，那么嘗試加載指定的文件模塊
  6. 加入沒有main屬性，或者main屬性對應(yīng)的文件不存在，或者沒有package.json,那么會依次嘗試加載index.js，index.json,index.node;
  7. 如果沒有index相關(guān)的文件，或者沒有指定模塊對應(yīng)文件夾，或者，當前項目根目錄中沒有node_modules文件夾，則向上一層目錄中查找node_modules，查找規(guī)則同上！
  8. 最后，如果在項目所在磁盤的盤符根目錄中，還找不到對應(yīng)模塊，則報錯：cannot find module ***

9. express中獲取參數(shù)的幾種形式

  1. 獲取 http://127.0.0.1:3001/user?id=10&name=zs 中的查詢參數(shù)：
    • 直接使用 req.query 獲取參數(shù)即可；
    • 注意：URL 地址欄中通過 查詢字符串 傳遞的參數(shù)，express 框架會直接解析，大家只需要使用 req.query 直接獲取 URL 中 查詢字符串的參數(shù)；
  2. 從URL地址中獲取路徑參數(shù)：
    • 假設(shè)后臺的路由是 app.get('/user/:id/:name', (req, res) => {})
    • 假設(shè)客戶端瀏覽器請求的URL地址為：http://127.0.0.1:3001/user/10/zs
    • 直接使用 req.params 可以獲取URL地址中傳遞過來的參數(shù)；
  3. 從post表單中獲取提交的數(shù)據(jù)：
    • 借助于body-parser來解析表單數(shù)據(jù)
    • 安裝：npm i body-parser -S
    • 導入：const bodyParser = require('body-parser')
    • 注冊中間件：app.use(bodyParser.urlencoded({ extended: false }))
    • 使用解析的數(shù)據(jù)： req.body 來訪問解析出來的數(shù)據(jù)

更多文章訪問個人博客：http://www.lfanliu.top

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容