Spring Boot + Vue3全栈实战：从零构建移动端宠物社交平台

如果你是一名计算机或软件工程专业的毕业生，正在为“基于移动平台的宠物社交/服务平台”这类选题绞尽脑汁，那么这篇文章就是为你准备的。毕业设计不只是为了通过答辩，它更是一个将零散知识串联成完整项目能力的绝佳机会。然而，很多同学会陷入两个极端：要么选题过于宏大，最终虎头蛇尾；要么技术栈过于陈旧，无法体现个人竞争力。

今天，我们以“基于移动平台的‘爪爪帮’平台”这个项目（项目编号 0184）为蓝本，进行一次深度拆解。这不仅仅是一个项目演示，更是一份从零到一构建一个现代化、全栈式移动应用的实战指南。我们将聚焦于当前企业级开发中最主流的组合：Spring Boot 后端 + Vue3 前端，并融入Element PlusUI框架。你会发现，一个优秀的毕业设计，其核心不在于功能有多复杂，而在于技术选型的合理性、架构的清晰度以及解决实际问题的能力。

本文将带你完整走通这个项目的核心脉络：从项目背景与痛点分析，到技术栈选型背后的深层考量，再到前后端关键模块的代码实现与联调。更重要的是，我们会探讨如何避免毕业设计中常见的“坑”，比如数据库设计混乱、接口文档缺失、部署困难等，让你的项目不仅能够流畅演示，更能成为你求职简历中一个亮眼的实战案例。

1. 毕业设计选题：为什么是“移动平台宠物服务”？

在开始敲代码之前，我们必须想清楚：为什么要做这个项目？一个好的毕业设计选题，应该兼具社会价值、技术实践性和个人兴趣。

“爪爪帮”这类宠物服务平台，瞄准的是一个快速增长的垂直市场。对于开发者而言，它天然涵盖了多个经典的业务场景：

• 用户系统：注册、登录、个人资料管理（涉及权限控制）。
• 内容社区：宠物动态分享、评论、点赞（涉及CRUD和关联查询）。
• 服务模块：预约洗澡、美容、寄养等（涉及状态机、事务管理）。
• 即时通讯：用户与商家、用户之间的沟通（可选，涉及WebSocket）。
• 移动端适配：作为“基于移动平台”的项目，必须考虑H5在手机端的体验。

这些场景几乎覆盖了现代Web应用开发的大部分核心需求。选择它作为毕业设计，意味着你可以在一个项目中，系统地实践用户认证、数据库设计、RESTful API、前后端分离、状态管理、移动端UI等一系列关键技术。这远比做一个简单的“学生信息管理系统”更能体现你的综合能力。

2. 技术栈选型：为什么是 Spring Boot + Vue3 + Element Plus？

技术选型是项目的骨架。盲目追新或固守旧技术都不可取。我们的选择基于以下判断：

2.1 后端：Spring Boot 是效率与生态的平衡点

对于Java技术栈的毕业生来说，Spring Boot几乎是当前企业后端开发的事实标准。它解决了传统Spring项目配置繁琐、部署复杂的痛点，通过“约定大于配置”和自动装配，让开发者能快速搭建一个健壮的后端服务。

• 快速启动：一个@SpringBootApplication注解就能启动一个Web服务器。
• 生态丰富：与MyBatis-Plus（数据层）、Spring Security（安全）、Spring Data JPA（数据访问）等集成无缝，能轻松实现数据库字段加密、统一异常处理、定时任务等高级功能（这些正是网络热词中体现的需求）。
• 易于部署：可以打包成可执行的JAR文件，部署极其简单。

2.2 前端：Vue3 代表了现代前端开发的主流方向

相比于Vue2，Vue3在性能、TypeScript支持和组合式API方面有质的飞跃。对于毕业设计，使用Vue3能显著提升你的代码组织能力和项目现代化程度。

