简介本资源是一份面向计算机专业本科生的毕业设计文档聚焦SpringBoot与Vue前后端分离架构下的地方美食分享网站开发实践适用于Web全栈开发入门与课程设计参考。文档完整覆盖项目背景、SpringBoot后端框架与Vue.js前端框架的技术原理、B/S架构选型依据、用户/美食/评论/收藏等核心模块的功能设计、MySQL数据库表结构设计以及系统实现与测试要点内容兼具理论阐述与工程落地性。资源为单个3.23MB的Word文档.docx含中英文摘要、目录、六章正文及规范格式排版结构清晰可直接用于开题、中期与答辩材料准备。目前已有116人学习下载读者可获取一套逻辑严谨、技术主流、模块完整的地方特色Web应用设计范例尤其适合理解前后端协同开发流程与毕业论文写作规范。1. 用 SpringBoot Vue 搭建地方美食分享网站不是堆技术而是解决「本地化内容冷启动难、用户互动弱、图片视频加载卡顿」三个真实痛点一个县城小吃摊主拍了 20 条油炸臭豆腐的短视频却发不到主流平台——规则太严、流量太散一位退休教师整理了 37 道本地方言叫法的糕点做法文档存了十年没公开游客搜“绍兴黄酒配什么菜”结果跳出的是全国连锁餐厅的标准化菜单。这些不是数据缺失而是地域性美食知识缺乏轻量级、可自主运营、带多媒体承载能力的发布载体。SpringBoot Vue 的组合恰恰在 Java 生态稳定性、Vue 的组件化交互效率、以及二者对静态资源尤其是 m3u8 视频流、高分辨率菜品图的友好支持上形成闭环。它不追求大而全的 SaaS 架构而是让区县文旅部门、高校社团、甚至单个餐饮协会用一套可离线部署、MySQL 单库支撑、前后端分离清晰的代码快速上线一个「能发图文、能播本地视频、能按乡镇打标签、能导出 PDF 菜谱」的专属站点。本文聚焦从零跑通这个闭环后端用 SpringBoot 3.2MyBatis-Plus 实现结构化菜品管理与 API 服务前端用 Vue 3 Pinia Element Plus 构建响应式交互重点解决 m3u8 视频在 Vue 中的兼容播放、MySQL 中地理标签的高效查询、以及 SpringBoot 启动时 banner 乱码等高频实操问题。2. SpringBoot 后端用 MyBatis-Plus 实现菜品、店铺、标签三级关联模型避开 XML 配置与手写 SQL 的低效陷阱2.1 为什么选 MyBatis-Plus 而非 JPA 或纯 JDBC——直击地方美食数据的「半结构化」本质地方美食数据天然带有强地域属性和弱规范性同一道“梅干菜扣肉”绍兴用霉干菜、台州用芥菜干、宁波加虾米字段不能硬编码为ingredient_1/ingredient_2店铺地址可能填“东山弄口第三棵梧桐树下”而非标准经纬度用户上传的视频格式混杂MP4、HLS/m3u8、甚至手机直接录的 MOV。JPA 的强对象映射在此场景下会频繁触发Lob字段膨胀或ElementCollection嵌套异常纯 JDBC 则需为每种模糊查询如“找慈溪产的杨梅相关菜品”手写LIKE %慈溪%性能堪忧。MyBatis-Plus 的QueryWrapper动态条件构建 TableField(exist false)灵活扩展字段 LambdaQueryWrapper类型安全恰好匹配这种“核心字段固定名称、简介、所属地区、扩展字段动态方言叫法、推荐酒水、非遗认证编号”的需求。其内置分页插件也避免了 MySQLLIMIT在大数据量下的偏移性能衰减。2.2 建表语句与实体类用TableName和TableId显式声明杜绝驼峰自动转换导致的字段错位MySQL 建表必须显式定义字符集与排序规则尤其涉及方言文本如“㸆”“㸆”“㸆”等生僻字CREATE TABLE dish ( id bigint NOT NULL AUTO_INCREMENT COMMENT 主键ID, name varchar(100) NOT NULL COMMENT 菜名, description text COMMENT 简介支持HTML, region_code varchar(10) NOT NULL COMMENT 所属行政区划代码GB/T 2260, video_url varchar(500) DEFAULT NULL COMMENT m3u8视频地址或MP4路径, cover_image varchar(500) DEFAULT NULL COMMENT 封面图URL, status tinyint NOT NULL DEFAULT 1 COMMENT 状态1-启用0-禁用, create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, update_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_region_status (region_code,status) -- 地域状态联合索引加速首页筛选 ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_0900_ai_ci COMMENT菜品主表;对应 SpringBoot 实体类需严格匹配import com.baomidou.mybatisplus.annotation.*; TableName(dish) // 显式指定表名避免默认下划线转驼峰失败 Data public class Dish { TableId(type IdType.ASSIGN_ID) // 使用雪花算法生成ID避免MySQL自增瓶颈 private Long id; TableField(name) private String name; // 字段名与数据库完全一致不依赖自动映射 TableField(description) private String description; TableField(region_code) private String regionCode; // 行政区划代码用于后续GIS关联 TableField(video_url) private String videoUrl; // 存储m3u8地址如 /videos/shaoxing/m3u8/123/index.m3u8 TableField(cover_image) private String coverImage; TableField(status) private Integer status; TableField(fill FieldFill.INSERT) private LocalDateTime createTime; TableField(fill FieldFill.INSERT_UPDATE) private LocalDateTime updateTime; }提示TableField必须标注所有字段包括id。若省略MyBatis-Plus 可能因找不到id字段而报Unknown column id in field list。FieldFill.INSERT_UPDATE确保更新时update_time自动刷新无需手动 set。2.3 Mapper 接口与 Service 层用 LambdaQueryWrapper 实现「按乡镇查特色菜」的精准查询地方美食的核心查询逻辑是“地域穿透”游客输入“柯桥区安昌镇”需返回该镇所有在售菜品并按热度排序。传统 SQL 的WHERE region_code LIKE 330603%柯桥区代码为 330603效率低下。MyBatis-Plus 提供apply()方法嵌入原生 SQL 片段// DishMapper.java public interface DishMapper extends BaseMapperDish { // 自定义方法按行政区划前缀查询如330603匹配柯桥区所有下级乡镇 Select(SELECT * FROM dish WHERE region_code LIKE CONCAT(#{prefix}, %) AND status 1 ORDER BY create_time DESC LIMIT #{limit}) ListDish selectByRegionPrefix(Param(prefix) String prefix, Param(limit) Integer limit); } // DishService.java Service public class DishService { Autowired private DishMapper dishMapper; public ListDish listByTown(String townCode, Integer limit) { // townCode 示例330603001安昌镇取前6位330603作为区级前缀 String regionPrefix townCode.substring(0, 6); return dishMapper.selectByRegionPrefix(regionPrefix, limit); } }此方案比LIKE %330603%更高效且避免了region_code字段存储冗余层级如“浙江省_绍兴市_柯桥区_安昌镇”保持数据扁平化。3. Vue 前端用 Video.js hls.js 播放 m3u8绕过浏览器原生限制实现本地美食视频秒开3.1 为什么 Vue 原生video标签无法直接播放 m3u8——解析 HLS 协议的底层依赖m3u8 是苹果提出的 HTTP Live StreamingHLS协议索引文件本质是文本列表如#EXTINF:10.0,segment0.ts浏览器原生video仅支持 MP4/WebM 等封装格式无法解析并下载 ts 分片。强行设置srcxxx.m3u8会导致 404 或静音黑屏。必须引入 JavaScript 解析器将 m3u8 转为浏览器可识别的媒体源MediaSource。Video.js 是最成熟的解决方案其videojs-contrib-hls插件新版已集成至 core专为此设计且对 Vue 3 的 Composition API 支持良好。3.2 Vue 3 组件中集成 Video.js用onMounted生命周期挂载避免 SSR 渲染报错template div classvideo-container video refvideoRef classvideo-js vjs-default-skin controls preloadauto :data-setup{fluid: true, aspectRatio: 16:9} / /div /template script setup import { ref, onMounted, onUnmounted } from vue import videojs from video.js import video.js/dist/video-js.css const props defineProps({ src: { type: String, required: true } // 传入m3u8地址如 /api/videos/123.m3u8 }) const videoRef ref(null) let player null onMounted(() { // 确保DOM渲染完成后再初始化Player if (videoRef.value) { player videojs(videoRef.value, { sources: [{ src: props.src, type: application/x-mpegURL // 关键声明HLS类型 }], html5: { hls: { overrideNative: true // 强制使用hls.js禁用浏览器原生HLSSafari除外 } }, // 加载优化预加载首段减少首帧延迟 preload: metadata }) } }) onUnmounted(() { if (player) { player.dispose() // 销毁实例释放内存 } }) /script style scoped .video-container { width: 100%; max-width: 800px; margin: 0 auto; } .video-js { width: 100% !important; height: auto !important; } /style注意overrideNative: true是关键参数。Chrome/Firefox 默认禁用原生 HLS 支持此配置强制启用hls.js解析Safari 浏览器则会自动回退到原生支持保证兼容性。preload: metadata仅加载视频元数据时长、分辨率而非全部分片显著提升首屏速度。3.3 后端提供 m3u8 文件的 Nginx 配置解决跨域与 MIME 类型错误SpringBoot 默认不识别.m3u8和.ts后缀需在application.yml中添加spring: web: resources: static-locations: classpath:/static/,file:/opt/app/videos/ # 将视频目录映射为静态资源Nginx 配置必须声明正确 MIME 类型否则浏览器拒绝加载location /videos/ { alias /opt/app/videos/; # 添加m3u8和ts的MIME类型 types { application/vnd.apple.mpegurl m3u8; video/mp2t ts; } # 允许跨域若前端域名与后端不同 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, OPTIONS; add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range; }验证方式访问http://your-domain.com/videos/shaoxing/m3u8/123/index.m3u8响应头应包含Content-Type: application/vnd.apple.mpegurl。4. MySQL 与 SpringBoot 协同优化用全文索引加速方言菜名搜索用tinyint替代枚举字符串降低存储开销4.1 方言菜名搜索为何不能只用LIKE %臭豆腐%——全文索引FULLTEXT的实战配置用户搜索“臭卤”“灰汁团”“印糕”等方言词时LIKE查询会全表扫描10 万条数据下响应超 2 秒。MySQL 5.6 的FULLTEXT索引专为文本搜索设计支持自然语言模式MATCH ... AGAINST和布尔模式臭 -豆腐。但需注意FULLTEXT仅支持MyISAM和InnoDB引擎且对中文需配合ngram解析器-- 创建全文索引InnoDB引擎 ALTER TABLE dish ADD FULLTEXT(name, description); -- 查询示例搜索包含“臭豆腐”或“卤味”的菜品 SELECT id, name, description FROM dish WHERE MATCH(name, description) AGAINST(臭豆腐 卤味 IN NATURAL LANGUAGE MODE);提示ngram解析器需在 MySQL 配置文件my.cnf中启用[mysqld] ngram_token_size2 ft_min_word_len2重启 MySQL 后FULLTEXT索引才能正确切分中文词汇如“臭豆腐”切为“臭豆”“豆腐”。4.2 用tinyint存储状态字段比varchar(20)节省 95% 存储空间dish.status字段若定义为varchar(20)存储 “启用”“禁用”“审核中”每个记录占用 20 字节改为tinyint(1)范围 -128~127仅占 1 字节。100 万条数据节省约 19MB 存储且tinyint比较速度远快于字符串。SpringBoot 实体类中用枚举映射public enum DishStatus { ENABLED((byte) 1), DISABLED((byte) 0); private final byte value; DishStatus(byte value) { this.value value; } public byte getValue() { return value; } } // Dish.java 中 TableField(status) private Byte status; // 直接映射为byte避免Integer包装类开销 // 查询时 queryWrapper.eq(status, DishStatus.ENABLED.getValue());4.3 SpringBoot 连接 MySQL 8.0 的关键配置解决Public Key Retrieval is not allowed错误MySQL 8.0 默认启用caching_sha2_password认证插件SpringBoot 2.3 的mysql-connector-java驱动需显式允许公钥检索spring: datasource: url: jdbc:mysql://localhost:3306/food_db?useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltruecharacterEncodingutf8mb4 username: root password: your_password driver-class-name: com.mysql.cj.jdbc.DriverallowPublicKeyRetrievaltrue参数必不可少否则启动报错Public Key Retrieval is not allowed。characterEncodingutf8mb4确保方言生僻字如“㸆”不乱码。5. 本地开发联调技巧用 IDEA 快速创建 SpringBoot 项目用 Vue CLI 代理解决跨域用 MySQL Workbench 直观调试查询5.1 IDEA 创建 SpringBoot 项目时的 3 个必选依赖在 Spring Initializr 页面https://start.spring.io/选择Spring Web提供 RESTful API 基础Spring Boot DevTools热部署修改 Java 代码后CtrlF9即生效无需重启MySQL Driver连接数据库注意勾选后会自动添加mysql-connector-java依赖避坑不要勾选Spring Data JPA与 MyBatis-Plus 冲突Lombok可选但需安装 IDEA Lombok 插件并启用 annotation processing。5.2 Vue 项目中配置vue.config.js代理让/api请求无缝转发到 SpringBoot开发时前端运行在http://localhost:8080后端在http://localhost:8081直接调用fetch(/api/dish)会触发 CORS。Vue CLI 的devServer.proxy可透明转发// vue.config.js module.exports { devServer: { proxy: { /api: { target: http://localhost:8081, // SpringBoot端口 changeOrigin: true, // 修改请求头中的host为target pathRewrite: { ^/api: // 去掉/api前缀后端接收 /dish 而非 /api/dish } } } } }此时前端代码fetch(/api/dish/list)实际请求http://localhost:8081/dish/list无跨域报错。5.3 用 MySQL Workbench 执行慢查询分析定位region_code查询瓶颈当listByTown接口响应慢时在 Workbench 中执行-- 开启慢查询日志临时 SET GLOBAL slow_query_log ON; SET GLOBAL long_query_time 0.1; -- 记录超过0.1秒的查询 -- 查看最近慢查询 SELECT * FROM mysql.slow_log ORDER BY start_time DESC LIMIT 5; -- 对具体SQL分析执行计划 EXPLAIN SELECT * FROM dish WHERE region_code LIKE 330603% AND status 1;若type列显示ALL全表扫描说明idx_region_status索引未生效需检查region_code字段是否为varchar类型text类型无法使用索引前缀。5.4 SpringBoot Banner 乱码解决方案用 UTF-8 编码生成 ASCII 艺术字SpringBoot 启动时的 banner 若显示方块是 IDEA 控制台编码非 UTF-8。在src/main/resources/banner.txt中用在线工具如 https://www.bootschool.net/ascii生成 UTF-8 编码的 ASCII 字██████╗ ██████╗ ██╗ ██╗███████╗██████╗ ██╔══██╗██╔══██╗╚██╗ ██╔╝██╔════╝██╔══██╗ ██████╔╝██████╔╝ ╚████╔╝ █████╗ ██████╔╝ ██╔═══╝ ██╔══██╗ ╚██╔╝ ██╔══╝ ██╔══██╗ ██║ ██║ ██║ ██║ ███████╗██║ ██║ ╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝并在application.yml中指定编码spring: main: banner-mode: console output: ansi: always确保 IDEA 的File → Settings → Editor → File Encodings中Global Encoding和Project Encoding均设为UTF-8。本文还有配套的精品资源点击获取