企业官网建设流程全解析

简介：本资源是一套面向计算机类本科毕业生的完整毕业设计项目，聚焦甘肃非物质文化遗产数字化展示与传播需求，采用Spring Boot + Vue前后端分离架构实现，兼顾教学实践性与工程规范性。压缩包共1821个文件，含145个Java后端源码、100个Vue组件、306个JS逻辑脚本、88个CSS样式文件、147个JPG/PNG图片资源及1个SQL数据库脚本，覆盖从MySQL建表语句、RESTful接口定义到响应式前端页面的全链路实现；整体77.6MB，结构清晰，含备份文件（.bak）体现开发迭代痕迹。已有82人学习下载，提供完整说明文档与毕业论文（LunW），涵盖ER图、接口文档、部署指南及UI设计说明，可直接用于答辩演示、二次开发或课程设计参考，特别适合缺乏真实项目经验的学生快速掌握企业级Web开发全流程。 每年到了毕业设计高峰期，总有学弟学妹拿着“非遗文化网站”这类题目来找我。说实话，甘肃非物质文化网站这类选题在高校里出现频率极高，表面看是地方文化展示，本质上是“一个典型的前后端分离管理系统”——前台做内容展示与检索，后台做数据管理与维护。它最舒服的地方在于：技术栈主流、业务边界清晰、工作量适中，特别适合用SpringBoot + Vue + MySQL这套组合来落地。

这个项目具体能做什么？我从源码结构和功能上看了一圈，整体设计很规范。用户可以浏览非遗项目、查看传承人故事、阅读资讯动态、搜索感兴趣的内容；管理员则通过后台维护非遗项目的分类、图文详情、视频资料、传承人信息，以及用户的留言和状态。如果你正准备做Java方向的毕业设计，或者在SpringBoot+Vue项目里找不到合适的学习切入点，这篇内容可以帮你把项目骨架、数据库设计、前后端联调、部署上线的完整链路都理顺一遍，文末我还会把实际跑项目时常踩的坑一并列出来。

1. 技术选型与整体架构：为什么是SpringBoot+Vue

1.1 技术选型背后的考量

先聊一个很多同学会忽略的问题：为什么 SpringBoot+Vue 成了毕业设计事实上的“标准答案”？

往回看十年，Java Web 的主流方案还是 SSM（Spring+SpringMVC+MyBatis），那时候配置一个 Spring 环境能让人崩溃——XML 写一大坨，依赖版本动不动冲突。SpringBoot 把“约定大于配置”做到了极致，内嵌 Tomcat、自动装配、开箱即用的 starter，一个 main 方法就能把后端跑起来。对于毕业设计来说，这意味着你可以把更多精力放在业务功能上，而不是耗在环境配置里。

前端选 Vue 的原因也很直接。Vue 的学习曲线比 React 平缓，模板语法接近原生 HTML，对大多数学生的友好度很高。它又是渐进式框架，可以只在一个页面里引入，也可以配合 Vue Router、Vuex/Pinia 做成完整的单页应用。配合 Element UI 这类组件库，后台管理界面的表格、表单、弹窗、分页基本是“组装”出来的，效率非常高。

MySQL 更不用多说，开源、免费、资料多到查不完，对毕设级别的数据量完全够用。而且很多学校的课程设计、数据库实验用的就是 MySQL，学生上手几乎没有额外成本。

1.2 前后端分离的项目结构

这是整个项目源码的顶层结构，非常标准的前后端分离布局：

gannan-feiwenhua/ ├── backend/ # SpringBoot 后端工程 │ ├── src/main/java │ ├── src/main/resources │ └── pom.xml ├── frontend/ # Vue 前端工程 │ ├── src/ │ ├── package.json │ └── vue.config.js └── sql/ # 数据库初始化脚本 └── gansu_feiwenhua.sql

后端按经典分层分包：