• 组合式API：让逻辑关注点更集中，代码复用性更强，非常适合构建复杂的单页面应用（SPA）。
• 更好的TypeScript支持：类型系统能在开发阶段就避免许多低级错误，这对大型项目或团队协作至关重要。
• 活跃的生态：从网络热词可以看到，围绕Vue3的UI库（Element Plus、Ant Design Vue）、工具链（Vite）和社区资源非常丰富。

2.3 UI框架：Element Plus 是快速构建管理后台的利器

Element Plus是饿了么团队基于Vue3重构的UI组件库。它提供了大量高质量、美观且功能丰富的组件，如表格、表单、弹窗、导航等。

• 开发效率：用现成的组件拼装页面，能让你将精力集中在业务逻辑而非样式调整上。
• 一致性：保证了整个应用视觉风格和交互的统一。
• 移动端适配：虽然Element Plus主要面向桌面端，但其组件在响应式设计上也有考虑，结合Vue3的响应式系统和额外的移动端适配方案（如postcss-px-to-viewport），可以很好地服务于移动平台H5页面。

技术栈全景图：

[移动端 H5/小程序] <-- HTTP/WebSocket --> [Vue3 + Element Plus + Axios] <-- RESTful API --> [Spring Boot + MyBatis-Plus] <--> [MySQL/PostgreSQL] ↑ ↑ (用户交互层) (业务逻辑与数据持久层)

3. 环境准备与项目初始化

在开始编码前，请确保你的开发环境就绪。这是避免后续无数诡异错误的第一步。

3.1 后端 (Spring Boot) 环境

1. JDK：版本 8 或 11（推荐11，LTS长期支持版）。
2. Maven：版本 3.6+，用于依赖管理和项目构建。
3. IDE：IntelliJ IDEA（社区版或旗舰版）或 Eclipse with STS。
4. 数据库：MySQL 5.7+ 或 PostgreSQL。本文以MySQL为例。
5. 初始化项目：使用 Spring Initializr 生成项目骨架。
   • Project: Maven Project
   • Language: Java
   • Spring Boot: 选择稳定的版本（如 2.7.x 或 3.0.x）
   • Dependencies: 至少勾选Spring Web,Lombok,MyBatis Framework,MySQL Driver。

3.2 前端 (Vue3) 环境

1. Node.js：版本 16+，推荐使用 LTS 版本。
2. 包管理器：npm 或 yarn。本文使用 npm。
3. IDE：Visual Studio Code，并安装 Volar (Vue3官方推荐扩展) 和 ESLint 插件。
4. 初始化项目：使用 Vue 官方脚手架。

   # 使用 npm npm create vue@latest # 按照提示操作，项目名设为 `paw-help-frontend` # 在功能选择中，务必勾选 TypeScript 和 Router，Pinia（状态管理）也建议勾选。 # 其他如 ESLint、单元测试等可根据需要选择。

5. 安装 Element Plus：

   cd paw-help-frontend npm install element-plus npm install @element-plus/icons-vue # 图标库

6. 按需导入配置（优化打包体积）：在main.ts中配置。

   // main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router' import { createPinia } from 'pinia' // 引入 Element Plus 样式 import 'element-plus/dist/index.css' // 按需引入组件和图标 import * as ElementPlusIconsVue from '@element-plus/icons-vue' const app = createApp(App) // 注册所有图标 for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.use(createPinia()) app.use(router) app.mount('#app')

4. 后端核心模块设计与实现

我们以“用户管理”和“宠物动态”两个核心模块为例，展示Spring Boot后端的实现。

4.1 数据库设计

良好的数据库设计是项目的基石。避免把所有字段塞进一张表。

