• <strike id="6sogq"><s id="6sogq"></s></strike>
  • <strike id="6sogq"></strike>

    千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

    400-811-9990
    手機站
    千鋒教育

    千鋒學習站 | 隨時隨地免費學

    千鋒教育

    掃一掃進入千鋒手機站

    領(lǐng)取全套視頻
    千鋒教育

    關(guān)注千鋒學習站小程序
    隨時隨地免費學習課程

    上海
    • 北京
    • 鄭州
    • 武漢
    • 成都
    • 西安
    • 沈陽
    • 廣州
    • 南京
    • 深圳
    • 大連
    • 青島
    • 杭州
    • 重慶
    當前位置:成都千鋒IT培訓  >  技術(shù)干貨  >  JavaScript全解析——express

    JavaScript全解析——express

    來源:千鋒教育
    發(fā)布人:gxy
    時間: 2023-05-12 15:52:00

      express 的基本使用

    express 的基本使用

      ●express 是什么?

      ○是一個 node 的第三方開發(fā)框架

      ■把啟動服務(wù)器包括操作的一系列內(nèi)容進行的完整的封裝

      ■在使用之前, 需要下載第三方

      ■指令: npm install express

      1.基本搭建

     // 0. 下載: npm install express

      // 0. 導入

      const express = express();

      // 1. 創(chuàng)建服務(wù)器

      const server = express();

      // 2. 給服務(wù)器配置監(jiān)聽端口號

      server.listen(8080, () => {

      console.log("服務(wù)器啟動成功");

      });

         2.配置靜態(tài)資源

      a.之前:

      i.約定:

      1.所有靜態(tài)資源以 /static 開頭

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

      ii.組裝:

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

      2.按照后綴去添加二級目錄

      3.按照文件名去查找內(nèi)容

      iii.例子: /static/index.html

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

      b.現(xiàn)在:

      i.約定:

      1.所有靜態(tài)資源以 /static 開頭

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

      3.要求: 在 /static 以后的內(nèi)容需要按照 二級路徑的正確方式書寫

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

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

      c.語法:

      i. express.static('開放的靜態(tài)目錄地址')

      ii.server.use('訪問這個地址的時候', 去到開放的靜態(tài)目錄地址)// 0. 下載: npm install express

     // 0. 導入

      // 1. 創(chuàng)建服務(wù)器

      // 1.1 配置靜態(tài)資源

      server.use("/static", express.static("./client/"));

      // 2. 給服務(wù)器配置監(jiān)聽端口號

          3.配置接口服務(wù)器

    // 0. 下載: npm install express

      // 0. 導入

      // 1. 創(chuàng)建服務(wù)器

      // 1.1 配置靜態(tài)資源

      // 1.2 配置服務(wù)器接口

      server.get("/goods/list", (req, res) => {

      /**

      * req(request): 本次請求的相關(guān)信息

      * res(response): 本次響應(yīng)的相關(guān)信息

      *

      * req.query: 對 GET 請求體請求參數(shù)的解析

      * 如果有參數(shù), req.query 就是 {a:xxx, b:yyy}

      * 如果沒有參數(shù), 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 請求成功, 但是還沒有解析請求體, 參數(shù)暫時不能帶回",

      });

      });

      // 2. 給服務(wù)器配置監(jiān)聽端口號

          express 的路由

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

      ●目的就是為了幫助我們簡化 服務(wù)器index.js 內(nèi)部的代碼量

      ●服務(wù)器根目錄/router/goods.js

     // 專門存放于 goods 相關(guān)的路由表

      const express = require("express");

      // 創(chuàng)建一個路由表

      const Router = express.Router();

      // 向表上添加內(nèi)容, 添加內(nèi)容的語法, 向服務(wù)上添加的語法一樣

      Router.get("/info", (req, res) => {

      res.send({

      code: 1,

      message: "您請求 /goods/list 成功",

      });

      });

      // 導出當前路由表

      module.exports.goodsRouter = Router

          ●服務(wù)器根目錄/router/index.js

     const express = require("express");

      // 0. 導入處理函數(shù)

      const { goodsRouter } = require("./goods");

      // 創(chuàng)建路由總表

      const Router = express.Router();

      // 向路由總表上添加路由分表

      Router.use("/goods", goodsRouter);

      // 導出路由總表

      module.exports = Router

      復(fù)制代碼

      ●服務(wù)器根目錄/index.js

      // 0. 下載并導入 express

      const express = require("express");

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

      // 1. 創(chuàng)建服務(wù)器

      const server = express();

      // 1.1 配置靜態(tài)資源

      server.use("/static", express.static("./client"));

      // 1.2 配置接口

      server.use("/api", router);

      // 2. 給服務(wù)器監(jiān)聽端口號

      server.listen(8080, () => {

      console.log("服務(wù)啟動成功, 端口號8080~~~");

      });

          express 的中間件

      ●概念

      ○在任意兩個環(huán)節(jié)之間添加的一個環(huán)節(jié), 就叫做中間件

      ●分類

      ○全局中間件

      ■語法: server.use(以什么開頭, 函數(shù))

      ●server: 創(chuàng)建的服務(wù)器, 一個變量而已

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

      ●函數(shù): 你這個中間件需要做什么事

    // 0. 下載并導入第三方模塊

      const express = require("express");

      // 0. 引入路由總表

      const router = require("./router");

      // 0. 引入內(nèi)置的 fs 模塊

      const fs = require("fs");

      // 1. 開啟服務(wù)器

      const app = express();

      // 1.1 開啟靜態(tài)資源

      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. 給服務(wù)添加監(jiān)聽

      app.listen(8080, () => console.log("服務(wù)器開啟成功, 端口號8080~"));

         ○路由級中間件

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

      ●router: 創(chuàng)建的路由表, 一個變量而已

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

      ●函數(shù): 你這個中間件需要做什么事

     // 路由分表

      const router = require("express").Router();

      // 導入 cart 中間件

      const cartMidd = require("../middleware/cart");

      // 添加路由級中間件

      router.use(function (req, res, next) {

      /**

      * 1. 驗證 token 存在并且沒有過期才可以

      * 規(guī)定: 請求頭內(nèi)必須有 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;

         ○請求級中間件

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

     // 路由分表

      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. 判斷參數(shù)是否傳遞

      const { current, pagesize } = req.query;

      if (!current || !pagesize) {

      res.send({

      code: 0,

      msg: "參數(shù)current或者參數(shù)pagesize沒有傳遞",

      });

      return;

      }

      if (isNaN(current) || isNaN(pagesize)) {

      res.send({

      code: 0,

      msg: "參數(shù)current或者參數(shù)pagesize 不是 數(shù)字類型的, 請?zhí)幚?,

      });

      return;

      }

      next();

      };

      module.exports.cartlist = cartlist

          ○錯誤中間件

      ■本質(zhì)上就是一個全局中間件, 只不過處理的內(nèi)容

     // 0. 下載并導入第三方模塊

      const express = require("express");

      // 0. 引入路由總表

      const router = require("./router");

      // 0. 引入內(nèi)置的 fs 模塊

      const fs = require("fs");

      // 1. 開啟服務(wù)器

      const app = express();

      // 1.1 開啟靜態(tài)資源

      app.use("/static", express.static("./client/"));

      // 1.2 開啟路由表

      app.use("/api", router);

      // 1.3 注冊全局錯誤中間件(必須接收四個參數(shù))

      app.use(function (err, req, res, next) {

      if (err === 2) {

      res.send({

      code: 0,

      msg: "參數(shù)current或者參數(shù)pagesize沒有傳遞",

      });

      } else if (err === 3) {

      res.send({

      code: 0,

      msg: "參數(shù)current或者參數(shù)pagesize 不是 數(shù)字類型的, 請?zhí)幚?,

      });

      } else if (err === 4) {

      res.send({

      code: 0,

      msg: "沒有 token, 不能進行 該操作",

      });

      }

      });

      // 2. 給服務(wù)添加監(jiān)聽

      app.listen(8080, () => console.log("服務(wù)器開啟成功, 端口號8080~"));

      /*

      * 4. 錯誤中間件

      * 為了統(tǒng)一進行錯誤處理

      *

      * 例子:

      * 接口參數(shù)少

      * 請求 /goods/list 參數(shù)少

      * 請求 /cart/list 參數(shù)少

      * 請求 /news/list 參數(shù)少

      * res.send({code: 0, msg: '參數(shù)數(shù)量不對'})

      * 接口參數(shù)格式不對

      * 請求 /users/login 格式不對

      * 請求 /goods/list 格式不對

      * res.send({code: 0, msg: '參數(shù)格式不對})

      *

      * 思考:

      * 正確的時候, 直接返回結(jié)果給前端

      * 只要出現(xiàn)了錯誤, 統(tǒng)一回到全局路徑上

      *

      * 操作:

      * 當你在任何一個環(huán)節(jié)的中間件內(nèi)

      * => 調(diào)用 next() 的時候, 表示的都是去到下一個環(huán)節(jié)

      * => 調(diào)用 next(參數(shù)) 的時候, 表示去到的都是全局錯誤環(huán)節(jié)

      * 參數(shù):

      * 參數(shù)的傳遞需要自己和自己約定一些暗號

      * 2: 表示 接口參數(shù)少

      * 3: 表示 接口參數(shù)格式不對

      * 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);

      });

     

    聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。

    猜你喜歡LIKE

    JavaScript全解析——express

    2023-05-12

    java權(quán)限框架有哪些

    2023-04-26

    簡單談?wù)勎⑿判〕绦?/h4> 2023-04-20

    最新文章NEW

    volatile底層實現(xiàn)原理

    2023-05-04

    java怎么判斷一個數(shù)據(jù)是什么類型

    2023-04-27

    xml解析器

    2023-04-21

    相關(guān)推薦HOT

    更多>>

    快速通道 更多>>

    最新開班信息 更多>>

    網(wǎng)友熱搜 更多>>