企业官网建设流程全解析

每到毕业季，计算机专业的学生们最头疼的莫过于毕业设计。选题难、技术栈杂、时间紧、导师要求高，一个完整的JavaWeb项目从零搭建到部署上线，往往需要数周甚至数月。如果你正为此焦虑，希望找到一个既能体现技术深度，又能在短时间内跑通的“救命稻草”，那么这篇文章就是为你准备的。

今天，我们不谈空洞的理论，直接上手一个基于SpringBoot + Vue3的美食分享网站。这个项目麻雀虽小，五脏俱全，涵盖了用户认证、内容管理、数据交互、前后端分离等现代Web开发的核心环节。更重要的是，我们将打破“2小时搞定”的噱头，为你拆解这背后的真实逻辑：如何在有限时间内，高效地理解、复现并个性化一个毕设项目，而不是简单地复制粘贴源码。

本文将带你从零开始，深入理解这个美食分享网站的架构设计、技术选型理由、核心模块实现，并提供可运行的完整代码、清晰的部署步骤以及避坑指南。无论你是JavaWeb的初学者，还是正在为毕设寻找灵感的同学，都能从中获得一个清晰、可落地的项目构建路径。

1. 为什么选择“SpringBoot + Vue3”作为毕设技术栈？

在开始敲代码之前，我们必须先理解这个技术组合为何成为当下毕设和中小型项目的“黄金搭档”。这关乎你项目的技术先进性和答辩时的底气。

SpringBoot的核心价值在于“约定大于配置”。它通过自动装配和起步依赖，将开发者从繁琐的XML配置和复杂的Tomcat部署中解放出来。对于毕设而言，这意味着你可以将精力集中在业务逻辑上，而不是环境搭建。例如，引入spring-boot-starter-web依赖，你就自动拥有了一个内嵌Tomcat的Web应用，无需任何额外配置。

Vue3相较于Vue2，在性能（基于Proxy的响应式系统）、开发体验（Composition API）和TypeScript支持上都有了质的飞跃。对于前端新手，它的渐进式特性和清晰的文档非常友好；对于追求技术深度的同学，Composition API带来的逻辑复用能力是答辩时的亮点。

前后端分离架构是这个组合的另一个关键。后端（SpringBoot）通过RESTful API提供数据服务，前端（Vue3）负责页面渲染和用户交互。这种架构的优势在于：

• 职责清晰：后端专注数据和业务安全，前端专注用户体验。
• 独立开发与部署：前后端可以并行开发，互不干扰。
• 技术栈灵活：未来可以轻松替换前端框架或适配多端（如小程序、App）。

因此，选择这个技术栈，你的毕设不仅能满足功能要求，更能体现你对现代Web开发主流架构的理解。

2. 项目整体架构与核心功能拆解

在动手之前，我们需要像建筑师看蓝图一样，了解整个项目的结构和每个部分的作用。

2.1 系统架构图（逻辑层面）

用户浏览器 (Browser) | | (HTTP请求/响应) v Vue3前端应用 (Frontend) | (Axios调用 RESTful API) v SpringBoot后端应用 (Backend) | | (MyBatis-Plus / JPA) v MySQL数据库 (Database)

这是一个典型的前后端分离架构。前端部署在Nginx或直接由Vue CLI服务运行，后端是一个独立的SpringBoot Jar包。

2.2 核心功能模块

一个美食分享网站通常包含以下模块，这也是你毕设报告中的“系统功能设计”部分：

1. 用户模块：注册、登录（含JWT令牌认证）、个人信息管理。
2. 美食内容模块：
   • 发布：富文本编辑、图片上传、分类/标签选择。
   • 浏览：列表分页展示、详情查看、按分类/标签/关键词搜索。
   • 互动：点赞、收藏、评论。
3. 后台管理模块（可选但建议有）：用户管理、内容审核、分类/标签管理、数据统计。

2.3 数据库设计（ER核心）

围绕核心功能，我们需要设计几张关键表：

• user：用户表，存储用户名、密码（加密）、头像、简介等。
• category：美食分类表。
• dish（或article）：美食文章/菜谱主表，关联用户ID和分类ID。
• dish_image：美食图片表，与主表一对多关联，实现多图上传。
• comment：评论表，关联用户ID和美食ID。
• like_collect：点赞收藏关联表，记录用户对某篇文章的点赞和收藏状态。

理解这些表之间的关系，是后续编写后端接口和前端页面的基础。

3. 开发环境与工具准备