com.example.feiwenhua ├── controller # 接口层，接收前端请求 ├── service # 业务逻辑层，处理核心规则 ├── mapper # 数据访问层，操作数据库 ├── entity # 实体类，对应数据库表 ├── config # 配置类，如跨域、静态资源映射 └── common # 通用类，如统一返回结果、异常处理

前端按 Vue 官方推荐的结构组织：

src/ ├── api/ # 接口请求封装 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── router/ # 路由配置 ├── store/ # 状态管理 ├── views/ # 页面组件 │ ├── home/ # 前台展示页面 │ └── admin/ # 后台管理页面 └── main.js # 入口文件

这种结构之所以被广泛采用，是因为它逻辑清晰、职责单一。前端只管页面渲染和交互，后端只管接口和数据，两边通过 JSON 交换数据。项目答辩时老师问你“系统架构是什么”，你可以直接画一张浏览器 → Nginx → SpringBoot → MySQL 的调用链路图，非常加分。

1.3 为什么这个架构适合毕设项目

选这套技术栈还有一个很现实的理由：工作量可控，但论文有得写。

太简单的选题（比如纯静态网页）论文凑不够字数；太复杂的选题（比如微服务+分布式）自己又hold不住。SpringBoot+Vue 恰到好处——单模块后端、单页面前端、单数据库，规模适中，但涵盖了 RESTful API、ORM、JWT 鉴权、文件上传、分页查询、富文本展示等一系列高频技术点，每一个点都能在论文里单独开一小节来讲。

更重要的是，这套技术栈在就业市场上认可度很高。Java 服务端开发岗位的 JD 里，SpringBoot 基本是标配；Vue 在中小企业的管理系统中应用极广。做完这个项目，你简历上可以写的技术关键词一下子就丰富起来了。

2. 系统功能模块设计与数据库建模

2.1 需求分析：三类角色三种权限

先想清楚系统为谁服务。这个非遗网站包含三类使用者，需求各不相同：

游客（未登录用户）：访问首页、浏览非遗项目列表、查看非遗详情、搜索信息、查看资讯。这类用户的需求是“看得爽”，页面要美观、信息要清晰。

注册用户：游客能力 + 登录注册、收藏感兴趣的非遗项目、在详情页留言评论、在个人中心管理自己的收藏和评论。

管理员：用户管理（禁用/启用、重置密码）、非遗项目管理（增删改查、上下架）、传承人管理、资讯发布、留言审核、数据统计（按地区/类别统计项目数量）。

毕设答辩时老师最爱问“你的系统有哪些角色？”——能清楚说出三类角色的权限差异，说明你真的做了需求分析，而不是拿模板硬套。

2.2 核心功能模块拆解

我对照源码整理出的功能清单如下：

• 非遗项目展示模块：按“民间文学、传统音乐、传统舞蹈、传统戏剧、传统美术、传统技艺、民俗”等类别分类展示；支持按名称、地区、级别（国家级/省级/市级）筛选；详情页展示非物质文化遗产的基础信息、历史渊源、传承保护情况，可配图片和视频。
• 传承人模块：展示各级非遗代表性传承人档案，包括姓名、照片、级别、所属项目、从艺经历、代表作品。
• 资讯动态模块：发布非遗相关的新闻、公告、活动通知；前台以时间倒序展示，支持置顶和分页。
• 用户中心模块：注册、登录；个人资料修改；收藏列表；我的留言。
• 后台管理模块：管理员登录；非遗项目/传承人/资讯的 CRUD；用户管理；留言审核；数据概览仪表板。

2.3 关键数据库表设计

数据库是整个项目的核心资产。这套项目的表设计比较规范，核心表有 6 张左右，我挑最关键的几张说一下：

非遗项目表（non_heritage）

传承人表（inheritor）

用户表、资讯表、留言表也都是常规设计，不再逐一展开。重点看两个设计经验：