-- 用户表 CREATE TABLE `user` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键ID', `username` varchar(50) NOT NULL COMMENT '用户名', `password` varchar(255) NOT NULL COMMENT '加密后的密码', `nickname` varchar(50) DEFAULT NULL COMMENT '昵称', `avatar` varchar(500) DEFAULT NULL COMMENT '头像URL', `phone` varchar(20) DEFAULT NULL COMMENT '手机号', `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间', PRIMARY KEY (`id`), UNIQUE KEY `uk_username` (`username`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表'; -- 宠物动态表 CREATE TABLE `post` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键ID', `user_id` bigint(20) NOT NULL COMMENT '发布用户ID', `content` text COMMENT '动态内容', `images` json DEFAULT NULL COMMENT '图片URL数组，JSON格式', `like_count` int(11) DEFAULT '0' COMMENT '点赞数', `comment_count` int(11) DEFAULT '0' COMMENT '评论数', `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', PRIMARY KEY (`id`), KEY `idx_user_id` (`user_id`), CONSTRAINT `fk_post_user` FOREIGN KEY (`user_id`) REFERENCES `user` (`id`) ON DELETE CASCADE ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='宠物动态表';

4.2 实体类与Mapper (MyBatis-Plus)

使用MyBatis-Plus可以极大简化数据层代码。

// 文件路径：src/main/java/com/pawhelp/entity/User.java package com.pawhelp.entity; import com.baomidou.mybatisplus.annotation.*; 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 phone; @TableField(fill = FieldFill.INSERT) private LocalDateTime createTime; @TableField(fill = FieldFill.INSERT_UPDATE) private LocalDateTime updateTime; }

// 文件路径：src/main/java/com/pawhelp/mapper/UserMapper.java package com.pawhelp.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.pawhelp.entity.User; import org.apache.ibatis.annotations.Mapper; @Mapper public interface UserMapper extends BaseMapper<User> { // 继承 BaseMapper 后，基本的 CRUD 方法已自动具备 }

4.3 服务层与控制器

实现业务逻辑和RESTful API。

// 文件路径：src/main/java/com/pawhelp/service/UserService.java package com.pawhelp.service; import com.baomidou.mybatisplus.extension.service.IService; import com.pawhelp.entity.User; import com.pawhelp.vo.UserLoginVO; import com.pawhelp.vo.UserRegisterVO; public interface UserService extends IService<User> { /** * 用户注册 * @param registerVO 注册信息 * @return 注册成功后的用户信息（脱敏） */ User register(UserRegisterVO registerVO); /** * 用户登录 * @param loginVO 登录信息 * @return 登录成功后的令牌或用户信息 */ String login(UserLoginVO loginVO); }

// 文件路径：src/main/java/com/pawhelp/service/impl/UserServiceImpl.java package com.pawhelp.service.impl; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import com.pawhelp.entity.User; import com.pawhelp.mapper.UserMapper; import com.pawhelp.service.UserService; import com.pawhelp.vo.UserLoginVO; import com.pawhelp.vo.UserRegisterVO; import lombok.RequiredArgsConstructor; import org.springframework.beans.BeanUtils; import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder; import org.springframework.stereotype.Service; import org.springframework.util.StringUtils; @Service @RequiredArgsConstructor public class UserServiceImpl implements UserService { private final UserMapper userMapper; private final BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder(); @Override public User register(UserRegisterVO registerVO) { // 1. 校验用户名是否已存在 LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>(); wrapper.eq(User::getUsername, registerVO.getUsername()); if (userMapper.selectOne(wrapper) != null) { throw new RuntimeException("用户名已存在"); } // 2. 创建用户实体，密码加密 User user = new User(); BeanUtils.copyProperties(registerVO, user); user.setPassword(passwordEncoder.encode(registerVO.getPassword())); // 重要：密码必须加密存储 // 3. 插入数据库 userMapper.insert(user); // 4. 返回脱敏后的用户信息（清除密码） user.setPassword(null); return user; } @Override public String login(UserLoginVO loginVO) { // 1. 根据用户名查询用户 LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>(); wrapper.eq(User::getUsername, loginVO.getUsername()); User user = userMapper.selectOne(wrapper); // 2. 用户不存在或密码错误 if (user == null || !passwordEncoder.matches(loginVO.getPassword(), user.getPassword())) { throw new RuntimeException("用户名或密码错误"); } // 3. 生成JWT令牌（此处简化，实际应引入JWT依赖并生成Token） // 示例：return JwtUtil.generateToken(user.getId(), user.getUsername()); return "simulated-token-for-user-" + user.getId(); // 模拟返回token } }

// 文件路径：src/main/java/com/pawhelp/controller/UserController.java package com.pawhelp.controller; import com.pawhelp.common.Result; import com.pawhelp.service.UserService; import com.pawhelp.vo.UserLoginVO; import com.pawhelp.vo.UserRegisterVO; import lombok.RequiredArgsConstructor; import org.springframework.web.bind.annotation.*; @RestController @RequestMapping("/api/user") @RequiredArgsConstructor public class UserController { private final UserService userService; @PostMapping("/register") public Result<?> register(@RequestBody UserRegisterVO registerVO) { return Result.success(userService.register(registerVO)); } @PostMapping("/login") public Result<?> login(@RequestBody UserLoginVO loginVO) { String token = userService.login(loginVO); return Result.success(token); } // 其他接口：获取用户信息、更新资料等... }

4.4 统一响应与异常处理

这是体现工程化思维的重要环节。

// 文件路径：src/main/java/com/pawhelp/common/Result.java package com.pawhelp.common; import lombok.Data; import java.io.Serializable; @Data public class Result<T> implements Serializable { private Integer code; private String message; private T data; public static <T> Result<T> success(T data) { Result<T> result = new Result<>(); result.setCode(200); result.setMessage("success"); result.setData(data); return result; } public static <T> Result<T> error(Integer code, String message) { Result<T> result = new Result<>(); result.setCode(code); result.setMessage(message); return result; } }

// 文件路径：src/main/java/com/pawhelp/exception/GlobalExceptionHandler.java package com.pawhelp.exception; import com.pawhelp.common.Result; import lombok.extern.slf4j.Slf4j; import org.springframework.web.bind.annotation.ExceptionHandler; import org.springframework.web.bind.annotation.RestControllerAdvice; @Slf4j @RestControllerAdvice public class GlobalExceptionHandler { @ExceptionHandler(RuntimeException.class) public Result<?> handleRuntimeException(RuntimeException e) { log.error("RuntimeException: ", e); return Result.error(500, e.getMessage()); } // 可以添加更多特定异常的处理，如参数校验异常等 }

5. 前端核心页面与组件实现

前端我们使用Vue3 + TypeScript + Element Plus，构建一个单页面应用。

5.1 配置路由与状态管理

// 文件路径：src/router/index.ts import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', component: HomeView }, { path: '/login', name: 'login', component: () => import('../views/LoginView.vue') }, { path: '/register', name: 'register', component: () => import('../views/RegisterView.vue') }, { path: '/profile', name: 'profile', component: () => import('../views/ProfileView.vue') } ] }) export default router

// 文件路径：src/stores/user.ts import { defineStore } from 'pinia' import { ref } from 'vue' import type { User } from '@/types/user' import { login as apiLogin, getProfile } from '@/api/user' export const useUserStore = defineStore('user', () => { const user = ref<User | null>(null) const token = ref<string | null>(localStorage.getItem('token')) const setToken = (newToken: string) => { token.value = newToken localStorage.setItem('token', newToken) } const clearToken = () => { token.value = null localStorage.removeItem('token') } const login = async (username: string, password: string) => { const res = await apiLogin({ username, password }) setToken(res.data) // 假设返回的是token字符串 // 登录后可以获取用户信息 await fetchUserProfile() } const fetchUserProfile = async () => { if (token.value) { const res = await getProfile() user.value = res.data } } const logout = () => { user.value = null clearToken() // 跳转到登录页 window.location.href = '/login' } return { user, token, login, logout, fetchUserProfile } })

5.2 登录页面组件

<!-- 文件路径：src/views/LoginView.vue --> <template> <div class="login-container"> <el-card class="login-card"> <template #header> <div class="login-header"> <h2>欢迎登录爪爪帮</h2> </div> </template> <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-width="80px" @submit.prevent="handleLogin" > <el-form-item label="用户名" prop="username"> <el-input v-model="loginForm.username" placeholder="请输入用户名" :prefix-icon="User" /> </el-form-item> <el-form-item label="密码" 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" :loading="loading" native-type="submit" class="login-btn" > 登录 </el-button> <el-button @click="goToRegister"> 注册账号 </el-button> </el-form-item> </el-form> </el-card> </div> </template> <script setup lang="ts"> import { ref, reactive } from 'vue' import { useRouter } from 'vue-router' import { ElMessage } from 'element-plus' import { User, Lock } from '@element-plus/icons-vue' import { useUserStore } from '@/stores/user' const router = useRouter() const userStore = useUserStore() const loginFormRef = ref() const loading = ref(false) const loginForm = reactive({ username: '', password: '' }) const loginRules = { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ] } const handleLogin = async () => { // 表单验证 if (!loginFormRef.value) return const valid = await loginFormRef.value.validate() if (!valid) return loading.value = true try { await userStore.login(loginForm.username, loginForm.password) ElMessage.success('登录成功') router.push('/') // 跳转到首页 } catch (error: any) { ElMessage.error(error.message || '登录失败') } finally { loading.value = false } } const goToRegister = () => { router.push('/register') } </script> <style scoped> .login-container { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .login-card { width: 400px; } .login-header { text-align: center; } .login-btn { width: 100%; } </style>

5.3 首页动态列表组件

<!-- 文件路径：src/components/PostList.vue --> <template> <div class="post-list"> <el-card v-for="post in postList" :key="post.id" class="post-card"> <template #header> <div class="post-header"> <el-avatar :src="post.user.avatar" /> <div class="post-user-info"> <div class="username">{{ post.user.nickname }}</div> <div class="time">{{ formatTime(post.createTime) }}</div> </div> </div> </template> <div class="post-content"> {{ post.content }} </div> <div v-if="post.images && post.images.length" class="post-images"> <el-image v-for="(img, index) in post.images" :key="index" :src="img" :preview-src-list="post.images" :initial-index="index" fit="cover" class="post-image" /> </div> <template #footer> <div class="post-footer"> <el-button :icon="Star" text @click="handleLike(post)"> {{ post.likeCount }} 点赞 </el-button> <el-button :icon="ChatDotRound" text> {{ post.commentCount }} 评论 </el-button> <el-button :icon="Share" text> 分享 </el-button> </div> </template> </el-card> <div v-if="loading" class="loading"> <el-icon class="is-loading"><Loading /></el-icon> 加载中... </div> <div v-if="!hasMore && postList.length" class="no-more"> 没有更多动态了 </div> </div> </template> <script setup lang="ts"> import { ref, onMounted, onUnmounted } from 'vue' import { Star, ChatDotRound, Share, Loading } from '@element-plus/icons-vue' import { getPostList } from '@/api/post' import type { Post } from '@/types/post' import { formatTime } from '@/utils/date' const postList = ref<Post[]>([]) const loading = ref(false) const hasMore = ref(true) const page = ref(1) const pageSize = 10 const loadPosts = async () => { if (loading.value || !hasMore.value) return loading.value = true try { const res = await getPostList({ page: page.value, size: pageSize }) const newPosts = res.data.list if (newPosts.length < pageSize) { hasMore.value = false } postList.value = [...postList.value, ...newPosts] page.value++ } catch (error) { console.error('加载动态失败:', error) } finally { loading.value = false } } const handleLike = async (post: Post) => { // 调用点赞接口 console.log('点赞:', post.id) } // 滚动加载 const handleScroll = () => { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop const windowHeight = window.innerHeight const scrollHeight = document.documentElement.scrollHeight if (scrollTop + windowHeight >= scrollHeight - 100) { loadPosts() } } onMounted(() => { loadPosts() window.addEventListener('scroll', handleScroll) }) onUnmounted(() => { window.removeEventListener('scroll', handleScroll) }) </script> <style scoped> .post-list { max-width: 600px; margin: 0 auto; padding: 20px; } .post-card { margin-bottom: 20px; } .post-header { display: flex; align-items: center; gap: 12px; } .post-user-info { flex: 1; } .username { font-weight: bold; font-size: 16px; } .time { font-size: 12px; color: #999; } .post-content { margin: 16px 0; line-height: 1.6; } .post-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; } .post-image { width: 100%; height: 150px; border-radius: 8px; object-fit: cover; } .post-footer { display: flex; justify-content: space-around; } .loading, .no-more { text-align: center; padding: 20px; color: #999; } </style>

6. 前后端联调与跨域处理

开发阶段，前端运行在http://localhost:5173，后端运行在http://localhost:8080，存在跨域问题。

6.1 后端解决跨域（推荐）

在Spring Boot中配置全局CORS。

// 文件路径：src/main/java/com/pawhelp/config/CorsConfig.java package com.pawhelp.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.addAllowedOrigin("http://localhost:5173"); // 允许的请求方法 config.addAllowedMethod("*"); // 允许的请求头 config.addAllowedHeader("*"); // 允许携带凭证（如cookies） config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", config); return new CorsFilter(source); } }

6.2 前端配置API代理（开发环境）

在Vite项目中配置代理，避免写死IP地址。

// 文件路径：vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server: { proxy: { '/api': { target: 'http://localhost:8080', // 后端地址 changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') // 根据后端路由实际情况调整 } } } })

这样，前端在开发时请求/api/user/login就会被代理到http://localhost:8080/user/login。

7. 项目部署与上线建议

毕业设计答辩通常需要现场演示，稳定的部署是关键。

7.1 后端部署

1. 打包：在项目根目录执行mvn clean package -DskipTests，会在target目录生成paw-help-0.0.1-SNAPSHOT.jar。
2. 上传服务器：将JAR包上传到云服务器或本地演示电脑。
3. 运行：

   # 最简单的方式，但关闭终端程序会停止 java -jar paw-help-0.0.1-SNAPSHOT.jar # 推荐使用 nohup 或 systemd 在后台运行 nohup java -jar paw-help-0.0.1-SNAPSHOT.jar > app.log 2>&1 &

4. 配置数据库：确保服务器上的MySQL服务已启动，并创建好相应的数据库和表。

7.2 前端部署

1. 构建：在前端项目根目录执行npm run build，会在dist目录生成静态文件。
2. 部署静态资源：
   • 方案一（简单）：将dist目录下的所有文件复制到Spring Boot项目的src/main/resources/static目录下，然后重新打包后端。这样访问后端地址就能直接看到前端页面。
   • 方案二（分离）：使用Nginx托管前端静态文件。

     # nginx.conf 部分配置 server { listen 80; server_name your-domain.com; # 或服务器IP location / { root /path/to/paw-help-frontend/dist; index index.html; try_files $uri $uri/ /index.html; # 支持Vue Router的history模式 } # 反向代理API请求到后端 location /api/ { proxy_pass http://localhost:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }

8. 毕业设计常见问题与排查清单

在开发“爪爪帮”这类项目时，你几乎一定会遇到下面这些问题。提前了解，能节省大量调试时间。

问题现象	可能原因	排查方式	解决方案
前端页面空白，控制台报跨域错误	1. 后端未配置CORS 2. 前端代理配置错误 3. 后端服务未启动	1. 检查浏览器Network面板，看请求状态和响应头 2. 检查后端控制台是否启动成功 3. 直接访问后端接口地址http://localhost:8080/api/xxx测试	1. 确保后端CorsConfig生效且允许了前端源 2. 检查vite.config.ts中的proxy配置 3. 重启后端服务
数据库连接失败	1.application.yml中数据库配置错误（URL、用户名、密码） 2. MySQL服务未启动 3. 数据库驱动版本不匹配	1. 查看后端启动日志中的错误信息 2. 使用命令行或工具（如Navicat）测试连接 3. 检查pom.xml中的MySQL驱动版本	1. 核对spring.datasource配置 2. 启动MySQL服务 (sudo systemctl start mysql) 3. 更新驱动版本至与MySQL服务器匹配
前端打包后，访问路由页面404	Vue Router 使用了history模式，但服务器未配置try_files	刷新非根路径的页面（如/login）	在Nginx配置中添加try_files $uri $uri/ /index.html;，或将路由模式改为hash模式
Element Plus 图标不显示	1. 图标库未安装或未正确引入 2. 图标组件未注册	1. 检查package.json中是否有@element-plus/icons-vue 2. 检查main.ts中是否全局注册了图标	1. 执行npm install @element-plus/icons-vue 2. 在main.ts中按本文5.2节方式全局注册图标
MyBatis-Plus 插入数据时，自动填充字段（如create_time）不生效	1. 实体类字段未加@TableField注解 2. 未配置元对象处理器（MetaObjectHandler）	查看插入数据库的数据，对应字段是否为NULL	1. 确保实体类字段有@TableField(fill = FieldFill.INSERT)等注解 2. 创建配置类实现MetaObjectHandler接口，并重写insertFill和updateFill方法
前端请求接口返回404	1. 后端控制器@RequestMapping路径写错 2. 前端请求URL拼写错误 3. 请求方法（GET/POST）不匹配	1. 在后端控制器类和方法上打断点或加日志 2. 在浏览器Network面板查看完整的请求URL和方法	1. 核对后端@PostMapping("/login")等注解路径 2. 核对前端axios请求的url和method

9. 项目优化与扩展方向（让毕业设计更出彩）

完成基础功能后，以下优化点能让你的项目在答辩时脱颖而出：

1. 引入JWT实现无状态认证：替换模拟的token，使用jjwt库生成和验证JWT，实现更安全的登录态管理。
2. 集成Redis缓存：将热点数据（如首页动态、用户信息）缓存到Redis，提升接口响应速度。
3. 实现文件上传（云存储）：用户头像、宠物动态图片上传到阿里云OSS、腾讯云COS或使用MinIO自建对象存储。
4. 集成WebSocket实现实时聊天：为“爪爪帮”添加用户私信或客服聊天功能，使用Spring Boot的spring-boot-starter-websocket。
5. 编写单元测试：为关键的服务层方法编写JUnit单元测试，体现工程规范。
6. 使用Docker容器化部署：编写Dockerfile和docker-compose.yml，一键部署整个应用（后端、前端、数据库、Redis），展示运维能力。
7. 开发微信小程序端：使用Uni-app或Taro，基于现有后端API，快速开发一个微信小程序版本，真正体现“移动平台”。
8. 添加管理后台：使用Vue3 + Element Plus再开发一个管理后台，用于管理用户、审核动态、处理订单等。

通过“爪爪帮”这个毕业设计项目，你实践的不只是一套技术组合，更是一套完整的、现代化的Web应用开发方法论。从需求分析、技术选型、数据库设计、前后端开发到部署上线，每一个环节都充满了值得深入思考的细节。希望这篇长文能为你提供一个清晰的路径和坚实的起点。记住，最好的学习方式就是动手去构建。建议你以此为蓝本，融入自己的创意和思考，打造出独一无二的毕业作品。