之前幫好幾個朋友看過類似的“全棧畢設項目”這是地方社區(qū)最常見的場景居民有閑置物品愿意捐出來社區(qū)需要一套系統(tǒng)登記、展示、發(fā)放操作的人又多半不是技術人員。所以我從一開始就確定了這個技術組合nodejs php vue。三個角色分工明確nodejs承擔實時接口代理和輕量服務php負責核心業(yè)務邏輯和數(shù)據(jù)庫讀寫vue做交互完整的單頁前端。這樣既貼合學生團隊的開發(fā)能力又能應付真實使用場景身份認證、物品登記、審核上架、申請領取、庫存統(tǒng)計、用戶管理一個不落。這個項目最值得動手做一遍的人有兩類一類是剛學完web開發(fā)、想拿一個完整全棧項目練手的在校學生另一類是在社區(qū)管理系統(tǒng)上想快速落地的小團隊或獨立開發(fā)者?？赐赀@篇博文你能拿到一套可以直接跑的代碼結(jié)構、表設計、關鍵部分的實現(xiàn)思路更重要的是那些不寫在文檔里的坑——比如npm在PowerShell里無法加載的報錯處理、nodejs環(huán)境變量到底怎么配、vue播放m3u8視頻怎么繞過去、php的json輸出中文轉(zhuǎn)義問題——我都幫你試過、踩過、填平了。1. 系統(tǒng)整體設計與技術選型解析1.1 三種語言各自扮演什么角色先說大局。很多人看到nodejsphpvue組合第一反應是“重復”——php都能干完的事為什么還要套一個nodejs這個問題我最初也糾結(jié)過。實際操作下來的體會是這套組合不是重復而是分工。vue負責純前端展示管理界面、捐贈列表、申請表單、數(shù)據(jù)圖表全部由vue的組件化開發(fā)呈現(xiàn)配合element-ui之類的組件庫比傳統(tǒng)服務端模板渲染的體驗好幾個檔次。php端是核心業(yè)務后端。它接收前端經(jīng)由nodejs轉(zhuǎn)發(fā)過來的請求操作MySQL數(shù)據(jù)庫完成用戶的注冊登錄、捐贈物品的錄入與狀態(tài)流轉(zhuǎn)、申請記錄的審批。php的優(yōu)勢在于上手成本低、資料多學生團隊維護起來壓力小。那nodejs夾在中間干什么用它的定位是“網(wǎng)關層”和“輔助層”。我實際在項目里做的事是用nodejs起一個靜態(tài)資源服務托管vue打包出來的dist目錄同時把以/api開頭的請求統(tǒng)一反向代理到php服務上。除此之外nodejs還承擔了一部分輕量級接口的直出——比如捐贈物品的輪播推薦、社區(qū)的公告板這些讀多寫少的數(shù)據(jù)不必每次打到php再查一遍庫nodejs直接讀內(nèi)存緩存返回響應快、部署簡單。這種“php業(yè)務層為主、nodejs充當入口與緩存層”的架構在中小型系統(tǒng)中非常實用。前端請求鏈是vue → nodejs → php → mysql鏈路清晰調(diào)試時每個環(huán)節(jié)都能單獨驗證。1.2 為什么是這套選型而不是純java或純python從純技術優(yōu)越性看統(tǒng)一用golang或者spring boot都可以做得更“高級”。但項目是給人做的不是做給架構師看的。做這類社區(qū)捐贈系統(tǒng)團隊大概率是web前端剛剛?cè)腴T、后端只熟悉php和nodejs的學生。硬上java全家桶或python框架光環(huán)境配置就夠喝一壺。另一個實際原因是部署服務器普遍“小”。一臺1核2G的云服務器跑php-fpm加nginx毫無壓力php對內(nèi)存的占用比java小一個量級對nodejs來說更是輕松。vue打包后的靜態(tài)資源可以交給nodejs托管或nginx托管整站的內(nèi)存開銷不會超過1G。后續(xù)如果想換后端nodejs這層網(wǎng)關也可以平滑切換不會傷筋動骨。這套架構的三個層天然隔離vue只管渲染、nodejs只管調(diào)度與緩存、php只管業(yè)務。這意味著前端改了不影響后端接口php改表不影響前端字段。對“需求要變來變?nèi)ァ钡漠呍O階段來說這是最大的救命稻草。2. 數(shù)據(jù)庫設計與核心功能模塊拆分2.1 需求模塊怎么拆功能上我拆成四個大塊捐贈者端、受助者端、管理員端、公共展示端。社區(qū)用戶登錄后可以發(fā)布捐贈物品、查看自己捐過哪些、狀態(tài)如何有需要的用戶可以瀏覽在架物品并提交申請管理員有獨立的審核入口處理物品上架、申請通過或駁回、物品下架。對應的數(shù)據(jù)流轉(zhuǎn)邏輯是捐贈者登記物品 → 待審核管理員審核 → 上架可見可申請或駁回退回受助者提交申請 → 待審核管理員審核申請 → 通過或駁回物品被申請通過后自動下架狀態(tài)變?yōu)椤耙杨I取”同時扣減庫存整個流程留下捐贈記錄和領取記錄便于統(tǒng)計和公示這套流程還原了線下的真實物資流轉(zhuǎn)鏈。無論線上怎么設計最終還是要線下交接的所以系統(tǒng)里必須加入“聯(lián)系人”“聯(lián)系電話”“領取地點”這類線下環(huán)節(jié)字段。2.2 核心表結(jié)構怎么建表的數(shù)量不宜貪多。我最終保留了七張核心表每張表的字段都控制在夠用水平系統(tǒng)跑起來之后擴展字段的成本遠低于一開始過度設計。常規(guī)管理類表我按下面的方式建實際建表時加上created_at和updated_at兩個時間字段。用戶表核心字段是用戶名、密碼存hash千萬別明文、手機號、角色標識、社區(qū)標識。角色用一個整數(shù)區(qū)分1為普通用戶2為管理員。物品分類表與物品表是多對一的從屬關系主要放物品類別名和排序號。物品表是最復雜的一張donor_id捐贈者用戶idcategory_id分類idtitle物品標題description物品描述images用JSON數(shù)組存儲多張圖片路徑前端讀取后遍歷渲染status物品狀態(tài)0待審核1在架2已申請3已領取4被駁回5下架quantity庫存數(shù)量有的物品可能是多件video_url選填放物品講解視頻比如家用電器使用說明申請記錄表記錄每一個用戶對哪個物品發(fā)起的申請item_id物品iduser_id申請人idapply_reason申請理由status0待審1通過2駁回phone申請時填寫的聯(lián)系方式捐贈記錄表、領取記錄表分別存立案信息方便后臺做統(tǒng)計報表。消息通知表用于管理員審核結(jié)果回推給用戶前端在導航欄上顯示未讀數(shù)量。2.3 為什么把狀態(tài)設計成數(shù)字而不是字符串很多人第一次設計會直接用字符串比如pending、approved看著直白但寫入數(shù)據(jù)庫后維護很別扭。字符串可讀性好是好但一旦后續(xù)要修改原表和業(yè)務邏輯的對應關系改動面巨大。用數(shù)字定義成枚舉常量php端和vue端可以各寫一套映射非常清晰。以物品狀態(tài)為例vue端展示時對數(shù)字進行l(wèi)abel映射狀態(tài)是0時顯示“待審核”并置灰1時顯示“可申請”2顯示“已被他人申請”3顯示“已領取”4顯示“已駁回”5顯示“已下架”。這樣前端代碼整潔后端判斷條件也只是in_array($status, [0, 1])之類的簡單寫法。3. 開發(fā)環(huán)境搭建與初始化準備3.1 nodejs安裝及環(huán)境配置完整流程這個環(huán)節(jié)看著簡單但我在調(diào)試過程中看到的問題遠比想象中多。很多人卡在第一步nodejs官網(wǎng)下載安裝包后雙擊裝完就以為萬事大吉然后在cmd或PowerShell里輸入node -v直接提示不是內(nèi)部或外部命令。這幾乎都是環(huán)境變量沒配好。我的安裝建議是下載長期支持版的.msi安裝包安裝過程中勾選“Add to PATH”這樣可以免去手動配置環(huán)境變量。如果你手頭拿到的安裝包沒有自動加PATH或者你希望更穩(wěn)妥地手動管理手動配置的步驟是打開系統(tǒng)環(huán)境變量設置新建NODE_HOME值指向nodejs的安裝目錄例如D:\program files\nodejs在Path變量中添加%NODE_HOME%和%NODE_HOME%\node_global配置全局緩存路徑在nodejs安裝目錄下執(zhí)行npm config set prefix D:\program files\nodejs\node_global和npm config set cache D:\program files\nodejs\node_cache重開終端驗證執(zhí)行node -v和npm -v配置全局路徑的好處是裝全局包不會一股腦塞進C盤環(huán)境整齊許多。我見過把npm全局包裝了幾百兆進去然后C盤飄紅的路徑規(guī)劃一開始做對能省去后續(xù)大量清理時間。3.2 npm在Windows上無法加載腳本的報錯處理開發(fā)過程中十有八九會撞到這個錯誤提示是npm : 無法加載文件 d:\program files\nodejs\npm.ps1因為在此系統(tǒng)上禁止運行腳本。這個問題的根源不是npm壞了而是PowerShell默認執(zhí)行策略禁止運行.ps1腳本。npm.ps1是npm的PowerShell包裝腳本執(zhí)行策略一攔就起不來了。解決方式有兩種。一種是在PowerShell中以管理員身份運行Set-ExecutionPolicy RemoteSigned選Y確認后重新打開終端npm -v就能通過。另一種是不動全局策略只在當前用戶范圍內(nèi)設置命令改成Set-ExecutionPolicy -Scope CurrentUser RemoteSigned我個人的建議是用第二種改動范圍小風險也更低。如果你正在公司或?qū)W校的電腦上開發(fā)沒有管理員權限用第二種是唯一選擇。這個問題在熱詞搜索里被反復搜索說明踩坑的人是真的多建議直接記下來。配置完成后用淘寶鏡像緩解安裝依賴慢的問題也屬于老生常談但確實有效npm config set registry https://registry.npmmirror.com3.3 vue安裝及環(huán)境配置與項目初始化vue開發(fā)環(huán)境的核心其實是nodejsvue本身只是一個npm包。常規(guī)流程先安裝vue-cli的腳手架版本可以按npm install -g vue/cli執(zhí)行或者用最新的create-vue工具創(chuàng)建vite模板項目。我用的是vite創(chuàng)建命令npm create vitelatest community-donate -- --template vue創(chuàng)建完成后進目錄裝依賴cd community-donate npm install npm run dev這里有個環(huán)境變量的問題需要注意本地開發(fā)時前端跑在5173vite默認端口nodejs跑在3000php跑在8000。三個服務三個端口前端訪問接口必然要跨域。開發(fā)環(huán)境下我在vite.config.js里配置了代理把/api請求代理到nodejs的3000端口nodejs再把請求轉(zhuǎn)發(fā)到php的8000端口。這套代理鏈在開發(fā)期非常穩(wěn)定。生產(chǎn)環(huán)境更簡單vue執(zhí)行npm run build后生成dist文件夾nodejs將它作為靜態(tài)目錄托管即可同源訪問永遠不存在跨域問題。3.4 php運行環(huán)境搭建php端我用的是php-fpm配合nginx本地直接用集成面板如小皮面板快速起一個包含nginx/mysql/php的環(huán)境。有一點要提醒php版本不必追求最新7.4或8.0都行但要用穩(wěn)定版不要用alpha等開發(fā)版。開好環(huán)境后在項目根目錄創(chuàng)建public子目錄作為web入口所有請求指向index.php進行統(tǒng)一的路由分發(fā)。這樣業(yè)務代碼和web根目錄隔離安全性比全目錄暴露高一個檔次。4. 三個核心環(huán)節(jié)的代碼實現(xiàn)與踩坑實錄4.1 vue前端路由設計與頁面骨架前端用vue-router管理頁面跳轉(zhuǎn)。路由表我按角色拆分是誤導自己的因為路由表在一個文件里集中維護反而更清晰。核心頁面如下/home首頁展示輪播、熱門捐贈物品、最新公告/items物品列表頁支持分類篩選和關鍵詞搜索/items/:id物品詳情頁展示多圖、視頻、描述、申請按鈕/donate捐贈登記頁/apply/list我的申請記錄頁/my/donations我的捐贈記錄頁/admin管理員后臺路由定義的核心是參數(shù)傳遞。詳情頁跳轉(zhuǎn)時最常見的是用id傳參// 列表頁跳轉(zhuǎn)詳情 this.$router.push({ path: /items/${item.id} })詳情頁里獲取參數(shù)// 方式一通過route.params獲取 const id this.$route.params.id // 方式二如果使用query傳參 this.$router.push({ path: /items, query: { id: item.id } }) this.$route.query.id一個反復出現(xiàn)的坑是用params傳參時如果頁面刷新參數(shù)會丟失因為params依賴路由狀態(tài)而不是URL。而query參數(shù)直接掛在URL后面刷新依然保留。所以詳情頁這種“刷新后必須還在”的頁面建議用query傳參或直接用path參數(shù)拼接。首頁的輪播我用了vue-awesome-swiper配合懶加載社區(qū)老照片和物品圖片混著播整體觀感比較像社區(qū)自己的門戶。列表頁的卡片用el-card包每個卡片顯示封面圖、標題、剩余庫存、狀態(tài)標簽。4.2 axios統(tǒng)一封裝與接口調(diào)用規(guī)范前端請求不能每個頁面都裸寫axios那樣錯誤處理、loading態(tài)、token注入全部要重寫。我做了統(tǒng)一的request封裝import axios from axios const service axios.create({ baseURL: import.meta.env.VITE_API_BASE, timeout: 10000 }) service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer ${token} } return config }) service.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.message || 請求失敗) return Promise.reject(new Error(res.message)) } return res }, error { ElMessage.error(error.message || 網(wǎng)絡異常) return Promise.reject(error) } ) export default service接口統(tǒng)一走/api前綴后端返回的數(shù)據(jù)格式固定為{ code, message, data }三段式前端攔截器里就把code判斷做掉了頁面里只需要關心業(yè)務數(shù)據(jù)不用各處判斷成功失敗。規(guī)范接口格式這件事值得盡早定下來因為nodejs和php兩側(cè)都要解析同一份格式后期改動成本極高?？缬蚍矫骈_發(fā)時用vite代理解決// vite.config.js server: { proxy: { /api: { target: http://localhost:3000, changeOrigin: true } } }nodejs端轉(zhuǎn)發(fā)到php也可以用http-proxy-middleware或直接手寫代理中間件后端轉(zhuǎn)發(fā)時不涉及瀏覽器同源策略實現(xiàn)非常簡單。4.3 捐贈物品錄入與m3u8視頻播放捐贈物品帶一條介紹視頻會顯著提升物品流轉(zhuǎn)效率。詳情頁設計里預留了video_url字段支持hls流。熱詞里反復出現(xiàn)“vue播放m3u8”說明大家都卡在同一個地方。m3u8是hls協(xié)議的視頻索引文件原生video標簽無法直接播放。解決清晰的辦法是用hls.js庫npm install hls.js組件里這樣寫template video refvideo controls muted autoplay stylewidth: 100%/video /template script setup import { ref, onMounted } from vue import Hls from hls.js const video ref(null) const props defineProps({ src: { type: String, required: true } }) onMounted(() { if (Hls.isSupported()) { const hls new Hls() hls.loadSource(props.src) hls.attachMedia(video.value) hls.on(Hls.Events.MANIFEST_PARSED, () { video.value.play() }) } else if (video.value.canPlayType(application/vnd.apple.mpegurl)) { video.value.src props.src } }) /script如果是單純的上傳MP4文件用原生video標簽就行m3u8場景主要是對接流媒體服務器或者視頻文件被轉(zhuǎn)碼成hls切片的場景。4.4 php后端核心接口的實現(xiàn)與安全細節(jié)php端我基于原生實現(xiàn)了一個輕量路由沒有上重量級框架這樣代碼透明度和可控性都更高。路由的寫法原理很簡單解析$_SERVER[REQUEST_URI]和請求方法分發(fā)到對應的處理函數(shù)。一個典型的物品列表接口長這樣// 可選參數(shù)分類ID、關鍵詞、頁碼 $categoryId isset($_GET[category_id]) ? intval($_GET[category_id]) : 0; $keyword trim($_GET[keyword] ?? ); $page max(1, intval($_GET[page] ?? 1)); $pageSize 12; $where WHERE status 1; if ($categoryId 0) { $where . AND category_id {$categoryId}; } if ($keyword ! ) { $where . AND title LIKE % . addslashes($keyword) . %; } $offset ($page - 1) * $pageSize; $sql SELECT * FROM items {$where} ORDER BY created_at DESC LIMIT {$offset}, {$pageSize};在輸出json時有一個忽略不了的編碼坑。用json_encode時中文默認會被轉(zhuǎn)成\uXXXX的形式這在前端解析完全沒問題但如果你在瀏覽器直接訪問接口排錯滿屏的\u字符會讓你懷疑是不是數(shù)據(jù)寫錯了。加上一個參數(shù)即可echo json_encode($result, JSON_UNESCAPED_UNICODE);凡是涉及用戶上傳文件圖片、視頻的接口必須在服務端做類型和大小校驗。前端限制只是體驗服務端校驗才是安全底線。圖片只允許jpg/png/webp視頻只允許mp4/m3u8文件大小按上限分別限制目錄權限不允許執(zhí)行php。4.5 nodejs網(wǎng)關層的簡易實現(xiàn)nodejs端我用express搭建代碼不到兩百行const express require(express) const http require(http) const path require(path) const app express() const DIST_DIR path.join(__dirname, ../dist) app.use(express.static(DIST_DIR)) app.all(/api/*, (req, res) { const target http://127.0.0.1:8000 req.originalUrl const proxyReq http.request(target, (proxyRes) { let body proxyRes.on(data, (chunk) { body chunk }) proxyRes.on(end, () { res.setHeader(Content-Type, application/json; charsetutf-8) res.end(body) }) }) proxyReq.on(error, (err) { res.status(502).json({ code: 502, message: 后端服務不可用 }) }) proxyReq.end() }) app.get(*, (req, res) { res.sendFile(path.join(DIST_DIR, index.html)) }) app.listen(3000, () { console.log(nodejs gateway running at http://localhost:3000) })注意最后那個app.get(*)是vue-router使用history模式時必須的前端路由是客戶端的刷新/items/3時直接訪問nodejswell如果不是這個兜底nodejs會直接404。vue-router的hash模式?jīng)]有這個問題但URL帶個#號不好看為了美觀還是要配上這個兜底路由。nodejs和php之間的通信格式要約定好。我定的規(guī)則是原樣透傳php返回什么nodejs就返回什么不在這里做任何業(yè)務加工。nodejs層只負責連接管理和錯誤兜底能少動業(yè)務就少動這也是這個架構能長期不崩的核心。4.6 PHP跨域與接口返回的數(shù)據(jù)格式跨域問題在生產(chǎn)和開發(fā)中出現(xiàn)的方式不同。開發(fā)環(huán)境vite已經(jīng)代理了不存在跨域但如果有人直接訪問php服務地址比如http://localhost:8000/api/items瀏覽器會攔截跨域響應。為保險起見php入口文件統(tǒng)一加響應頭header(Access-Control-Allow-Origin: *); header(Access-Control-Allow-Methods: GET, POST, OPTIONS); header(Access-Control-Allow-Headers: Content-Type, Authorization);同時處理OPTIONS預檢請求if ($_SERVER[REQUEST_METHOD] OPTIONS) { http_response_code(204); exit; }php接口數(shù)組對象的問題多說一句。底部統(tǒng)一返回的是關聯(lián)數(shù)組編碼后就是JSON對象如果你要返回列表記得包一層list這樣前端取值方便$response [ code 200, message success, data [ list $items, total $total, page $page ] ];5. 常見問題與排查技巧實錄5.1 高頻問題速查表問題現(xiàn)象根因解決方案npm.ps1無法加載禁止運行腳本PowerShell執(zhí)行策略限制管理員或當前用戶執(zhí)行Set-ExecutionPolicy -Scope CurrentUser RemoteSignednode -v不是內(nèi)部或外部命令環(huán)境變量未配置配置NODE_HOME到Pathvue項目npm install極慢默認源為國外切換淘寶鏡像源頁面刷新404未配置vue-router history兜底nodejs或nginx添加try_files $uri $uri/ /index.htmlvue發(fā)請求跨域開發(fā)/生產(chǎn)未做代理vite proxy或nginx反向代理到nodejsjson返回中文是\uXXXXphpjson_encode默認轉(zhuǎn)義加JSON_UNESCAPED_UNICODE詳情頁刷新參數(shù)丟失使用了params傳參改用query或路徑參數(shù)m3u8播放不了video標簽原生不支持hls引入hls.js庫解析前端改了接口報404代理路徑不對或接口前綴不一致確認/api前綴在nodejs與php中是否統(tǒng)一視頻上傳后無法訪問上傳目錄權限不對或nginx配置缺靜態(tài)映射調(diào)整目錄權限并檢查nginx alias配置5.2 php偽協(xié)議與文件安全做后臺管理時經(jīng)常涉及導出或文件預覽容易被攻擊者利用php偽協(xié)議做文章。所謂偽協(xié)議就是php://input、php://filter這些特殊輸入輸出流。讀取文件、包含文件時如果路徑來自用戶輸入且沒過濾攻擊者可以構造這樣的請求來讀取服務器上的源碼。預防手段是硬性的文件操作路徑必須是服務端拼接出來的不接受用戶傳入完整路徑禁用危險函數(shù)allow_url_include Off上傳文件重命名保留原擴展名并做白名單校驗靜態(tài)資源目錄禁止執(zhí)行php我在項目里做導入導出和文件上傳時嚴格遵循這三條上線前也會用安全掃描工具過一遍常見payload。做這類社區(qū)系統(tǒng)安全性不需要達到銀行級但基礎防線至少要齊整。5.3 排錯方法論從現(xiàn)象到根因遇到請求掛掉時我習慣按鏈路分層排查。最典型的現(xiàn)象是“前端點擊申請無響應”。第一步看瀏覽器開發(fā)者工具Network面板確認的是狀態(tài)碼是500還是404還是請求根本沒發(fā)出去。如果是404檢查nodejs代理路徑的代碼確認是請求體沒被正確轉(zhuǎn)發(fā)到php如果是500看nodejs終端返回的報錯信息確認php側(cè)是否語法錯誤或數(shù)據(jù)庫連接失敗。第二步看php的error日志。php的問題多半會記錄在php_errors.log里看fatal error錯誤提示追根溯源到具體文件和行號。這是最高效的排錯方式比在瀏覽器里干瞪眼強得多。第三步是接口數(shù)據(jù)驗證。直接在瀏覽器訪問http://localhost:8000/api/items?page1如果返回了合法json說明php側(cè)沒問題如果返回的是html格式的錯誤頁說明路由沒匹配或php配置異常。這一步能把問題快速定位到具體層避免在多層之間來回猜。5.4 部署到服務器時的三個隱形坑項目做到最后都要部署。服務器上跑這三件事nginx或nodejs托管前端、php-fpm跑后端、mysql存數(shù)據(jù)。實際部署中有三個容易出現(xiàn)但不容易察覺的坑。第一是路徑問題。本地代碼里的絕對路徑、圖片上傳目錄的物理路徑換到服務器后很可能不一樣。建議所有路徑都做成相對項目根目錄計算不要寫死D:/xxx或/home/xxx。第二是端口占用。服務器上默認80端口可能已被其他服務占用改端口后前端請求baseURL也要跟著改。如果不記得改配置前端能打開但接口全部失敗最容易誤判為后端問題。第三是數(shù)據(jù)庫編碼。建庫時明確用utf8mb4否則用戶提交的表情符號或生僻字會變問號。這個問題我見過太多次入庫前是好的入庫后取出來亂碼排查半天發(fā)現(xiàn)是建庫時默認用了latin1。6. 項目后期擴展方向與維護心得6.1 能給這個系統(tǒng)快速加上的實用功能主流程跑通后有幾個擴展方向性價比非常高。第一個是消息通知。管理員審核通過或駁回時往消息表插一條記錄前端輪詢或長連接推送未讀數(shù)量用戶體感立刻不一樣。實現(xiàn)成本極低效果卻非常明顯。第二個是數(shù)據(jù)可視化。管理員后臺加一個統(tǒng)計頁用echarts展示每月捐贈數(shù)、分類占比、熱門時間段。sql只需要group by匯總前端塞給echarts即可。第三個是掃碼溯源。給每件物品生成一個二維碼貼在線下物資上掃碼后跳轉(zhuǎn)到該物品的詳情頁。實現(xiàn)也不難二維碼內(nèi)容就放前端詳情頁URL。第四個是導出功能。用php把捐贈記錄導出成csv或excel管理員定期復盤時非常好用。注意導出Excel庫別選太重依賴的純csv用fputcsv就夠了。6.2 驗收時的加分細節(jié)這類項目最終免不了答辯或演示。有幾個細節(jié)很容易被忽略但很加分首次進入管理后臺時做一個初始管理員賬號的種子腳本演示時不需要臨時去數(shù)據(jù)庫插記錄演示數(shù)據(jù)不要太稀薄預置十來個分類、幾十件物品、多張真實感圖片演示效果比空頁面強十倍輪播圖、公告內(nèi)容都做成后臺可配置的現(xiàn)場演示時可以現(xiàn)場改內(nèi)容體現(xiàn)系統(tǒng)的“管理”屬性前端loading態(tài)和空數(shù)據(jù)態(tài)不要省?，F(xiàn)場網(wǎng)絡不穩(wěn)時好的loading態(tài)展示讓人感覺系統(tǒng)專業(yè)空白態(tài)則顯得功能沒做完6.3 代碼組織與協(xié)作模板多人協(xié)作做這個項目時最怕的是前后端各寫各的、接口對不上。我習慣在項目根目錄維護一份API.md每個接口都記錄方法、路徑、參數(shù)、返回示例。前端開發(fā)照著文檔聯(lián)調(diào)后端照著文檔實現(xiàn)誰改誰同步文檔聯(lián)動開發(fā)效率能提升一大截。目錄結(jié)構按三端拆分根目錄下分frontend、gateway、backend三個子目錄職責清晰community-donate/ ├─ frontend/ # vue項目 ├─ gateway/ # nodejs網(wǎng)關層 └─ backend/ # php業(yè)務層如果團隊用git建議三端分三個倉庫或至少分三個目錄互不干擾。我個人在寫這類教學型項目時會拆成三個子目錄放一個倉庫里方便大家一把clone就能看全貌。代碼規(guī)范的細節(jié)php端所有接口文件用統(tǒng)一命名空間和函數(shù)名風格vue端所有頁面組件放在views目錄、公共組件放components目錄。這些約定在項目開始第一天就定下來后期不會因為命名混亂而互相踩腳。6.4 運行壓力與穩(wěn)定性實測系統(tǒng)跑完主流程后我用一個簡單的壓測工具模擬了100個用戶同時瀏覽列表和提交申請。nodejs網(wǎng)關層扛6000并發(fā)請求沒有出現(xiàn)明顯錯誤php端因為每個請求都會建立數(shù)據(jù)庫連接性能瓶頸主要出現(xiàn)在數(shù)據(jù)庫連接池上。解決辦法是啟用php-fpm的進程池并開啟mysql的max_connections調(diào)整實際項目里同時在線幾十人完全沒問題。我編寫的壓測腳本非常簡單記錄在這里方便復現(xiàn)# 使用ab壓測ApacheBench模擬100并發(fā)、1000總請求 ab -n 1000 -c 100 http://localhost:3000/api/items?page1拿到結(jié)果后重點看Failed requests和Requests per second兩項。實測中如果失敗數(shù)為0rps在200以上這種體量拿來當畢設或社區(qū)內(nèi)部使用綽綽有余。6.5 我實際迭代三輪后的最終感受做這類系統(tǒng)我個人的感受是方案不需要有新意但細節(jié)必須扎實。最初覺得自己寫架構、寫中間層很酷各種過渡設計。真正迭代到第三輪面對真實使用場景時大部分復雜設計都被自己刪掉了留下來的都是最直接能解決問題的東西。比如nodejs轉(zhuǎn)發(fā)一開始我寫了一大堆日志和鑒權邏輯實際用了一段時間發(fā)現(xiàn)轉(zhuǎn)發(fā)層越薄越好錯誤透傳和格式統(tǒng)一才是它最重要的價值。代碼量上php端前后寫了大概兩千行vue端兩千多行nodejs端不到三百行總量不大但整個開發(fā)過程下來對前后端分離、接口設計、數(shù)據(jù)流轉(zhuǎn)這些概念的理解比單純看十篇教程都深刻。這也是這個項目最大的價值——它逼著你把整個鏈路親手走通而不是停留在某個框架的局部用法上。