目實(shí)戰(zhàn)：從零搭建美食網(wǎng)站)
最近在輔導(dǎo)學(xué)生做畢業(yè)設(shè)計(jì)和課程實(shí)踐時(shí)發(fā)現(xiàn)很多同學(xué)對(duì)如何將前后端分離項(xiàng)目特別是Spring Boot Vue3的組合從源碼成功運(yùn)行起來(lái)感到棘手。網(wǎng)上的資料要么過(guò)于零散要么版本老舊環(huán)境配置、依賴(lài)沖突、跨域問(wèn)題、數(shù)據(jù)庫(kù)連接等“攔路虎”層出不窮。本文將以一個(gè)完整的“美食網(wǎng)站”項(xiàng)目為例手把手帶你走通從環(huán)境準(zhǔn)備、項(xiàng)目導(dǎo)入、依賴(lài)安裝、數(shù)據(jù)庫(kù)配置到最終成功運(yùn)行的每一個(gè)環(huán)節(jié)。無(wú)論你是正在尋找Java課設(shè)、畢設(shè)項(xiàng)目的學(xué)生還是希望學(xué)習(xí)Spring Boot和Vue3前后端協(xié)同開(kāi)發(fā)的開(kāi)發(fā)者這篇保姆級(jí)教程都能讓你獲得一個(gè)可運(yùn)行、可二次開(kāi)發(fā)的完整項(xiàng)目經(jīng)驗(yàn)。1. 項(xiàng)目概述與技術(shù)棧在開(kāi)始動(dòng)手之前我們先來(lái)了解一下這個(gè)“美食網(wǎng)站”項(xiàng)目的核心功能和它所采用的技術(shù)棧。這有助于你理解項(xiàng)目的整體架構(gòu)為后續(xù)的搭建和調(diào)試打下基礎(chǔ)。1.1 項(xiàng)目簡(jiǎn)介這是一個(gè)典型的前后端分離的Web應(yīng)用——美食分享與點(diǎn)評(píng)網(wǎng)站。用戶(hù)可以在網(wǎng)站上瀏覽各類(lèi)美食、查看詳細(xì)做法、發(fā)表評(píng)論、收藏喜歡的菜譜管理員則可以對(duì)菜品、用戶(hù)和評(píng)論進(jìn)行管理。這類(lèi)項(xiàng)目涵蓋了用戶(hù)管理、內(nèi)容CRUD增刪改查、文件上傳、數(shù)據(jù)分頁(yè)、權(quán)限控制等Web開(kāi)發(fā)的常見(jiàn)核心功能非常適合作為學(xué)習(xí)全棧開(kāi)發(fā)或完成課程設(shè)計(jì)的實(shí)戰(zhàn)案例。1.2 核心技術(shù)棧項(xiàng)目采用了當(dāng)前企業(yè)級(jí)開(kāi)發(fā)中非常流行且成熟的“前后端分離”架構(gòu)后端 (Backend):框架: Spring Boot 2.x。它極大地簡(jiǎn)化了Spring應(yīng)用的初始搭建和開(kāi)發(fā)過(guò)程提供了內(nèi)嵌的Web服務(wù)器和自動(dòng)配置。持久層: MyBatis-Plus。這是一個(gè)強(qiáng)大的MyBatis增強(qiáng)工具在MyBatis的基礎(chǔ)上只做增強(qiáng)不做改變簡(jiǎn)化了單表CRUD操作。數(shù)據(jù)庫(kù): MySQL 5.7 / 8.0。關(guān)系型數(shù)據(jù)庫(kù)用于存儲(chǔ)用戶(hù)、菜品、評(píng)論等結(jié)構(gòu)化數(shù)據(jù)。權(quán)限認(rèn)證: 可能集成Spring Security或使用JWT (JSON Web Token) 進(jìn)行用戶(hù)認(rèn)證和授權(quán)。其他: Lombok簡(jiǎn)化Java Bean代碼、Hibernate Validator參數(shù)校驗(yàn)、FastjsonJSON處理等。前端 (Frontend):框架: Vue 3。新一代漸進(jìn)式JavaScript框架采用Composition API提供了更好的邏輯復(fù)用和類(lèi)型推斷。構(gòu)建工具: Vite。新一代前端構(gòu)建工具具有極快的冷啟動(dòng)和熱更新速度開(kāi)發(fā)體驗(yàn)遠(yuǎn)超Webpack。UI組件庫(kù): Element Plus?；赩ue 3的桌面端組件庫(kù)提供了豐富的、高質(zhì)量的UI組件能快速搭建美觀的界面。狀態(tài)管理: Pinia (或 Vuex)。用于管理跨組件的共享狀態(tài)。路由: Vue Router 4。用于構(gòu)建單頁(yè)面應(yīng)用(SPA)的路由系統(tǒng)。HTTP客戶(hù)端: Axios?；赑romise的HTTP庫(kù)用于向后端API發(fā)送請(qǐng)求。1.3 項(xiàng)目結(jié)構(gòu)預(yù)覽通常這類(lèi)項(xiàng)目的源碼會(huì)包含兩個(gè)獨(dú)立的工程目錄food-website/ ├── backend/ # Spring Boot后端項(xiàng)目 │ ├── src/ │ ├── pom.xml # Maven依賴(lài)管理文件 │ └── application.yml # 主配置文件 └── frontend/ # Vue3前端項(xiàng)目 ├── src/ ├── package.json # Node.js依賴(lài)管理文件 ├── vite.config.js # Vite配置文件 └── index.html理解這個(gè)結(jié)構(gòu)對(duì)后續(xù)的獨(dú)立啟動(dòng)和聯(lián)調(diào)至關(guān)重要。2. 環(huán)境準(zhǔn)備與工具安裝工欲善其事必先利其器。確保你的開(kāi)發(fā)環(huán)境已安裝以下必要工具并注意版本兼容性這是避免后續(xù)各種詭異報(bào)錯(cuò)的第一步。2.1 后端開(kāi)發(fā)環(huán)境Java開(kāi)發(fā)工具包 (JDK):版本: JDK 8 或 JDK 11推薦。Spring Boot 2.x 對(duì)這兩個(gè)版本支持最好。檢查: 打開(kāi)命令行輸入java -version和javac -version確認(rèn)版本號(hào)并確保JAVA_HOME環(huán)境變量已正確配置。集成開(kāi)發(fā)環(huán)境 (IDE):IntelliJ IDEA (推薦): 社區(qū)版或旗艦版均可。它對(duì)Spring Boot和Maven的支持非常出色。Eclipse: 需安裝Spring Tools Suite (STS) 插件。項(xiàng)目管理與構(gòu)建工具:Maven: 用于管理項(xiàng)目依賴(lài)、構(gòu)建和打包。IDEA通常內(nèi)置但建議單獨(dú)安裝并配置MAVEN_HOME。命令行輸入mvn -v檢查。數(shù)據(jù)庫(kù):MySQL: 版本5.7或8.0。你需要安裝MySQL服務(wù)器并記住root用戶(hù)的密碼。同時(shí)建議安裝一個(gè)圖形化管理工具如Navicat、MySQL Workbench或DBeaver方便執(zhí)行SQL腳本和查看數(shù)據(jù)。2.2 前端開(kāi)發(fā)環(huán)境Node.js 與 npm:版本: Node.js 16.x 或 18.x LTS版本。npm會(huì)隨Node.js一同安裝。檢查: 命令行輸入node -v和npm -v。鏡像加速: 國(guó)內(nèi)網(wǎng)絡(luò)環(huán)境建議配置淘寶NPM鏡像以加速依賴(lài)下載npm config set registry https://registry.npmmirror.com代碼編輯器:Visual Studio Code (VSCode): 輕量且強(qiáng)大的編輯器對(duì)Vue和JavaScript支持極佳。需安裝VolarVue語(yǔ)言支持等插件。WebStorm: JetBrains出品的專(zhuān)業(yè)前端IDE功能全面但較重。2.3 版本控制工具 (可選但推薦)Git: 用于克隆項(xiàng)目源碼。安裝Git后可以使用git clone命令獲取項(xiàng)目也便于你自己進(jìn)行版本管理。3. 后端項(xiàng)目搭建與配置我們將首先啟動(dòng)后端服務(wù)因?yàn)榍岸诵枰{(diào)用后端的API接口。3.1 導(dǎo)入Spring Boot項(xiàng)目獲取源碼: 將提供的backend文件夾解壓或通過(guò)Git克隆到本地。使用IDEA打開(kāi):打開(kāi)IntelliJ IDEA選擇File-Open。導(dǎo)航到本地的backend文件夾選擇其根目錄下的pom.xml文件點(diǎn)擊“Open as Project”。IDEA會(huì)自動(dòng)識(shí)別為Maven項(xiàng)目并開(kāi)始下載依賴(lài)觀察右下角進(jìn)度條。首次導(dǎo)入可能需要幾分鐘請(qǐng)保持網(wǎng)絡(luò)通暢。3.2 配置數(shù)據(jù)庫(kù)這是最關(guān)鍵的一步大部分啟動(dòng)失敗都源于數(shù)據(jù)庫(kù)連接問(wèn)題。創(chuàng)建數(shù)據(jù)庫(kù): 使用你的MySQL客戶(hù)端如Navicat新建一個(gè)數(shù)據(jù)庫(kù)字符集建議使用utf8mb4排序規(guī)則utf8mb4_general_ci。例如創(chuàng)建名為food_website的數(shù)據(jù)庫(kù)。CREATE DATABASE food_website CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;執(zhí)行SQL腳本: 在項(xiàng)目資源文件夾通常是backend/src/main/resources或項(xiàng)目根目錄下找到sql文件夾里面應(yīng)該有數(shù)據(jù)庫(kù)初始化腳本如schema.sql和data.sql。在MySQL客戶(hù)端中打開(kāi)這個(gè)數(shù)據(jù)庫(kù)然后運(yùn)行這些SQL文件創(chuàng)建表結(jié)構(gòu)和初始化數(shù)據(jù)。修改配置文件: 找到后端項(xiàng)目的配置文件通常是application.yml或application.properties位于src/main/resources目錄下。# application.yml 示例 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/food_website?useUnicodetruecharacterEncodingutf-8useSSLfalseserverTimezoneAsia/Shanghai username: root # 你的MySQL用戶(hù)名 password: your_password # 你的MySQL密碼 servlet: multipart: max-file-size: 10MB # 文件上傳大小限制 max-request-size: 100MB mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 控制臺(tái)打印SQL調(diào)試用務(wù)必將url、username、password修改為你自己MySQL環(huán)境的配置。serverTimezone設(shè)置可以避免時(shí)區(qū)錯(cuò)誤。3.3 解決依賴(lài)與啟動(dòng)問(wèn)題如果IDEA提示依賴(lài)錯(cuò)誤或項(xiàng)目啟動(dòng)失敗請(qǐng)按以下步驟排查Maven依賴(lài)刷新: 點(diǎn)擊IDEA右側(cè)邊欄的“Maven”標(biāo)簽點(diǎn)擊刷新按鈕Reimport All Maven Projects。檢查JDK版本: 確保IDEA中項(xiàng)目的Project SDK和Language level與本地安裝的JDK版本一致File-Project Structure。端口沖突: 默認(rèn)情況下Spring Boot應(yīng)用啟動(dòng)在8080端口。如果該端口被占用可以在application.yml中修改server: port: 8081 # 改為其他端口如8081啟動(dòng)主類(lèi): 找到src/main/java下包路徑中的XXXApplication類(lèi)通常以Application結(jié)尾右鍵點(diǎn)擊Run。查看日志: 啟動(dòng)時(shí)密切關(guān)注IDEA控制臺(tái)輸出的日志。如果看到Started ...Application in x.xxx seconds字樣并且沒(méi)有明顯的ERROR說(shuō)明后端啟動(dòng)成功。4. 前端項(xiàng)目搭建與運(yùn)行后端服務(wù)跑起來(lái)后我們?cè)賮?lái)啟動(dòng)前端項(xiàng)目。4.1 安裝Node.js依賴(lài)打開(kāi)前端項(xiàng)目: 使用VSCode或命令行進(jìn)入本地的frontend目錄。安裝依賴(lài): 在frontend目錄下打開(kāi)終端執(zhí)行以下命令。此過(guò)程會(huì)下載所有依賴(lài)包到node_modules文件夾。npm install # 或使用更快的 cnpm如果已安裝 # cnpm install如果網(wǎng)絡(luò)不佳導(dǎo)致失敗可以重復(fù)執(zhí)行或檢查npm鏡像配置。4.2 配置API代理前端運(yùn)行在獨(dú)立的端口如5173訪(fǎng)問(wèn)后端API8080端口時(shí)會(huì)產(chǎn)生跨域問(wèn)題。在開(kāi)發(fā)環(huán)境下我們通過(guò)Vite的代理功能來(lái)解決。 找到frontend/vite.config.js文件進(jìn)行如下配置import { defineConfig } from vite import vue from vitejs/plugin-vue // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server: { port: 5173, // 前端開(kāi)發(fā)服務(wù)器端口 proxy: { // 代理所有以 /api 開(kāi)頭的請(qǐng)求 /api: { target: http://localhost:8080, // 你的后端服務(wù)地址 changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) // 可選重寫(xiě)路徑。如果后端接口本身沒(méi)有/api前綴可能需要這個(gè) } } } })關(guān)鍵點(diǎn)target必須指向你正在運(yùn)行的后端服務(wù)地址和端口。如果你的后端運(yùn)行在8081端口這里就要改為http://localhost:8081。4.3 啟動(dòng)前端開(kāi)發(fā)服務(wù)器在frontend目錄下的終端中運(yùn)行npm run dev命令執(zhí)行成功后終端會(huì)輸出類(lèi)似Local: http://localhost:5173的信息。用瀏覽器打開(kāi)這個(gè)鏈接你應(yīng)該能看到美食網(wǎng)站的界面。5. 核心功能模塊代碼解析項(xiàng)目成功運(yùn)行后我們來(lái)深入看看幾個(gè)關(guān)鍵模塊的代碼實(shí)現(xiàn)理解其工作原理。5.1 后端數(shù)據(jù)層MyBatis-Plus的使用以“菜品”模塊為例查看Dish實(shí)體類(lèi)、DishMapper接口和DishService實(shí)現(xiàn)。// 1. 實(shí)體類(lèi) (Entity) // 文件路徑backend/src/main/java/com/example/food/entity/Dish.java import com.baomidou.mybatisplus.annotation.*; import lombok.Data; import java.time.LocalDateTime; Data TableName(t_dish) // 指定對(duì)應(yīng)數(shù)據(jù)庫(kù)表名 public class Dish { TableId(type IdType.AUTO) // 主鍵自增 private Long id; private String name; private String category; private String description; private String imageUrl; private Integer viewCount; TableField(fill FieldFill.INSERT) // 插入時(shí)自動(dòng)填充 private LocalDateTime createTime; TableField(fill FieldFill.INSERT_UPDATE) // 插入和更新時(shí)自動(dòng)填充 private LocalDateTime updateTime; } // 2. Mapper接口 // 文件路徑backend/src/main/java/com/example/food/mapper/DishMapper.java import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.example.food.entity.Dish; public interface DishMapper extends BaseMapperish { // 繼承BaseMapper后基本的CRUD方法已自動(dòng)具備無(wú)需編寫(xiě)XML } // 3. Service層 // 文件路徑backend/src/main/java/com/example/food/service/impl/DishServiceImpl.java import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.example.food.entity.Dish; import com.example.food.mapper.DishMapper; import com.example.food.service.DishService; import org.springframework.stereotype.Service; Service public class DishServiceImpl extends ServiceImplDishMapper, Dish implements DishService { // 可以在這里編寫(xiě)復(fù)雜的業(yè)務(wù)邏輯 // 例如帶條件的分頁(yè)查詢(xún) public PageDish getDishPage(PageDish page, String keyword) { return lambdaQuery() .like(keyword ! null, Dish::getName, keyword) // 動(dòng)態(tài)條件關(guān)鍵詞不為空時(shí)模糊查詢(xún)名稱(chēng) .orderByDesc(Dish::getCreateTime) .page(page); } }說(shuō)明MyBatis-Plus極大地簡(jiǎn)化了單表操作。ServiceImpl已經(jīng)提供了save,removeById,updateById,getById,page等方法。5.2 后端控制層RESTful API設(shè)計(jì)查看DishController了解如何暴露API給前端。// 文件路徑backend/src/main/java/com/example/food/controller/DishController.java import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.example.food.common.Result; import com.example.food.entity.Dish; import com.example.food.service.DishService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; RestController RequestMapping(/dish) public class DishController { Autowired private DishService dishService; // 新增菜品 PostMapping public Result save(RequestBody Dish dish) { boolean saved dishService.save(dish); return saved ? Result.success() : Result.error(保存失敗); } // 分頁(yè)查詢(xún)菜品列表 GetMapping(/page) public Result findPage(RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String name) { PageDish page new Page(pageNum, pageSize); PageDish dishPage dishService.getDishPage(page, name); return Result.success(dishPage); } // 根據(jù)ID查詢(xún)菜品詳情 GetMapping(/{id}) public Result getById(PathVariable Long id) { Dish dish dishService.getById(id); return dish ! null ? Result.success(dish) : Result.error(未找到該菜品); } // 更新菜品 PutMapping public Result update(RequestBody Dish dish) { boolean updated dishService.updateById(dish); return updated ? Result.success() : Result.error(更新失敗); } // 刪除菜品 DeleteMapping(/{id}) public Result delete(PathVariable Long id) { boolean removed dishService.removeById(id); return removed ? Result.success() : Result.error(刪除失敗); } }說(shuō)明使用了標(biāo)準(zhǔn)的RESTful風(fēng)格PostMapping,GetMapping,PutMapping,DeleteMapping對(duì)應(yīng)增刪改查操作。Result是一個(gè)自定義的統(tǒng)一響應(yīng)封裝類(lèi)。5.3 前端頁(yè)面組件與請(qǐng)求封裝以菜品列表頁(yè)為例看Vue3組件如何組織并與后端交互。!-- 文件路徑frontend/src/views/dish/DishList.vue -- template div classdish-container el-card template #header div classcard-header span菜品管理/span el-button typeprimary clickhandleAdd新增菜品/el-button /div /template !-- 搜索欄 -- el-form :inlinetrue :modelsearchForm el-form-item label菜品名稱(chēng) el-input v-modelsearchForm.name placeholder請(qǐng)輸入名稱(chēng) clearable / /el-form-item el-form-item el-button typeprimary clickloadData查詢(xún)/el-button el-button clickresetSearch重置/el-button /el-form-item /el-form !-- 數(shù)據(jù)表格 -- el-table :datatableData border stylewidth: 100% el-table-column propid labelID width80 / el-table-column propname label菜品名稱(chēng) / el-table-column propcategory label分類(lèi) / el-table-column propviewCount label瀏覽量 width100 / el-table-column propcreateTime label創(chuàng)建時(shí)間 width180 / el-table-column label操作 width200 template #defaultscope el-button sizesmall clickhandleEdit(scope.row)編輯/el-button el-button sizesmall typedanger clickhandleDelete(scope.row.id)刪除/el-button /template /el-table-column /el-table !-- 分頁(yè)組件 -- div classpagination el-pagination v-model:current-pagecurrentPage v-model:page-sizepageSize :page-sizes[10, 20, 50, 100] :totaltotal layouttotal, sizes, prev, pager, next, jumper size-changehandleSizeChange current-changehandleCurrentChange / /div /el-card !-- 新增/編輯對(duì)話(huà)框 -- DishDialog v-modeldialogVisible :form-datadialogForm successloadData / /div /template script setup import { ref, reactive, onMounted } from vue import { ElMessage, ElMessageBox } from element-plus import DishDialog from ./components/DishDialog.vue import { getDishPage, deleteDish } from /api/dish // 導(dǎo)入封裝好的API函數(shù) // 響應(yīng)式數(shù)據(jù) const tableData ref([]) const currentPage ref(1) const pageSize ref(10) const total ref(0) const dialogVisible ref(false) const dialogForm ref({}) const searchForm reactive({ name: }) // 方法 const loadData async () { try { const params { pageNum: currentPage.value, pageSize: pageSize.value, name: searchForm.value.name } const res await getDishPage(params) // 調(diào)用API tableData.value res.data.records total.value res.data.total } catch (error) { ElMessage.error(獲取數(shù)據(jù)失敗) } } const handleAdd () { dialogForm.value {} dialogVisible.value true } const handleEdit (row) { dialogForm.value { ...row } // 淺拷貝避免直接修改原數(shù)據(jù) dialogVisible.value true } const handleDelete (id) { ElMessageBox.confirm(確認(rèn)刪除該菜品嗎, 提示, { type: warning }).then(async () { await deleteDish(id) ElMessage.success(刪除成功) loadData() }).catch(() {}) } const handleSizeChange (val) { pageSize.value val loadData() } const handleCurrentChange (val) { currentPage.value val loadData() } const resetSearch () { searchForm.name loadData() } // 生命周期鉤子 onMounted(() { loadData() }) /script style scoped .dish-container { padding: 20px; } .card-header { display: flex; justify-content: space-between; align-items: center; } .pagination { margin-top: 20px; display: flex; justify-content: flex-end; } /style說(shuō)明該組件使用了Vue3的script setup語(yǔ)法配合Element Plus組件實(shí)現(xiàn)了數(shù)據(jù)表格、分頁(yè)、搜索和操作按鈕。/api/dish是封裝的Axios請(qǐng)求模塊。6. 項(xiàng)目部署與打包開(kāi)發(fā)完成后需要將項(xiàng)目打包部署到服務(wù)器或用于提交。6.1 后端Spring Boot打包使用Maven打包: 在IDEA的Maven工具欄中找到backend項(xiàng)目執(zhí)行Lifecycle-package?；蛘咴诤蠖隧?xiàng)目根目錄下命令行執(zhí)行mvn clean package -DskipTests-DskipTests參數(shù)跳過(guò)測(cè)試加速打包。獲取Jar包: 打包成功后在backend/target目錄下會(huì)生成一個(gè)xxx-0.0.1-SNAPSHOT.jar文件名稱(chēng)取決于pom.xml中的artifactId和version。運(yùn)行Jar包: 將Jar包上傳到服務(wù)器或本地測(cè)試在命令行中運(yùn)行java -jar your-backend-app.jar確保服務(wù)器上已安裝對(duì)應(yīng)版本的JDK和MySQL并正確配置了數(shù)據(jù)庫(kù)連接通常通過(guò)外部application.yml或環(huán)境變量覆蓋默認(rèn)配置。6.2 前端Vue3項(xiàng)目打包構(gòu)建生產(chǎn)版本: 在frontend目錄下運(yùn)行npm run build此命令會(huì)使用Vite將項(xiàng)目編譯、壓縮生成靜態(tài)文件HTML, CSS, JS。獲取產(chǎn)物: 構(gòu)建完成后會(huì)在項(xiàng)目根目錄下生成一個(gè)dist文件夾。這個(gè)文件夾里的所有內(nèi)容就是前端的生產(chǎn)環(huán)境代碼。部署:方式一前后端分離部署: 將dist文件夾內(nèi)的文件部署到任何靜態(tài)文件服務(wù)器如Nginx, Apache, 對(duì)象存儲(chǔ)COS/OSS等。同時(shí)需要配置Nginx將API請(qǐng)求反向代理到后端服務(wù)類(lèi)似開(kāi)發(fā)環(huán)境的Vite代理。# Nginx 配置示例片段 server { listen 80; server_name your-domain.com; # 你的域名或IP location / { root /path/to/your/dist; # dist文件夾路徑 index index.html; try_files $uri $uri/ /index.html; # 支持Vue Router的history模式 } location /api/ { proxy_pass http://localhost:8080/; # 代理到后端服務(wù) proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }方式二整合部署: 將dist文件夾內(nèi)的所有文件復(fù)制到Spring Boot項(xiàng)目的src/main/resources/static目錄下然后重新打包Spring Boot項(xiàng)目。這樣前后端就會(huì)被打包進(jìn)同一個(gè)Jar包訪(fǎng)問(wèn)http://ip:port即可。這種方式適合簡(jiǎn)單的演示或內(nèi)網(wǎng)應(yīng)用但不利于前后端獨(dú)立更新。7. 常見(jiàn)問(wèn)題與解決方案 (FAQ)在搭建和運(yùn)行過(guò)程中你可能會(huì)遇到以下問(wèn)題問(wèn)題現(xiàn)象可能原因解決方案后端啟動(dòng)失敗報(bào)java.net.ConnectException: Connection refused1. MySQL服務(wù)未啟動(dòng)。2. 數(shù)據(jù)庫(kù)連接配置URL, 用戶(hù)名, 密碼錯(cuò)誤。3. MySQL的3306端口被防火墻阻止。1. 啟動(dòng)MySQL服務(wù)net start mysql或通過(guò)服務(wù)管理器。2. 仔細(xì)檢查application.yml中的數(shù)據(jù)庫(kù)配置確保數(shù)據(jù)庫(kù)名、用戶(hù)名、密碼正確。3. 檢查防火墻設(shè)置或嘗試用命令行客戶(hù)端如mysql -u root -p連接確認(rèn)。前端npm install失敗網(wǎng)絡(luò)錯(cuò)誤或版本沖突1. 網(wǎng)絡(luò)問(wèn)題無(wú)法訪(fǎng)問(wèn)npm倉(cāng)庫(kù)。2. Node.js版本與項(xiàng)目所需版本不兼容。3. 本地緩存問(wèn)題。1. 配置淘寶鏡像npm config set registry https://registry.npmmirror.com或使用cnpm。2. 使用nvm管理Node.js版本切換到項(xiàng)目推薦的LTS版本如16.x。3. 刪除node_modules和package-lock.json重新執(zhí)行npm install。前端運(yùn)行后頁(yè)面空白或控制臺(tái)報(bào)跨域錯(cuò)誤1. 后端服務(wù)未啟動(dòng)。2. Vite代理配置錯(cuò)誤target地址端口不對(duì)。3. 前端請(qǐng)求的API路徑與后端Controller路徑不匹配。1. 確認(rèn)后端Spring Boot應(yīng)用已成功啟動(dòng)。2. 檢查vite.config.js中的proxy.target確保指向正確的后端地址localhost:端口。3. 打開(kāi)瀏覽器開(kāi)發(fā)者工具F12的Network標(biāo)簽查看請(qǐng)求的URL是否正確并與后端RequestMapping的路徑對(duì)比。頁(yè)面能打開(kāi)但圖片不顯示1. 圖片路徑錯(cuò)誤。2. 后端文件上傳/訪(fǎng)問(wèn)接口未正確配置或未啟動(dòng)。3. 圖片存儲(chǔ)在本地但前端通過(guò)HTTP訪(fǎng)問(wèn)了file://協(xié)議。1. 檢查圖片src屬性路徑。如果是上傳的圖片路徑通常是后端返回的相對(duì)或絕對(duì)URL。2. 確認(rèn)后端是否有處理靜態(tài)資源如圖片的配置例如WebMvcConfigurer中配置了資源映射。3. 開(kāi)發(fā)時(shí)圖片應(yīng)通過(guò)后端服務(wù)訪(fǎng)問(wèn)而不是直接引用本地磁盤(pán)路徑。進(jìn)行增刪改查操作時(shí)后端返回404或500錯(cuò)誤1. 請(qǐng)求方法GET/POST/PUT/DELETE與Controller中定義的不匹配。2. 請(qǐng)求參數(shù)格式錯(cuò)誤如RequestBody期望JSON但收到了表單數(shù)據(jù)。3. 后端服務(wù)代碼存在空指針等運(yùn)行時(shí)異常。1. 對(duì)照Controller中的PostMapping等注解檢查前端Axios請(qǐng)求的method。2. 使用Postman等工具模擬請(qǐng)求檢查請(qǐng)求頭和請(qǐng)求體格式。3. 查看后端控制臺(tái)日志找到具體的錯(cuò)誤堆棧信息進(jìn)行排查。打包后前端頁(yè)面路由刷新出現(xiàn)404前端使用了Vue Router的history模式但服務(wù)器如Nginx未配置try_files回退到index.html。在Nginx配置中為前端靜態(tài)文件服務(wù)的location塊添加try_files $uri $uri/ /index.html;指令。8. 項(xiàng)目擴(kuò)展與最佳實(shí)踐建議掌握了基礎(chǔ)搭建后你可以嘗試以下方向來(lái)深化理解和提升項(xiàng)目質(zhì)量完善用戶(hù)認(rèn)證與授權(quán):研究并集成JWT。實(shí)現(xiàn)登錄接口頒發(fā)Token前端在請(qǐng)求頭中攜帶Authorization: Bearer token后端通過(guò)攔截器驗(yàn)證。使用Spring Security實(shí)現(xiàn)更細(xì)粒度的角色ROLE_ADMIN, ROLE_USER和權(quán)限控制。優(yōu)化數(shù)據(jù)庫(kù)與性能:為頻繁查詢(xún)的字段如name,category添加數(shù)據(jù)庫(kù)索引。在Service層使用Redis緩存熱點(diǎn)數(shù)據(jù)如首頁(yè)推薦菜品。對(duì)大批量數(shù)據(jù)查詢(xún)優(yōu)化SQL語(yǔ)句避免SELECT *。增強(qiáng)前端體驗(yàn)與工程化:使用Pinia進(jìn)行全局狀態(tài)管理替代組件間復(fù)雜的props和emit傳遞。封裝更完善的Axios實(shí)例統(tǒng)一處理請(qǐng)求攔截添加Token、響應(yīng)攔截處理錯(cuò)誤和加載狀態(tài)。使用環(huán)境變量.env.development,.env.production管理不同環(huán)境開(kāi)發(fā)、測(cè)試、生產(chǎn)的API基礎(chǔ)地址。添加路由守衛(wèi)Router Guards實(shí)現(xiàn)頁(yè)面級(jí)的權(quán)限檢查。引入API文檔與測(cè)試:集成Swagger或Knife4j自動(dòng)生成后端API接口文檔方便前后端聯(lián)調(diào)。編寫(xiě)JUnit單元測(cè)試和Postman/Eolinker接口測(cè)試集合保證代碼質(zhì)量。容器化部署:學(xué)習(xí)Docker為后端和前端分別編寫(xiě)Dockerfile。使用docker-compose.yml定義MySQL、Spring Boot、Nginx等服務(wù)實(shí)現(xiàn)一鍵部署。代碼規(guī)范與提交:在IDEA中安裝Alibaba Java Coding Guidelines插件檢查后端代碼。使用ESLint Prettier規(guī)范前端代碼。使用Git進(jìn)行版本控制遵循清晰的Commit Message規(guī)范如Conventional Commits。這個(gè)“美食網(wǎng)站”項(xiàng)目是一個(gè)非常好的全棧開(kāi)發(fā)學(xué)習(xí)載體。通過(guò)完成從環(huán)境搭建、功能分析、代碼閱讀、調(diào)試排錯(cuò)到打包部署的全過(guò)程你不僅能掌握Spring Boot和Vue3的核心開(kāi)發(fā)技能更能建立起一個(gè)完整的、可落地的Web項(xiàng)目開(kāi)發(fā)思維。建議你在成功運(yùn)行項(xiàng)目后不要止步于此而是選擇上面的一兩個(gè)擴(kuò)展方向進(jìn)行實(shí)踐把項(xiàng)目真正變成你自己的經(jīng)驗(yàn)。如果在學(xué)習(xí)過(guò)程中遇到具體問(wèn)題多查閱官方文檔、在技術(shù)社區(qū)搜索錯(cuò)誤信息并善用調(diào)試工具解決問(wèn)題的能力正是在解決一個(gè)個(gè)具體bug中成長(zhǎng)起來(lái)的。 Spring Boot+Vue3前后端分離項(xiàng)目實(shí)戰(zhàn)：從零搭建美食網(wǎng)站
最近在輔導(dǎo)學(xué)生做畢業(yè)設(shè)計(jì)和課程實(shí)踐時(shí)發(fā)現(xiàn)很多同學(xué)對(duì)如何將前后端分離項(xiàng)目特別是Spring Boot Vue3的組合從源碼成功運(yùn)行起來(lái)感到棘手。網(wǎng)上的資料要么過(guò)于零散要么版本老舊環(huán)境配置、依賴(lài)沖突、跨域問(wèn)題、數(shù)據(jù)庫(kù)連接等“攔路虎”層出不窮。本文將以一個(gè)完整的“美食網(wǎng)站”項(xiàng)目為例手把手帶你走通從環(huán)境準(zhǔn)備、項(xiàng)目導(dǎo)入、依賴(lài)安裝、數(shù)據(jù)庫(kù)配置到最終成功運(yùn)行的每一個(gè)環(huán)節(jié)。無(wú)論你是正在尋找Java課設(shè)、畢設(shè)項(xiàng)目的學(xué)生還是希望學(xué)習(xí)Spring Boot和Vue3前后端協(xié)同開(kāi)發(fā)的開(kāi)發(fā)者這篇保姆級(jí)教程都能讓你獲得一個(gè)可運(yùn)行、可二次開(kāi)發(fā)的完整項(xiàng)目經(jīng)驗(yàn)。1. 項(xiàng)目概述與技術(shù)棧在開(kāi)始動(dòng)手之前我們先來(lái)了解一下這個(gè)“美食網(wǎng)站”項(xiàng)目的核心功能和它所采用的技術(shù)棧。這有助于你理解項(xiàng)目的整體架構(gòu)為后續(xù)的搭建和調(diào)試打下基礎(chǔ)。1.1 項(xiàng)目簡(jiǎn)介這是一個(gè)典型的前后端分離的Web應(yīng)用——美食分享與點(diǎn)評(píng)網(wǎng)站。用戶(hù)可以在網(wǎng)站上瀏覽各類(lèi)美食、查看詳細(xì)做法、發(fā)表評(píng)論、收藏喜歡的菜譜管理員則可以對(duì)菜品、用戶(hù)和評(píng)論進(jìn)行管理。這類(lèi)項(xiàng)目涵蓋了用戶(hù)管理、內(nèi)容CRUD增刪改查、文件上傳、數(shù)據(jù)分頁(yè)、權(quán)限控制等Web開(kāi)發(fā)的常見(jiàn)核心功能非常適合作為學(xué)習(xí)全棧開(kāi)發(fā)或完成課程設(shè)計(jì)的實(shí)戰(zhàn)案例。1.2 核心技術(shù)棧項(xiàng)目采用了當(dāng)前企業(yè)級(jí)開(kāi)發(fā)中非常流行且成熟的“前后端分離”架構(gòu)后端 (Backend):框架: Spring Boot 2.x。它極大地簡(jiǎn)化了Spring應(yīng)用的初始搭建和開(kāi)發(fā)過(guò)程提供了內(nèi)嵌的Web服務(wù)器和自動(dòng)配置。持久層: MyBatis-Plus。這是一個(gè)強(qiáng)大的MyBatis增強(qiáng)工具在MyBatis的基礎(chǔ)上只做增強(qiáng)不做改變簡(jiǎn)化了單表CRUD操作。數(shù)據(jù)庫(kù): MySQL 5.7 / 8.0。關(guān)系型數(shù)據(jù)庫(kù)用于存儲(chǔ)用戶(hù)、菜品、評(píng)論等結(jié)構(gòu)化數(shù)據(jù)。權(quán)限認(rèn)證: 可能集成Spring Security或使用JWT (JSON Web Token) 進(jìn)行用戶(hù)認(rèn)證和授權(quán)。其他: Lombok簡(jiǎn)化Java Bean代碼、Hibernate Validator參數(shù)校驗(yàn)、FastjsonJSON處理等。前端 (Frontend):框架: Vue 3。新一代漸進(jìn)式JavaScript框架采用Composition API提供了更好的邏輯復(fù)用和類(lèi)型推斷。構(gòu)建工具: Vite。新一代前端構(gòu)建工具具有極快的冷啟動(dòng)和熱更新速度開(kāi)發(fā)體驗(yàn)遠(yuǎn)超Webpack。UI組件庫(kù): Element Plus?；赩ue 3的桌面端組件庫(kù)提供了豐富的、高質(zhì)量的UI組件能快速搭建美觀的界面。狀態(tài)管理: Pinia (或 Vuex)。用于管理跨組件的共享狀態(tài)。路由: Vue Router 4。用于構(gòu)建單頁(yè)面應(yīng)用(SPA)的路由系統(tǒng)。HTTP客戶(hù)端: Axios?；赑romise的HTTP庫(kù)用于向后端API發(fā)送請(qǐng)求。1.3 項(xiàng)目結(jié)構(gòu)預(yù)覽通常這類(lèi)項(xiàng)目的源碼會(huì)包含兩個(gè)獨(dú)立的工程目錄food-website/ ├── backend/ # Spring Boot后端項(xiàng)目 │ ├── src/ │ ├── pom.xml # Maven依賴(lài)管理文件 │ └── application.yml # 主配置文件 └── frontend/ # Vue3前端項(xiàng)目 ├── src/ ├── package.json # Node.js依賴(lài)管理文件 ├── vite.config.js # Vite配置文件 └── index.html理解這個(gè)結(jié)構(gòu)對(duì)后續(xù)的獨(dú)立啟動(dòng)和聯(lián)調(diào)至關(guān)重要。2. 環(huán)境準(zhǔn)備與工具安裝工欲善其事必先利其器。確保你的開(kāi)發(fā)環(huán)境已安裝以下必要工具并注意版本兼容性這是避免后續(xù)各種詭異報(bào)錯(cuò)的第一步。2.1 后端開(kāi)發(fā)環(huán)境Java開(kāi)發(fā)工具包 (JDK):版本: JDK 8 或 JDK 11推薦。Spring Boot 2.x 對(duì)這兩個(gè)版本支持最好。檢查: 打開(kāi)命令行輸入java -version和javac -version確認(rèn)版本號(hào)并確保JAVA_HOME環(huán)境變量已正確配置。集成開(kāi)發(fā)環(huán)境 (IDE):IntelliJ IDEA (推薦): 社區(qū)版或旗艦版均可。它對(duì)Spring Boot和Maven的支持非常出色。Eclipse: 需安裝Spring Tools Suite (STS) 插件。項(xiàng)目管理與構(gòu)建工具:Maven: 用于管理項(xiàng)目依賴(lài)、構(gòu)建和打包。IDEA通常內(nèi)置但建議單獨(dú)安裝并配置MAVEN_HOME。命令行輸入mvn -v檢查。數(shù)據(jù)庫(kù):MySQL: 版本5.7或8.0。你需要安裝MySQL服務(wù)器并記住root用戶(hù)的密碼。同時(shí)建議安裝一個(gè)圖形化管理工具如Navicat、MySQL Workbench或DBeaver方便執(zhí)行SQL腳本和查看數(shù)據(jù)。2.2 前端開(kāi)發(fā)環(huán)境Node.js 與 npm:版本: Node.js 16.x 或 18.x LTS版本。npm會(huì)隨Node.js一同安裝。檢查: 命令行輸入node -v和npm -v。鏡像加速: 國(guó)內(nèi)網(wǎng)絡(luò)環(huán)境建議配置淘寶NPM鏡像以加速依賴(lài)下載npm config set registry https://registry.npmmirror.com代碼編輯器:Visual Studio Code (VSCode): 輕量且強(qiáng)大的編輯器對(duì)Vue和JavaScript支持極佳。需安裝VolarVue語(yǔ)言支持等插件。WebStorm: JetBrains出品的專(zhuān)業(yè)前端IDE功能全面但較重。2.3 版本控制工具 (可選但推薦)Git: 用于克隆項(xiàng)目源碼。安裝Git后可以使用git clone命令獲取項(xiàng)目也便于你自己進(jìn)行版本管理。3. 后端項(xiàng)目搭建與配置我們將首先啟動(dòng)后端服務(wù)因?yàn)榍岸诵枰{(diào)用后端的API接口。3.1 導(dǎo)入Spring Boot項(xiàng)目獲取源碼: 將提供的backend文件夾解壓或通過(guò)Git克隆到本地。使用IDEA打開(kāi):打開(kāi)IntelliJ IDEA選擇File-Open。導(dǎo)航到本地的backend文件夾選擇其根目錄下的pom.xml文件點(diǎn)擊“Open as Project”。IDEA會(huì)自動(dòng)識(shí)別為Maven項(xiàng)目并開(kāi)始下載依賴(lài)觀察右下角進(jìn)度條。首次導(dǎo)入可能需要幾分鐘請(qǐng)保持網(wǎng)絡(luò)通暢。3.2 配置數(shù)據(jù)庫(kù)這是最關(guān)鍵的一步大部分啟動(dòng)失敗都源于數(shù)據(jù)庫(kù)連接問(wèn)題。創(chuàng)建數(shù)據(jù)庫(kù): 使用你的MySQL客戶(hù)端如Navicat新建一個(gè)數(shù)據(jù)庫(kù)字符集建議使用utf8mb4排序規(guī)則utf8mb4_general_ci。例如創(chuàng)建名為food_website的數(shù)據(jù)庫(kù)。CREATE DATABASE food_website CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;執(zhí)行SQL腳本: 在項(xiàng)目資源文件夾通常是backend/src/main/resources或項(xiàng)目根目錄下找到sql文件夾里面應(yīng)該有數(shù)據(jù)庫(kù)初始化腳本如schema.sql和data.sql。在MySQL客戶(hù)端中打開(kāi)這個(gè)數(shù)據(jù)庫(kù)然后運(yùn)行這些SQL文件創(chuàng)建表結(jié)構(gòu)和初始化數(shù)據(jù)。修改配置文件: 找到后端項(xiàng)目的配置文件通常是application.yml或application.properties位于src/main/resources目錄下。# application.yml 示例 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/food_website?useUnicodetruecharacterEncodingutf-8useSSLfalseserverTimezoneAsia/Shanghai username: root # 你的MySQL用戶(hù)名 password: your_password # 你的MySQL密碼 servlet: multipart: max-file-size: 10MB # 文件上傳大小限制 max-request-size: 100MB mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 控制臺(tái)打印SQL調(diào)試用務(wù)必將url、username、password修改為你自己MySQL環(huán)境的配置。serverTimezone設(shè)置可以避免時(shí)區(qū)錯(cuò)誤。3.3 解決依賴(lài)與啟動(dòng)問(wèn)題如果IDEA提示依賴(lài)錯(cuò)誤或項(xiàng)目啟動(dòng)失敗請(qǐng)按以下步驟排查Maven依賴(lài)刷新: 點(diǎn)擊IDEA右側(cè)邊欄的“Maven”標(biāo)簽點(diǎn)擊刷新按鈕Reimport All Maven Projects。檢查JDK版本: 確保IDEA中項(xiàng)目的Project SDK和Language level與本地安裝的JDK版本一致File-Project Structure。端口沖突: 默認(rèn)情況下Spring Boot應(yīng)用啟動(dòng)在8080端口。如果該端口被占用可以在application.yml中修改server: port: 8081 # 改為其他端口如8081啟動(dòng)主類(lèi): 找到src/main/java下包路徑中的XXXApplication類(lèi)通常以Application結(jié)尾右鍵點(diǎn)擊Run。查看日志: 啟動(dòng)時(shí)密切關(guān)注IDEA控制臺(tái)輸出的日志。如果看到Started ...Application in x.xxx seconds字樣并且沒(méi)有明顯的ERROR說(shuō)明后端啟動(dòng)成功。4. 前端項(xiàng)目搭建與運(yùn)行后端服務(wù)跑起來(lái)后我們?cè)賮?lái)啟動(dòng)前端項(xiàng)目。4.1 安裝Node.js依賴(lài)打開(kāi)前端項(xiàng)目: 使用VSCode或命令行進(jìn)入本地的frontend目錄。安裝依賴(lài): 在frontend目錄下打開(kāi)終端執(zhí)行以下命令。此過(guò)程會(huì)下載所有依賴(lài)包到node_modules文件夾。npm install # 或使用更快的 cnpm如果已安裝 # cnpm install如果網(wǎng)絡(luò)不佳導(dǎo)致失敗可以重復(fù)執(zhí)行或檢查npm鏡像配置。4.2 配置API代理前端運(yùn)行在獨(dú)立的端口如5173訪(fǎng)問(wèn)后端API8080端口時(shí)會(huì)產(chǎn)生跨域問(wèn)題。在開(kāi)發(fā)環(huán)境下我們通過(guò)Vite的代理功能來(lái)解決。 找到frontend/vite.config.js文件進(jìn)行如下配置import { defineConfig } from vite import vue from vitejs/plugin-vue // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server: { port: 5173, // 前端開(kāi)發(fā)服務(wù)器端口 proxy: { // 代理所有以 /api 開(kāi)頭的請(qǐng)求 /api: { target: http://localhost:8080, // 你的后端服務(wù)地址 changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) // 可選重寫(xiě)路徑。如果后端接口本身沒(méi)有/api前綴可能需要這個(gè) } } } })關(guān)鍵點(diǎn)target必須指向你正在運(yùn)行的后端服務(wù)地址和端口。如果你的后端運(yùn)行在8081端口這里就要改為http://localhost:8081。4.3 啟動(dòng)前端開(kāi)發(fā)服務(wù)器在frontend目錄下的終端中運(yùn)行npm run dev命令執(zhí)行成功后終端會(huì)輸出類(lèi)似Local: http://localhost:5173的信息。用瀏覽器打開(kāi)這個(gè)鏈接你應(yīng)該能看到美食網(wǎng)站的界面。5. 核心功能模塊代碼解析項(xiàng)目成功運(yùn)行后我們來(lái)深入看看幾個(gè)關(guān)鍵模塊的代碼實(shí)現(xiàn)理解其工作原理。5.1 后端數(shù)據(jù)層MyBatis-Plus的使用以“菜品”模塊為例查看Dish實(shí)體類(lèi)、DishMapper接口和DishService實(shí)現(xiàn)。// 1. 實(shí)體類(lèi) (Entity) // 文件路徑backend/src/main/java/com/example/food/entity/Dish.java import com.baomidou.mybatisplus.annotation.*; import lombok.Data; import java.time.LocalDateTime; Data TableName(t_dish) // 指定對(duì)應(yīng)數(shù)據(jù)庫(kù)表名 public class Dish { TableId(type IdType.AUTO) // 主鍵自增 private Long id; private String name; private String category; private String description; private String imageUrl; private Integer viewCount; TableField(fill FieldFill.INSERT) // 插入時(shí)自動(dòng)填充 private LocalDateTime createTime; TableField(fill FieldFill.INSERT_UPDATE) // 插入和更新時(shí)自動(dòng)填充 private LocalDateTime updateTime; } // 2. Mapper接口 // 文件路徑backend/src/main/java/com/example/food/mapper/DishMapper.java import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.example.food.entity.Dish; public interface DishMapper extends BaseMapperish { // 繼承BaseMapper后基本的CRUD方法已自動(dòng)具備無(wú)需編寫(xiě)XML } // 3. Service層 // 文件路徑backend/src/main/java/com/example/food/service/impl/DishServiceImpl.java import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.example.food.entity.Dish; import com.example.food.mapper.DishMapper; import com.example.food.service.DishService; import org.springframework.stereotype.Service; Service public class DishServiceImpl extends ServiceImplDishMapper, Dish implements DishService { // 可以在這里編寫(xiě)復(fù)雜的業(yè)務(wù)邏輯 // 例如帶條件的分頁(yè)查詢(xún) public PageDish getDishPage(PageDish page, String keyword) { return lambdaQuery() .like(keyword ! null, Dish::getName, keyword) // 動(dòng)態(tài)條件關(guān)鍵詞不為空時(shí)模糊查詢(xún)名稱(chēng) .orderByDesc(Dish::getCreateTime) .page(page); } }說(shuō)明MyBatis-Plus極大地簡(jiǎn)化了單表操作。ServiceImpl已經(jīng)提供了save,removeById,updateById,getById,page等方法。5.2 后端控制層RESTful API設(shè)計(jì)查看DishController了解如何暴露API給前端。// 文件路徑backend/src/main/java/com/example/food/controller/DishController.java import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.example.food.common.Result; import com.example.food.entity.Dish; import com.example.food.service.DishService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; RestController RequestMapping(/dish) public class DishController { Autowired private DishService dishService; // 新增菜品 PostMapping public Result save(RequestBody Dish dish) { boolean saved dishService.save(dish); return saved ? Result.success() : Result.error(保存失敗); } // 分頁(yè)查詢(xún)菜品列表 GetMapping(/page) public Result findPage(RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String name) { PageDish page new Page(pageNum, pageSize); PageDish dishPage dishService.getDishPage(page, name); return Result.success(dishPage); } // 根據(jù)ID查詢(xún)菜品詳情 GetMapping(/{id}) public Result getById(PathVariable Long id) { Dish dish dishService.getById(id); return dish ! null ? Result.success(dish) : Result.error(未找到該菜品); } // 更新菜品 PutMapping public Result update(RequestBody Dish dish) { boolean updated dishService.updateById(dish); return updated ? Result.success() : Result.error(更新失敗); } // 刪除菜品 DeleteMapping(/{id}) public Result delete(PathVariable Long id) { boolean removed dishService.removeById(id); return removed ? Result.success() : Result.error(刪除失敗); } }說(shuō)明使用了標(biāo)準(zhǔn)的RESTful風(fēng)格PostMapping,GetMapping,PutMapping,DeleteMapping對(duì)應(yīng)增刪改查操作。Result是一個(gè)自定義的統(tǒng)一響應(yīng)封裝類(lèi)。5.3 前端頁(yè)面組件與請(qǐng)求封裝以菜品列表頁(yè)為例看Vue3組件如何組織并與后端交互。!-- 文件路徑frontend/src/views/dish/DishList.vue -- template div classdish-container el-card template #header div classcard-header span菜品管理/span el-button typeprimary clickhandleAdd新增菜品/el-button /div /template !-- 搜索欄 -- el-form :inlinetrue :modelsearchForm el-form-item label菜品名稱(chēng) el-input v-modelsearchForm.name placeholder請(qǐng)輸入名稱(chēng) clearable / /el-form-item el-form-item el-button typeprimary clickloadData查詢(xún)/el-button el-button clickresetSearch重置/el-button /el-form-item /el-form !-- 數(shù)據(jù)表格 -- el-table :datatableData border stylewidth: 100% el-table-column propid labelID width80 / el-table-column propname label菜品名稱(chēng) / el-table-column propcategory label分類(lèi) / el-table-column propviewCount label瀏覽量 width100 / el-table-column propcreateTime label創(chuàng)建時(shí)間 width180 / el-table-column label操作 width200 template #defaultscope el-button sizesmall clickhandleEdit(scope.row)編輯/el-button el-button sizesmall typedanger clickhandleDelete(scope.row.id)刪除/el-button /template /el-table-column /el-table !-- 分頁(yè)組件 -- div classpagination el-pagination v-model:current-pagecurrentPage v-model:page-sizepageSize :page-sizes[10, 20, 50, 100] :totaltotal layouttotal, sizes, prev, pager, next, jumper size-changehandleSizeChange current-changehandleCurrentChange / /div /el-card !-- 新增/編輯對(duì)話(huà)框 -- DishDialog v-modeldialogVisible :form-datadialogForm successloadData / /div /template script setup import { ref, reactive, onMounted } from vue import { ElMessage, ElMessageBox } from element-plus import DishDialog from ./components/DishDialog.vue import { getDishPage, deleteDish } from /api/dish // 導(dǎo)入封裝好的API函數(shù) // 響應(yīng)式數(shù)據(jù) const tableData ref([]) const currentPage ref(1) const pageSize ref(10) const total ref(0) const dialogVisible ref(false) const dialogForm ref({}) const searchForm reactive({ name: }) // 方法 const loadData async () { try { const params { pageNum: currentPage.value, pageSize: pageSize.value, name: searchForm.value.name } const res await getDishPage(params) // 調(diào)用API tableData.value res.data.records total.value res.data.total } catch (error) { ElMessage.error(獲取數(shù)據(jù)失敗) } } const handleAdd () { dialogForm.value {} dialogVisible.value true } const handleEdit (row) { dialogForm.value { ...row } // 淺拷貝避免直接修改原數(shù)據(jù) dialogVisible.value true } const handleDelete (id) { ElMessageBox.confirm(確認(rèn)刪除該菜品嗎, 提示, { type: warning }).then(async () { await deleteDish(id) ElMessage.success(刪除成功) loadData() }).catch(() {}) } const handleSizeChange (val) { pageSize.value val loadData() } const handleCurrentChange (val) { currentPage.value val loadData() } const resetSearch () { searchForm.name loadData() } // 生命周期鉤子 onMounted(() { loadData() }) /script style scoped .dish-container { padding: 20px; } .card-header { display: flex; justify-content: space-between; align-items: center; } .pagination { margin-top: 20px; display: flex; justify-content: flex-end; } /style說(shuō)明該組件使用了Vue3的script setup語(yǔ)法配合Element Plus組件實(shí)現(xiàn)了數(shù)據(jù)表格、分頁(yè)、搜索和操作按鈕。/api/dish是封裝的Axios請(qǐng)求模塊。6. 項(xiàng)目部署與打包開(kāi)發(fā)完成后需要將項(xiàng)目打包部署到服務(wù)器或用于提交。6.1 后端Spring Boot打包使用Maven打包: 在IDEA的Maven工具欄中找到backend項(xiàng)目執(zhí)行Lifecycle-package?；蛘咴诤蠖隧?xiàng)目根目錄下命令行執(zhí)行mvn clean package -DskipTests-DskipTests參數(shù)跳過(guò)測(cè)試加速打包。獲取Jar包: 打包成功后在backend/target目錄下會(huì)生成一個(gè)xxx-0.0.1-SNAPSHOT.jar文件名稱(chēng)取決于pom.xml中的artifactId和version。運(yùn)行Jar包: 將Jar包上傳到服務(wù)器或本地測(cè)試在命令行中運(yùn)行java -jar your-backend-app.jar確保服務(wù)器上已安裝對(duì)應(yīng)版本的JDK和MySQL并正確配置了數(shù)據(jù)庫(kù)連接通常通過(guò)外部application.yml或環(huán)境變量覆蓋默認(rèn)配置。6.2 前端Vue3項(xiàng)目打包構(gòu)建生產(chǎn)版本: 在frontend目錄下運(yùn)行npm run build此命令會(huì)使用Vite將項(xiàng)目編譯、壓縮生成靜態(tài)文件HTML, CSS, JS。獲取產(chǎn)物: 構(gòu)建完成后會(huì)在項(xiàng)目根目錄下生成一個(gè)dist文件夾。這個(gè)文件夾里的所有內(nèi)容就是前端的生產(chǎn)環(huán)境代碼。部署:方式一前后端分離部署: 將dist文件夾內(nèi)的文件部署到任何靜態(tài)文件服務(wù)器如Nginx, Apache, 對(duì)象存儲(chǔ)COS/OSS等。同時(shí)需要配置Nginx將API請(qǐng)求反向代理到后端服務(wù)類(lèi)似開(kāi)發(fā)環(huán)境的Vite代理。# Nginx 配置示例片段 server { listen 80; server_name your-domain.com; # 你的域名或IP location / { root /path/to/your/dist; # dist文件夾路徑 index index.html; try_files $uri $uri/ /index.html; # 支持Vue Router的history模式 } location /api/ { proxy_pass http://localhost:8080/; # 代理到后端服務(wù) proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }方式二整合部署: 將dist文件夾內(nèi)的所有文件復(fù)制到Spring Boot項(xiàng)目的src/main/resources/static目錄下然后重新打包Spring Boot項(xiàng)目。這樣前后端就會(huì)被打包進(jìn)同一個(gè)Jar包訪(fǎng)問(wèn)http://ip:port即可。這種方式適合簡(jiǎn)單的演示或內(nèi)網(wǎng)應(yīng)用但不利于前后端獨(dú)立更新。7. 常見(jiàn)問(wèn)題與解決方案 (FAQ)在搭建和運(yùn)行過(guò)程中你可能會(huì)遇到以下問(wèn)題問(wèn)題現(xiàn)象可能原因解決方案后端啟動(dòng)失敗報(bào)java.net.ConnectException: Connection refused1. MySQL服務(wù)未啟動(dòng)。2. 數(shù)據(jù)庫(kù)連接配置URL, 用戶(hù)名, 密碼錯(cuò)誤。3. MySQL的3306端口被防火墻阻止。1. 啟動(dòng)MySQL服務(wù)net start mysql或通過(guò)服務(wù)管理器。2. 仔細(xì)檢查application.yml中的數(shù)據(jù)庫(kù)配置確保數(shù)據(jù)庫(kù)名、用戶(hù)名、密碼正確。3. 檢查防火墻設(shè)置或嘗試用命令行客戶(hù)端如mysql -u root -p連接確認(rèn)。前端npm install失敗網(wǎng)絡(luò)錯(cuò)誤或版本沖突1. 網(wǎng)絡(luò)問(wèn)題無(wú)法訪(fǎng)問(wèn)npm倉(cāng)庫(kù)。2. Node.js版本與項(xiàng)目所需版本不兼容。3. 本地緩存問(wèn)題。1. 配置淘寶鏡像npm config set registry https://registry.npmmirror.com或使用cnpm。2. 使用nvm管理Node.js版本切換到項(xiàng)目推薦的LTS版本如16.x。3. 刪除node_modules和package-lock.json重新執(zhí)行npm install。前端運(yùn)行后頁(yè)面空白或控制臺(tái)報(bào)跨域錯(cuò)誤1. 后端服務(wù)未啟動(dòng)。2. Vite代理配置錯(cuò)誤target地址端口不對(duì)。3. 前端請(qǐng)求的API路徑與后端Controller路徑不匹配。1. 確認(rèn)后端Spring Boot應(yīng)用已成功啟動(dòng)。2. 檢查vite.config.js中的proxy.target確保指向正確的后端地址localhost:端口。3. 打開(kāi)瀏覽器開(kāi)發(fā)者工具F12的Network標(biāo)簽查看請(qǐng)求的URL是否正確并與后端RequestMapping的路徑對(duì)比。頁(yè)面能打開(kāi)但圖片不顯示1. 圖片路徑錯(cuò)誤。2. 后端文件上傳/訪(fǎng)問(wèn)接口未正確配置或未啟動(dòng)。3. 圖片存儲(chǔ)在本地但前端通過(guò)HTTP訪(fǎng)問(wèn)了file://協(xié)議。1. 檢查圖片src屬性路徑。如果是上傳的圖片路徑通常是后端返回的相對(duì)或絕對(duì)URL。2. 確認(rèn)后端是否有處理靜態(tài)資源如圖片的配置例如WebMvcConfigurer中配置了資源映射。3. 開(kāi)發(fā)時(shí)圖片應(yīng)通過(guò)后端服務(wù)訪(fǎng)問(wèn)而不是直接引用本地磁盤(pán)路徑。進(jìn)行增刪改查操作時(shí)后端返回404或500錯(cuò)誤1. 請(qǐng)求方法GET/POST/PUT/DELETE與Controller中定義的不匹配。2. 請(qǐng)求參數(shù)格式錯(cuò)誤如RequestBody期望JSON但收到了表單數(shù)據(jù)。3. 后端服務(wù)代碼存在空指針等運(yùn)行時(shí)異常。1. 對(duì)照Controller中的PostMapping等注解檢查前端Axios請(qǐng)求的method。2. 使用Postman等工具模擬請(qǐng)求檢查請(qǐng)求頭和請(qǐng)求體格式。3. 查看后端控制臺(tái)日志找到具體的錯(cuò)誤堆棧信息進(jìn)行排查。打包后前端頁(yè)面路由刷新出現(xiàn)404前端使用了Vue Router的history模式但服務(wù)器如Nginx未配置try_files回退到index.html。在Nginx配置中為前端靜態(tài)文件服務(wù)的location塊添加try_files $uri $uri/ /index.html;指令。8. 項(xiàng)目擴(kuò)展與最佳實(shí)踐建議掌握了基礎(chǔ)搭建后你可以嘗試以下方向來(lái)深化理解和提升項(xiàng)目質(zhì)量完善用戶(hù)認(rèn)證與授權(quán):研究并集成JWT。實(shí)現(xiàn)登錄接口頒發(fā)Token前端在請(qǐng)求頭中攜帶Authorization: Bearer token后端通過(guò)攔截器驗(yàn)證。使用Spring Security實(shí)現(xiàn)更細(xì)粒度的角色ROLE_ADMIN, ROLE_USER和權(quán)限控制。優(yōu)化數(shù)據(jù)庫(kù)與性能:為頻繁查詢(xún)的字段如name,category添加數(shù)據(jù)庫(kù)索引。在Service層使用Redis緩存熱點(diǎn)數(shù)據(jù)如首頁(yè)推薦菜品。對(duì)大批量數(shù)據(jù)查詢(xún)優(yōu)化SQL語(yǔ)句避免SELECT *。增強(qiáng)前端體驗(yàn)與工程化:使用Pinia進(jìn)行全局狀態(tài)管理替代組件間復(fù)雜的props和emit傳遞。封裝更完善的Axios實(shí)例統(tǒng)一處理請(qǐng)求攔截添加Token、響應(yīng)攔截處理錯(cuò)誤和加載狀態(tài)。使用環(huán)境變量.env.development,.env.production管理不同環(huán)境開(kāi)發(fā)、測(cè)試、生產(chǎn)的API基礎(chǔ)地址。添加路由守衛(wèi)Router Guards實(shí)現(xiàn)頁(yè)面級(jí)的權(quán)限檢查。引入API文檔與測(cè)試:集成Swagger或Knife4j自動(dòng)生成后端API接口文檔方便前后端聯(lián)調(diào)。編寫(xiě)JUnit單元測(cè)試和Postman/Eolinker接口測(cè)試集合保證代碼質(zhì)量。容器化部署:學(xué)習(xí)Docker為后端和前端分別編寫(xiě)Dockerfile。使用docker-compose.yml定義MySQL、Spring Boot、Nginx等服務(wù)實(shí)現(xiàn)一鍵部署。代碼規(guī)范與提交:在IDEA中安裝Alibaba Java Coding Guidelines插件檢查后端代碼。使用ESLint Prettier規(guī)范前端代碼。使用Git進(jìn)行版本控制遵循清晰的Commit Message規(guī)范如Conventional Commits。這個(gè)“美食網(wǎng)站”項(xiàng)目是一個(gè)非常好的全棧開(kāi)發(fā)學(xué)習(xí)載體。通過(guò)完成從環(huán)境搭建、功能分析、代碼閱讀、調(diào)試排錯(cuò)到打包部署的全過(guò)程你不僅能掌握Spring Boot和Vue3的核心開(kāi)發(fā)技能更能建立起一個(gè)完整的、可落地的Web項(xiàng)目開(kāi)發(fā)思維。建議你在成功運(yùn)行項(xiàng)目后不要止步于此而是選擇上面的一兩個(gè)擴(kuò)展方向進(jìn)行實(shí)踐把項(xiàng)目真正變成你自己的經(jīng)驗(yàn)。如果在學(xué)習(xí)過(guò)程中遇到具體問(wèn)題多查閱官方文檔、在技術(shù)社區(qū)搜索錯(cuò)誤信息并善用調(diào)試工具解決問(wèn)題的能力正是在解決一個(gè)個(gè)具體bug中成長(zhǎng)起來(lái)的。