首秀 Express 框架

文章目錄

    • 框架特性
    • express的使用
        • 初始化項目:
        • 下載框架模塊:
        • 測試代碼:
        • 總結以上代碼:
    • 請求處理的中間件
        • 概念:
        • 中間件——app.use
        • 基本用法:
        • next的用法
    • app.use中間件的應用
        • 路由的保護
        • 網站維護公告
        • 自定義404(當用戶輸入與路由不匹配網址時)
    • 錯誤處理中間件
        • 同步錯誤處理
          • 總結上面代碼:
        • 異步錯誤
        • 在回調函數中使用next
    • 寫在最后

框架特性

  1. 提供了方便簡潔的路由定義方式
  2. 獲取HTTP請求參數進行了簡化處理
  3. 對模板引擎支持程度高,方便渲染動態HTML
  4. 提供了中間件機制有效控制HTTP請求
  5. 擁有大量第三方中間件對功能進行擴展

express的使用

初始化項目:

npm init -y

下載框架模塊:

npm i express

測試代碼:

const express = require('express')
const app = express()
app.get('/', (req, res) => {// res.send('你好,Express!')//輸出文本res.send({name:'zss'})//輸出json格式對象
})
app.listen(3000, () => {console.log('Server is running at http://127.0.0.1:3000')
})

總結以上代碼:

  • 引入express框架模塊
  • send 方法相較于 nodejs 原生的 end 方法更加強大 不同設置相應有的 content-tye
  • 此方法會自動根據返回的數據設置相應的響應頭

請求處理的中間件

  • 中間件就是以對方法,可以接受客戶端發來的請求,可以對請求作出響應,
  • 也可以將請求繼續交給下一 個中間件繼續處理
  • 登錄就可以使用中間件進行攔截處理

在這里插入圖片描述

概念:

  • 中間件主要由兩部分組成:中間件方法以及請求處理函數
  • 中間件方法由express提供,負責攔截請求,請求處理函數由開發人員提供,負責處理請求
  • 其實路由就是中間件
