1. 项目背景与技术选型
甘肃非物质文化网站系统是一个典型的Java Web全栈项目，采用前后端分离架构实现。这个系统的主要目标是展示和保护甘肃地区的非物质文化遗产，通过数字化手段让更多人了解和传承这些珍贵的文化资源。
技术栈选择上，后端采用SpringBoot2框架，这是目前Java领域最主流的轻量级开发框架。SpringBoot2相比旧版本在性能上有显著提升，特别是对响应式编程的支持更加完善。前端选用Vue3组合式API开发，利用其更好的TypeScript支持和更高效的渲染性能。持久层采用MyBatis-Plus，它在MyBatis基础上提供了更多开箱即用的功能，比如通用的CRUD操作、分页插件等。数据库使用MySQL8.0，充分利用其JSON支持、窗口函数等新特性。
提示：这套技术组合是目前企业级应用开发的热门选择，特别适合需要快速迭代的中大型项目。SpringBoot2+Vue3的组合既能保证开发效率，又能满足性能要求。
2. 系统架构设计
2.1 整体架构
系统采用经典的三层架构：
- 表现层：Vue3前端负责用户交互和界面展示
- 业务逻辑层：SpringBoot处理后端业务逻辑
- 数据访问层：MyBatis-Plus操作MySQL数据库
前后端通过RESTful API进行通信，接口设计遵循JSON格式规范。考虑到非物质文化遗产数据的特点，系统特别设计了多媒体资源管理模块，支持图片、视频等富媒体内容的存储和展示。
2.2 核心模块划分
- 用户管理模块：实现用户注册、登录、权限控制
- 文化展示模块：分类展示各类非物质文化遗产
- 内容管理模块：后台管理内容发布和编辑
- 搜索模块：支持关键词搜索和高级筛选
- 互动模块：用户评论和收藏功能
3. 关键技术实现
3.1 后端实现要点
SpringBoot2的配置采用了约定优于配置的原则，大幅减少了XML配置。通过Spring Security实现了基于角色的访问控制(RBAC)，保护敏感接口。MyBatis-Plus的通用Mapper大大简化了数据库操作代码，例如：
java复制public interface CulturalHeritageMapper extends BaseMapper<CulturalHeritage> {
@Select("SELECT * FROM cultural_heritage WHERE category = #{category}")
List<CulturalHeritage> selectByCategory(@Param("category") String category);
}
分页查询通过MyBatis-Plus的分页插件实现：
java复制Page<CulturalHeritage> page = new Page<>(current, size);
culturalHeritageMapper.selectPage(page, null);
return page.getRecords();
3.2 前端实现要点
Vue3使用Composition API组织代码，提高了代码的可复用性。例如文化展示组件：
javascript复制import { ref, onMounted } from 'vue'
import { getHeritageList } from '@/api/heritage'
export default {
setup() {
const heritageList = ref([])
const loading = ref(true)
onMounted(async () => {
try {
const res = await getHeritageList()
heritageList.value = res.data
} finally {
loading.value = false
}
})
return { heritageList, loading }
}
}
路由配置使用Vue Router 4.x版本：
javascript复制const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/detail/:id',
name: 'Detail',
component: Detail,
props: true
}
]
4. 数据库设计
MySQL8.0的表设计考虑了非物质文化遗产的特点：
sql复制CREATE TABLE cultural_heritage (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
category VARCHAR(50) NOT NULL,
region VARCHAR(50) NOT NULL,
description TEXT,
cover_image VARCHAR(255),
video_url VARCHAR(255),
status TINYINT DEFAULT 1,
create_time DATETIME DEFAULT CURRENT_TIMESTAMP,
update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
考虑到搜索需求，为名称和描述字段添加了全文索引：
sql复制ALTER TABLE cultural_heritage ADD FULLTEXT INDEX ft_idx_name_desc (name, description);
5. 项目部署与优化
5.1 部署方案
系统支持多种部署方式：
- 传统部署：前端Nginx + 后端Tomcat
- Docker容器化部署
- Kubernetes集群部署（适合大规模应用）
以Docker部署为例，后端Dockerfile配置：
dockerfile复制FROM openjdk:11-jdk
ARG JAR_FILE=target/*.jar
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java","-jar","/app.jar"]
前端Dockerfile配置：
dockerfile复制FROM nginx:alpine
COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
5.2 性能优化
-
前端优化：
- 使用Vite作为构建工具，大幅提升开发环境启动速度
- 按需加载路由组件
- 图片懒加载和WebP格式转换
-
后端优化：
- 启用SpringBoot的Gzip压缩
- 使用Redis缓存热点数据
- 数据库连接池配置调优
6. 常见问题与解决方案
6.1 跨域问题
开发环境下可以在SpringBoot中添加配置类：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowCredentials(true)
.maxAge(3600);
}
}
生产环境建议通过Nginx反向代理解决跨域问题。
6.2 MyBatis-Plus逻辑删除
在实体类中添加注解：
java复制@TableLogic
private Integer deleted;
在application.yml中配置：
yaml复制mybatis-plus:
global-config:
db-config:
logic-delete-value: 1
logic-not-delete-value: 0
6.3 Vue3组件通信
父子组件通信：
- 父传子：props
- 子传父：emits
- 兄弟组件：事件总线或Vuex/Pinia
使用Pinia状态管理示例：
javascript复制// stores/heritage.js
import { defineStore } from 'pinia'
export const useHeritageStore = defineStore('heritage', {
state: () => ({
favorites: []
}),
actions: {
addFavorite(item) {
this.favorites.push(item)
}
}
})
7. 项目扩展方向
- 移动端适配：开发响应式布局或单独开发小程序版本
- 增强搜索：接入Elasticsearch实现全文检索
- 数据分析：使用Python构建数据分析模块，展示文化遗产的分布和趋势
- 3D展示：对部分手工艺品实现3D模型展示
- 用户生成内容：允许用户上传自己记录的非遗相关内容
注意：在实际开发中，建议先完成核心功能，再根据需求逐步扩展。过早引入复杂功能会增加项目风险和开发成本。