本文為千鋒資深前端教學老師帶來的【JavaScript全決議】系列，文章內含豐富的代碼案例及配圖，從0到1講解JavaScript相關知識點，致力于教會每一個人學會JS！
文末有本文重點總結，可以收藏慢慢看~ 更多技術類內容，主頁關注一波！
目錄- express 的基本使用
- express 是什么?
- 1.基本搭建
- 2.配置靜態資源
- 之前約定:
- 組裝:
- 3.配置介面服務器
- 之前約定:
- express 的路由
- express 的中間件
- 概念
- 分類
- 全域中間件
- 路由級中間件
- 請求級中間件
- 錯誤中間件
- token 的使用
- 1.加密
- 2.解密
- 分類
- 概念
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);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/553774.html
標籤：JavaScript
下一篇：返回列表