“工欲善其事，必先利其器”。一个顺畅的环境能避免很多无谓的错误。

3.1 后端环境 (SpringBoot)

1. JDK：版本 8 或 11（推荐11，LTS长期支持版）。安装后配置JAVA_HOME环境变量。
2. Maven：版本 3.6+，用于项目管理、依赖下载和构建。
3. IDE：IntelliJ IDEA（社区版或旗舰版）。它对于SpringBoot的支持是最好的。
4. 数据库：MySQL 5.7 或 8.0。安装后记住 root 密码。
5. 工具：Postman 或 Apifox，用于测试API接口。

3.2 前端环境 (Vue3)

1. Node.js：版本 16+（推荐18 LTS）。自带包管理器npm。
2. 包管理器：可以使用npm，但更推荐yarn或pnpm，速度更快。
3. Vue CLI 或 Vite：本文使用更轻快的Vite作为构建工具。
4. IDE：Visual Studio Code，安装 Vue Language Features (Volar) 插件。

验证安装： 打开终端或命令行，分别执行以下命令，确保版本号正确显示：

java -version mvn -v node -v npm -v mysql --version

4. 后端SpringBoot项目搭建与核心配置

我们从后端开始，因为它是数据的源头和业务逻辑的核心。

4.1 使用Spring Initializr快速初始化

访问 start.spring.io ，或直接在IDEA中创建新项目选择 Spring Initializr。

• Project: Maven Project
• Language: Java
• Spring Boot: 选择 2.7.x 或 3.x（注意3.x需要JDK17+，本文以2.7.x为例）
• Project Metadata:
  • Group:com.foodshare
  • Artifact:backend
  • Packaging:Jar
• Dependencies: 添加以下依赖，这是项目的骨架：
  • Spring Web(构建Web应用)
  • MyBatis Framework或Spring Data JPA(本文选MyBatis)
  • MySQL Driver(数据库连接)
  • Lombok(简化实体类代码)

点击生成并下载，用IDEA打开项目。

4.2 关键配置文件详解

配置文件是项目的“开关总闸”，务必理解每个配置项。

1.application.yml(或application.properties)在src/main/resources下创建application.yml，YAML格式更清晰。

server: port: 8080 # 后端服务端口 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/food_share_db?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai username: root # 你的MySQL用户名 password: your_password # 你的MySQL密码 servlet: multipart: max-file-size: 10MB # 文件上传大小限制 max-request-size: 100MB mybatis: mapper-locations: classpath:mapper/*.xml # MyBatis的SQL映射文件位置 configuration: map-underscore-to-camel-case: true # 自动将数据库下划线字段映射为Java驼峰属性 # 自定义配置项示例 foodshare: jwt: secret: your_jwt_secret_key_here_keep_it_safe # JWT密钥，务必修改并保密 expire: 604800 # Token过期时间（秒），7天 file: upload-dir: /tmp/food-uploads/ # 文件上传目录，生产环境需修改

注意：请先在MySQL中创建数据库food_share_db，并将your_password和your_jwt_secret_key_here_keep_it_safe替换为你自己的值。

2. 跨域配置 (CorsConfig.java)前后端分离必然遇到跨域问题。创建一个配置类解决。

// 文件路径：src/main/java/com/foodshare/config/CorsConfig.java package com.foodshare.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; @Configuration public class CorsConfig { @Bean public CorsFilter corsFilter() { CorsConfiguration config = new CorsConfiguration(); // 允许所有域名访问，生产环境应指定具体前端地址 config.addAllowedOriginPattern("*"); // 允许携带Cookie等凭证 config.setAllowCredentials(true); // 允许所有请求方法 config.addAllowedMethod("*"); // 允许所有请求头 config.addAllowedHeader("*"); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); // 对所有接口路径生效 source.registerCorsConfiguration("/**", config); return new CorsFilter(source); } }

5. 核心业务模块代码实现

我们以“用户登录认证”和“发布美食”两个核心流程为例，展示代码如何组织。

5.1 用户认证：JWT令牌的实现

JWT（JSON Web Token）是无状态认证的主流方案。

1. 实体类 (User.java)

// 文件路径：src/main/java/com/foodshare/entity/User.java package com.foodshare.entity; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data; import java.time.LocalDateTime; @Data @TableName("user") public class User { @TableId(type = IdType.AUTO) private Long id; private String username; private String password; // 存储加密后的密码 private String nickname; private String avatar; private String email; private LocalDateTime createTime; private LocalDateTime updateTime; }