第一，内容字段用 TEXT 而不是 VARCHAR。非遗项目的“历史渊源”“传承方式”这类字段往往很长，VARCHAR 最多 65535 字节，存长文本会截断，TEXT 类型更稳妥。

第二，图片和视频字段存路径而不是二进制数据。很多新手会把图片转成 Base64 存进数据库，这是个巨大的坑——不仅数据库体积膨胀快，查询速度变慢，前端显示还要经历“取出来→解码→拼接”的过程。正确做法是：文件本身存放在服务器的上传目录或云存储里，数据库只存一条相对路径，前端拼接域名后直接访问。

2.4 数据字段设计背后的理由

再补一个容易被忽视的细节：为什么要给 video_url 单独留字段？

非遗项目里大量涉及视频资料，比如传统戏剧的表演片段、传统技艺的制作流程。视频文件通常较大，直接放到数据库或服务器静态目录都不合适，生产环境一般会用对象存储（OSS）或流媒体服务器。数据库里预留一个 video_url 字段，将来接入 m3u8 流媒体播放时，只要把地址换成流媒体链接即可，代码结构不需要大改。这也是“面向未来设计”的体现，论文里写一句“本系统针对视频资料预留了扩展接口”就很有深度。

3. 核心功能实现与前后端交互

3.1 后端：统一响应体与 Controller 设计模式

前后端分离项目里，接口返回格式必须统一。这个项目的后端定义了一个通用响应类，所有接口都返回固定的 JSON 结构，前端拿到数据后做统一处理。

核心思路是这样的：

public class Result<T> { private Integer code; // 200 成功，500 失败 private String message; // 提示信息 private T data; // 业务数据 public static <T> Result<T> success(T data) { Result<T> result = new Result<>(); result.code = 200; result.message = "操作成功"; result.data = data; return result; } }

Controller 层的写法也很规整。以非遗项目列表接口为例：

@RestController @RequestMapping("/api/heritage") public class HeritageController { @Autowired private HeritageService heritageService; @GetMapping("/list") public Result<PageResult<Heritage>> list(@RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "10") Integer size, String keyword) { PageResult<Heritage> result = heritageService.pageQuery(page, size, keyword); return Result.success(result); } }

注意接口路径统一加/api前缀，这是前后端分离项目的通行做法，方便在 Nginx 层做接口反向代理和统一拦截。如果答辩老师问“接口规范是什么”，你回答“Restful 风格 + 统一响应体 + 统一错误码”就非常专业。

3.2 前端：Vue 路由与页面组件

前端通过 Vue Router 管理页面跳转。路由配置是典型的“前台+后台”双布局：

const routes = [ { path: '/', component: HomeLayout, children: [ { path: '', component: () => import('@/views/home/Index.vue') }, { path: 'heritage/:id', component: () => import('@/views/home/HeritageDetail.vue') }, { path: 'news', component: () => import('@/views/home/NewsList.vue') } ] }, { path: '/admin', component: AdminLayout, redirect: '/admin/dashboard', children: [ { path: 'heritage', component: () => import('@/views/admin/HeritageManage.vue') }, { path: 'user', component: () => import('@/views/admin/UserManage.vue') } ] } ]

组件用到import()动态导入，这是路由懒加载，按需加载页面代码，优化首屏加载速度。这个细节在项目答辩时提出来会非常加分，说明你考虑了性能优化，而不只是“能跑就行”。

Axios 请求封装也值得一提。实际项目中不会在每个页面都直接调axios.get()，而是统一封装成一个 request 实例：

// api/request.js import axios from 'axios' import { Message } from 'element-ui' const request = axios.create({ baseURL: '/api', // 开发环境走 vue.config.js 代理 timeout: 10000 }) request.interceptors.response.use( response => { const res = response.data if (res.code !== 200) { Message.error(res.message) return Promise.reject(new Error(res.message)) } return res }, error => { Message.error('网络请求异常，请稍后重试') return Promise.reject(error) } )

