【开源】基于Vue.js的陕西非物质文化遗产网站

本文主要是介绍【开源】基于Vue.js的陕西非物质文化遗产网站，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述
$\color{red}{文末获取源码，项目编号：S065。}$

一、摘要
- 1.1 项目介绍
- 1.2 项目录屏
二、功能模块
- 2.1 设计目标
- 2.2 研究内容
- 2.3 研究方法与过程
- - 2.3.1 系统设计
  - 2.3.2 查阅文献
  - 2.3.3 网站分析
  - 2.3.4 网站设计
  - 2.3.5 网站实现
  - 2.3.6 系统测试与效果分析
三、系统展示
四、核心代码
- 4.1 查询民间文学
- 4.2 查询传统音乐
- 4.3 增改传统舞蹈
- 4.4 网页页签
- 4.5 网页数据展示
五、免责说明

一、摘要

1.1 项目介绍

基于JAVA+Vue+SpringBoot+MySQL的陕西非物质文化遗产网站，包含了陕西地市、民间文学、传统音乐、传统舞蹈、传统戏剧、传统体育模块，还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块，陕西非物质文化遗产网站基于角色的访问控制，给视频管理员、普通用户使用，可将权限精确到按钮级别，您可以自定义角色并分配权限，系统适合设计精确的权限约束需求。

1.2 项目录屏

源码下载

二、功能模块

非物质文化遗产与互联网相结合，为非物质文化遗产的数字化传播提供了重要契机。作为十三朝古都的陕西省，存在着大量的工艺美术、民间传说、音乐、礼仪等非遗资源。目前陕西的部分非遗数字化资源可以通过相关的博物馆网站浏览和欣赏，但对数量庞大的陕西非遗资源来说，目前这种分布式资源不利于用户系统化的了解陕西非遗文化。因此，构建一个陕西非物质文化遗产资源欣赏专题网站，帮助用户系统化的了解陕西非遗文化，塑造大众心目中独特的陕西文化IP形象。

2.1 设计目标

网站应主要包括后台数据库设计和前端应用程序的开发两个方面。对于前者要求研究并建立起数据一致性和完整性强、数据安全性好的数据库；后者则要求应用程序功能完备，具有界面美观、易操作、易使用等特点。

2.2 研究内容

对于非遗的分类，依据国家2021年非遗名录对非遗类型的划分，分为民间文学、传统音乐、传统舞蹈、传统戏剧、曲艺、传统体育、游艺与杂技、传统美术、传统技艺、传统医药、民俗11大类。网站的建设采用用户和管理员两大系统，用户系统可以查看网站首页、科普页、个人中心等，管理员可用户管理、系统管理，一方面方便用户了解陕西非遗文化，同时方便后台人员对于网站的管理。

2.3 研究方法与过程

2.3.1 系统设计

网站可以使用 IDEA 为主要开发者工具，使用 MySQL 为数据库开发平台，Windows10 操作系统为运行环境。前台运用 Vue 和 JavaScript 等前台布局脚本语言，后台运用 JAVA 技术进行开发。

2.3.2 查阅文献

了解陕西非物质文化遗产现状，明确基于JavaSript 建立陕西非物质文化遗产网站的意义和价值。

2.3.3 网站分析

对项目进行用户需求分析、系统功能分析、网站架构分析、网站界面分析等。

2.3.4 网站设计

进行系统结构设计、功能模块设计、数据库设计、UI界面设计等内容。

2.3.5 网站实现

软硬件环境准备、系统功能实现。

2.3.6 系统测试与效果分析

完成所有系统功能后，设计测试计划，对系统功能进行测试与效果分析。

三、系统展示

在这里插入图片描述

四、核心代码

4.1 查询民间文学

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查询民间文学")
public Result<IPage<BuildingGarden>> getByPage(@ModelAttribute BuildingGarden buildingGarden ,@ModelAttribute PageVo page){QueryWrapper<BuildingGarden> qw = new QueryWrapper<>();if(!ZwzNullUtils.isNull(buildingGarden.getTitle())) {qw.like("title",buildingGarden.getTitle());}if(!ZwzNullUtils.isNull(buildingGarden.getStatus())) {qw.eq("status",buildingGarden.getStatus());}if(!ZwzNullUtils.isNull(buildingGarden.getContent())) {qw.like("content",buildingGarden.getContent());}IPage<BuildingGarden> data = iBuildingGardenService.page(PageUtil.initMpPage(page),qw);return new ResultUtil<IPage<BuildingGarden>>().setData(data);
}