2. 工具类：JWT生成与解析 (JwtUtil.java)

// 文件路径：src/main/java/com/foodshare/utils/JwtUtil.java package com.foodshare.utils; import io.jsonwebtoken.Claims; import io.jsonwebtoken.Jwts; import io.jsonwebtoken.SignatureAlgorithm; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Component; import java.util.Date; @Component public class JwtUtil { @Value("${foodshare.jwt.secret}") private String secret; @Value("${foodshare.jwt.expire}") private long expire; // 生成Token public String generateToken(Long userId) { Date now = new Date(); Date expireDate = new Date(now.getTime() + expire * 1000); return Jwts.builder() .setHeaderParam("typ", "JWT") .setSubject(userId.toString()) .setIssuedAt(now) .setExpiration(expireDate) .signWith(SignatureAlgorithm.HS512, secret) .compact(); } // 解析Token获取用户ID public Long getUserIdFromToken(String token) { Claims claims = Jwts.parser() .setSigningKey(secret) .parseClaimsJws(token) .getBody(); return Long.parseLong(claims.getSubject()); } // 验证Token是否过期 public boolean isTokenExpired(String token) { Date expiration = Jwts.parser() .setSigningKey(secret) .parseClaimsJws(token) .getBody() .getExpiration(); return expiration.before(new Date()); } }

3. 登录接口 (AuthController.java)

// 文件路径：src/main/java/com/foodshare/controller/AuthController.java package com.foodshare.controller; import com.foodshare.entity.User; import com.foodshare.service.UserService; import com.foodshare.utils.JwtUtil; import com.foodshare.vo.LoginVo; import com.foodshare.vo.Result; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.util.DigestUtils; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.validation.Valid; import java.util.HashMap; import java.util.Map; @RestController @RequestMapping("/api/auth") public class AuthController { @Autowired private UserService userService; @Autowired private JwtUtil jwtUtil; @PostMapping("/login") public Result login(@Valid @RequestBody LoginVo loginVo) { // 1. 根据用户名查询用户 User user = userService.findByUsername(loginVo.getUsername()); if (user == null) { return Result.error("用户名或密码错误"); } // 2. 对前端传来的密码进行MD5加密后比对（实际项目推荐BCrypt） String encryptedPassword = DigestUtils.md5DigestAsHex(loginVo.getPassword().getBytes()); if (!user.getPassword().equals(encryptedPassword)) { return Result.error("用户名或密码错误"); } // 3. 生成JWT Token String token = jwtUtil.generateToken(user.getId()); // 4. 返回Token和用户基本信息（注意剔除密码） Map<String, Object> data = new HashMap<>(); data.put("token", token); data.put("userInfo", userService.getSafeUserInfo(user)); return Result.success("登录成功", data); } }

5.2 美食发布：文件上传与富文本处理

发布功能涉及表单数据、文件上传和数据库事务。

1. 文件上传工具 (FileUploadUtil.java)

// 文件路径：src/main/java/com/foodshare/utils/FileUploadUtil.java package com.foodshare.utils; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Component; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.IOException; import java.util.UUID; @Component public class FileUploadUtil { @Value("${foodshare.file.upload-dir}") private String uploadDir; public String uploadImage(MultipartFile file) throws IOException { if (file.isEmpty()) { throw new RuntimeException("上传文件为空"); } // 生成唯一文件名，防止覆盖 String originalFilename = file.getOriginalFilename(); String fileExtension = originalFilename.substring(originalFilename.lastIndexOf(".")); String newFileName = UUID.randomUUID().toString() + fileExtension; // 确保上传目录存在 File dir = new File(uploadDir); if (!dir.exists()) { dir.mkdirs(); } // 保存文件 File dest = new File(uploadDir + newFileName); file.transferTo(dest); // 返回访问路径（这里简单返回文件名，实际需配置静态资源映射或使用OSS） return "/uploads/" + newFileName; } }

2. 发布美食接口 (DishController.java)