拦截器统一处理错误码，前端代码里就不需要重复判断code === 200，省掉大量冗余逻辑。页面里调用就非常清爽：

import { getHeritageList } from '@/api/heritage' const res = await getHeritageList({ page: 1, size: 10 }) this.list = res.data.records

3.3 图片上传与静态资源映射

非遗项目的图片资料非常多，图片上传是后台管理系统的核心功能之一。

实现思路：前端用 Element UI 的上传组件，把文件 POST 到后端的/api/upload接口；后端接收文件后存到服务器指定目录（如/uploads/），文件名用 UUID 重命名防止冲突，并给文件附带时间戳路径防止文件堆积在一个文件夹：

@PostMapping("/upload") public Result<String> upload(@RequestParam("file") MultipartFile file) { String originalFilename = file.getOriginalFilename(); String suffix = originalFilename.substring(originalFilename.lastIndexOf(".")); String newFileName = UUID.randomUUID() + suffix; // 存储路径： /uploads/2025/06/01/xxx.jpg String datePath = new SimpleDateFormat("yyyy/MM/dd").format(new Date()); String filePath = uploadDir + "/" + datePath + "/" + newFileName; file.transferTo(new File(filePath)); return Result.success("/uploads/" + datePath + "/" + newFileName); }

这里最大的坑是前端访问不到上传后的图片。原因是前端通过http://localhost:8080/api/...访问后端，但图片地址返回的是/uploads/xxx.jpg，默认情况下 SpringBoot 不会把本地磁盘的/uploads目录暴露成静态资源。解决办法是加一个 WebMvc 配置类：

@Configuration public class WebConfig implements WebMvcConfigurer { @Value("${file.upload-dir}") private String uploadDir; @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/uploads/**") .addResourceHandler("file:" + uploadDir + "/"); } }

这样前端就能直接通过 URL 访问到服务器上的图片文件了。答辩时可以补充一句“生产环境建议把上传文件迁移到 OSS 或独立文件服务器”，展示你对系统可扩展性的思考。

3.4 搜索与分页实现

非遗网站的搜索功能是高频功能。后端用 MyBatis-Plus 的分页插件，配合 LambdaQueryWrapper 做条件拼装：

public PageResult<Heritage> pageQuery(Integer page, Integer size, String keyword) { Page<Heritage> p = new Page<>(page, size); LambdaQueryWrapper<Heritage> wrapper = new LambdaQueryWrapper<>(); if (StringUtils.hasText(keyword)) { wrapper.like(Heritage::getName, keyword) .or() .like(Heritage::getRegion, keyword); } wrapper.orderByDesc(Heritage::getCreateTime); heritageMapper.selectPage(p, wrapper); return new PageResult<>(p.getRecords(), p.getTotal()); }

like拼接时要注意关键字为空的场景，否则会拼出WHERE name LIKE '%%'这种查询，虽然结果一样但性能损耗毫无必要。框架层面的分页插件（MyBatis-Plus 或 PageHelper）会帮你在 SQL 后面自动拼接LIMIT语句，不需要你手写分页逻辑。

但这里也藏着一个面试题级别的考点：大偏移量分页性能问题。当页码很大时，LIMIT 10000, 10会先扫描前 10010 条再丢弃前 10000 条，非常浪费。优化方案是记录上一页最后一条的 ID，用WHERE id > ? LIMIT 10的方式查询。毕设阶段用默认分页没问题，但如果你能在论文里写一段“分页性能优化方案”，老师会觉得你的代码功底比同龄人高一个档次。

3.5 视频播放：m3u8 格式的支持

非遗网站多少会涉及视频展示，比如传统戏曲表演、手工技艺流程。标题热词里频繁出现“vue 播放 m3u8”，说明这是很多同学实际遇到的问题。

m3u8 是 HTTP Live Streaming（HLS）协议下的视频索引文件，内容是一系列 TS 分片文件的地址列表。它支持直播、支持拖动进度条，且天然支持多码率自适应，因此被大量视频平台采用。

Web 端播放 m3u8 最常用的方案是video.js + videojs-contrib-hls，或者更轻量的hls.js。以 hls.js 为例：

import Hls from 'hls.js' const video = document.getElementById('videoPlayer') if (Hls.isSupported()) { const hls = new Hls() hls.loadSource('http://localhost:8080/uploads/video/playlist.m3u8') hls.attachMedia(video) } else if (video.canPlayType('application/vnd.apple.mpegurl')) { // Safari 原生支持 HLS，直接设置 src 即可 video.src = 'http://localhost:8080/uploads/video/playlist.m3u8' }

后端这边，只要把 m3u8 文件和 TS 分片文件都放在静态资源目录下（可以沿用 3.3 的 ResourceHandler 配置），前端就能直接拉取。注意 TS 分片文件通常数量很多，建议在资源路径配置里单独映射一个子目录，避免和图片混在一起。

4. 环境搭建与运行部署全过程

4.1 本地环境准备清单

毕设项目迁移到新机器上跑不起来，多半是环境问题。先把环境清单列全：

JDK 版本是最大的坑。SpringBoot 2.x 和 3.x 的 API 有差异，如果源码基于 SpringBoot 2.7 开发但本机装了 JDK 17，有时会遇到启动报错或不兼容的情况。稳妥的做法是按照项目 pom.xml 里声明的 SpringBoot 版本选择对应 JDK。

4.2 数据库初始化

启动后端前必须先导入数据库脚本。用命令行或 Navicat 都可以：

mysql -u root -p source D:/sql/gansu_feiwenhua.sql;

如果 SQL 脚本里建了数据库，则直接use gansu_feiwenhua;验证表是否建成功：

SHOW TABLES;

导入时最容易遇到的问题是字符集乱码。执行 SQL 前先设置编码：

SET NAMES utf8mb4;

再看一下数据库本身的默认字符集：

SHOW CREATE DATABASE gansu_feiwenhua;

如果看到CHARACTER SET utf8，而表结构里又有 utf8mb4 的内容，就可能在“中文”和“生僻字”上出问题。建议统一使用 utf8mb4，这是 MySQL 8.0 的默认字符集，兼容性最好。

4.3 后端启动三步走

后端启动的常规流程：

1. 在 IDEA 中打开backend目录，等待 Maven 导入依赖。第一次导入可能需要几分钟，如果网络慢可以配置阿里云镜像加速。
2. 修改application.yml中的数据库连接配置：

spring: datasource: url: jdbc:mysql://localhost:3306/gansu_feiwenhua?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false&allowPublicKeyRetrieval=true username: root password: your_password servlet: multipart: max-file-size: 100MB max-request-size: 100MB

3. 直接运行主启动类Application.java，看到日志输出 Tomcat started on port 8080 就说明启动成功。

这里serverTimezone=Asia/Shanghai非常重要。MySQL 8.x 默认时区是 UTC，中国地区查询时间会比本地时间慢 8 小时。不加这个参数，时间字段会整体错乱，很多同学查了半天查不出来。

4.4 前端启动两步走

前端启动相对简单：

cd frontend npm install # 安装依赖，速度慢可配置淘宝镜像 npm run serve # 启动开发服务器

开发环境下前端默认跑在http://localhost:8081，通过vue.config.js里的代理把/api请求转发到后端 8080 端口：

module.exports = { devServer: { port: 8081, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } }

配好代理后，前端代码里所有/api开头的请求都不需要写完整的后端地址，既解决了跨域问题，又让代码在开发环境和生产环境之间无缝切换。

4.5 打包部署上线

毕设答辩前最好能把系统打包成可执行文件，用浏览器直接演示，而不是依赖 IDEA 运行。

后端打包：

cd backend mvn clean package -DskipTests

生成target/xxx.jar后直接运行：

java -jar target/xxx.jar

前端打包生产环境：

cd frontend npm run build

生成dist目录，里面是纯静态文件（HTML/CSS/JS）。最省事的部署方式是直接把dist目录扔进 SpringBoot 的src/main/resources/static/下重新打包，后端启动后访问http://localhost:8080就能直接看到前端页面，不用额外配置 Nginx。这样适合毕设演示；如果追求更专业的部署方式，则用 Nginx 托管前端，反向代理后端接口：

server { listen 80; server_name localhost; location / { root /usr/share/nginx/html/dist; index index.html; try_files $uri $uri/ /index.html; # 解决前端路由刷新404 } location /api/ { proxy_pass http://localhost:8080/api/; } }

注意try_files那行，缺了它 Vue Router 的 history 模式在刷新页面时会报 404。

5. 毕设论文写作与答辩要点

5.1 论文章节结构参考

源码包里附带了说明文档和论文，我按通常的毕设论文结构给你捋一遍，这对你写自己的论文也有直接参考价值：

1. 绪论：选题背景与意义、国内外研究现状、研究内容与方法
2. 相关技术介绍：SpringBoot、Vue、MyBatis-Plus、MySQL 等
3. 系统分析：可行性分析（技术/经济/操作）、需求分析（功能/非功能）、用例图
4. 系统设计：总体架构设计、功能模块设计、数据库设计（ER图 + 表结构）
5. 系统实现：核心模块的界面展示与代码说明
6. 系统测试：测试环境、测试用例、功能测试结果、性能测试结果
7. 总结与展望

论文写作时最忌讳“大段贴代码”。系统实现部分应该以截图 + 关键代码片段 + 文字说明的方式展开，老师想看到的是你对业务逻辑的理解，而不是整页的代码抄写。

5.2 图表与演示技巧

毕设论文里最重要的是图。我建议你重点关注这几张图：

• 系统用例图：画清楚三类角色（游客、用户、管理员）各自的用例，这是需求分析的核心成果。
• 系统架构图：展示“浏览器 → 前端Vue → 后端SpringBoot → MySQL”的分层结构。
• 数据库ER图：展示各表之间的关联关系，特别是非遗项目与传承人的一对多关系。
• 系统功能结构图：树状图展示前台/后台的功能模块划分。

图纸可以用 Visio、ProcessOn、draw.io 等工具画，颜色统一、字迹清晰即可，不需要追求过度华丽。答辩 PPT 里的系统演示环节，强烈建议提前把演示数据准备充分：非遗项目的图片要清晰、视频要能正常播放、数据量要有几十条——一个空空荡荡的后台管理系统，说服力会大打折扣。

5.3 答辩高频问题与回答思路

根据我的经验，毕设答辩老师最常问的问题和回答思路如下：

• “为什么选择 SpringBoot 而不是 SSM？”—— 答：SpringBoot 是 Spring 生态的延伸，简化了配置，内嵌 Tomcat，更便于快速开发和部署；它底层仍然是 Spring MVC + MyBatis 那套体系。
• “分页是怎么实现的？”—— 答：基于 MyBatis-Plus 的分页插件，通过拦截器在 SQL 上自动拼接 LIMIT，同时利用 Page 对象封装总记录数。
• “图片上传后存在哪里？数据库存什么？”—— 答：文件存在本地磁盘的上传目录，数据库存的是相对路径，前端拼 URL 访问。
• “跨域问题怎么解决？”—— 答：开发环境通过 vue.config.js 的 devServer.proxy 代理转发；生产环境用 Nginx 反向代理统一入口。
• “两个表之间的关联关系是什么？”—— 答：非遗项目和传承人是一对多关系，一张传承人表通过 project_id 外键关联非遗项目表，并在实体类里用@ManyToOne或关联查询实现。
• “这个系统还有什么可以改进的地方？”—— 答：可以引入 Redis 做热门非遗项目缓存、用 ElasticSearch 做全文搜索、增加小程序端等，回答“改进点”不算扣分，反而能体现思考深度。

6. 常见问题与避坑实录

6.1 前端跨域与代理失效

现象：前端请求/api/...返回 404 或 CORS 错误。

原因：最常出现的是vue.config.js更改后没有重启npm run serve。另一个原因是前端请求地址写死了http://localhost:8080，导致绕过了代理、直接触发跨域。

解决：改完vue.config.js务必重启前端服务。同时保持代码里一律使用相对路径/api/...，不要写死 IP 和端口。

6.2 MySQL 连接报错

现象：后端启动报Public Key Retrieval is not allowed或CLIENT_PLUGIN_AUTH is required。

原因：MySQL 8.0 默认认证插件是caching_sha2_password，旧版 MySQL 驱动不支持。

解决：在 JDBC URL 后面加allowPublicKeyRetrieval=true&useSSL=false；或者使用 mysql-connector-java 8.0+ 版本驱动。

6.3 Maven 依赖冲突 / 版本号对不上

现象：项目下载依赖时报红，或者在 Tomcat 端口启动时出现ClassNotFoundException。

解决：先确认 pom.xml 中的 SpringBoot parent 版本是否稳定，建议 2.5.x ~ 2.7.x 之间。如果依赖一直拉不下来，配置阿里云 Maven 镜像：

<mirror> <id>aliyunmaven</id> <mirrorOf>*</mirrorOf> <name>阿里云公共仓库</name> <url>https://maven.aliyun.com/repository/public</url> </mirror>

6.4 前端 history 模式刷新 404

现象：本地开发一切正常，打包部署到 Nginx 后，刷新首页没问题，刷新/heritage/3这种子页面报 404。

原因：Nginx 默认找不到对应的静态文件路径，需要把请求 fallback 到 index.html。

解决：在 Nginx location 里加try_files $uri $uri/ /index.html，这个我在 4.5 节里已经写过。

6.5 数据库中文乱码

现象：前台页面显示中文是问号???。

原因：数据库连接 URL 没加编码参数，或者数据库/表/客户端连接三级字符集不统一。

解决：确认 application.yml 的 JDBC URL 带characterEncoding=utf8；确认数据库和表都是 utf8mb4；MySQL 命令行导入 SQL 前执行SET NAMES utf8mb4。

6.6 图片上传成功但前端访问不到

现象：后台能上传图片，但前台页面图片裂开。

解决：优先检查是否配置了 3.3 节的addResourceHandlers静态资源映射。部署环境里还要注意服务器上的file.upload-dir路径是否真实存在且具备写权限。

6.7 一个关于 Java 启动内存的补充

热词里出现过java: outofmemoryerror: insufficient memory，这类问题在毕设项目里不多见，但如果你本机同时开着 IDEA、MySQL、前端开发服务器，后端启动时有概率触发。解决办法很简单：IDEA 里调大 JVM 堆内存，-Xms256m -Xmx1024m就足够应付毕设项目了。真遇到频繁 GC 甚至卡死，优先排查是不是代码里出现了死循环和超大查询，而不是盲目调内存。

7. 最后分享一点我自己的体会

这个项目里最让我满意的一点，是它对“非遗传承人”和“非遗项目”之间关联关系的处理方式。很多同学做类似主题时，会把传承人简单设计成独立模块，两张表之间毫无关联，管理员要录一个传承人还得手动输入所属项目名称，数据一旦不一致就崩了。而这个项目用project_id外键把两边串起来，后台录入传承人时通过下拉框选择项目，前台详情页则直接展示关联的传承人卡片，整个数据链路是通畅的。如果你打算在这个基础上做二次开发，我最建议的方向是增加“非遗地图”模块，按甘肃的市县维度把项目分布标在地图上，配合 ECharts 做出来效果会很出彩，答辩时绝对能让人眼前一亮。

本文还有配套的精品资源，点击获取