4.2 查询传统音乐

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查询传统音乐")
public Result<IPage<CompetitionRegistration>> getByPage(@ModelAttribute CompetitionRegistration competitionRegistration ,@ModelAttribute PageVo page){QueryWrapper<CompetitionRegistration> qw = new QueryWrapper<>();if(!ZwzNullUtils.isNull(competitionRegistration.getTitle())) {qw.like("title",competitionRegistration.getTitle());}if(!ZwzNullUtils.isNull(competitionRegistration.getStatus())) {qw.eq("status",competitionRegistration.getStatus());}if(!ZwzNullUtils.isNull(competitionRegistration.getContent())) {qw.like("content",competitionRegistration.getContent());}IPage<CompetitionRegistration> data = iCompetitionRegistrationService.page(PageUtil.initMpPage(page),qw);return new ResultUtil<IPage<CompetitionRegistration>>().setData(data);
}

4.3 增改传统舞蹈

@RequestMapping(value = "/insertOrUpdate", method = RequestMethod.POST)
@ApiOperation(value = "增改传统舞蹈")
public Result<EducationTeaching> saveOrUpdate(EducationTeaching educationTeaching){User currUser = securityUtil.getCurrUser();educationTeaching.setUserName(currUser.getNickname());if(Objects.equals(0,educationTeaching.getSortOrder().compareTo(BigDecimal.ZERO))) {educationTeaching.setSortOrder(BigDecimal.valueOf(iEducationTeachingService.count() + 1L));}if(iEducationTeachingService.saveOrUpdate(educationTeaching)){return new ResultUtil<EducationTeaching>().setData(educationTeaching);}return ResultUtil.error();
}

4.4 网页页签

<div class="process"><div class="heng"></div><span class="title1">陕西非物质文化遗产</span><span class="notes">Recruitment process</span><div class="processBox"><div class="step"><img class="stepImg" src="../assets/step1.png" alt="" /><span class="name1">陕西地市</span><span class="time">陕西地市相关信息</span></div><div class="arrow">▲</div><div class="step"><img class="stepImg" src="../assets/step2.png" alt="" /><span class="name1">传统音乐</span><span class="time">传统音乐相关信息</span></div><div class="arrow">▲</div><div class="step"><img class="stepImg" src="../assets/step3.png" alt="" /><span class="name1">传统舞蹈</span><span class="time">传统舞蹈相关信息</span></div><div class="arrow">▲</div><div class="step"><img class="stepImg" src="../assets/step4.png" alt="" /><span class="name1">传统戏剧</span><span class="time">传统戏剧相关信息</span></div></div>

4.5 网页数据展示

<el-row :gutter="20" v-for="(item,index) in positionList" :key="index" style="width: 100%;margin-bottom: 20px;"><div class="spotCollPosDiv">NO: {{ index + 1 }}</div><el-col :span="24"><el-row :gutter="20"><el-col :span="6"><img :src="item.image" style="width:100%" /></el-col><el-col :span="1"></el-col><el-col :span="17"><el-row :gutter="20"><el-col :span="24"><el-row :gutter="20" class="spanContext"><span class="spanContextLabel"> 传统音乐标题：</span> {{item.title}}</el-row></el-col><el-col :span="24"><el-row :gutter="20" class="spanContext"><span class="spanContextLabel"> 发布状态：</span> {{item.status}}</el-row></el-col><el-col :span="24"><el-row :gutter="20" class="spanContext"><span class="spanContextLabel"> 发布人：</span> {{item.userName}}</el-row></el-col><el-col :span="24"><el-row :gutter="20" class="spanContext">{{item.content}}</el-row></el-col></el-row></el-col></el-row></el-col>
</el-row>