1. 项目背景与核心价值
甘肃作为丝绸之路的重要节点，拥有丰富的非物质文化遗产资源。这个基于SpringBoot+Vue的全栈项目，正是为了解决传统文化数字化保护与传播的痛点而生。我在实际开发中发现，很多高校学生在做类似毕设时，往往面临技术栈整合困难、业务逻辑不清晰等问题。这个项目完整实现了前后端分离架构下的非遗文化展示平台，包含用户管理、非遗项目展示、传承人介绍、在线预约等核心功能模块。
从技术角度看，项目采用Java 8 + SpringBoot 2.7作为后端基础，配合MyBatis-Plus实现ORM操作，前端使用Vue 2.x + ElementUI构建管理后台。这种技术组合既保证了开发效率，又能满足毕业设计的技术深度要求。特别值得一提的是，项目中完整保留了从需求分析到接口设计的全过程文档，这对初学者理解企业级开发流程非常有帮助。
2. 技术架构解析
2.1 后端技术栈设计
SpringBoot框架的选择主要基于三个考量：一是其自动配置特性可以快速搭建项目骨架；二是内嵌Tomcat简化部署流程；三是丰富的Starter依赖能快速集成各种组件。项目中特别值得关注的几个技术实现点：
- 多级缓存设计：使用Redis+Caffeine实现热点数据缓存
java复制@Cacheable(value = "heritage", key = "#id")
public HeritageDetailVO getHeritageDetail(Long id) {
// 数据库查询逻辑
}
- 智能分页处理：通过MyBatis-Plus的Page对象实现
java复制Page<Heritage> page = new Page<>(current, size);
return heritageMapper.selectPage(page, wrapper);
- 文件上传服务：采用阿里云OSS存储非遗图片资源
java复制OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
ossClient.putObject(bucketName, objectName, inputStream);
2.2 前端工程化实践
前端项目采用标准的Vue CLI脚手架初始化，通过axios实现前后端通信。几个关键配置要点：
- 跨域解决方案：开发环境配置proxyTable
javascript复制devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
- 权限控制方案：基于vue-router的导航守卫
javascript复制router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !store.getters.isLogin) {
next('/login')
} else {
next()
}
})
- 组件化开发：将非遗卡片、传承人信息等封装为可复用组件
vue复制<template>
<heritage-card
v-for="item in list"
:key="item.id"
:title="item.name"
:cover="item.coverUrl"
@click="handleDetail(item.id)"
/>
</template>
3. 数据库设计与优化
3.1 核心表结构
项目包含12张主要数据表，这里展示最关键的几个表设计：
- 非遗项目表(heritage)
sql复制CREATE TABLE `heritage` (
`id` bigint NOT NULL AUTO_INCREMENT,
`name` varchar(100) NOT NULL COMMENT '项目名称',
`category_id` int NOT NULL COMMENT '分类ID',
`cover_url` varchar(255) DEFAULT NULL COMMENT '封面图URL',
`video_url` varchar(255) DEFAULT NULL COMMENT '视频URL',
`content` text COMMENT '详细介绍',
`status` tinyint DEFAULT '1' COMMENT '状态',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_category` (`category_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
- 传承人表(inheritor)
sql复制CREATE TABLE `inheritor` (
`id` bigint NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
`gender` tinyint DEFAULT NULL,
`birth_year` int DEFAULT NULL,
`heritage_id` bigint DEFAULT NULL,
`title` varchar(100) DEFAULT NULL COMMENT '传承人称号',
`avatar_url` varchar(255) DEFAULT NULL,
`introduction` text,
PRIMARY KEY (`id`),
KEY `idx_heritage` (`heritage_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3.2 性能优化实践
- 索引策略：针对高频查询字段建立组合索引
sql复制ALTER TABLE `heritage_comment`
ADD INDEX `idx_user_heritage` (`user_id`, `heritage_id`);
- 查询优化：使用JOIN替代子查询
sql复制SELECT h.*, c.name as category_name
FROM heritage h
LEFT JOIN category c ON h.category_id = c.id
WHERE h.status = 1
ORDER BY h.create_time DESC
LIMIT 10;
- 数据归档：对历史访问日志进行按月分表
java复制@TableName("visit_log_#{#month}")
public class VisitLog {
// 实体字段
}
4. 典型业务场景实现
4.1 非遗项目详情页
这个功能模块完整展示了前后端协作的典型流程：
- 后端接口设计（RESTful风格）
code复制GET /api/heritage/{id} - 获取详情
GET /api/heritage/{id}/comments - 获取评论
POST /api/heritage/{id}/comment - 发表评论
- 前端页面数据获取
javascript复制async fetchHeritageDetail() {
const [detailRes, commentRes] = await Promise.all([
axios.get(`/api/heritage/${this.id}`),
axios.get(`/api/heritage/${this.id}/comments`)
]);
this.detail = detailRes.data;
this.comments = commentRes.data.list;
}
- 防XSS攻击处理
java复制@PostMapping("/comment")
public Result addComment(@Valid @RequestBody CommentDTO dto) {
String content = HtmlUtils.htmlEscape(dto.getContent());
// 后续处理逻辑
}
4.2 预约传承人功能
这个模块涉及到事务处理和状态管理：
- 预约服务层实现
java复制@Transactional
public boolean makeReservation(ReservationDTO dto) {
// 检查传承人时间冲突
if (reservationMapper.checkConflict(dto.getInheritorId(),
dto.getStartTime(), dto.getEndTime()) > 0) {
throw new BusinessException("该时间段已被预约");
}
// 创建预约记录
Reservation reservation = new Reservation();
BeanUtils.copyProperties(dto, reservation);
reservation.setStatus(0); // 待确认状态
return reservationMapper.insert(reservation) > 0;
}
- 前端表单验证
vue复制<el-form :rules="rules">
<el-form-item label="预约日期" prop="date">
<el-date-picker
v-model="form.date"
:disabled-date="disabledDate"
/>
</el-form-item>
</el-form>
methods: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
}
5. 项目部署与运维
5.1 生产环境配置
- SpringBoot多环境配置
yaml复制# application-prod.yml
server:
port: 8080
servlet:
context-path: /api
spring:
datasource:
url: jdbc:mysql://prod-db:3306/heritage?useSSL=false
username: prod_user
password: ${DB_PASSWORD}
redis:
host: redis-service
port: 6379
- Vue生产环境构建
bash复制# 修改API基础地址
VUE_APP_API_BASE_URL=/api npm run build
# Nginx配置示例
location /api {
proxy_pass http://backend;
proxy_set_header Host $host;
}
5.2 监控与日志
- SpringBoot Actuator健康检查
java复制@Configuration
public class ActuatorConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
.antMatchers("/actuator/health").permitAll()
.antMatchers("/actuator/**").hasRole("ADMIN");
}
}
- 日志收集方案
xml复制<!-- logback-spring.xml -->
<appender name="FILE" class="ch.qos.logback.core.rolling.RollingFileAppender">
<file>logs/app.log</file>
<rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
<fileNamePattern>logs/app.%d{yyyy-MM-dd}.log</fileNamePattern>
<maxHistory>30</maxHistory>
</rollingPolicy>
</appender>
6. 毕设开发经验分享
在指导多个学生完成类似项目后，我总结出几个关键建议：
-
需求分析阶段一定要制作详细的原型图，可以使用Axure或墨刀工具。我曾见过有学生因为前期需求不明确，导致后期大量返工。
-
技术选型要量力而行，不要盲目追求新技术。这个项目之所以选择Vue 2而非Vue 3，就是考虑到学校教学进度和社区支持度。
-
接口文档要随开发同步更新。项目中使用了Swagger UI自动生成文档：
java复制@ApiOperation("获取非遗分类列表")
@GetMapping("/categories")
public Result<List<CategoryVO>> getCategories() {
// 实现逻辑
}
-
测试环节容易被忽视，建议至少包含：
- Postman接口测试
- Jest前端单元测试
- Selenium端到端测试
-
代码规范要统一，推荐使用Alibaba Java Coding Guidelines插件进行代码检查，前端可以使用ESLint+Prettier组合。
这个项目特别适合作为计算机相关专业的毕业设计，它既包含了常规的CRUD操作，又涉及文件上传、缓存优化、事务处理等进阶知识点。我在项目源码中保留了完整的开发注释，每个重要方法都添加了JavaDoc说明，这对理解业务逻辑非常有帮助。