基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】

发布于:2025-08-11 ⋅ 阅读:(26) ⋅ 点赞:(0)

基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】.zip

环境准备:

  • JDK1.8+
  • maven3.6+
  • nodejs14+
  • mysql5.6+

技术栈

  • 后台:springboot+mybatisPlus
  • 前台:vue3+elementUi+Axios+Vite
  • 开发工具: idea、navicate

功能列表

前台(用户端)
  • 账号: 注册、登录(JWT 持久化,本地存储)

  • 导航: 显示用户名、登录/退出;仅当角色为 ADMIN 时展示“后台管理”入口

  • 首页/食堂列表: 搜索(名称/位置)、分页;卡片网格自适应列,桌面端宽屏适配

  • 食堂详情: 基本信息、位置/简介展示;综合评分统计;菜品列表;发布评价(评分、可选菜品、内容);评价列表卡片化展示、相对时间、分页

  • 我的评价: 查看本人评价、删除评价;响应式网格卡片、分页

  • 请求与鉴权: 全局请求拦截(自动附带 Bearer Token)、统一返回码处理

  • UI/样式: 统一主题(圆角卡片、阴影、品牌渐变)、响应式布局、桌面端大屏优化

后台(管理端)
  • 访问控制: 路由守卫与菜单权限,只有 ADMIN 可进入后台各页

  • 布局与导航: 左侧菜单(食堂管理/菜品管理/评价管理)、顶部工具区,统一留白/高度占满

  • 食堂管理: 列表、创建、编辑、删除;高表格自适应高度占满视口

  • 菜品管理: 列表、按食堂筛选、关键字搜索、创建、编辑、删除;高表格自适配

  • 评价管理: 列表、按用户/食堂/菜品筛选、删除;评分展示、分页;高表格自适配

  • UI/样式: 统一卡片化风格、栅格与内边距规范,尽量利用全屏宽高显示内容

项目使用步骤

前置条件
  • 已安装 JDK 11+、Maven 3.8+、Node.js 18+(含 npm)

  • 数据库已可用(/src/main/resources/application.yml 默认连 MySQL,必要时先改成你自己的连接与账号)

启动后端(Spring Boot)
  • 开发运行(推荐):

  • Windows PowerShell:

  • cd backend

  • mvn spring-boot:run

  • 或打包运行:

  • cd backend

  • mvn -DskipTests package

  • java -jar target/canteen-eval-backend-1.0.0.jar

  • 默认端口:8080(可在 application.yml 修改)

启动前端(Vite + Vue 3)
  • 开发运行:

  • cd frontend

  • npm i

  • npm run dev

  • 访问:http://localhost:5173

  • 已配置代理到后端 http://localhost:8080(见 frontend/vite.config.js)

账号
  • 管理员:用户名:admin,密码:admin123

  • 说明:

  • 如登录失败且数据库存在旧管理员,可删掉后端会自动重建:DELETE FROM users WHERE username=‘admin’; 重启后端即可。

  • 生产前端构建:cd frontend && npm run build(产物在 dist/,可用 Nginx/静态服务器托管)

界面展示:

image-20250809165848763

image-20250809170016710

image-20250809170031801

image-20250809171219895

image-20250809170206883

image-20250809170215508

image-20250809170221330