高校Web技術(shù)課程期末實訓(xùn)參考資料七、實訓(xùn)總結(jié)與拓展7.1問題復(fù)盤常見問題：跨域錯誤：檢查前端代理或后端CORS配置；數(shù)據(jù)庫連接失?。簷z查數(shù)據(jù)庫地址、端口、用戶名密碼是否正確；接口返回500錯誤：查看后端日志（如SpringBoot的`blog.log`），定位異常原因。排查方法：前端：使用ChromeDevTools的`Network`面板查看請求/響應(yīng)；后端：查看應(yīng)用日志（如`blog.log`）；數(shù)據(jù)庫：使用`mysql`命令行工具連接數(shù)據(jù)庫，執(zhí)行SQL語句驗證數(shù)據(jù)。7.2性能優(yōu)化前端優(yōu)化：代碼壓縮：使用`webpack`（Vue/React默認支持）壓縮JS/CSS文件；圖片優(yōu)化：使用`imagemin`壓縮圖片，或使用WebP格式；懶加載：使用`vue-lazyload`（Vue）或`react-lazy`（React）實現(xiàn)圖片/組件懶加載。后端優(yōu)化：緩存：使用`Redis`緩存頻繁查詢的數(shù)據(jù)（如文章列表）；異步處理：使用`@Async`（SpringBoot）處理耗時操作（如發(fā)送郵件）；數(shù)據(jù)庫索引：添加合適的索引（如文章表的`created_at`字段）。7.3團隊協(xié)作Git分支策略：采用GitFlow，分支說明：`main`：主分支（存放穩(wěn)定版本）；`develop`：開發(fā)分支（整合feature分支）；`hotfix/xxx`：緊急修復(fù)分支（修復(fù)生產(chǎn)環(huán)境問題）。CodeReview：使用GitHub的`PullRequest`（PR）或GitLab的`MergeRequest`（MR）進行代碼審查，要求：代碼符合規(guī)范（如ESLint、CheckStyle）；邏輯清晰（避免復(fù)雜的嵌套）；有足夠的注釋（如接口功能、關(guān)鍵邏輯）。7.4拓展方向PWA（漸進式Web應(yīng)用）：將前端項目改造為PWA，支持離線訪問、添加到桌面；Serverless：使用阿里云函數(shù)計算（FC）或AWSLambda部署后端接口（無需管理服務(wù)器）；微服務(wù)：將后端拆分為多個微服務(wù)（如用戶服務(wù)、文章服務(wù)），使用SpringCloud或Node.js微服務(wù)框架（如NestJS）實現(xiàn)。附錄：參考資料與常見問題參考資料書籍：《Vue.js實戰(zhàn)》（梁灝）、《SpringBoot實戰(zhàn)》（王福強）、《數(shù)據(jù)庫系統(tǒng)概論》（王珊）；教程：B站“Vue3實戰(zhàn)教程”、“SpringBoot2.x實戰(zhàn)”。常見問題清單問題描述解決方法前端請求接口提示404檢查后端接口URL是否正確，或Nginx的反向代理配置是否正確后端無法連接數(shù)據(jù)庫檢查數(shù)據(jù)庫地址、端口、用戶名密碼是否正確，或防火墻是否允許3306端口JWT令牌過期客戶端跳轉(zhuǎn)到登錄頁，讓用戶重新登錄頁面加載慢優(yōu)化前端靜態(tài)資源（壓縮、CDN）、后端接口（緩存、索引）結(jié)語Web技術(shù)實訓(xùn)的核心是將理論知識轉(zhuǎn)化為實踐能力，通過完整項目的開發(fā)，學(xué)生不僅能掌握前端/后端/數(shù)據(jù)庫的技術(shù)細節(jié)，更能理解“需求-設(shè)計-開發(fā)-部署”的全流程。希望本資料能成為學(xué)生實訓(xùn)的得力助手，培養(yǎng)其嚴謹?shù)拈_發(fā)習(xí)慣與解決問題的能力。提示：實訓(xùn)過程中應(yīng)注重文檔編寫（如接