JavaScript全解析——Express框架介紹與入門

来源:https://www.cnblogs.com/qian-fen/archive/2023/05/29/17441180.html
-Advertisement-
Play Games

本文為千鋒資深前端教學老師帶來的【JavaScript全解析】系列，文章內含豐富的代碼案例及配圖，從0到1講解JavaScript相關知識點，致力於教會每一個人學會JS！文末有本文重點總結，可以收藏慢慢看\~ 更多技術類內容，主頁關註一波！ ...


本文為千鋒資深前端教學老師帶來的【JavaScript全解析】系列，文章內含豐富的代碼案例及配圖，從0到1講解JavaScript相關知識點，致力於教會每一個人學會JS！

文末有本文重點總結，可以收藏慢慢看~ 更多技術類內容，主頁關註一波！

目錄

express 的基本使用

express 是什麼?

express是一個node的第三方開發框架

把啟動伺服器包括操作的一系列內容進行的完整的封裝，不過在使用之前, 需要下載第三方

指令: npm install express

1.基本搭建

// 0. 下載: npm install express

// 0. 導入
const express = express();

// 1. 創建伺服器
const server = express();

// 2. 給伺服器配置監聽埠號
server.listen(8080, () => {
    console.log("伺服器啟動成功");
});

2.配置靜態資源

之前約定:

1.所有靜態資源以 /static 開頭

2.按照後面給出的文件名自己去組裝的路徑

組裝:

1.準備了初始目錄 './client/'

2.按照尾碼去添加二級目錄

3.按照文件名去查找內容

例子: /static/index.html

1.自動去 './client/views/index.html'

b.現在:

i.約定:

1.所有靜態資源以 /static 開頭

2.按照 /static 後面的路徑去訪問指定文件

3.要求: 在 /static 以後的內容需要按照 二級路徑的正確方式書寫

a. 假設你需要請求的是 './client/views/index.html' 文件

b.你的請求地址需要書寫 '/static/views/index.html'

c.語法:

i. express.static('開放的靜態目錄地址')
ii.server.use('訪問這個地址的時候', 去到開放的靜態目錄地址)

// 0. 下載: npm install express
// 0. 導入
// 1. 創建伺服器

// 1.1 配置靜態資源
server.use("/static", express.static("./client/"));

// 2. 給伺服器配置監聽埠號

3.配置介面伺服器

// 0. 下載: npm install express
// 0. 導入
// 1. 創建伺服器
// 1.1 配置靜態資源

// 1.2 配置伺服器介面
server.get("/goods/list", (req, res) => {
    /**
     *  req(request): 本次請求的相關信息
     *  res(response): 本次響應的相關信息
     *
     *  req.query: 對 GET 請求體請求參數的解析
     *      如果有參數, req.query 就是 {a:xxx, b:yyy}
     *      如果沒有參數, req.query 就是 {}
     */
    console.log(req.query);
    // res.end(JSON.stringify({code: 1, msg: '成功'}))
    res.send({ code: 1, msg: "成功" });
});

server.post("/users/login", (req, res) => {
    console.log(req.query);
    // 註意! express 不會自動解析 post 請求的 請求體
    res.send({
        code: 1,
        msg: "接收 POST 請求成功, 但是還沒有解析請求體, 參數暫時不能帶回",
    });
});

// 2. 給伺服器配置監聽埠號

express 的路由

express 提供了一個方法能夠讓我們製作一張 "路由表"

目的就是為了幫助我們簡化 伺服器index.js 內部的代碼量

伺服器根目錄/router/goods.js

// 專門存放於 goods 相關的路由表
const express = require("express");

// 創建一個路由表
const Router = express.Router();

// 向表上添加內容, 添加內容的語法, 向服務上添加的語法一樣
Router.get("/info", (req, res) => {
    res.send({
        code: 1,
        message: "您請求 /goods/list 成功",
    });
});

// 導出當前路由表
module.exports.goodsRouter = Router

伺服器根目錄 /router/index.js

// 專門存放於 goods 相關的路由表
const express = require("express");

// 創建一個路由表
const Router = express.Router();

// 向表上添加內容, 添加內容的語法, 向服務上添加的語法一樣
Router.get("/info", (req, res) => {
res.send({
code: 1,
message: "您請求 /goods/list 成功",
});
});

// 導出當前路由表
module.exports.goodsRouter = Router

伺服器根目錄 /index.js

