当前位置：首页 > news >正文

SpringBoot+Vue 校园周边美食分享平台 | 毕业设计完整源码 | 前后端分离

news 2026/6/11 3:13:47

🧑‍💻博主介绍 & 诚邀关注

作者：专注于 Java、Python、前端开发的技术博主 | 全网粉丝 30 万 +
在校期间协助导师完成毕业设计课题分类、论文格式初审及代码整理工作；工作后持续分享毕设思路，助力毕业生顺利完成课题。

== 🔥欢迎订阅我的专栏，获取完整源码、论文框架和部署文档，一起学习，共同进步！==

📌精品项目推荐需要源码，文末有作者联系方式

以下是精选毕业设计题目，后续会逐步更新对应项目的源码和论文框架：

# SpringBoot+Vue 校园周边美食分享平台 | 毕业设计完整源码 | 前后端分离

摘要

校园周边美食分享平台是一个面向在校大学生的轻量级社区项目，主要解决“今天吃什么”这个世纪难题。学生可以发布食堂、后街、外卖的各种美食探店笔记，给菜品打分、写评价、晒照片，其他人可以浏览、点赞、收藏、评论。管理员在后端管理用户、审核内容、统计数据。项目基于SpringBoot + Vue前后端分离架构，适合作为计算机专业的毕业设计选题。

一、项目介绍

这个项目的名字叫“校园周边美食分享平台”，说白了就是一个校园版的大众点评。学生登录后，可以发布自己吃过的美食，配上图片、价格、位置、评分，其他同学看到后可以互动。平台分为前台（学生用）和后台（管理员用）。

前台主要有：首页推荐美食、按分类浏览、搜索美食、查看店铺详情、发表评价、个人中心（管理自己的收藏和发布记录）。后台主要有：用户管理、美食审核、分类管理、数据统计。

项目亮点在于贴合校园场景，学生只关注自己学校周边的美食，信息更有针对性，比看全网的大众点评更实用。代码结构清晰，接口文档规范，适合二次开发。

二、技术栈

技术	版本	用途
SpringBoot	2.7.x	后端框架，处理业务逻辑
MyBatis-Plus	3.5.x	ORM框架，操作数据库
MySQL	8.0	数据存储
Vue	2.x	前端框架，构建页面
Element UI	2.x	前端UI组件库
Axios	0.x	前端HTTP请求
JWT	0.9.x	用户身份认证
Maven	3.x	项目构建

三、功能展示

3.1 前台模块

用户注册登录

页面：注册页、登录页
操作：注册时填写用户名、密码、邮箱、手机号，登录时输入账号密码，支持角色选择（学生/管理员）

首页推荐

页面：首页瀑布流展示美食卡片
操作：展示热门美食、最新发布、随机推荐三类内容，每张卡片显示美食名称、店铺名、评分、图片缩略图，点击进入详情

美食分类浏览

页面：分类列表页
操作：左侧分类导航（中餐、西餐、小吃、饮品等），右侧展示对应分类下的美食列表，支持按评分、发布时间排序

美食搜索

页面：搜索页
操作：输入关键词（美食名、店铺名），实时搜索匹配结果，支持模糊查询

美食详情

页面：详情页
操作：展示美食名称、店铺地址、价格、评分、用户评价、图片轮播，下方显示评论区，已登录用户可以发表评论、点赞、收藏

个人中心

页面：个人主页
操作：显示用户头像、昵称、发布数、收藏数，下方tab切换“我的发布”、“我的收藏”、“我的评论”，可以编辑个人信息

3.2 后台模块

用户管理

页面：用户列表页
操作：表格展示所有用户（ID、用户名、邮箱、注册时间、状态），支持搜索、禁用/启用用户、重置密码

美食管理

页面：美食列表页
操作：表格展示所有美食（ID、名称、分类、发布者、审核状态、发布时间），支持搜索、批量审核通过/驳回、编辑、删除

分类管理

页面：分类列表页
操作：展示所有美食分类（ID、分类名、排序、状态），支持新增、编辑、删除分类

数据统计

页面：统计面板
操作：展示用户总数、美食总数、评论总数、今日新增数，用柱状图显示近7天发布趋势

四、数据库设计

核心表共5张：

user（用户表）

字段名	类型	说明
id	bigint	主键
username	varchar(50)	用户名
password	varchar(255)	密码（加密）
email	varchar(100)	邮箱
phone	varchar(20)	手机号
avatar	varchar(255)	头像URL
role	varchar(20)	角色（user/admin）
status	int	状态（0禁用 1启用）
create_time	datetime	注册时间

food（美食表）

字段名	类型	说明
id	bigint	主键
name	varchar(100)	美食名称
shop_name	varchar(100)	店铺名
address	varchar(255)	店铺地址
price	decimal(10,2)	价格
description	text	描述
category_id	bigint	分类ID
user_id	bigint	发布者ID
score	int	评分（1-5）
images	varchar(1000)	图片（逗号分隔）
status	int	审核状态（0待审核 1通过 2驳回）
create_time	datetime	发布时间

category（分类表）

字段名	类型	说明
id	bigint	主键
name	varchar(50)	分类名
sort	int	排序
status	int	状态

comment（评论表）

字段名	类型	说明
id	bigint	主键
food_id	bigint	美食ID
user_id	bigint	评论者ID
content	text	评论内容
create_time	datetime	评论时间

favorite（收藏表）

字段名	类型	说明
id	bigint	主键
user_id	bigint	用户ID
food_id	bigint	美食ID
create_time	datetime	收藏时间

