簡(jiǎn)介這是基于Node.js、Express與MySQL構(gòu)建的前后端分離寵物用品購(gòu)物網(wǎng)站畢業(yè)設(shè)計(jì)源碼面向計(jì)算機(jī)專業(yè)畢業(yè)生、課程設(shè)計(jì)學(xué)生以及全棧開(kāi)發(fā)入門者可完整學(xué)習(xí)后端服務(wù)搭建、數(shù)據(jù)庫(kù)設(shè)計(jì)、接口開(kāi)發(fā)及前端交互的電商項(xiàng)目實(shí)踐。壓縮包共669個(gè)文件總大小12.02MB包含193個(gè)js邏輯文件路由、中間件、業(yè)務(wù)處理、39個(gè)vue頁(yè)面組件、51個(gè)css樣式、28個(gè)html頁(yè)面、1個(gè)sql數(shù)據(jù)庫(kù)腳本以及5個(gè)bat輔助啟動(dòng)腳本并配有svg、gif、jpg、png等圖片素材、字體文件及Markdown說(shuō)明文檔目錄結(jié)構(gòu)完整解壓后可直接部署運(yùn)行。目前已有95人學(xué)習(xí)下載適合作為畢業(yè)設(shè)計(jì)答辯、課程作業(yè)或商城項(xiàng)目原型參考。項(xiàng)目覆蓋商品瀏覽、購(gòu)物車、訂單管理、用戶注冊(cè)登錄等核心業(yè)務(wù)模塊同時(shí)涉及Node.js異步編程、Express路由與中間件、MySQL數(shù)據(jù)持久化、RESTful API設(shè)計(jì)、JWT用戶認(rèn)證、模板引擎渲染、JSON數(shù)據(jù)交互、支付接口預(yù)留以及測(cè)試部署思路等關(guān)鍵技術(shù)點(diǎn)并附帶啟動(dòng)腳本和數(shù)據(jù)庫(kù)初始化文件幫助讀者系統(tǒng)掌握全棧開(kāi)發(fā)流程便于快速上手和二次擴(kuò)展。1. 畢業(yè)設(shè)計(jì)選「寵物用品購(gòu)物網(wǎng)站」最怕的不是做不完而是做完講不清畢業(yè)設(shè)計(jì)選「寵物用品購(gòu)物網(wǎng)站」這個(gè)題目最怕的不是功能做不完而是做完之后講不清楚里面的技術(shù)點(diǎn)?；?Node.js Express MySQL 的前后端分離實(shí)現(xiàn)恰好壓在一個(gè)很舒服的位置功能上有商品瀏覽、搜索、購(gòu)物車、下單、訂單管理足夠支撐起一份完整的畢業(yè)設(shè)計(jì)或課程設(shè)計(jì)技術(shù)上沒(méi)有引入 Redis、消息隊(duì)列這類難講清楚的東西前后端之間的每一次數(shù)據(jù)交換都能畫(huà)出明確的流程圖。這套源碼不追求炫技它的價(jià)值在于讓你在兩周內(nèi)復(fù)現(xiàn)出一個(gè)能跑、能截圖、能在答辯時(shí)講明白的電商閉環(huán)。正在找設(shè)計(jì)題目的同學(xué)或者想用 Node.js 棧做項(xiàng)目實(shí)踐的開(kāi)發(fā)者都可以用它作為起點(diǎn)。2. 動(dòng)手之前Node.js 版本、MySQL 8.0 初始化和建庫(kù)的完整細(xì)節(jié)2.1 為什么是 Node.js Express MySQL而不是 Spring Boot 或 PHP選擇技術(shù)棧的底層邏輯不是「哪個(gè)火選哪個(gè)」而是「答辯被追問(wèn)時(shí)你有多大的把握解釋清楚」。Java Spring Boot 在畢業(yè)設(shè)計(jì)里確實(shí)主流但很多同學(xué)在答辯時(shí)會(huì)被問(wèn)到「Spring 的 Bean 生命周期」「自動(dòng)配置原理」這些問(wèn)題對(duì)于只做了 CRUD 的人來(lái)說(shuō)很難答好。PHP 寫(xiě)起來(lái)快但簡(jiǎn)歷和項(xiàng)目呈現(xiàn)上都顯得不夠新。Node.js Express 的優(yōu)勢(shì)是語(yǔ)言單一前端 Vue 用的是 JavaScript后端 Express 也是 JavaScript你只需要熟練一種語(yǔ)法就能打通前后端。從架構(gòu)上講這套組合的請(qǐng)求鏈路非常板書(shū)友好Vue 頁(yè)面通過(guò) axios 發(fā)起 HTTP 請(qǐng)求 → Express 路由層接收 → Controller 處理業(yè)務(wù)邏輯 → 通過(guò) mysql2 查詢數(shù)據(jù)庫(kù) → 返回 JSON 給前端渲染。每一步都有一個(gè)明確的「層」每一層都有對(duì)應(yīng)的目錄和文件這在答辯畫(huà)架構(gòu)圖時(shí)是天然分層的。而且 Express 的中間件機(jī)制是必考點(diǎn)——app.use(cors())、app.use(bodyParser.json())、app.use(/api/user, require(./routes/user))這三行代碼擺在黑板上就能把「洋蔥模型」「中間件執(zhí)行順序」這些概念串起來(lái)老師在這一點(diǎn)上通常愿意給高分。2.2 環(huán)境搭建Node.js 版本選擇以及 MySQL 免安裝版的血淚經(jīng)歷先說(shuō)版本結(jié)論。Node.js 裝 16 或 18 的 LTS 版本不要追新裝 20 以上的奇數(shù)版本。原因很現(xiàn)實(shí)源碼包里用到的某個(gè)依賴可能在最新版 Node 上有棄用警告雖然不影響運(yùn)行但答辯演示時(shí)控制臺(tái)飄一堆警告也不太好看。MySQL 裝 8.0 系列別下載 5.7因?yàn)?8.0 對(duì) utf8mb4 字符集、JSON 函數(shù)、窗口函數(shù)的支持更完整而且現(xiàn)在的教程、踩坑記錄基本都是針對(duì) 8.0 寫(xiě)的遇到問(wèn)題更容易搜到答案。Windows 上安裝 Node.js 沒(méi)什么好說(shuō)的官網(wǎng)下載 LTS 版本一路 Next 即可。MySQL 才是重頭戲。如果你下載的是 zip 免安裝版會(huì)踩到整個(gè)項(xiàng)目里最麻煩的一個(gè)坑——沒(méi)有data目錄。第一次啟動(dòng)net start mysql會(huì)直接失敗錯(cuò)誤日志里寫(xiě)Data Dictionary initialization failed。原因是免安裝版不會(huì)自動(dòng)初始化數(shù)據(jù)目錄。我一般這樣處理# 以管理員身份打開(kāi)命令行進(jìn)入解壓后的 MySQL 目錄 # 初始化數(shù)據(jù)目錄這一步會(huì)在輸出日志里生成一個(gè)臨時(shí) root 密碼 mysqld --initialize --console # 初始化完成后把 MySQL 注冊(cè)成 Windows 服務(wù) mysqld --install MySQL # 啟動(dòng)服務(wù) net start MySQLmysqld --initialize --console這條命令會(huì)把初始化過(guò)程打印到控制臺(tái)其中有一行temporary password is generated后面跟著臨時(shí)密碼第一次登錄必須用它登錄后馬上改密碼。注意如果你執(zhí)行了mysqld --initialize卻沒(méi)記下臨時(shí)密碼那只能刪掉 data 目錄重新初始化沒(méi)有后悔藥。我從那以后每次初始化都把控制臺(tái)輸出截圖保存。驗(yàn)證環(huán)境是否就緒node -v npm -v mysql -u root -p輸入密碼后能進(jìn)入mysql提示符說(shuō)明 Node 和 MySQL 兩個(gè)基礎(chǔ)環(huán)境都通了。這里有一個(gè)容易被忽略的細(xì)節(jié)mysql -u root -p后面千萬(wàn)不要直接跟密碼比如-p123456命令行會(huì)提示 warning說(shuō)密碼暴露在命令行里不安全。2.3 建庫(kù)建表字符集選 utf8mb4 而不是 utf8以及商品表結(jié)構(gòu)設(shè)計(jì)登錄 MySQL 后建庫(kù)。建庫(kù)時(shí)字符集的選擇是第一個(gè)會(huì)實(shí)際踩到的坑CREATE DATABASE pet_shop DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE pet_shop; -- 用戶表 CREATE TABLE user ( id INT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(50) UNIQUE NOT NULL, password VARCHAR(255) NOT NULL COMMENT 存的是 bcrypt 哈希不是明文, phone VARCHAR(20), create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 商品表 CREATE TABLE product ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(100) NOT NULL, category VARCHAR(50) NOT NULL COMMENT 貓糧、狗糧、玩具、日用品, price DECIMAL(10,2) NOT NULL, stock INT DEFAULT 0, image VARCHAR(255) COMMENT 商品主圖路徑, description TEXT COMMENT 詳情描述支持中文和表情符號(hào) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;為什么用 utf8mb4 而不是 utf8因?yàn)?MySQL 的 utf8 實(shí)際最多存 3 字節(jié)字符而寵物用品詳情的文案里經(jīng)常有 這類 emoji它們是 4 字節(jié)的。用 utf8 建表插入 emoji 會(huì)直接報(bào)錯(cuò)Incorrect string value。這個(gè)坑早期我栽過(guò)一次后來(lái)建庫(kù)第一條命令就定死 utf8mb4。表結(jié)構(gòu)設(shè)計(jì)上有一個(gè)值得在答辯時(shí)講的點(diǎn)price為什么用DECIMAL(10,2)而不是FLOAT。因?yàn)楦↑c(diǎn)數(shù)在 MySQL 里存儲(chǔ)會(huì)丟失精度比如 19.99 在 FLOAT 存儲(chǔ)后查出來(lái)可能是 19.989999。DECIMAL 是定點(diǎn)數(shù)按字符串存儲(chǔ)不會(huì)丟精度。購(gòu)物網(wǎng)站的金額計(jì)算涉及錢精度問(wèn)題在答辯時(shí)是必考加分項(xiàng)。提示源碼包自帶的pet_shop.sql里已經(jīng)建好了全部表包括購(gòu)物車表cart、訂單表orders、訂單明細(xì)表order_items。用mysql -u root -p pet_shop pet_shop.sql導(dǎo)入之前先確認(rèn)數(shù)據(jù)庫(kù)字符集是 utf8mb4否則導(dǎo)入后表的中文會(huì)變成亂碼。3. Express 后端實(shí)現(xiàn)路由分層、JWT 登錄和商品分頁(yè)的邊界坑3.1 入口文件與目錄分層中間件注冊(cè)順序?yàn)槭裁床荒軄y拿到源碼包后先把后端目錄結(jié)構(gòu)看清楚。這個(gè)項(xiàng)目的后端分層思路是標(biāo)準(zhǔn)的 Express 工程結(jié)構(gòu)pet-shop-server/ ├─ app.js # Express 入口 ├─ config/ │ └─ db.js # MySQL 連接配置mysql2 ├─ routes/ │ ├─ user.js # 注冊(cè)、登錄路由 │ ├─ product.js # 商品列表、搜索、詳情路由 │ └─ order.js # 下單、訂單列表路由 ├─ controllers/ │ ├─ userController.js # 業(yè)務(wù)邏輯查庫(kù)、加密、簽發(fā) token │ ├─ productController.js │ └─ orderController.js ├─ middleware/ │ └─ auth.js # JWT 鑒權(quán)中間件 └─ package.jsonroutes 只負(fù)責(zé)定義 URL 路徑真正的邏輯在 controllers 里。這個(gè)分層習(xí)慣極其重要——如果所有代碼都寫(xiě)在 app.js 里前期開(kāi)發(fā)快但后期調(diào)試會(huì)非常痛苦。入口文件app.js的中間件注冊(cè)順序有一點(diǎn)講究const express require(express); const cors require(cors); const bodyParser require(body-parser); const app express(); // 中間件注冊(cè)順序CORS → bodyParser → 路由 → 404 兜底 app.use(cors()); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.use(/api/user, require(./routes/user)); app.use(/api/product, require(./routes/product)); app.use(/api/order, require(./routes/order)); // 404 兜底必須放在所有路由之后 app.use((req, res) { res.status(404).json({ message: 接口不存在 }); }); app.listen(3000, () { console.log(server running at http://localhost:3000); });這段代碼里有三個(gè)細(xì)節(jié)要在答辯時(shí)能解釋。第一cors()必須放在最前面因?yàn)榭缬蛐ｒ?yàn)發(fā)生在請(qǐng)求進(jìn)入業(yè)務(wù)處理之前如果寫(xiě)成app.use(cors())之前還有別的中間件瀏覽器可能已經(jīng)攔截了響應(yīng)。第二bodyParser.urlencoded({ extended: true })不能省有些表單提交的 Content-Type 是application/x-www-form-urlencoded只配了json()解析器時(shí)請(qǐng)求體會(huì)變成空對(duì)象{}這是新手排查半天都找不到原因的經(jīng)典問(wèn)題。第三404 兜底路由必須在所有業(yè)務(wù)路由注冊(cè)之后否則它會(huì)先捕獲所有請(qǐng)求。3.2 用 JWT 做登錄鑒權(quán)token 里該放什么、過(guò)期時(shí)間該設(shè)多長(zhǎng)前后端分離架構(gòu)下登錄狀態(tài)不依賴 session因?yàn)榍岸撕秃蠖丝赡懿辉谕慌_(tái)服務(wù)器上session 存在服務(wù)端內(nèi)存里無(wú)法共享。標(biāo)準(zhǔn)做法是 JWT用戶登錄成功后后端用密鑰對(duì)用戶 id 簽名生成一個(gè) token 返回給前端前端存到 localStorage每次請(qǐng)求在 Header 里帶Authorization: Bearer token。// middleware/auth.js const jwt require(jsonwebtoken); const SECRET pet-shop-secret-key; // 實(shí)際項(xiàng)目放 .env module.exports function auth(req, res, next) { const header req.headers.authorization; if (!header) { return res.status(401).json({ message: 未登錄請(qǐng)先登錄 }); } // 格式約定Bearer tokensplit 后取第二部分 const token header.split( )[1]; try { const payload jwt.verify(token, SECRET); req.userId payload.id; // 最關(guān)鍵把用戶 id 掛到 req 對(duì)象上后面的路由直接用 next(); } catch (err) { return res.status(401).json({ message: token 無(wú)效或已過(guò)期 }); } };這段代碼是鑒權(quán)中間件的標(biāo)準(zhǔn)模板。jwt.verify會(huì)同時(shí)校驗(yàn)簽名和過(guò)期時(shí)間token 被篡改或過(guò)期都只會(huì)走到 catch 分支返回 401。登錄接口里簽發(fā) token 的邏輯// controllers/userController.js節(jié)選 const bcrypt require(bcryptjs); const jwt require(jsonwebtoken); const db require(../config/db); exports.login (req, res) { const { username, password } req.body; // 參數(shù)校驗(yàn)空值直接返回 400不要在 SQL 層面兜 if (!username || !password) { return res.status(400).json({ message: 用戶名和密碼不能為空 }); } // 參數(shù)占位符 ? 防止 SQL 注入 db.query(SELECT * FROM user WHERE username ?, [username], (err, results) { if (err) return res.status(500).json({ message: 服務(wù)器內(nèi)部錯(cuò)誤 }); if (results.length 0) { return res.status(400).json({ message: 用戶不存在 }); } const user results[0]; // bcrypt.compareSync 返回布爾值 const isMatch bcrypt.compareSync(password, user.password); if (!isMatch) { return res.status(400).json({ message: 密碼錯(cuò)誤 }); } // 簽發(fā) token有效期 7 天 const token jwt.sign( { id: user.id, username: user.username }, SECRET, { expiresIn: 7d } ); res.json({ token, username: user.username, message: 登錄成功 }); }); };JWT 的過(guò)期時(shí)間設(shè) 7 天這個(gè)選擇值得在答辯時(shí)解釋。管理后臺(tái)系統(tǒng)通常設(shè) 30 分鐘因?yàn)椴僮髅舾须娚糖岸擞脩舨豢赡苊堪胄r(shí)重新登錄一次7 天是「安全性和用戶體驗(yàn)的折中」。你能說(shuō)出這個(gè)理由老師會(huì)覺(jué)得你不是隨便選了一個(gè)數(shù)字。另外注意bcrypt.compareSync是同步方法在真實(shí)高并發(fā)項(xiàng)目里應(yīng)該用異步的bcrypt.compare但畢業(yè)設(shè)計(jì)里同步方法足夠而且答辯時(shí)可以主動(dòng)提起「我知道有異步版本在高并發(fā)下性能更好」這是一個(gè)主動(dòng)展示知識(shí)邊界的好機(jī)會(huì)。3.3 商品分頁(yè)接口total 計(jì)數(shù)、offset 計(jì)算、LIMIT 綁定商品列表是所有用戶都能訪問(wèn)的接口不需要 token。分頁(yè)接口有兩個(gè)容易踩的坑源碼里已經(jīng)處理好了但你需要知道原因。第一個(gè)坑是分頁(yè)偏移量的計(jì)算。前端傳page和pageSize后端算offset (page - 1) * pageSize。很多新手直接把page當(dāng) offset 用首頁(yè)能出數(shù)據(jù)翻到第二頁(yè)就重復(fù)了。第二個(gè)坑是 total 字段。分頁(yè)組件要算總頁(yè)數(shù)就必須知道總記錄數(shù)。所以接口返回里必須帶total否則前端只能靠「這頁(yè)是否還有數(shù)據(jù)」來(lái)猜測(cè)有沒(méi)有下一頁(yè)。源碼里的實(shí)現(xiàn)// controllers/productController.js節(jié)選 exports.list (req, res) { const page parseInt(req.query.page) || 1; const pageSize parseInt(req.query.pageSize) || 10; const category req.query.category || ; // 動(dòng)態(tài)拼接 WHERE 條件前提是 category 不是用戶可隨意構(gòu)造的復(fù)雜條件 let where ; const params []; if (category) { where WHERE category ?; params.push(category); } // 第一步查總數(shù) db.query(SELECT COUNT(*) AS total FROM product ${where}, params, (err, countResult) { if (err) return res.status(500).json({ message: 查詢失敗 }); const total countResult[0].total; const offset (page - 1) * pageSize; // 注意mysql2 舊版本在 LIMIT 子句里用 ? 占位可能會(huì)有問(wèn)題 // 所以這里直接拼接數(shù)字offset 和 pageSize 都已經(jīng)通過(guò) parseInt 轉(zhuǎn)成了整數(shù) const sql SELECT * FROM product ${where} ORDER BY id DESC LIMIT ${offset}, ${pageSize}; db.query(sql, params, (err, rows) { if (err) return res.status(500).json({ message: 查詢失敗 }); res.json({ list: rows, total: total, page: page, pageSize: pageSize }); }); }); };關(guān)于 LIMIT 子句的占位符問(wèn)題補(bǔ)充一句mysql2 驅(qū)動(dòng)在 2.x 版本之后已經(jīng)支持LIMIT ?, ?綁定如果你用的驅(qū)動(dòng)版本較新可以寫(xiě)成db.query(sql, [...params, offset, pageSize], cb)的形式。老驅(qū)動(dòng)在 LIMIT 里用占位符可能直接報(bào)語(yǔ)法錯(cuò)誤所以源碼里選擇直接拼接整數(shù)。這個(gè)細(xì)節(jié)在答辯時(shí)被問(wèn)到時(shí)你可以回答「為了兼容 mysql2 舊版本的驅(qū)動(dòng)行為offset 和 pageSize 經(jīng)過(guò) parseInt 后確認(rèn)是整數(shù)再直接拼進(jìn) SQL不存在注入風(fēng)險(xiǎn)如果驅(qū)動(dòng)版本支持占位符我會(huì)改成全綁定寫(xiě)法。」4. 前端 Vue 對(duì)接axios 攔截器、購(gòu)物車狀態(tài)和下單流程的先后順序4.1 前端目錄與 axios 封裝請(qǐng)求攔截器里自動(dòng)帶 token前端部分源碼用的是 Vue 2 Element UI這套組合在畢業(yè)設(shè)計(jì)里極其常見(jiàn)。目錄結(jié)構(gòu)如下pet-shop-web/ ├─ src/ │ ├─ api/ │ │ ├─ request.js # axios 實(shí)例 攔截器 │ │ ├─ product.js # 商品接口封裝 │ │ ├─ user.js # 登錄注冊(cè)封裝 │ │ └─ order.js # 訂單接口封裝 │ ├─ views/ │ │ ├─ Home.vue # 商品列表 │ │ ├─ Cart.vue # 購(gòu)物車 │ │ ├─ Order.vue # 訂單確認(rèn) │ │ ├─ OrderList.vue # 訂單列表 │ │ └─ Login.vue # 登錄注冊(cè) │ ├─ router/index.js │ └─ App.vue └─ package.jsonaxios 封裝是整個(gè)前端最值得寫(xiě)的一段代碼。新手最容易犯的錯(cuò)是在每個(gè)頁(yè)面里手動(dòng)寫(xiě)請(qǐng)求頭token 字段在十幾個(gè)文件里重復(fù)出現(xiàn)項(xiàng)目一大就失控。正確做法是在請(qǐng)求攔截器里統(tǒng)一注入// src/api/request.js import axios from axios; import router from ../router; // 創(chuàng)建 axios 實(shí)例 const request axios.create({ baseURL: http://localhost:3000/api, // 后端接口前綴 timeout: 10000 // 10 秒超時(shí) }); // 請(qǐng)求攔截器在每次發(fā)請(qǐng)求前自動(dòng)帶上 token request.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { // 與后端 auth.js 里的約定一致Bearer token config.headers.Authorization Bearer ${token}; } return config; }); // 響應(yīng)攔截器統(tǒng)一處理后端返回 request.interceptors.response.use( response response.data, // 直接拿到后端 JSON 的 data 部分 error { if (error.response error.response.status 401) { // token 失效清掉本地登錄態(tài)跳登錄頁(yè) localStorage.removeItem(token); router.push(/login); } return Promise.reject(error); } ); export default request;封裝完成之后每個(gè)接口文件就非常薄。以api/product.js為例import request from ./request; // 商品列表page、pageSize、category 都是可選參數(shù) export function getProductList(params) { return request.get(/product/list, { params }); } // 商品詳情 export function getProductDetail(id) { return request.get(/product/detail/${id}); }response response.data這一行作用是省去每個(gè)組件里都寫(xiě)一層res.data.data的麻煩。封裝不好的項(xiàng)目里往往會(huì)出現(xiàn)res.data.data.data這種三層嵌套就是因?yàn)?axios 默認(rèn)返回的 response 對(duì)象包了一層{ status, headers, data }。這里直接剝到業(yè)務(wù)數(shù)據(jù)層。4.2 購(gòu)物車邏輯未登錄存 localStorage登錄后走后端接口購(gòu)物車的設(shè)計(jì)是這個(gè)項(xiàng)目里一個(gè)很有區(qū)分度的點(diǎn)。它的設(shè)計(jì)是未登錄時(shí)購(gòu)物車數(shù)據(jù)存在前端localStorage用戶登錄后購(gòu)物車數(shù)據(jù)存 MySQL 的cart表。為什么要這么做因?yàn)橛脩艨赡苓€沒(méi)登錄就開(kāi)始逛加了幾件商品到購(gòu)物車然后去登錄登錄完成后購(gòu)物車?yán)锏纳唐凡荒軄G。這個(gè)「合并購(gòu)物車」的邏輯一定是在登錄接口成功的回調(diào)里執(zhí)行的。偽代碼如下// views/Login.vue 登錄成功的回調(diào)節(jié)選 async function handleLoginSuccess(token, username) { localStorage.setItem(token, token); // 1. 取出 localStorage 里未登錄時(shí)存的本地購(gòu)物車 const localCart JSON.parse(localStorage.getItem(cart) || []); // 2. 本地的商品逐條加入后端購(gòu)物車 for (const item of localCart) { await addToCart({ productId: item.productId, quantity: item.quantity }); } // 3. 合并完成后清空本地購(gòu)物車 localStorage.removeItem(cart); // 4. 跳轉(zhuǎn)首頁(yè) router.push(/); }這個(gè)流程的先后順序不能亂。如果先清空l(shuí)ocalStorage再合并后端購(gòu)物車刷新頁(yè)面后購(gòu)物車數(shù)據(jù)就丟了。如果你在答辯時(shí)把這個(gè)「先合并、后清空」的順序主動(dòng)講出來(lái)老師會(huì)覺(jué)得你處理過(guò)真實(shí)場(chǎng)景的邊界問(wèn)題。商品列表頁(yè)的加載邏輯相對(duì)簡(jiǎn)單核心是在onMounted里調(diào)接口// views/Home.vue import { onMounted, ref } from vue; import { getProductList } from ../api/product; const list ref([]); const total ref(0); const page ref(1); const pageSize ref(8); async function loadData() { const res await getProductList({ page: page.value, pageSize: pageSize.value }); list.value res.list; total.value res.total; } onMounted(() { loadData(); });4.3 下單流程創(chuàng)建訂單主表、扣庫(kù)存、生成明細(xì)、清空購(gòu)物車的順序提交訂單這一節(jié)值得多說(shuō)兩句因?yàn)檫@里的坑非常典型。前端下單邏輯如果只調(diào)一個(gè)「createOrder」接口看起來(lái)簡(jiǎn)單但擴(kuò)展性差如果拆成四步又要面對(duì)「中間某一步失敗怎么回滾」的問(wèn)題。源碼的做法是后端用 MySQL 事務(wù)把四個(gè)步驟包起來(lái)前端只調(diào)一個(gè)接口。但為了理解業(yè)務(wù)語(yǔ)義這里把四步拆開(kāi)說(shuō)明// controllers/orderController.js簡(jiǎn)化示意真實(shí)代碼用事務(wù)包裹 exports.createOrder (req, res) { const { userId, address, items } req.body; db.beginTransaction(err { if (err) return res.status(500).json({ message: 事務(wù)開(kāi)啟失敗 }); // 第一步創(chuàng)建訂單主表拿到訂單 id db.query(INSERT INTO orders (user_id, address, total_amount, status) VALUES (?, ?, ?, 0), [userId, address, items.reduce((sum, i) sum i.price * i.quantity, 0)], (err, result) { if (err) return db.rollback(() res.status(500).json({ message: 創(chuàng)建訂單失敗 })); const orderId result.insertId; // 第二步逐條扣庫(kù)存扣減前必須先查庫(kù)存是否充足 const updateStockPromises items.map(item { return new Promise((resolve, reject) { db.query( UPDATE product SET stock stock - ? WHERE id ? AND stock ?, [item.quantity, item.productId, item.quantity], (err, updateResult) { // affectedRows 0 說(shuō)明庫(kù)存不足UPDATE 條件不滿足 if (updateResult.affectedRows 0) { reject(new Error(商品 ${item.productId} 庫(kù)存不足)); } else { resolve(); } } ); }); }); Promise.all(updateStockPromises).then(() { // 第三步批量插入訂單明細(xì) const detailValues items.map(i [orderId, i.productId, i.quantity, i.price]); db.query(INSERT INTO order_items (order_id, product_id, quantity, price) VALUES ?, [detailValues], (err) { if (err) return db.rollback(() res.status(500).json({ message: 訂單明細(xì)寫(xiě)入失敗 })); // 第四步清空用戶購(gòu)物車 db.query(DELETE FROM cart WHERE user_id ?, [userId], (err) { if (err) return db.rollback(() res.status(500).json({ message: 清空購(gòu)物車失敗 })); db.commit(err { if (err) return db.rollback(() res.status(500).json({ message: 事務(wù)提交失敗 })); res.json({ orderId, message: 訂單創(chuàng)建成功 }); }); }); }); }).catch(err { db.rollback(() res.status(500).json({ message: err.message })); }); }); }); };這段代碼的核心設(shè)計(jì)點(diǎn)是UPDATE product SET stock stock - ? WHERE id ? AND stock ?這條 SQL 自帶庫(kù)存檢查。如果在業(yè)務(wù)代碼里先查庫(kù)存再更新中間有并發(fā)請(qǐng)求插進(jìn)來(lái)就會(huì)超賣把檢查放進(jìn) UPDATE 的 WHERE 條件里就是所謂「原子操作」數(shù)據(jù)庫(kù)引擎保證同一時(shí)間只有一條 SQL 在執(zhí)行。這是電商項(xiàng)目里防超賣的標(biāo)準(zhǔn)做法也是答辯時(shí)最亮眼的一個(gè)技術(shù)點(diǎn)。另外一個(gè)細(xì)節(jié)事務(wù)里任何一個(gè)步驟出錯(cuò)前面所有已執(zhí)行的操作都要回滾否則會(huì)出現(xiàn)「訂單表有記錄但商品庫(kù)存沒(méi)減」的數(shù)據(jù)不一致。所以代碼里每個(gè)出錯(cuò)分支都要調(diào)用db.rollback()。這個(gè)「要么全部成功要么全部失敗」的思想在答辯時(shí)是絕對(duì)的高頻考點(diǎn)。5. 避坑與常見(jiàn)問(wèn)題排查環(huán)境權(quán)限、MySQL 啟動(dòng)、跨域與亂碼5.1 npm 無(wú)法加載文件PowerShell 執(zhí)行策略限制的官方解法現(xiàn)象在 Windows PowerShell 里運(yùn)行npm start報(bào)錯(cuò)npm : 無(wú)法加載文件 C:\Program Files\nodejs\npm.ps1因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本。原因Windows PowerShell 的默認(rèn)執(zhí)行策略是 Restricted禁止運(yùn)行任何 .ps1 腳本而 npm 在 PowerShell 里的包裝命令恰好是npm.ps1。不是 npm 安裝壞了是系統(tǒng)安全策略攔住了。解決以管理員身份打開(kāi) PowerShell執(zhí)行# RemoteSigned允許本地腳本運(yùn)行遠(yuǎn)程下載的腳本必須帶簽名 Set-ExecutionPolicy -ExecutionPolicy RemoteSigned輸出問(wèn)詢時(shí)輸入Y確認(rèn)。改完后退出 PowerShell 重新打開(kāi)再執(zhí)行npm -v能返回版本號(hào)就說(shuō)明問(wèn)題解決了。這里要提示一句不要為了省事設(shè)成Unrestricted它會(huì)允許所有腳本運(yùn)行有安全風(fēng)險(xiǎn)。5.2 MySQL 服務(wù)啟動(dòng)失敗net start mysql 報(bào)錯(cuò)或自動(dòng)停止現(xiàn)象net start mysql提示服務(wù)正在啟動(dòng)幾秒后報(bào)「服務(wù)無(wú)法啟動(dòng)」或者服務(wù)列表里顯示運(yùn)行中但端口沒(méi)監(jiān)聽(tīng)。原因最常見(jiàn)的是免安裝版 MySQL 沒(méi)有初始化data目錄或者my.ini配置文件里的basedir和datadir路徑寫(xiě)錯(cuò)。服務(wù)啟動(dòng)時(shí)找不到數(shù)據(jù)目錄直接退出。解決按照第 2.2 節(jié)提到的方法先刪除或確認(rèn)data目錄不存在然后執(zhí)行# 重新初始化數(shù)據(jù)目錄 mysqld --initialize --console初始化完成后確認(rèn)my.ini里datadir指向的是剛生成的 data 目錄路徑。路徑里如果有中文可能會(huì)出問(wèn)題建議把 MySQL 放到純英文路徑下。還有一種情況是端口被占用——用netstat -ano | findstr 3306查看 3306 端口是否被其他進(jìn)程占據(jù)常見(jiàn)沖突是之前在電腦上裝過(guò) MariaDB 或者另一個(gè) MySQL 服務(wù)。5.3 前端請(qǐng)求被 CORS 攔截Network 里能看到響應(yīng)但 axios 拿不到數(shù)據(jù)現(xiàn)象前端跑在http://localhost:8080后端跑在http://localhost:3000瀏覽器控制臺(tái)報(bào)CORS policy錯(cuò)誤Network 面板里看這次請(qǐng)求其實(shí)已經(jīng)發(fā)出去了響應(yīng)也回來(lái)了但 axios 的then里拿不到數(shù)據(jù)。原因跨域是瀏覽器的安全限制兩個(gè)地址「協(xié)議 域名 端口」三者有一個(gè)不同就是跨域。瀏覽器默認(rèn)不允許頁(yè)面讀取跨域響應(yīng)。解決在app.js里用了cors()中間件后響應(yīng)頭里會(huì)加上Access-Control-Allow-Origin: *瀏覽器就不會(huì)攔截了。這里的關(guān)鍵是注冊(cè)順序app.use(cors())必須在掛載路由之前。如果你的后端沒(méi)引入 cors 包可以手動(dòng)加響應(yīng)頭app.use((req, res, next) { res.setHeader(Access-Control-Allow-Origin, *); res.setHeader(Access-Control-Allow-Headers, Content-Type, Authorization); res.setHeader(Access-Control-Allow-Methods, GET, POST, PUT, DELETE); if (req.method OPTIONS) { return res.sendStatus(204); } next(); });OPTIONS請(qǐng)求是瀏覽器在正式請(qǐng)求之前發(fā)送的「預(yù)檢」請(qǐng)求后端必須正確處理否則正式請(qǐng)求根本不會(huì)發(fā)出。前端如果使用了Authorization頭Access-Control-Allow-Headers里必須包含Authorization否則登錄后的接口全部失效。5.4 數(shù)據(jù)庫(kù)中文亂碼顯示問(wèn)號(hào)或顯示成不認(rèn)識(shí)的符號(hào)現(xiàn)象商品名稱、用戶昵稱在頁(yè)面和 MySQL Workbench 里都顯示為???或亂碼。原因字符集鏈路里任何一環(huán)斷了都會(huì)亂碼。建庫(kù)用了 latin1、連接參數(shù)沒(méi)指定 charset、或者 SQL 文件導(dǎo)入時(shí)被轉(zhuǎn)碼這三者都可能。真正的問(wèn)題往往出在連接串上——就算庫(kù)和表都是 utf8mb4如果 Node.js 連接 MySQL 時(shí)沒(méi)有指定字符集驅(qū)動(dòng)默認(rèn)可能用 latin1 和你通信。解決檢查config/db.js里的連接配置const mysql require(mysql2); const connection mysql.createConnection({ host: localhost, port: 3306, user: root, password: 你的密碼, database: pet_shop, charset: utf8mb4 // 必須顯式指定 }); module.exports connection;同時(shí)確認(rèn)建庫(kù)語(yǔ)句里字符集是 utf8mb4。如果數(shù)據(jù)已經(jīng)在數(shù)據(jù)庫(kù)里顯示亂碼改了配置也沒(méi)用因?yàn)槟鞘且呀?jīng)存在的壞數(shù)據(jù)需要?jiǎng)h掉重插。所以我寫(xiě)這篇筆記時(shí)強(qiáng)調(diào)第一步建庫(kù)就要把字符集固定后面的連接參數(shù)和創(chuàng)建表語(yǔ)句都統(tǒng)一用 utf8mb4亂碼問(wèn)題根本不會(huì)出現(xiàn)。5.5 接口報(bào) 404 但路由看起來(lái)沒(méi)問(wèn)題路徑拼寫(xiě)和基礎(chǔ)前綴最容易出錯(cuò)現(xiàn)象前端調(diào)http://localhost:3000/api/user/login返回 404但代碼里app.use(/api/user, require(./routes/user))和router.post(/login)都寫(xiě)得沒(méi)錯(cuò)。原因這類 404 幾乎都是路徑拼接問(wèn)題——前端 baseURL 寫(xiě)成了http://localhost:3000但后端路由掛了/api前綴最終請(qǐng)求拼成了http://localhost:3000/user/login?；蛘叻催^(guò)來(lái)baseURL 寫(xiě)成了/api但后端沒(méi)有掛/api前綴。解決把 baseURL 和后端掛載路徑拼起來(lái)驗(yàn)證一遍前端baseURL: http://localhost:3000/api后端app.use(/api/user)router.post(/login)最終請(qǐng)求路徑是/api/user/login。另外檢查路由文件里有沒(méi)有寫(xiě)錯(cuò)router.post(/login/)這種情況——Express 會(huì)忽略末尾斜杠但最好統(tǒng)一風(fēng)格。排查路徑問(wèn)題時(shí)打開(kāi)瀏覽器的 Network 面板看實(shí)際發(fā)出的 URL 是哪一個(gè)對(duì)照后端路由表逐段核對(duì)。6. 上線前驗(yàn)證一條完整業(yè)務(wù)鏈路走通以及一個(gè)值得試的進(jìn)階部署項(xiàng)目跑通的標(biāo)準(zhǔn)不是頁(yè)面打開(kāi)沒(méi)報(bào)錯(cuò)而是「從注冊(cè)到下單」這條完整鏈路能走通。我建議你在自己電腦上嚴(yán)格執(zhí)行下面這份檢查清單每過(guò)一條畫(huà)一個(gè)勾全部通過(guò)再去考慮截圖和答辯材料。先用 Postman 或 Apifox 按順序測(cè)后端接口順序操作預(yù)期結(jié)果1POST/api/user/register提交用戶名和密碼user 表新增一條記錄密碼字段是一長(zhǎng)串 bcrypt 哈希2POST/api/user/login提交相同密碼返回token字段登錄成功3GET/api/product/list不帶 token正常返回商品列表和 total4POST/api/order/create不帶 token返回 401提示未登錄5POST/api/order/create帶Authorization: Bearer token返回 orderIdproduct 表對(duì)應(yīng)商品庫(kù)存減少第 3 步和第 4 步是對(duì)照組用來(lái)驗(yàn)證「瀏覽商品不需要登錄、下單必須登錄」的權(quán)限設(shè)計(jì)。如果第 4 步?jīng)]有攔下來(lái)說(shuō)明auth中間件沒(méi)掛到訂單路由上回去檢查routes/order.js里router.use(auth)的位置。再走前端驗(yàn)證流程注冊(cè)賬號(hào) → 登錄確認(rèn) token 寫(xiě)入 localStorage→ 瀏覽商品 → 切換分類篩選 → 加入購(gòu)物車 → 購(gòu)物車頁(yè)改數(shù)量 → 提交訂單 → 在訂單列表頁(yè)看到剛下的單。這八步全部走通項(xiàng)目功能層面就算驗(yàn)收合格。如果你有多余時(shí)間我建議試一個(gè)進(jìn)階玩法把后端部署到一臺(tái)云服務(wù)器前端打包后丟到 Nginx 里用proxy_pass把/api路徑轉(zhuǎn)發(fā)到 3000 端口的 Node 服務(wù)。這一步如果做成了簡(jiǎn)歷上「獨(dú)立完成項(xiàng)目部署」這一欄就能理直氣壯地打鉤。核心配置只有一段server { listen 80; server_name your-domain.com; # 前端靜態(tài)文件 root /var/www/pet-shop-web/dist; location / { try_files $uri $uri/ /index.html; } # 把 /api 開(kāi)頭的請(qǐng)求轉(zhuǎn)發(fā)給 Node.js location /api { proxy_pass http://127.0.0.1:3000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }這段配置解決了「前后端分離部署」的核心問(wèn)題瀏覽器訪問(wèn) Nginx 拿到靜態(tài)頁(yè)面頁(yè)面里的請(qǐng)求指向同源的/api路徑Nginx 再轉(zhuǎn)發(fā)給 Node 服務(wù)。這樣前端和后端的地址統(tǒng)一了也順手解決了跨域問(wèn)題。我自己每次拿到一份源碼包第一件事永遠(yuǎn)不是讀代碼而是先跑通。跑通之后再拆結(jié)構(gòu)拆完結(jié)構(gòu)再改一個(gè)功能點(diǎn)驗(yàn)證自己是否真的理解了。從那以后我每次接到項(xiàng)目都強(qiáng)制自己先「跑一遍完整鏈路再做任何修改」。因?yàn)槟阌肋h(yuǎn)不知道這個(gè)源碼包在你的電腦上會(huì)栽在哪個(gè)版本的坑里——PowerShell 執(zhí)行策略、MySQL 臨時(shí)密碼、CORS 預(yù)檢請(qǐng)求每個(gè)人翻車的位置都不一樣。希望這篇筆記能幫你在答辯前少走幾個(gè)彎路把時(shí)間花在真正值得講清楚的技術(shù)點(diǎn)上。本文還有配套的精品資源點(diǎn)擊獲取