// 0. 下載並導入 express
const express = require("express");

const router = require("./router"); // 相當於 ./router/index.js

// 1. 創建伺服器
const server = express();

// 1.1 配置靜態資源
server.use("/static", express.static("./client"));

// 1.2 配置介面
server.use("/api", router);

// 2. 給伺服器監聽埠號
server.listen(8080, () => {
    console.log("服務啟動成功, 埠號8080~~~");
});

express 的中間件

概念

○在任意兩個環節之間添加的一個環節, 就叫做中間件

分類

全局中間件

■語法: server.use(以什麼開頭, 函數)
●server: 創建的伺服器, 一個變數而已
●以什麼開頭: 可以不寫, 寫的話需要是字元串
●函數: 你這個中間件需要做什麼事

// 0. 下載並導入第三方模塊
const express = require("express");
// 0. 引入路由總表
const router = require("./router");
// 0. 引入內置的 fs 模塊
const fs = require("fs");

// 1. 開啟伺服器
const app = express();

// 1.1 開啟靜態資源
app.use("/static", express.static("./client/"));

// 1.2 添加一個 中間件, 讓所有請求進來的時候, 記錄一下時間與請求地址
app.use(function (req, res, next) {
    fs.appendFile("./index.txt", `${new Date()} --- ${req.url} \n`, () => {});

    next(); // 運行完畢後, 去到下一個中間件
});

// 1.3 開啟路由表
app.use("/api", router);

// 2. 給服務添加監聽
app.listen(8080, () => console.log("伺服器開啟成功, 埠號8080~"));

路由級中間件

■語法: router.use(以什麼開頭, 函數)

●router: 創建的路由表, 一個變數而已

●以什麼開頭: 可以不寫, 寫的話需要是字元串

●函數: 你這個中間件需要做什麼事


// 路由分表
const router = require("express").Router();

// 導入 cart 中間件
const cartMidd = require("../middleware/cart");

// 添加路由級中間件
router.use(function (req, res, next) {
    /**
     *  1. 驗證 token 存在並且沒有過期才可以
     *          規定: 請求頭內必須有 authorization 欄位攜帶 token 信息
     */
    const token = req.headers.authorization;

    if (!token) {
        res.send({
            code: 0,
            msg: "沒有 token, 不能進行 該操作",
        });
    }

    next();
});

router.get("/list", cartMidd.cartlist, (req, res) => {
    res.send({
        code: 1,
        msg: "請求 /cart/list 介面成功",
    });
});

router.get("/add", (req, res) => {
    res.send({
        code: 1,
        msg: "請求 /cart/add 介面成功",
    });
});

module.exports.cartRouter = router;

請求級中間件

■直接在請求路由上, 在路由處理函數之前書寫函數即可


// 路由分表
const router = require("express").Router();
// 導入 cart 中間件
const cartMidd = require("../middleware/cart");

router.get("/list", cartMidd.cartlist, (req, res) => {
    res.send({
        code: 1,
        msg: "請求 /cart/list 介面成功",
    });
});

router.get("/add", (req, res) => {
    res.send({
        code: 1,
        msg: "請求 /cart/add 介面成功",
    });
});

module.exports.cartRouter = router;

// ../middleware/cart.js
const cartlist = (req, res, next) => {
    // 1. 判斷參數是否傳遞
    const { current, pagesize } = req.query;
    if (!current || !pagesize) {
        res.send({
            code: 0,
            msg: "參數current或者參數pagesize沒有傳遞",
        });
        return;
    }
    if (isNaN(current) || isNaN(pagesize)) {
        res.send({
            code: 0,
            msg: "參數current或者參數pagesize 不是 數字類型的, 請處理",
        });
        return;
    }

    next();
};

module.exports.cartlist = cartlist

錯誤中間件

■本質上就是一個全局中間件, 只不過處理的內容

// 0. 下載並導入第三方模塊
const express = require("express");
// 0. 引入路由總表
const router = require("./router");
// 0. 引入內置的 fs 模塊
const fs = require("fs");

// 1. 開啟伺服器
const app = express();

// 1.1 開啟靜態資源
app.use("/static", express.static("./client/"));

// 1.2 開啟路由表
app.use("/api", router);