// 文件路径：src/main/java/com/foodshare/controller/DishController.java package com.foodshare.controller; import com.foodshare.entity.Dish; import com.foodshare.service.DishService; import com.foodshare.utils.FileUploadUtil; import com.foodshare.utils.JwtUtil; import com.foodshare.vo.Result; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; @RestController @RequestMapping("/api/dish") public class DishController { @Autowired private DishService dishService; @Autowired private FileUploadUtil fileUploadUtil; @Autowired private JwtUtil jwtUtil; @PostMapping("/publish") public Result publishDish(@RequestParam("title") String title, @RequestParam("content") String content, @RequestParam("categoryId") Long categoryId, @RequestParam(value = "coverImage", required = false) MultipartFile coverImage, HttpServletRequest request) { // 1. 从请求头Token中获取当前用户ID String token = request.getHeader("Authorization"); if (token == null || !token.startsWith("Bearer ")) { return Result.error("未授权访问"); } token = token.substring(7); Long userId = jwtUtil.getUserIdFromToken(token); // 2. 处理封面图片上传 String coverImageUrl = null; if (coverImage != null && !coverImage.isEmpty()) { try { coverImageUrl = fileUploadUtil.uploadImage(coverImage); } catch (Exception e) { return Result.error("封面图片上传失败: " + e.getMessage()); } } // 3. 构建实体并保存 Dish dish = new Dish(); dish.setUserId(userId); dish.setTitle(title); dish.setContent(content); // 富文本内容，前端使用编辑器如 wangEditor dish.setCategoryId(categoryId); dish.setCoverImage(coverImageUrl); dish.setStatus(1); // 1-审核中/已发布，可根据业务调整 boolean success = dishService.save(dish); if (success) { return Result.success("发布成功", dish.getId()); } else { return Result.error("发布失败"); } } }

6. 前端Vue3项目搭建与页面开发

后端API就绪后，我们开始构建用户界面。

6.1 使用Vite创建Vue3项目

打开终端，进入你的工作目录，执行：

npm create vue@latest food-share-frontend # 或 yarn create vue food-share-frontend

按照提示选择配置：

• Add TypeScript?No(为简化，本文用JS)
• Add JSX Support?No
• Add Vue Router for Single Page Application?Yes(必选)
• Add Pinia for state management?Yes(推荐，替代Vuex)
• Add Vitest for Unit Testing?No(可选)
• Add an End-to-End Testing Solution?No(可选)
• Add ESLint for code quality?Yes(推荐)

创建完成后，进入项目并安装依赖：

cd food-share-frontend npm install # 安装额外需要的UI库和工具 npm install axios element-plus @element-plus/icons-vue wangeditor --save

6.2 核心页面：登录与首页

1. 配置请求工具 (src/utils/request.js)统一处理请求、响应拦截和Token携带。

// 文件路径：src/utils/request.js import axios from 'axios'; import { ElMessage } from 'element-plus'; import router from '../router'; const request = axios.create({ baseURL: 'http://localhost:8080/api', // 后端API基础地址 timeout: 10000, }); // 请求拦截器：携带Token request.interceptors.request.use( (config) => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, (error) => { return Promise.reject(error); } ); // 响应拦截器：统一处理错误 request.interceptors.response.use( (response) => { const res = response.data; // 假设后端统一返回 { code: 200, message: 'success', data: ... } if (res.code === 200) { return res.data; } else { ElMessage.error(res.message || '请求失败'); return Promise.reject(new Error(res.message || 'Error')); } }, (error) => { if (error.response && error.response.status === 401) { ElMessage.error('登录已过期，请重新登录'); localStorage.removeItem('token'); router.push('/login'); } else { ElMessage.error(error.message || '网络错误'); } return Promise.reject(error); } ); export default request;

2. 登录页面组件 (src/views/LoginView.vue)

<!-- 文件路径：src/views/LoginView.vue --> <template> <div class="login-container"> <el-card class="login-card"> <h2>美食分享网 - 登录</h2> <el-form :model="loginForm" :rules="rules" ref="formRef"> <el-form-item prop="username"> <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="User" /> </el-form-item> <el-form-item prop="password"> <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" prefix-icon="Lock" show-password /> </el-form-item> <el-form-item> <el-button type="primary" @click="handleLogin" :loading="loading" style="width: 100%;">登录</el-button> </el-form-item> </el-form> <div class="footer"> <span>还没有账号？</span> <el-link type="primary" @click="$router.push('/register')">立即注册</el-link> </div> </el-card> </div> </template> <script setup> import { ref, reactive } from 'vue'; import { useRouter } from 'vue-router'; import { ElMessage } from 'element-plus'; import request from '@/utils/request'; const router = useRouter(); const formRef = ref(); const loading = ref(false); const loginForm = reactive({ username: '', password: '', }); const rules = { username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }], }; const handleLogin = async () => { await formRef.value.validate(); loading.value = true; try { const data = await request.post('/auth/login', loginForm); // 保存Token和用户信息 localStorage.setItem('token', data.token); localStorage.setItem('userInfo', JSON.stringify(data.userInfo)); ElMessage.success('登录成功'); router.push('/'); // 跳转到首页 } catch (error) { console.error('登录失败:', error); } finally { loading.value = false; } }; </script> <style scoped> .login-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } .login-card { width: 400px; padding: 30px; } .footer { text-align: center; margin-top: 20px; color: #666; } </style>

