1. 项目背景与核心价值民族地区特色美食作为非物质文化遗产的重要组成部分其制作工艺的数字化保护具有重要的文化传承意义。青海作为多民族聚居区拥有众多独具特色的传统美食如牦牛肉干、青稞酒、酸奶等这些美食的制作工艺往往依靠口耳相传面临着失传的风险。这个毕业设计项目选择青海特色美食制作工艺数字化保护作为研究方向通过SSMSpringSpringMVCMyBatis后端框架和Vue.js前端框架构建数字化保护平台实现了对青海特色美食制作工艺的系统性采集、整理、存储和展示。这种技术方案的选择既考虑了高校毕业设计的可实现性又确保了平台的实用性和扩展性。提示在传统文化数字化保护项目中技术选型需要特别考虑非技术人员的易用性这是很多类似项目容易忽视的关键点。2. 技术架构设计解析2.1 整体技术栈选型项目采用前后端分离架构这是当前Web开发的主流模式具有开发效率高、维护方便等优势后端技术栈Spring Framework提供IoC和AOP支持简化企业级应用开发Spring MVC实现MVC设计模式处理Web请求和响应MyBatis轻量级ORM框架简化数据库操作MySQL关系型数据库存储结构化数据前端技术栈Vue.js渐进式JavaScript框架构建用户界面Element UI基于Vue的组件库快速搭建美观界面Axios处理HTTP请求与后端API交互这种技术组合在高校毕业设计中非常常见主要考虑因素包括技术成熟度高社区资源丰富遇到问题容易找到解决方案学习曲线相对平缓适合学生在有限时间内掌握能够满足项目基本功能需求同时具备一定扩展性2.2 系统架构设计系统采用典型的三层架构确保各层职责清晰表现层Vue.js构建的用户界面负责数据展示和用户交互业务逻辑层Spring MVC控制器处理业务逻辑和请求转发数据访问层MyBatis实现的数据持久化操作这种分层设计使得系统具有较好的可维护性和扩展性当需要新增功能或修改现有功能时可以最小化影响范围。3. 核心功能模块实现3.1 美食工艺采集模块这是平台的核心功能模块实现了对青海特色美食制作工艺的系统性采集信息采集表单设计基础信息美食名称、所属民族、地区分布等原料信息主料、辅料、特殊工具等工艺步骤详细记录每一步操作支持图文描述传承人信息记录工艺传承人的基本情况和联系方式// 示例工艺信息实体类设计 public class CraftInfo { private Integer id; private String foodName; // 美食名称 private String ethnicGroup; // 所属民族 private String region; // 地区分布 private String mainMaterials; // 主料 private String subMaterials; // 辅料 private String tools; // 特殊工具 private String steps; // 工艺步骤(JSON格式) private String images; // 图片URL(JSON数组) private Integer inheritorId; // 传承人ID // 省略getter/setter方法 }多媒体支持图片上传记录关键工艺步骤的视觉呈现视频嵌入支持上传工艺演示视频音频记录采集工艺相关的口头说明或传统歌谣注意多媒体文件存储建议使用专门的文件服务器或云存储服务避免直接存储在应用服务器上导致性能问题。3.2 工艺展示与检索模块该模块实现了对采集到的美食工艺信息的有效组织和展示分类展示按民族分类藏族、回族、土族等按地区分类西宁、海东、海北等按食材分类牦牛肉类、青稞类、奶制品类等高级检索功能关键词搜索支持对美食名称、工艺描述等字段的全文检索组合查询可以组合多个条件进行精确查询标签筛选通过预设标签快速定位特定类型美食!-- 示例前端检索组件实现 -- template div classsearch-container el-input v-modelsearchParams.keyword placeholder请输入关键词/el-input el-select v-modelsearchParams.ethnicGroup placeholder选择民族 el-option v-foritem in ethnicOptions :keyitem.value :labelitem.label :valueitem.value/el-option /el-select el-button typeprimary clickhandleSearch搜索/el-button /div /template script export default { data() { return { searchParams: { keyword: , ethnicGroup: }, ethnicOptions: [ {value: 藏族, label: 藏族}, {value: 回族, label: 回族}, {value: 土族, label: 土族} ] } }, methods: { handleSearch() { this.$emit(search, this.searchParams); } } } /script3.3 用户互动模块为增强平台的互动性和社会参与度设计了以下功能用户评论与评分注册用户可以对美食工艺进行评论评分系统1-5星评估工艺的完整性和准确性工艺补充与修正用户可提交对现有工艺描述的补充信息管理员审核后更新到主记录中收藏与分享用户可收藏感兴趣的美食工艺社交媒体分享功能扩大传播范围4. 数据库设计关键点合理的数据库设计是系统稳定运行的基础本项目主要包含以下几类核心表4.1 主要数据表结构美食工艺主表(craft_info)CREATE TABLE craft_info ( id int(11) NOT NULL AUTO_INCREMENT, food_name varchar(100) NOT NULL COMMENT 美食名称, ethnic_group varchar(50) NOT NULL COMMENT 所属民族, region varchar(100) NOT NULL COMMENT 地区分布, main_materials text COMMENT 主料, sub_materials text COMMENT 辅料, tools text COMMENT 特殊工具, steps json DEFAULT NULL COMMENT 工艺步骤(JSON格式), images json DEFAULT NULL COMMENT 图片URL(JSON数组), videos json DEFAULT NULL COMMENT 视频URL(JSON数组), inheritor_id int(11) DEFAULT NULL COMMENT 传承人ID, create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_ethnic (ethnic_group), KEY idx_region (region) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT美食工艺信息表;传承人信息表(inheritor_info)CREATE TABLE inheritor_info ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(50) NOT NULL COMMENT 传承人姓名, gender tinyint(1) DEFAULT NULL COMMENT 性别, birth_year int(4) DEFAULT NULL COMMENT 出生年份, ethnic_group varchar(50) DEFAULT NULL COMMENT 民族, region varchar(100) DEFAULT NULL COMMENT 所在地区, contact varchar(100) DEFAULT NULL COMMENT 联系方式, specialty text COMMENT 擅长工艺, profile text COMMENT 个人简介, create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT传承人信息表;用户评论表(user_comment)CREATE TABLE user_comment ( id int(11) NOT NULL AUTO_INCREMENT, craft_id int(11) NOT NULL COMMENT 关联工艺ID, user_id int(11) NOT NULL COMMENT 用户ID, content text NOT NULL COMMENT 评论内容, rating tinyint(1) DEFAULT NULL COMMENT 评分(1-5), create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_craft (craft_id), KEY idx_user (user_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户评论表;4.2 数据关系设计一对多关系一个传承人可以对应多个美食工艺一个美食工艺可以有多条用户评论数据冗余设计在craft_info表中存储ethnic_group和region字段虽然这些信息也可以通过传承人表关联获取但直接存储可以提高查询效率对于频繁访问但不经常变更的数据适当冗余可以减少表关联查询JSON字段使用对于具有复杂结构但不需要单独查询的数据如工艺步骤、图片URL等使用JSON类型字段存储这种设计简化了表结构避免了过多的关联表5. 关键技术实现细节5.1 多媒体文件处理美食工艺数字化保护涉及大量图片、视频等多媒体内容处理这些内容是项目的技术难点之一文件上传实现前端使用Element UI的Upload组件实现多文件上传后端使用Spring MVC的MultipartFile接收文件文件存储使用阿里云OSS等云存储服务避免占用应用服务器空间RestController RequestMapping(/api/upload) public class UploadController { PostMapping(/image) public Result uploadImage(RequestParam(file) MultipartFile file) { try { // 验证文件类型 String contentType file.getContentType(); if (!contentType.startsWith(image/)) { return Result.error(仅支持图片文件上传); } // 生成唯一文件名 String originalFilename file.getOriginalFilename(); String fileExt originalFilename.substring(originalFilename.lastIndexOf(.)); String newFileName UUID.randomUUID().toString() fileExt; // 上传到OSS OSS ossClient new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret); ossClient.putObject(bucketName, images/ newFileName, file.getInputStream()); // 返回访问URL String fileUrl https:// bucketName . endpoint /images/ newFileName; return Result.success(fileUrl); } catch (Exception e) { return Result.error(上传失败 e.getMessage()); } } }文件管理策略按类型分类存储图片、视频、音频分别存放在不同目录按日期分目录避免单个目录文件过多影响性能定期清理临时文件设置定时任务清理未关联的临时文件5.2 工艺步骤的结构化存储传统美食制作工艺通常包含多个步骤每个步骤可能有文字描述、图片、视频等多种形式的内容。为实现这些数据的结构化存储采用了以下方案前端步骤编辑器实现基于Vue的自定义组件支持添加、删除、排序步骤每个步骤包含文字描述和图片上传功能支持步骤间的拖拽排序template div classstep-editor div v-for(step, index) in steps :keyindex classstep-item el-input v-modelstep.description typetextarea :rows3 placeholder请输入步骤描述/el-input el-upload :actionuploadUrl :on-successhandleStepImageSuccess(index) el-button sizesmall typeprimary上传步骤图片/el-button /el-upload div classstep-actions el-button clickremoveStep(index) sizesmall删除/el-button /div /div el-button clickaddStep typeprimary plain添加步骤/el-button /div /template script export default { data() { return { steps: [], uploadUrl: /api/upload/image } }, methods: { addStep() { this.steps.push({ description: , imageUrl: }); }, removeStep(index) { this.steps.splice(index, 1); }, handleStepImageSuccess(index, response) { this.steps[index].imageUrl response.data; }, getStepsData() { return JSON.stringify(this.steps); } } } /script后端JSON数据处理使用MySQL的JSON类型字段存储步骤数据支持JSON字段的查询和更新操作// 工艺步骤JSON示例 [ { stepNumber: 1, description: 将青稞洗净后浸泡12小时, imageUrl: https://example.com/images/step1.jpg, tips: 水温保持在20-25℃最佳 }, { stepNumber: 2, description: 将浸泡好的青稞蒸煮1小时, imageUrl: https://example.com/images/step2.jpg, videoUrl: https://example.com/videos/step2.mp4 } ]5.3 地图可视化展示为直观展示青海各地区特色美食分布情况集成了地图可视化功能技术选型使用高德地图JavaScript API实现基础地图功能结合ECharts实现热力图、散点图等可视化效果数据准备从工艺数据中提取地区分布信息统计各地区美食数量、类型分布等指标前端实现初始化地图并设置青海省为视图中心根据数据添加标记点或热力图层实现点击交互显示详细信息// 地图初始化示例 initMap() { // 创建地图实例 this.map new AMap.Map(map-container, { viewMode: 2D, zoom: 7, center: [101.7782, 36.6173] // 青海省中心坐标 }); // 添加控件 this.map.addControl(new AMap.ControlBar({ showZoomBar: true, showControlButton: true })); // 加载数据并添加标记 this.loadMapData(); }, // 加载地图数据 loadMapData() { axios.get(/api/craft/map-data).then(response { const data response.data; data.forEach(item { const marker new AMap.Marker({ position: new AMap.LngLat(item.longitude, item.latitude), title: item.region, content: this.createMarkerContent(item) }); this.map.add(marker); }); }); }, // 创建标记点内容 createMarkerContent(data) { return div classmap-marker div classmarker-title${data.region}/div div classmarker-count美食数量: ${data.count}/div div classmarker-types${data.types.join(, )}/div /div; }6. 项目开发中的经验总结6.1 文化调研过程中的注意事项田野调查准备提前了解目标民族的风俗习惯避免文化冲突准备详细的访谈提纲但保持灵活性以适应实际情况获取必要的许可和授权特别是拍摄照片和视频时信息采集技巧采用多种记录方式文字、录音、拍照、视频互为补充重点关注工艺中的关键细节和特殊技巧记录工艺背后的文化含义和传统故事数据验证同一工艺尽可能采集多个来源进行比对邀请当地专家或资深从业者审核采集内容对存疑的信息进行标注和备注6.2 技术实现中的难点与解决方案多媒体内容管理难点大量图片、视频文件的上传、存储和展示解决方案采用云存储服务实现CDN加速访问优化实现分片上传和断点续传提升大文件上传体验复杂工艺步骤的表示难点不同美食的工艺步骤差异大难以统一表示解决方案采用灵活的JSON结构允许不同步骤有不同字段优化开发可视化编辑器降低数据录入难度地图可视化性能难点大量数据点导致地图渲染性能下降解决方案实现数据分级加载和聚合显示优化使用Web Worker处理大数据量的计算6.3 毕业设计项目的时间管理建议阶段划分第1-2周需求分析与技术调研第3-4周文化调研与数据采集第5-8周系统设计与核心功能实现第9-10周测试优化与论文撰写第11-12周完善与答辩准备重点时间分配文化调研要预留足够时间这是项目的基础核心功能实现应先于辅助功能测试和优化环节容易被低估应预留缓冲时间文档同步建议开发过程中同步撰写技术文档及时记录调研过程中的发现和问题定期整理项目进度和下一步计划7. 平台扩展方向探讨7.1 技术层面的扩展移动端应用开发开发React Native或Flutter跨平台移动应用实现离线数据采集功能方便田野调查增加AR展示功能可视化工艺过程大数据分析应用收集用户行为数据分析文化关注热点建立工艺相似度模型发现区域间文化联系预测濒危工艺优先保护高风险项目区块链技术应用使用区块链存证确保工艺记录的不可篡改性建立数字版权管理系统实现文化资产的数字化确权7.2 文化保护层面的深化多维度记录增加节庆、仪式等文化场景中的美食应用记录采集与美食相关的民间故事和歌谣记录食材的种植、采集和加工全过程传承人网络建设建立传承人交流平台组织线下技艺交流活动开发师徒对接功能教育推广功能开发适合学校的文化教育材料设计互动式学习体验建立文化认证体系在实际开发这类文化数字化保护平台时最深刻的体会是技术必须服务于文化价值本身不能为了用技术而用技术。比如在采集青海藏族酸奶制作工艺时最初我们过于关注步骤的标准化记录后来发现很多关键技巧其实藏在老艺人随口的手感描述中这些非标准化的经验往往才是工艺精髓。这促使我们在平台设计中增加了技巧心得字段并允许自由格式的记录方式。技术方案的选择也应该以能否更好保存和传播这些文化精髓为标准而不是盲目追求技术先进性。
SSM+Vue构建青海美食工艺数字化保护平台
1. 项目背景与核心价值民族地区特色美食作为非物质文化遗产的重要组成部分其制作工艺的数字化保护具有重要的文化传承意义。青海作为多民族聚居区拥有众多独具特色的传统美食如牦牛肉干、青稞酒、酸奶等这些美食的制作工艺往往依靠口耳相传面临着失传的风险。这个毕业设计项目选择青海特色美食制作工艺数字化保护作为研究方向通过SSMSpringSpringMVCMyBatis后端框架和Vue.js前端框架构建数字化保护平台实现了对青海特色美食制作工艺的系统性采集、整理、存储和展示。这种技术方案的选择既考虑了高校毕业设计的可实现性又确保了平台的实用性和扩展性。提示在传统文化数字化保护项目中技术选型需要特别考虑非技术人员的易用性这是很多类似项目容易忽视的关键点。2. 技术架构设计解析2.1 整体技术栈选型项目采用前后端分离架构这是当前Web开发的主流模式具有开发效率高、维护方便等优势后端技术栈Spring Framework提供IoC和AOP支持简化企业级应用开发Spring MVC实现MVC设计模式处理Web请求和响应MyBatis轻量级ORM框架简化数据库操作MySQL关系型数据库存储结构化数据前端技术栈Vue.js渐进式JavaScript框架构建用户界面Element UI基于Vue的组件库快速搭建美观界面Axios处理HTTP请求与后端API交互这种技术组合在高校毕业设计中非常常见主要考虑因素包括技术成熟度高社区资源丰富遇到问题容易找到解决方案学习曲线相对平缓适合学生在有限时间内掌握能够满足项目基本功能需求同时具备一定扩展性2.2 系统架构设计系统采用典型的三层架构确保各层职责清晰表现层Vue.js构建的用户界面负责数据展示和用户交互业务逻辑层Spring MVC控制器处理业务逻辑和请求转发数据访问层MyBatis实现的数据持久化操作这种分层设计使得系统具有较好的可维护性和扩展性当需要新增功能或修改现有功能时可以最小化影响范围。3. 核心功能模块实现3.1 美食工艺采集模块这是平台的核心功能模块实现了对青海特色美食制作工艺的系统性采集信息采集表单设计基础信息美食名称、所属民族、地区分布等原料信息主料、辅料、特殊工具等工艺步骤详细记录每一步操作支持图文描述传承人信息记录工艺传承人的基本情况和联系方式// 示例工艺信息实体类设计 public class CraftInfo { private Integer id; private String foodName; // 美食名称 private String ethnicGroup; // 所属民族 private String region; // 地区分布 private String mainMaterials; // 主料 private String subMaterials; // 辅料 private String tools; // 特殊工具 private String steps; // 工艺步骤(JSON格式) private String images; // 图片URL(JSON数组) private Integer inheritorId; // 传承人ID // 省略getter/setter方法 }多媒体支持图片上传记录关键工艺步骤的视觉呈现视频嵌入支持上传工艺演示视频音频记录采集工艺相关的口头说明或传统歌谣注意多媒体文件存储建议使用专门的文件服务器或云存储服务避免直接存储在应用服务器上导致性能问题。3.2 工艺展示与检索模块该模块实现了对采集到的美食工艺信息的有效组织和展示分类展示按民族分类藏族、回族、土族等按地区分类西宁、海东、海北等按食材分类牦牛肉类、青稞类、奶制品类等高级检索功能关键词搜索支持对美食名称、工艺描述等字段的全文检索组合查询可以组合多个条件进行精确查询标签筛选通过预设标签快速定位特定类型美食!-- 示例前端检索组件实现 -- template div classsearch-container el-input v-modelsearchParams.keyword placeholder请输入关键词/el-input el-select v-modelsearchParams.ethnicGroup placeholder选择民族 el-option v-foritem in ethnicOptions :keyitem.value :labelitem.label :valueitem.value/el-option /el-select el-button typeprimary clickhandleSearch搜索/el-button /div /template script export default { data() { return { searchParams: { keyword: , ethnicGroup: }, ethnicOptions: [ {value: 藏族, label: 藏族}, {value: 回族, label: 回族}, {value: 土族, label: 土族} ] } }, methods: { handleSearch() { this.$emit(search, this.searchParams); } } } /script3.3 用户互动模块为增强平台的互动性和社会参与度设计了以下功能用户评论与评分注册用户可以对美食工艺进行评论评分系统1-5星评估工艺的完整性和准确性工艺补充与修正用户可提交对现有工艺描述的补充信息管理员审核后更新到主记录中收藏与分享用户可收藏感兴趣的美食工艺社交媒体分享功能扩大传播范围4. 数据库设计关键点合理的数据库设计是系统稳定运行的基础本项目主要包含以下几类核心表4.1 主要数据表结构美食工艺主表(craft_info)CREATE TABLE craft_info ( id int(11) NOT NULL AUTO_INCREMENT, food_name varchar(100) NOT NULL COMMENT 美食名称, ethnic_group varchar(50) NOT NULL COMMENT 所属民族, region varchar(100) NOT NULL COMMENT 地区分布, main_materials text COMMENT 主料, sub_materials text COMMENT 辅料, tools text COMMENT 特殊工具, steps json DEFAULT NULL COMMENT 工艺步骤(JSON格式), images json DEFAULT NULL COMMENT 图片URL(JSON数组), videos json DEFAULT NULL COMMENT 视频URL(JSON数组), inheritor_id int(11) DEFAULT NULL COMMENT 传承人ID, create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_ethnic (ethnic_group), KEY idx_region (region) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT美食工艺信息表;传承人信息表(inheritor_info)CREATE TABLE inheritor_info ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(50) NOT NULL COMMENT 传承人姓名, gender tinyint(1) DEFAULT NULL COMMENT 性别, birth_year int(4) DEFAULT NULL COMMENT 出生年份, ethnic_group varchar(50) DEFAULT NULL COMMENT 民族, region varchar(100) DEFAULT NULL COMMENT 所在地区, contact varchar(100) DEFAULT NULL COMMENT 联系方式, specialty text COMMENT 擅长工艺, profile text COMMENT 个人简介, create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT传承人信息表;用户评论表(user_comment)CREATE TABLE user_comment ( id int(11) NOT NULL AUTO_INCREMENT, craft_id int(11) NOT NULL COMMENT 关联工艺ID, user_id int(11) NOT NULL COMMENT 用户ID, content text NOT NULL COMMENT 评论内容, rating tinyint(1) DEFAULT NULL COMMENT 评分(1-5), create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_craft (craft_id), KEY idx_user (user_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户评论表;4.2 数据关系设计一对多关系一个传承人可以对应多个美食工艺一个美食工艺可以有多条用户评论数据冗余设计在craft_info表中存储ethnic_group和region字段虽然这些信息也可以通过传承人表关联获取但直接存储可以提高查询效率对于频繁访问但不经常变更的数据适当冗余可以减少表关联查询JSON字段使用对于具有复杂结构但不需要单独查询的数据如工艺步骤、图片URL等使用JSON类型字段存储这种设计简化了表结构避免了过多的关联表5. 关键技术实现细节5.1 多媒体文件处理美食工艺数字化保护涉及大量图片、视频等多媒体内容处理这些内容是项目的技术难点之一文件上传实现前端使用Element UI的Upload组件实现多文件上传后端使用Spring MVC的MultipartFile接收文件文件存储使用阿里云OSS等云存储服务避免占用应用服务器空间RestController RequestMapping(/api/upload) public class UploadController { PostMapping(/image) public Result uploadImage(RequestParam(file) MultipartFile file) { try { // 验证文件类型 String contentType file.getContentType(); if (!contentType.startsWith(image/)) { return Result.error(仅支持图片文件上传); } // 生成唯一文件名 String originalFilename file.getOriginalFilename(); String fileExt originalFilename.substring(originalFilename.lastIndexOf(.)); String newFileName UUID.randomUUID().toString() fileExt; // 上传到OSS OSS ossClient new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret); ossClient.putObject(bucketName, images/ newFileName, file.getInputStream()); // 返回访问URL String fileUrl https:// bucketName . endpoint /images/ newFileName; return Result.success(fileUrl); } catch (Exception e) { return Result.error(上传失败 e.getMessage()); } } }文件管理策略按类型分类存储图片、视频、音频分别存放在不同目录按日期分目录避免单个目录文件过多影响性能定期清理临时文件设置定时任务清理未关联的临时文件5.2 工艺步骤的结构化存储传统美食制作工艺通常包含多个步骤每个步骤可能有文字描述、图片、视频等多种形式的内容。为实现这些数据的结构化存储采用了以下方案前端步骤编辑器实现基于Vue的自定义组件支持添加、删除、排序步骤每个步骤包含文字描述和图片上传功能支持步骤间的拖拽排序template div classstep-editor div v-for(step, index) in steps :keyindex classstep-item el-input v-modelstep.description typetextarea :rows3 placeholder请输入步骤描述/el-input el-upload :actionuploadUrl :on-successhandleStepImageSuccess(index) el-button sizesmall typeprimary上传步骤图片/el-button /el-upload div classstep-actions el-button clickremoveStep(index) sizesmall删除/el-button /div /div el-button clickaddStep typeprimary plain添加步骤/el-button /div /template script export default { data() { return { steps: [], uploadUrl: /api/upload/image } }, methods: { addStep() { this.steps.push({ description: , imageUrl: }); }, removeStep(index) { this.steps.splice(index, 1); }, handleStepImageSuccess(index, response) { this.steps[index].imageUrl response.data; }, getStepsData() { return JSON.stringify(this.steps); } } } /script后端JSON数据处理使用MySQL的JSON类型字段存储步骤数据支持JSON字段的查询和更新操作// 工艺步骤JSON示例 [ { stepNumber: 1, description: 将青稞洗净后浸泡12小时, imageUrl: https://example.com/images/step1.jpg, tips: 水温保持在20-25℃最佳 }, { stepNumber: 2, description: 将浸泡好的青稞蒸煮1小时, imageUrl: https://example.com/images/step2.jpg, videoUrl: https://example.com/videos/step2.mp4 } ]5.3 地图可视化展示为直观展示青海各地区特色美食分布情况集成了地图可视化功能技术选型使用高德地图JavaScript API实现基础地图功能结合ECharts实现热力图、散点图等可视化效果数据准备从工艺数据中提取地区分布信息统计各地区美食数量、类型分布等指标前端实现初始化地图并设置青海省为视图中心根据数据添加标记点或热力图层实现点击交互显示详细信息// 地图初始化示例 initMap() { // 创建地图实例 this.map new AMap.Map(map-container, { viewMode: 2D, zoom: 7, center: [101.7782, 36.6173] // 青海省中心坐标 }); // 添加控件 this.map.addControl(new AMap.ControlBar({ showZoomBar: true, showControlButton: true })); // 加载数据并添加标记 this.loadMapData(); }, // 加载地图数据 loadMapData() { axios.get(/api/craft/map-data).then(response { const data response.data; data.forEach(item { const marker new AMap.Marker({ position: new AMap.LngLat(item.longitude, item.latitude), title: item.region, content: this.createMarkerContent(item) }); this.map.add(marker); }); }); }, // 创建标记点内容 createMarkerContent(data) { return div classmap-marker div classmarker-title${data.region}/div div classmarker-count美食数量: ${data.count}/div div classmarker-types${data.types.join(, )}/div /div; }6. 项目开发中的经验总结6.1 文化调研过程中的注意事项田野调查准备提前了解目标民族的风俗习惯避免文化冲突准备详细的访谈提纲但保持灵活性以适应实际情况获取必要的许可和授权特别是拍摄照片和视频时信息采集技巧采用多种记录方式文字、录音、拍照、视频互为补充重点关注工艺中的关键细节和特殊技巧记录工艺背后的文化含义和传统故事数据验证同一工艺尽可能采集多个来源进行比对邀请当地专家或资深从业者审核采集内容对存疑的信息进行标注和备注6.2 技术实现中的难点与解决方案多媒体内容管理难点大量图片、视频文件的上传、存储和展示解决方案采用云存储服务实现CDN加速访问优化实现分片上传和断点续传提升大文件上传体验复杂工艺步骤的表示难点不同美食的工艺步骤差异大难以统一表示解决方案采用灵活的JSON结构允许不同步骤有不同字段优化开发可视化编辑器降低数据录入难度地图可视化性能难点大量数据点导致地图渲染性能下降解决方案实现数据分级加载和聚合显示优化使用Web Worker处理大数据量的计算6.3 毕业设计项目的时间管理建议阶段划分第1-2周需求分析与技术调研第3-4周文化调研与数据采集第5-8周系统设计与核心功能实现第9-10周测试优化与论文撰写第11-12周完善与答辩准备重点时间分配文化调研要预留足够时间这是项目的基础核心功能实现应先于辅助功能测试和优化环节容易被低估应预留缓冲时间文档同步建议开发过程中同步撰写技术文档及时记录调研过程中的发现和问题定期整理项目进度和下一步计划7. 平台扩展方向探讨7.1 技术层面的扩展移动端应用开发开发React Native或Flutter跨平台移动应用实现离线数据采集功能方便田野调查增加AR展示功能可视化工艺过程大数据分析应用收集用户行为数据分析文化关注热点建立工艺相似度模型发现区域间文化联系预测濒危工艺优先保护高风险项目区块链技术应用使用区块链存证确保工艺记录的不可篡改性建立数字版权管理系统实现文化资产的数字化确权7.2 文化保护层面的深化多维度记录增加节庆、仪式等文化场景中的美食应用记录采集与美食相关的民间故事和歌谣记录食材的种植、采集和加工全过程传承人网络建设建立传承人交流平台组织线下技艺交流活动开发师徒对接功能教育推广功能开发适合学校的文化教育材料设计互动式学习体验建立文化认证体系在实际开发这类文化数字化保护平台时最深刻的体会是技术必须服务于文化价值本身不能为了用技术而用技术。比如在采集青海藏族酸奶制作工艺时最初我们过于关注步骤的标准化记录后来发现很多关键技巧其实藏在老艺人随口的手感描述中这些非标准化的经验往往才是工艺精髓。这促使我们在平台设计中增加了技巧心得字段并允许自由格式的记录方式。技术方案的选择也应该以能否更好保存和传播这些文化精髓为标准而不是盲目追求技术先进性。