// 1.3 註冊全局錯誤中間件(必須接收四個參數)
app.use(function (err, req, res, next) {
    if (err === 2) {
        res.send({
            code: 0,
            msg: "參數current或者參數pagesize沒有傳遞",
        });
    } else if (err === 3) {
        res.send({
            code: 0,
            msg: "參數current或者參數pagesize 不是 數字類型的, 請處理",
        });
    } else if (err === 4) {
        res.send({
            code: 0,
            msg: "沒有 token, 不能進行 該操作",
        });
    }
});

// 2. 給服務添加監聽
app.listen(8080, () => console.log("伺服器開啟成功, 埠號8080~"));
/*
 *      4. 錯誤中間件
 *          為了統一進行錯誤處理
 *
 *      例子:
 *          介面參數少
 *              請求 /goods/list 參數少
 *              請求 /cart/list 參數少
 *              請求 /news/list 參數少
 *              res.send({code: 0, msg: '參數數量不對'})
 *          介面參數格式不對
 *              請求 /users/login 格式不對
 *              請求 /goods/list 格式不對
 *              res.send({code: 0, msg: '參數格式不對})
 *
 *      思考:
 *          正確的時候, 直接返回結果給前端
 *          只要出現了錯誤, 統一回到全局路徑上
 *
 *      操作:
 *          當你在任何一個環節的中間件內
 *          => 調用 next() 的時候, 表示的都是去到下一個環節
 *          => 調用 next(參數) 的時候, 表示去到的都是全局錯誤環節
 *      參數:
 *          參數的傳遞需要自己和自己約定一些暗號
 *          2: 表示 介面參數少
 *          3: 表示 介面參數格式不對
 *          4: 表示沒有token
 *          5: XXXX....
 */

token 的使用

●token 的使用分為兩步

○加密

■比如用戶登陸成功後, 將一段信息加密生成一段 token, 然後返回給前端

○解密

■比如用戶需要訪問一些需要登陸後才能訪問的介面, 就可以把登錄時返回的token保存下來

■在訪問這些介面時, 攜帶上token即可

■而我們接收到token後, 需要解密token, 驗證是否為正確的 token 或者 過期的 token

1.加密

/**
 *  使用一個 第三方包   jsonwebtoken
*/
const jwt = require("jsonwebtoken");

/**
 *  1. 加密
 *      語法: jwt.sign(你要存儲的信息, '密鑰', {配置信息})
 */
const info = { id: 1, nickname: "腸旺面" };
const token = jwt.sign(info, "XXX", { expiresIn: 60 });

// console.log(token);
/*
    eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
    eyJpZCI6MSwibmlja25hbWUiOiLogqDml7rpnaLliqDnjKrohJoiLCJpYXQiOjE2NzAxNTYwMDgsImV4cCI6MTY3MDE1NjA2OH0.
    12-87hSrMYmpwXRMuYAbf08G7RDSXM2rEI49jaK5wMw
*/

2.解密