3. 首页组件：展示美食列表 (src/views/HomeView.vue)

<!-- 文件路径：src/views/HomeView.vue --> <template> <div class="home"> <!-- 顶部导航栏 --> <el-header> <div class="nav"> <span class="logo">🍜 美食分享网</span> <div class="nav-right"> <el-input v-model="searchKeyword" placeholder="搜索美食..." style="width: 200px; margin-right: 20px;" /> <el-button type="primary" @click="$router.push('/publish')" v-if="isLoggedIn">发布美食</el-button> <el-button @click="$router.push('/login')" v-else>登录/注册</el-button> </div> </div> </el-header> <!-- 内容区 --> <el-main> <!-- 分类筛选 --> <div class="category-filter"> <el-tag v-for="cat in categories" :key="cat.id" :type="activeCat === cat.id ? 'primary' : 'info'" @click="activeCat = cat.id" style="margin-right: 10px; cursor: pointer;"> {{ cat.name }} </el-tag> </div> <!-- 美食列表 --> <el-row :gutter="20"> <el-col :span="6" v-for="dish in dishList" :key="dish.id"> <el-card class="dish-card" @click="$router.push(`/detail/${dish.id}`)"> <img :src="dish.coverImage || 'https://via.placeholder.com/300x200'" class="dish-cover" /> <div class="dish-info"> <h3>{{ dish.title }}</h3> <p class="desc">{{ dish.summary }}</p> <div class="meta"> <span><el-icon><User /></el-icon> {{ dish.author }}</span> <span><el-icon><Clock /></el-icon> {{ dish.createTime }}</span> </div> </div> </el-card> </el-col> </el-row> <!-- 分页 --> <div class="pagination"> <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total" layout="prev, pager, next" @current-change="fetchDishList" /> </div> </el-main> </div> </template> <script setup> import { ref, onMounted, computed } from 'vue'; import { User, Clock } from '@element-plus/icons-vue'; import request from '@/utils/request'; const searchKeyword = ref(''); const activeCat = ref(0); const currentPage = ref(1); const pageSize = ref(12); const total = ref(0); const categories = ref([{id: 1, name: '全部'}, {id: 2, name: '中餐'}, {id: 3, name: '西餐'}, {id: 4, name: '甜品'}]); const dishList = ref([]); const isLoggedIn = computed(() => { return !!localStorage.getItem('token'); }); const fetchDishList = async () => { try { const params = { page: currentPage.value, size: pageSize.value, categoryId: activeCat.value || undefined, keyword: searchKeyword.value || undefined }; const data = await request.get('/dish/list', { params }); dishList.value = data.list; total.value = data.total; } catch (error) { console.error('获取美食列表失败:', error); } }; onMounted(() => { fetchDishList(); }); </script> <style scoped> .home { min-height: 100vh; background-color: #f8f9fa; } .nav { display: flex; justify-content: space-between; align-items: center; height: 60px; } .logo { font-size: 24px; font-weight: bold; color: #e6a23c; } .nav-right { display: flex; align-items: center; } .category-filter { margin-bottom: 20px; } .dish-card { margin-bottom: 20px; cursor: pointer; transition: transform 0.3s; } .dish-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .dish-cover { width: 100%; height: 180px; object-fit: cover; border-radius: 4px 4px 0 0; } .dish-info { padding: 15px; } .dish-info h3 { margin: 0 0 10px 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dish-info .desc { color: #666; font-size: 14px; line-height: 1.5; height: 42px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .dish-info .meta { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: #999; } .pagination { display: flex; justify-content: center; margin-top: 30px; } </style>

7. 项目运行与效果验证

代码写完了，如何让它真正跑起来？

7.1 后端启动与验证

1. 启动MySQL：确保MySQL服务运行，并已创建food_share_db数据库。
2. 导入SQL：如果有初始数据SQL文件，在MySQL中执行它。
3. 启动SpringBoot：
   • 在IDEA中找到主启动类（如FoodShareApplication.java），右键Run。
   • 或在项目根目录下执行命令：mvn spring-boot:run
