本文為千鋒資深前端教學(xué)老師帶來(lái)的【JavaScript全解析】系列,文章內(nèi)含豐富的代碼案例及配圖,從0到1講解JavaScript相關(guān)知識(shí)點(diǎn),致力于教會(huì)每一個(gè)人學(xué)會(huì)JS!
文末有本文重點(diǎn)總結(jié),可以收藏慢慢看~ 更多技術(shù)類內(nèi)容,主頁(yè)關(guān)注一波!
-
express 的基本使用
- express 是什么?
- 1.基本搭建
-
2.配置靜態(tài)資源
-
之前約定:
- 組裝:
- 3.配置接口服務(wù)器
-
之前約定:
- express 的路由
-
express 的中間件
-
概念
-
分類
- 全局中間件
- 路由級(jí)中間件
- 請(qǐng)求級(jí)中間件
- 錯(cuò)誤中間件
- token 的使用
- 1.加密
- 2.解密
-
分類
-
概念
express 的基本使用
express 是什么?
express是一個(gè)node的第三方開(kāi)發(fā)框架
把啟動(dòng)服務(wù)器包括操作的一系列內(nèi)容進(jìn)行的完整的封裝,不過(guò)在使用之前, 需要下載第三方
指令: npm install express
1.基本搭建
// 0. 下載: npm install express
// 0. 導(dǎo)入
const express = express();
// 1. 創(chuàng)建服務(wù)器
const server = express();
// 2. 給服務(wù)器配置監(jiān)聽(tīng)端口號(hào)
server.listen(8080, () => {
console.log("服務(wù)器啟動(dòng)成功");
});
2.配置靜態(tài)資源
之前約定:
1.所有靜態(tài)資源以 /static 開(kāi)頭
2.按照后面給出的文件名自己去組裝的路徑
組裝:
1.準(zhǔn)備了初始目錄 './client/'
2.按照后綴去添加二級(jí)目錄
3.按照文件名去查找內(nèi)容
例子: /static/index.html
1.自動(dòng)去 './client/views/index.html'
b.現(xiàn)在:
i.約定:
1.所有靜態(tài)資源以 /static 開(kāi)頭
2.按照 /static 后面的路徑去訪問(wèn)指定文件
3.要求: 在 /static 以后的內(nèi)容需要按照 二級(jí)路徑的正確方式書(shū)寫
a. 假設(shè)你需要請(qǐng)求的是 './client/views/index.html' 文件
b.你的請(qǐng)求地址需要書(shū)寫 '/static/views/index.html'
c.語(yǔ)法:
i. express.static('開(kāi)放的靜態(tài)目錄地址')
ii.server.use('訪問(wèn)這個(gè)地址的時(shí)候', 去到開(kāi)放的靜態(tài)目錄地址)
// 0. 下載: npm install express
// 0. 導(dǎo)入
// 1. 創(chuàng)建服務(wù)器
// 1.1 配置靜態(tài)資源
server.use("/static", express.static("./client/"));
// 2. 給服務(wù)器配置監(jiān)聽(tīng)端口號(hào)
3.配置接口服務(wù)器
// 0. 下載: npm install express
// 0. 導(dǎo)入
// 1. 創(chuàng)建服務(wù)器
// 1.1 配置靜態(tài)資源
// 1.2 配置服務(wù)器接口
server.get("/goods/list", (req, res) => {
/**
* req(request): 本次請(qǐng)求的相關(guān)信息
* res(response): 本次響應(yīng)的相關(guān)信息
*
* req.query: 對(duì) GET 請(qǐng)求體請(qǐng)求參數(shù)的解析
* 如果有參數(shù), req.query 就是 {a:xxx, b:yyy}
* 如果沒(méi)有參數(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 不會(huì)自動(dòng)解析 post 請(qǐng)求的 請(qǐng)求體
res.send({
code: 1,
msg: "接收 POST 請(qǐng)求成功, 但是還沒(méi)有解析請(qǐng)求體, 參數(shù)暫時(shí)不能帶回",
});
});
// 2. 給服務(wù)器配置監(jiān)聽(tīng)端口號(hào)
express 的路由
express 提供了一個(gè)方法能夠讓我們制作一張 "路由表"
目的就是為了幫助我們簡(jiǎn)化 服務(wù)器index.js 內(nèi)部的代碼量
服務(wù)器根目錄/router/goods.js
// 專門存放于 goods 相關(guān)的路由表
const express = require("express");
// 創(chuàng)建一個(gè)路由表
const Router = express.Router();
// 向表上添加內(nèi)容, 添加內(nèi)容的語(yǔ)法, 向服務(wù)上添加的語(yǔ)法一樣
Router.get("/info", (req, res) => {
res.send({
code: 1,
message: "您請(qǐng)求 /goods/list 成功",
});
});
// 導(dǎo)出當(dāng)前路由表
module.exports.goodsRouter = Router
服務(wù)器根目錄 /router/index.js
// 專門存放于 goods 相關(guān)的路由表
const express = require("express");
// 創(chuàng)建一個(gè)路由表
const Router = express.Router();
// 向表上添加內(nèi)容, 添加內(nèi)容的語(yǔ)法, 向服務(wù)上添加的語(yǔ)法一樣
Router.get("/info", (req, res) => {
res.send({
code: 1,
message: "您請(qǐng)求 /goods/list 成功",
});
});
// 導(dǎo)出當(dāng)前路由表
module.exports.goodsRouter = Router
服務(wù)器根目錄 /index.js
// 0. 下載并導(dǎo)入 express
const express = require("express");
const router = require("./router"); // 相當(dāng)于 ./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)聽(tīng)端口號(hào)
server.listen(8080, () => {
console.log("服務(wù)啟動(dòng)成功, 端口號(hào)8080~~~");
});
express 的中間件
概念
○在任意兩個(gè)環(huán)節(jié)之間添加的一個(gè)環(huán)節(jié), 就叫做中間件
分類
全局中間件
■語(yǔ)法: server.use(以什么開(kāi)頭, 函數(shù))
●server: 創(chuàng)建的服務(wù)器, 一個(gè)變量而已
●以什么開(kāi)頭: 可以不寫, 寫的話需要是字符串
●函數(shù): 你這個(gè)中間件需要做什么事
// 0. 下載并導(dǎo)入第三方模塊
const express = require("express");
// 0. 引入路由總表
const router = require("./router");
// 0. 引入內(nèi)置的 fs 模塊
const fs = require("fs");
// 1. 開(kāi)啟服務(wù)器
const app = express();
// 1.1 開(kāi)啟靜態(tài)資源
app.use("/static", express.static("./client/"));
// 1.2 添加一個(gè) 中間件, 讓所有請(qǐng)求進(jìn)來(lái)的時(shí)候, 記錄一下時(shí)間與請(qǐng)求地址
app.use(function (req, res, next) {
fs.appendFile("./index.txt", `${new Date()} --- ${req.url} \n`, () => {});
next(); // 運(yùn)行完畢后, 去到下一個(gè)中間件
});
// 1.3 開(kāi)啟路由表
app.use("/api", router);
// 2. 給服務(wù)添加監(jiān)聽(tīng)
app.listen(8080, () => console.log("服務(wù)器開(kāi)啟成功, 端口號(hào)8080~"));
路由級(jí)中間件
■語(yǔ)法: router.use(以什么開(kāi)頭, 函數(shù))
●router: 創(chuàng)建的路由表, 一個(gè)變量而已
●以什么開(kāi)頭: 可以不寫, 寫的話需要是字符串
●函數(shù): 你這個(gè)中間件需要做什么事
// 路由分表
const router = require("express").Router();
// 導(dǎo)入 cart 中間件
const cartMidd = require("../middleware/cart");
// 添加路由級(jí)中間件
router.use(function (req, res, next) {
/**
* 1. 驗(yàn)證 token 存在并且沒(méi)有過(guò)期才可以
* 規(guī)定: 請(qǐng)求頭內(nèi)必須有 authorization 字段攜帶 token 信息
*/
const token = req.headers.authorization;
if (!token) {
res.send({
code: 0,
msg: "沒(méi)有 token, 不能進(jìn)行 該操作",
});
}
next();
});
router.get("/list", cartMidd.cartlist, (req, res) => {
res.send({
code: 1,
msg: "請(qǐng)求 /cart/list 接口成功",
});
});
router.get("/add", (req, res) => {
res.send({
code: 1,
msg: "請(qǐng)求 /cart/add 接口成功",
});
});
module.exports.cartRouter = router;
請(qǐng)求級(jí)中間件
■直接在請(qǐng)求路由上, 在路由處理函數(shù)之前書(shū)寫函數(shù)即可
// 路由分表
const router = require("express").Router();
// 導(dǎo)入 cart 中間件
const cartMidd = require("../middleware/cart");
router.get("/list", cartMidd.cartlist, (req, res) => {
res.send({
code: 1,
msg: "請(qǐng)求 /cart/list 接口成功",
});
});
router.get("/add", (req, res) => {
res.send({
code: 1,
msg: "請(qǐng)求 /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沒(méi)有傳遞",
});
return;
}
if (isNaN(current) || isNaN(pagesize)) {
res.send({
code: 0,
msg: "參數(shù)current或者參數(shù)pagesize 不是 數(shù)字類型的, 請(qǐng)?zhí)幚?,
});
return;
}
next();
};
module.exports.cartlist = cartlist
錯(cuò)誤中間件
■本質(zhì)上就是一個(gè)全局中間件, 只不過(guò)處理的內(nèi)容
// 0. 下載并導(dǎo)入第三方模塊
const express = require("express");
// 0. 引入路由總表
const router = require("./router");
// 0. 引入內(nèi)置的 fs 模塊
const fs = require("fs");
// 1. 開(kāi)啟服務(wù)器
const app = express();
// 1.1 開(kāi)啟靜態(tài)資源
app.use("/static", express.static("./client/"));
// 1.2 開(kāi)啟路由表
app.use("/api", router);
// 1.3 注冊(cè)全局錯(cuò)誤中間件(必須接收四個(gè)參數(shù))
app.use(function (err, req, res, next) {
if (err === 2) {
res.send({
code: 0,
msg: "參數(shù)current或者參數(shù)pagesize沒(méi)有傳遞",
});
} else if (err === 3) {
res.send({
code: 0,
msg: "參數(shù)current或者參數(shù)pagesize 不是 數(shù)字類型的, 請(qǐng)?zhí)幚?,
});
} else if (err === 4) {
res.send({
code: 0,
msg: "沒(méi)有 token, 不能進(jìn)行 該操作",
});
}
});
// 2. 給服務(wù)添加監(jiān)聽(tīng)
app.listen(8080, () => console.log("服務(wù)器開(kāi)啟成功, 端口號(hào)8080~"));
/*
* 4. 錯(cuò)誤中間件
* 為了統(tǒng)一進(jìn)行錯(cuò)誤處理
*
* 例子:
* 接口參數(shù)少
* 請(qǐng)求 /goods/list 參數(shù)少
* 請(qǐng)求 /cart/list 參數(shù)少
* 請(qǐng)求 /news/list 參數(shù)少
* res.send({code: 0, msg: '參數(shù)數(shù)量不對(duì)'})
* 接口參數(shù)格式不對(duì)
* 請(qǐng)求 /users/login 格式不對(duì)
* 請(qǐng)求 /goods/list 格式不對(duì)
* res.send({code: 0, msg: '參數(shù)格式不對(duì)})
*
* 思考:
* 正確的時(shí)候, 直接返回結(jié)果給前端
* 只要出現(xiàn)了錯(cuò)誤, 統(tǒng)一回到全局路徑上
*
* 操作:
* 當(dāng)你在任何一個(gè)環(huán)節(jié)的中間件內(nèi)
* => 調(diào)用 next() 的時(shí)候, 表示的都是去到下一個(gè)環(huán)節(jié)
* => 調(diào)用 next(參數(shù)) 的時(shí)候, 表示去到的都是全局錯(cuò)誤環(huán)節(jié)
* 參數(shù):
* 參數(shù)的傳遞需要自己和自己約定一些暗號(hào)
* 2: 表示 接口參數(shù)少
* 3: 表示 接口參數(shù)格式不對(duì)
* 4: 表示沒(méi)有token
* 5: XXXX....
*/
token 的使用
●token 的使用分為兩步
○加密
■比如用戶登陸成功后, 將一段信息加密生成一段 token, 然后返回給前端
○解密
■比如用戶需要訪問(wèn)一些需要登陸后才能訪問(wèn)的接口, 就可以把登錄時(shí)返回的token保存下來(lái)
■在訪問(wèn)這些接口時(shí), 攜帶上token即可文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-463420.html
■而我們接收到token后, 需要解密token, 驗(yàn)證是否為正確的 token 或者 過(guò)期的 token文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-463420.html
1.加密
/**
* 使用一個(gè) 第三方包 jsonwebtoken
*/
const jwt = require("jsonwebtoken");
/**
* 1. 加密
* 語(yǔ)法: jwt.sign(你要存儲(chǔ)的信息, '密鑰', {配置信息})
*/
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);
});
到了這里,關(guān)于JavaScript全解析——Express框架介紹與入門的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!