五、核心代码展示

5.1 后端Controller示例（美食模块）

@RestController@RequestMapping("/api/food")publicclassFoodController{@AutowiredprivateFoodServicefoodService;// 获取美食列表（分页+条件查询）@GetMapping("/list")publicResultlist(@RequestParam(defaultValue="1")Integerpage,@RequestParam(defaultValue="10")Integersize,Stringkeyword,LongcategoryId){Page<Food>pageObj=newPage<>(page,size);LambdaQueryWrapper<Food>wrapper=newLambdaQueryWrapper<>();if(StringUtils.isNotBlank(keyword)){wrapper.like(Food::getName,keyword).or().like(Food::getShopName,keyword);}if(categoryId!=null){wrapper.eq(Food::getCategoryId,categoryId);}wrapper.eq(Food::getStatus,1);// 只展示已审核wrapper.orderByDesc(Food::getCreateTime);Page<Food>result=foodService.page(pageObj,wrapper);returnResult.success(result);}// 新增美食@PostMapping("/add")publicResultadd(@RequestBodyFoodfood,@RequestHeader("Authorization")Stringtoken){LonguserId=JwtUtil.getUserId(token);food.setUserId(userId);food.setStatus(0);// 待审核foodService.save(food);returnResult.success("发布成功，等待审核");}// 点赞（这里用评论数模拟点赞，实际可单独设计点赞表）@PostMapping("/like/{id}")publicResultlike(@PathVariableLongid){Foodfood=foodService.getById(id);if(food!=null){food.setLikeCount(food.getLikeCount()+1);foodService.updateById(food);returnResult.success();}returnResult.error("美食不存在");}}

5.2 前端Vue示例（美食列表页）

<template> <div class="food-list"> <!-- 搜索栏 --> <el-form :inline="true" class="search-form"> <el-form-item> <el-input v-model="keyword" placeholder="搜索美食或店铺" clearable @keyup.enter="search"></el-input> </el-form-item> <el-form-item> <el-select v-model="categoryId" placeholder="选择分类" clearable> <el-option v-for="item in categories" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="search">搜索</el-button> </el-form-item> </el-form> <!-- 美食卡片列表 --> <el-row :gutter="20"> <el-col :span="6" v-for="food in foodList" :key="food.id"> <el-card :body-style="{ padding: '0px' }" class="food-card" @click="goDetail(food.id)"> <img :src="food.images ? food.images.split(',')[0] : defaultImg" class="food-img"> <div class="food-info"> <h4>{{ food.name }}</h4> <p class="shop-name">{{ food.shopName }}</p> <div class="bottom"> <span class="price">¥{{ food.price }}</span> <el-rate v-model="food.score" disabled show-score text-color="#ff9900" score-template="{value}分"> </el-rate> </div> </div> </el-card> </el-col> </el-row> <!-- 分页 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[8, 16, 24]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </template> <script> export default { data() { return { keyword: '', categoryId: null, foodList: [], categories: [], currentPage: 1, pageSize: 8, total: 0, defaultImg: require('@/assets/default-food.png') } }, mounted() { this.getCategories(); this.getFoodList(); }, methods: { getFoodList() { this.$http.get('/api/food/list', { params: { page: this.currentPage, size: this.pageSize, keyword: this.keyword, categoryId: this.categoryId } }).then(res => { this.foodList = res.data.records; this.total = res.data.total; }); }, search() { this.currentPage = 1; this.getFoodList(); }, goDetail(id) { this.$router.push({ path: '/food/detail', query: { id } }); }, handleSizeChange(val) { this.pageSize = val; this.getFoodList(); }, handleCurrentChange(val) { this.currentPage = val; this.getFoodList(); }, getCategories() { this.$http.get('/api/category/list').then(res => { this.categories = res.data; }); } } } </script>

六、运行效果

登录页：页面中央是登录表单，包含用户名输入框、密码输入框、角色选择下拉框（学生/管理员）。右上角有“注册”按钮，点击跳转到注册页。

注册页：表单包含用户名、密码、确认密码、邮箱、手机号输入框，底部有“注册”按钮和“返回登录”链接。

首页（学生视角）：顶部是导航栏，包含Logo、搜索框、个人中心入口。主区域按“热门推荐”、“最新发布”、“随机发现”三个tab展示美食卡片。每个卡片显示美食图片、名称、店铺名、评分星级、价格。点击卡片跳转到详情页。

美食详情页：顶部是图片轮播组件，下方依次显示美食名称、店铺名、地址、价格、评分。再往下是评价区，已登录用户可以在底部输入框写评论并提交，评论区显示所有用户的评论内容、评论时间。页面右上角有收藏按钮和点赞按钮。

个人中心页：左侧显示用户头像、昵称、发布数、收藏数。右侧主体区域有三个tab：“我的发布”显示用户发布过的美食列表，每条记录有编辑和删除按钮；“我的收藏”显示用户收藏的美食列表，点击可跳转详情；“个人信息”可编辑头像、昵称、邮箱。

后台管理页（管理员视角）：左侧是菜单栏，包含用户管理、美食管理、分类管理、数据统计。用户管理页是一个表格，显示用户ID、用户名、邮箱、状态、注册时间，每行有启用/禁用按钮。美食管理页表格显示美食ID、名称、分类、发布者、审核状态、发布时间，每行有审核通过、驳回、删除按钮。分类管理页支持新增、编辑、删除分类。数据统计页用ECharts柱状图显示近7天发布数量，下方显示总用户数、总美食数、总评论数等统计卡片。