jwt.verify(token, "XXX", (err, data) => {
    if (err) return console.log(err); // JsonWebTokenError: invalid signature
    console.log(data);
});

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 上萬條開心驛站笑話內容ACCESS\EXCEL資料庫
    因為簽於網站笑話不是採用微博型（一句或兩句短篇可以採用250長度的文本型存儲），而是所以文章內容型，所以內容保存的欄位是 Microsoft Access 資料庫里的備註類型。 資料庫內容經過整理，格式比較統一，比如不會有多餘的段落或不整齊的段落；分類比較集中，只有爆笑男女（305）、兒童笑話（59 ...
  • 快速上手kettle(二)小試牛刀
    [TOC](快速上手kettle二 小試牛刀) ### 一 、前言 上一期中大概介紹了下kettle，並已經把kettle下載安裝完了。 這一期我們就來簡單體驗下kettle怎麼進行數據轉換的。 ### 二 、兩個小目標 我們這裡呢就以兩個小案例來體驗下kettle - 將csv文件通過kettle ...
  • 近2萬初中作文範例大全ACCESS\EXCEL資料庫
    這是從互聯網上搜集的各種初中語文作文20000篇，經過完美的格式內容整理，包含大量《中考滿分作文》及《中考作文指導》資料，資料庫按年級和分類可以快速的為初中作文提供最齊全的參考。 年級包含：初中二年級(2377)、初中三年級(1988)、初中一年級(15465)。分類包含：讀後感(778)、話題(1 ...
  • Flutter調優--深入探究MediaQuery引起界面Rebuild的原因及解決辦法
    app界面逐漸複雜時，我們不得不考慮去優化界面性能。本文中介紹的例子在開發中是很常見的，如果不瞭解MediaQuery.of的機制，可能會引起大量使用此方法的界面發生重繪操作，造成頁面卡頓、幀率下降。我們詳細分析了背後的源碼邏輯，介紹瞭解決辦法，希望能給大家的調優工作提供些許幫助。 ...
  • 了不起的互聯網老男孩，在創業路上不掉隊
    “青春如同奔流的江河，一去不回來不及道別”，老男孩這首歌戳中了太多職場中年男人的心酸苦楚，面對經濟下行壓力、互聯網行業變革以及中年職場危機，互聯網人應該如何應對？如何建立和現實叫板的能力？ 有2位在互聯網創業多年的開發者，經歷了從PC互聯網到移動互聯網的發展變遷，踩過不少坑，一路磕磕碰碰走到現在，放 ...
  • 1萬8千條英文笑話內容ACCESS\EXCEL資料庫
    中文版的笑話似乎日益更新，從來不缺少，但是英文版的似乎因為在中國的受眾少從而缺少這方面的展示，而今天獲得的就是近2萬的英文笑話內容，將將之存放到由Microsoft Office Access 2003 創建的資料庫中。截圖下方有顯示“共有記錄數”，截圖包含了表的所有欄位列。該數據提供ACCESS數 ...
  • hybrid探索與實現
    hybrid混合開發是一種離線移動應用開發方式，它結合了Web技術和原生技術，以網頁的形式嵌入到一個原生容器中。 ...
  • 【一步步開發AI運動小程式】九、姿態輔助調試桌面工具折使用
    > 隨著人工智慧技術的不斷發展，阿裡體育等IT大廠，推出的“樂動力”、“天天跳繩”AI運動APP，讓**雲上運動會、線上運動會、健身打卡、AI體育指導**等概念空前火熱。那麼，能否將這些在APP成功應用的場景搬上小程式，分享這些概念的紅利呢？本系列文章就帶您一步一步從零開始開發一個AI運動小程式，本 ...
一周排行
    -Advertisement-
    Play Games
  • GoF之工廠模式
    GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式（靜態工廠模式）1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點：2. 總結:3 ...
  • dotnet C# 簡單的追加文件夾到 ZipArchive 壓縮文件的方法
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • Elasticsearch 系列（六）- ES數據同步和ES集群
    本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說，下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫，因此mysql數據發生改變時，Elasticsearch也必須跟著改變，這個就是Elasticsearch與my ...
  • 自動化測試數據生成：Asp.Net Core單元測試利器AutoFixture詳解
    引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據，今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫，旨在最大程度地減少單元測試中的“安排（Arrange）”階段，以提高 ...
  • .NET Emit 入門教程：第七部分：實戰項目1：將 DbDataReader 轉實體
    經過前面幾個部分學習，相信學過的同學已經能夠掌握 .NET Emit 這種中間語言，並能使得它來編寫一些應用，以提高程式的性能。隨著 IL 指令篇的結束，本系列也已經接近尾聲，在這接近結束的最後，會提供幾個可供直接使用的示例，以供大伙分析或使用在項目中。 ...
  • Windows下綁定線程到指定的CPU核心
    當從不同來源導入Excel數據時，可能存在重覆的記錄。為了確保數據的準確性，通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間，而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟： 1. 首先安裝免費.NET ...
  • mORMot 1.18 第07章 簡單的讀寫操作
    C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式，使程式更加健壯和可靠。 異常處理的基本概念： 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • mORMot 1.18 第06章 概念
    優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解，包括JDK和第三方庫。 我花了很多時間來學習API，尤其是在閱讀了Effective Java 3rd Edition之後 ，Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發，而不是為常見的東西編 ...
  • php 開發規範
    框架 · 使用laravel框架，原因：tp的框架路由和orm沒有laravel好用 · 使用強制路由，方便介面多時，分多版本，分文件夾等操作 介面 · 介面開發註意欄位類型，欄位是int，查詢成功失敗都要返回int（對接java等強類型語言方便） · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 2024 年 4 月 28 日 周日 晴 熱（1253 字）
    正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵，火星子都快出來了。司機跟那同事更熟一些，連我在內一共就三個人，同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了，馬上聽出來了，為那個無辜的企業經辦人辯護，實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責， ...
所有分類