app.get('/', (req, res) => {res.send('<h1>hello,express</h1>') // 輸出html文本})//匹配以get方式請求的/路由

中間件——app.use

這里以 app.use 中間件為例,講解中間件的用法

  1. app.use 匹配所有請求方式和請求路徑,可以直接傳入請求處理函數
  2. app.use 第一個參數可以傳入請求地址,代表無論什么請求方式,只要請求的是這個地址就接收這 個請求

基本用法:

const express = require('express')
const app = express()
app.use((req, res) => {res.send('你不錯!')
})
app.get('/', (req, res) => {res.send('我是主頁')
})
app.get('/new', (req, res) => {res.send('我是添加')
})
app.listen(3000, () => {console.log('Server is running at http://127.0.0.1:3000')
})
  • app.use會接收所有傳遞方式中的所有路由 導致后面的路由不會繼續匹配
    在這里插入圖片描述
    在這里插入圖片描述

next的用法

默認情況下,如果前面的路由已經匹配上,如果后面還有中間件,則不會執行,需要使用 next ,才會 向后執行
在這里插入圖片描述
在這里插入圖片描述

app.use中間件的應用

路由的保護

客戶端在訪問需要登錄的頁面時,可以先使用中間件判斷用戶登錄狀態,用戶如果未登 錄,則攔截請求,直接響應,禁止用戶訪問需要登錄的頁面

  1. 如果用戶未登錄
    在這里插入圖片描述
    在這里插入圖片描述
  2. 如果用戶已經登錄
    在這里插入圖片描述
    在這里插入圖片描述

網站維護公告

在所有路由的最上面定義接收所有請求的中間件,直接為客戶端作出響應,網站正 在維護中
在這里插入圖片描述
在這里插入圖片描述

自定義404(當用戶輸入與路由不匹配網址時)

const express = require('express')
const app = express()app.get('/', (req, res) => {res.send('我是主頁')
})
app.get('/new', (req, res) => {res.send('我是添加')
})//當用戶訪問地址與以上路由均不匹配時 進入下面的路由 因為下面會匹配任何路由
app.use((req, res, next) => {res.status(404).send('你訪問的地址不存在')
})app.listen(3000, () => {console.log('Server is running at http://127.0.0.1:3000')
})

在這里插入圖片描述

錯誤處理中間件

程序中有兩類錯誤

  1. 代碼錯誤,這個在開發調試階段就可以解決掉
  2. 運行時錯誤:程序運行時才可能出現的錯誤,如讀取的文件不存在,連接數據庫時數據庫服務沒有 啟動,這類錯誤的發生與我們的代碼沒有關系

同步錯誤處理

同步錯誤發生后,錯誤處理能夠自動捕捉
下面手動的制造一個錯誤并拋出,錯誤處理能夠獲取錯誤信息

在這里插入圖片描述
在這里插入圖片描述

總結上面代碼:

不僅僅局限于手動拋出的錯誤 錯誤中間件才能夠捕獲 還包括同步中的調用未定義的方法 含有語法錯誤的對象 解析json字符串的錯誤

異步錯誤

異步錯誤發生后,錯誤處理中間件無法自動捕捉:使用next執行錯誤處理

例如:讀取不存在的文件錯誤
在這里插入圖片描述

在回調函數中使用next

在這里插入圖片描述
在這里插入圖片描述

寫在最后

?原創不易,還希望各位大佬支持一下\textcolor{blue}{原創不易,還希望各位大佬支持一下}

👍 點贊,你的認可是我創作的動力!\textcolor{green}{點贊,你的認可是我創作的動力!}

?? 收藏,你的青睞是我努力的方向!\textcolor{green}{收藏,你的青睞是我努力的方向!}

?? 評論,你的意見是我進步的財富!\textcolor{green}{評論,你的意見是我進步的財富!}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/248508.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/248508.shtml
英文地址,請注明出處:http://en.pswp.cn/news/248508.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

云原生技能樹測評

前言 利用午休后的10多分鐘時間&#xff0c;看了看APP的技能樹板塊&#xff0c;簡單的提出幾個看法&#xff01; 答題過程 可以設置為闖關類型&#xff0c;答對一道后可以進入下一關&#xff0c;或者是一個章節為一關&#xff0c;讓大家一直有一種期待 回答錯誤數量 可以…

原型和閉包

原型和閉包 一切皆對象 一切皆對象&#xff08;類型值除外&#xff09; undefined, number, string, boolean屬于簡單的值類型 函數、數組、對象、new Number(10)都是對象。他們都是引用類型 Null是基本數據類型&#xff0c;不是引用數據類型 基本數據類型的值就是它本身的值&a…

python 排序算法

冒泡排序&#xff1a; 1 #coding:utf-82 3 比較相鄰的元素&#xff0c;每一趟交換后&#xff0c;最后的元素是最大的。4 第一次比較n-1次&#xff0c;第二次比較n-2次。。。第n-1次比較1次5 進行n-1次冒泡次數6 最優時間復雜度O(n),最壞時間復雜度O(n^2)7 8 9 def bubble_sort…

獎勵 CSDN 社區的領軍人物

設計動機 領軍人物榜單在這里&#xff1a;https://blog.csdn.net/rank/list/role CSDN 是中國 IT 人士學習、成長、成功的平臺&#xff0c; 這個平臺有很多博主&#xff0c; 博主寫的很多優秀文章獲得了粉絲。 那么&#xff0c; 博主獲得粉絲之后&#xff0c; 博主以粉絲為榮…

一文教會你何為重繪、回流?

文章目錄css圖層圖層創建的條件重繪(Repaint)回流觸發重繪的屬性觸發回流的屬性常見的觸發回流的操作優化方案requestAnimationFrame----請求動畫幀寫在最后學習目標&#xff1a; 了解前端Dom代碼、css樣式、js邏輯代碼到瀏覽器展現過程了解什么是圖層了解重繪與回流了解前端層…

mockjs中的方法(三)

1&#xff09;Mock.mock()&#xff1b; Mock.mock( url, type, template, function(options) ); 其中 url 是定義我們要請求的 url 地址&#xff0c;以便于我們請求的時候 mock 去進行攔截&#xff0c;知道我們要去請求那個值&#xff1b;但是它也是可選的&#xff0c;而且格式…

js函數、js對象的這些點你真的懂嗎?

本篇學習目標 ?了解函數&#xff08;高級&#xff09;原型原型鏈概念\textcolor{green}{了解函數&#xff08;高級&#xff09;原型原型鏈概念}了解函數&#xff08;高級&#xff09;原型原型鏈概念 ?掌握函數作用域\textcolor{green}{掌握函數作用域}掌握函數作用域 ?掌握…

前端處理跨域的幾種方式

什么是跨域&#xff1f; 跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源&#xff0c;這里跨域是廣義的。 廣義的跨域&#xff1a; 1、資源跳轉&#xff1a;A鏈接、重定向、表單提交 2、資源嵌入&#xff1a; <link>、<script>、<img>、<frame&g…

程序員必知的緩存套圖

文章目錄1. 線程與進程1.1 進程:1.2. 線程:1.3. 關系2. 瀏覽器內核模塊組成4. 事件循環機制5. 緩存5.1. 緩存理解5.2. 緩存分類5.3. 緩存使用示意圖5.4. 緩存中的header參數1. 線程與進程 1.1 進程: 進程是計算機中的程序關于某數據集合上的一次運行活動&#xff0c;是系統進…

安裝webpack及使用

前言 你是否也是只會運用框架中集成好的Webpack配置呢&#xff1f;你明白每一項的意義么&#xff1f;你懂多少Webpack的個性化配置項呢&#xff1f;本篇文章為你講解Webpack中的各種配置項參數及作用&#xff01; 文章目錄了解Webpack相關開啟項目編譯打包應用使用webpack配置…

Python基礎-os模塊 sys模塊

sys模塊 與操作系統交互的一個接口 文件夾相關 os.makedirs(dirname1/dirname2) 可生成多層遞歸目錄os.removedirs(dirname1) 若目錄為空&#xff0c;則刪除&#xff0c;并遞歸到上一級目錄&#xff0c;如若也為空&#xff0c;則刪除&#xff0c;依此類推os.mkdir(dirnam…

php單例型(singleton pattern)

搞定&#xff0c;吃飯 <?php /* The purpose of singleton pattern is to restrict instantiation of class to a single object. It is implemented by creating a method within the class that creates a new instance of that class if one does not exist. If an obje…

開啟關閉各種服務

開啟&關閉 Mac版 查找被占用的8080端口&#xff0c;根據pid殺掉進程 查找8080端口 losf -i:8080 根據pid殺掉進程 kill -9 pid iMac:~ acui$ lsof -i:8080 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME java 62948 ting 93u IPv6 0x6697d6…

助你提高效率的幾個Vue指令

前言 很多使用Vue的同學往往最容易忽略的指令&#xff0c;由于在這里考慮到很多初學甚至還沒有開始接觸Vue的同學呢&#xff0c;在介紹v-clos之前呢就先以大家都熟知的v-model編寫小demo v-model 相信大家對v-model并不陌生&#xff0c;簡單來講他就是用于在表單控件以及組建…

掌握Mock擺脫后端同學的束縛

文章目錄前言Mock概述mock.js安裝Mock規范Mock的使用總結前言 當下采用前后端分離模式開發Web應用已經成為氣候&#xff0c;在開發階段有一個不成文的規定則是 項目開發后端先行 但是作為前端開發工程師的我們&#xff0c;難道在搭建完頁面后只能等待后端的接口么&#xff1f;…

戶外鞋簡介

. 單論品牌&#xff08;主要以登山鞋及徙步鞋為主&#xff09;&#xff1a; 高級品牌&#xff1a;SCARPA、ASOLO、MONTRAIL、ZAMBERLAN、vasque、Lowa、La Sportiva 價格都較高&#xff0c;單價都在千元以上&#xff0c;品質一流&#xff0c;做工精細。 中檔品牌&#xff1a;Tr…

Vue技能樹上線啦

前言 前端現在越來越多樣化&#xff0c;語言眾多&#xff0c;大家使用的框架也比較雜&#xff0c;在廣泛的前端技術棧面前我唯愛Vue&#xff08;僅代表個人觀點勿噴小伙伴們&#xff09;可能很多人覺得我是因為簡單&#xff0c;其實并不然&#xff0c;我嘗試過很多框架&#x…

ES6的新特性(8)——數組的擴展

數組的擴展 擴展運算符 含義 擴展運算符&#xff08;spread&#xff09;是三個點&#xff08;...&#xff09;。它好比 rest 參數的逆運算&#xff0c;將一個數組轉為用逗號分隔的參數序列。 console.log(...[1, 2, 3]) // 1 2 3console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5[…

《SpringMVC從入門到放肆》一、概述

一、SpringMVC概述 ViewServiceDaoDBSpring MVCinterfaceinterfaceMysqlimplsimplsSpringMVC也叫Spring web mvc&#xff0c;屬于表現層框架。SpringMVC是Spring框架的一部分&#xff0c;是在Spring3.0后發布的。 二、第一個SpringMVC程序功能描述&#xff1a;  用戶提交一個…

手握流量密碼,萬粉不是夢

前言 可能大家來到CSDN的目的初衷都是不一樣的&#xff0c;像我注冊CSDN的時候完全是為了解決自己項目中的各種問題&#xff0c;能夠有一個為我提供正確答案、正確解決方案的一個平臺&#xff0c;簡單的了解后我選擇CSDN&#xff0c;直到成為現在的創作者也說明我的選擇是對的…