4. 验证启动成功：控制台看到Started FoodShareApplication in X.XXX seconds字样，且无报错。
5. 测试API：打开Postman，测试登录接口POST http://localhost:8080/api/auth/login，传入JSON{"username":"test", "password":"123456"}，应能收到包含Token的响应。

7.2 前端启动与验证

1. 安装依赖：在food-share-frontend目录下，执行npm install。
2. 启动开发服务器：执行npm run dev。
3. 访问应用：浏览器打开控制台输出的地址，通常是http://localhost:5173。
4. 功能测试：
   • 访问首页，应能看到导航栏和占位内容。
   • 点击登录，跳转到登录页，尝试登录（需后端有测试用户）。
   • 登录成功后，应能看到“发布美食”按钮。

7.3 前后端联调

这是最关键的一步，确保数据能流通。

1. 检查代理：Vite项目默认配置了代理，在vite.config.js中确认代理指向了正确的后端地址（localhost:8080）。
2. 解决跨域：如果前端请求后端出现CORS错误，检查后端的CorsConfig是否生效，或在前端开发服务器配置代理。
3. 查看网络请求：在浏览器开发者工具的 Network 标签页中，查看前端发起的请求和响应，这是定位问题的直接方式。

8. 常见问题与排查思路 (Q&A)

在实际运行中，你几乎一定会遇到下面这些问题。别慌，按步骤排查。

9. 项目优化与扩展建议（让你的毕设脱颖而出）

一个能运行的Demo只是及格线，要让项目出彩，你需要考虑以下优化和扩展点，这些也是答辩时老师可能提问的方向。

9.1 安全性加固

• 密码加密：不要使用简单的MD5。使用BCryptPasswordEncoder进行加盐哈希，这是Spring Security的标准做法。
• SQL注入防护：坚持使用MyBatis的#{}预编译占位符，切勿使用${}进行字符串拼接。
• XSS防护：对于用户提交的富文本内容（如美食详情），在存储或展示前进行HTML转义或使用白名单过滤。可以使用Jsoup库。
• 接口限流与防刷：对登录、注册、发布等接口添加限流，防止恶意请求。可以使用Guava的RateLimiter或Spring Boot的Resilience4j。

9.2 性能与用户体验

• 数据库索引：为dish表的category_id,user_id,create_time等查询频繁的字段添加索引。
• 分页查询优化：确保列表查询使用limit分页，避免一次性查询全部数据。MyBatis-Plus的分页插件是很好的选择。
• 图片处理与CDN：用户上传的图片进行压缩、生成缩略图。生产环境务必使用对象存储（如阿里云OSS、腾讯云COS）和CDN加速，而不是存储在本地服务器。
• 前端路由懒加载：在Vue Router配置中，使用() => import('...')语法实现组件懒加载，加快首屏速度。

9.3 功能扩展（毕设加分项）

• 全文搜索：集成Elasticsearch，实现更高效、更强大的美食搜索功能，支持关键词高亮、拼音搜索等。
• Redis缓存：将热门美食、用户信息等频繁读取的数据存入Redis，减轻数据库压力。例如，使用@Cacheable注解。
• WebSocket实时通知：当用户的美食被点赞、收藏或评论时，通过WebSocket推送实时通知。
• 后台管理系统：使用Vue3 + Element Plus单独搭建一个管理后台，实现用户管理、内容审核、数据看板等功能。这能极大提升项目的完整度。
• Docker容器化部署：编写Dockerfile和docker-compose.yml，将前后端和数据库容器化。这体现了你对现代部署流程的掌握。

9.4 代码质量与工程化

• 统一响应封装：就像示例中的Result类，前后端约定好统一的数据返回格式。
• 全局异常处理：使用@ControllerAdvice和@ExceptionHandler捕获并处理各类异常，返回友好的错误信息。
• API文档：使用Swagger或Knife4j自动生成在线API文档，方便前后端协作和答辩演示。
• 日志记录：使用SLF4J + Logback，合理记录INFO、WARN、ERROR级别的日志，便于线上排查问题。

通过本文的拆解，你应该已经掌握了从零构建一个SpringBoot+Vue3美食分享网站的核心路径。记住，“2小时搞定”的本质是在理解架构和原理的基础上，进行高效的代码组织和复用，而不是盲目追求速度。建议你以本文的代码为骨架，结合自己的创意进行功能增删和界面美化，将其真正转化为属于自己的毕业设计。在开发过程中，多思考、多调试、多记录，这个过程积累的经验和解决问题的能力，远比一个完美的项目代码更有价值。