基于Vue的非物质文化遗产系统的设计与实现--附源码88713

weixin_MZ_ZXD001

已于 2024-08-07 17:35:02 修改

阅读量562

点赞数 30

文章标签： vue.js 前端 javascript spring boot 开发语言前端框架

于 2024-07-25 14:16:22 首次发布

本文链接：https://blog.csdn.net/weixin_MZ_ZXD001/article/details/140685742

版权

摘要

非物质文化遗产是一个国家和民族历史文化成就的重要标志，是全人类的共同文化财富。然而，随着现代化进程的加速，许多非遗技艺面临失传的危险，因此开发一套系统对其进行保护和传承是十分必要的。Spring Boot和Vue.js是目前较为流行的技术组合，具有易于上手、生态完善、社区支持度高等优点。它们可以快速构建出高效、稳定、用户体验良好的Web应用程序。

本文首先阐述了系统的研究背景和意义；然后对系统进行了可行性、功能性等分析；接着详细介绍了系统的设计原理和实现细节，包括系统架构设计、系统功能结构设计、数据库设计等；最后对系统进行了部署和测试。通过本系统的的成功实施，不仅为非物质文化遗产的保护和传承提供了有力支持，也为其他类似系统的设计和实现提供了有益的参考。

关键词：非物质文化遗产；Spring Boot；Vue.js；

Abstract

Intangible cultural heritage is an important symbol of the historical and cultural achievements of a country and a nation, and is a common cultural wealth of all humanity. However, with the acceleration of modernization, many intangible cultural heritage techniques are facing the risk of loss, so it is necessary to develop a system to protect and inherit them. Spring Boot and Vue.js are currently a popular combination of technologies, with the advantages of easy to get started, well-established ecosystem, and high community support. They can quickly build efficient, stable, and user-friendly web applications.

This article first elaborates on the research background and significance of the system; Then, feasibility and functionality analyses were conducted on the system; Then, the design principles and implementation details of the system were introduced in detail, including system architecture design, system functional structure design, database design, etc; Finally, the system was deployed and tested. The successful implementation of this system not only provides strong support for the protection and inheritance of intangible cultural heritage, but also provides useful references for the design and implementation of other similar systems.

Keywords: Intangible cultural heritage; Spring Boot; Vue.js;

1 绪论

1.1 研究背景

非物质文化遗产的保护与传承:非物质文化遗产是民族文化的精髓，但由于种种原因，许多非物质文化遗产面临着消失的危险。因此，保护和传承非物质文化遗产成为了当前的重要任务。随着科技的进步，数字化技术和互联网为非物质文化遗产的保护和传承提供了新的途径。通过数字化技术，可以将非物质文化遗产转化为数字资源，实现永久保存和共享。而互联网则可以使非物质文化遗产的传播更加广泛和快速。Spring Boot和Vue是当前流行的技术框架，具有易于使用、快速开发和强大的功能等优势。基于Spring Boot和Vue开发非物质文化遗产系统，可以快速构建出高效、稳定、可扩展的系统，满足非物质文化遗产保护和传承的需求。

1.2 研究意义

非物质文化遗产是民族文化的重要组成部分，是历史的见证和文化的载体。通过先进的技术手段对其进行保护和传承，可以进一步推动文化的创新与发展。开发设计一个基于Vue的非物质文化遗产系统具有重要的意义。

首先，保护和传承：随着现代化进程的加速，许多非物质文化遗产面临消失的风险。通过基于Vue的数字化系统，可以系统地整理、保存和展示非物质文化遗产的相关信息，避免其流失或异变。此外，利用该系统可以更方便地传播和分享非物质文化遗产，让更多的人了解和认识，从而促进其传承和发展。

其次，促进文创产业发展：基于Vue的非物质文化遗产系统不仅具有保护和传承的功能，还可以为文创产业提供丰富的素材和灵感。通过该系统，可以宣传非物质文化遗产的周边产品，促进文化产业的发展和经济效益的提升。

最后，增强文化自信：通过系统，可以让更多的人了解和认识非物质文化遗产，增强民族文化认同感和自豪感，进而提升文化自信。同时，该系统也可以为文化教育提供丰富的素材和工具，促进文化教育的普及和深入。

1.3 论文结构与章节安排

论文将分层次进行编排，除去论文摘要致谢文献参考部分，论文主要架构如下：

第一章：绪论。主要介绍了课题研究的背景，研究意义和论文结构与章节安排。

第二章：系统分析。主要从系统的用户、功能等方面进行需求分析。

第三章：系统总体设计。主要对系统框架、系统功能模块、数据库进行功能设计。

第四章：系统详细设计与实现。主要介绍了系统框架搭建、系统界面的实现。

第五章：系统测试。主要对系统的部分界面进行测试并对主要功能进行测试。

第六章：总结。主要对系统的设计工作进行总结。

2 系统分析

2.1 可行性分析

（1）技术可行性

Vue作为一种前端框架，具有简单易学、灵活性强、组件化开发等特点，为构建非物质文化遗产系统提供了强大的技术支撑。通过Vue，我们可以快速搭建出美观、交互性强的界面，同时利用其组件化的特性，可以方便地进行模块化开发，提高开发效率和代码复用性。另外，Spring Boot是一个非常流行的Java开发框架，Spring Boot不仅能够帮助开发者快速搭建应用的基本框架，还提供了丰富的扩展点，使得开发者可以灵活地定制和优化应用程序，满足不同场景下的需求。因此，从技术层面来说是可行的。

（2）经济可行性

由于Vue本身的技术生态和广泛的社区支持，可以轻松地找到合适的开发和维护人员，从而降低人力成本。Spring Boot的自动配置功能可以根据应用程序的依赖和环境来进行自动配置，减少了大量的手动配置工作，可以降低开发成本；另外，Spring Boot的代码质量和可维护性较高，可以降低后期维护成本。因此，从经济角度分析是可行的。

（3）社会可行性

非物质文化遗产是民族文化的瑰宝，具有重要的历史和文化价值。通过构建非物质文化遗产系统，可以更好地保护和传承这些珍贵的文化遗产。同时，该系统还可以提供丰富的非遗知识，帮助人们更好地了解和认识非遗文化，提高文化素养和审美水平。此外，通过线上线下的结合，可以促进非遗文化的传播和交流，增强民族文化自信和归属感。因此，从社会角度分析是可行的。

2.2 系统流程分析

系统流程是用一些特定的符合和线条来进行演示用户在使用系统时的过程，在进行系统分析的时候，业务流程可以帮助开发人员更好的理解业务，发现错误，完善系统。

2.2.1 数据新增流程

用户成功登入系统后就能够实现增加数据的操作，增加数据的编号由系统生成，用户不能随意填写，除了编号以外，其他增加信息用户自己填写，填写后的信息经过系统验证，验证通过后即可完成数据新增，数据新增的流程图如下图2-1所示。

图2-1 数据新增流程图

2.2.2 数据删除流程

如果系统里面存在一些没有用的数据，相关的管理人员还可以对这些数据进行删除，数据删除时流程图如下图2-2所示。

图2-2 数据删除流程图

2.3 系统功能分析

2.3.1 功能性分析

按照基于Vue的非物质文化遗产系统的角色，主要包括登录用户模块和管理员这两大功能模块。

登录用户功能主要包括注册登录、首页、系统公告、资讯文章、周边产品、商城管理、视频中心、文化音乐、文化活动、现场演出、我的（我的账户、个人中心），其用例图如下图2-3所示：

图2-3 登录用户用例图

2.管理员功能主要包括后台首页、系统用户、视频中心管理、文化音乐管理、文化活动管理、现场演出管理、文化类别管理、系统管理、系统公告管理、资源管理、交流管理、商城管理（周边商品、分类列表、订单列表、订单配送）。其用例图如下图2-4所示：

图2-4 管理员用例图

2.3.2 非功能性分析

基于Vue的非物质文化遗产系统的非功能性需求比如基于Vue的非物质文化遗产系统的安全性怎么样，可靠性怎么样，性能怎么样，可拓展性怎么样等。具体可以表示在如下2-1表格中：

表2-1基于Vue的非物质文化遗产系统非功能需求表

安全性	主要指基于Vue的非物质文化遗产系统数据库的安装，数据库的使用和密码的设定必须合乎规范。
可靠性	可靠性是指基于Vue的非物质文化遗产系统能够安装用户的指示进行操作，经过测试，可靠性90%以上。
性能	性能是影响基于Vue的非物质文化遗产系统占据市场的必要条件，所以性能最好要佳才好。
可扩展性	比如数据库预留多个属性，比如接口的使用等确保了系统的非功能性需求。
易用性	用户只要跟着基于Vue的非物质文化遗产系统的页面展示内容进行操作，就可以了。
可维护性	基于Vue的非物质文化遗产系统开发的可维护性是非常重要的，经过测试，可维护性没有问题

2.4 本章小结

本章主要通过对基于Vue的非物质文化遗产系统的可行性分析、流程分析、功能需求分析、系统用例分析，确定整个基于Vue的非物质文化遗产系统要实现的功能。同时也为基于Vue的非物质文化遗产系统的代码实现和测试提供了标准。

3 系统总体设计

本章主要讨论的内容包括基于Vue的非物质文化遗产系统的系统架构设计、功能模块设计、数据库系统设计。

3.1 系统架构设计

本基于Vue的非物质文化遗产系统从架构上分为三层：表现层（UI）、业务逻辑层（BLL）以及数据层（DL）。

图3-1系统架构设计图

表现层（UI）：又称UI层，主要完成本基于Vue的非物质文化遗产系统的UI交互功能，一个良好的UI可以打打提高用户的用户体验，增强用户使用本基于Vue的非物质文化遗产系统时的舒适度。UI的界面设计也要适应不同版本的基于Vue的非物质文化遗产系统以及不同尺寸的分辨率，以做到良好的兼容性。UI交互功能要求合理，用户进行交互操作时必须要得到与之相符的交互结果，这就要求表现层要与业务逻辑层进行良好的对接。

业务逻辑层（BLL）：主要完成本基于Vue的非物质文化遗产系统的数据处理功能。用户从表现层传输过来的数据经过业务逻辑层进行处理交付给数据层，系统从数据层读取的数据经过业务逻辑层进行处理交付给表现层。

数据层（DL）：由于本基于Vue的非物质文化遗产系统的数据是放在服务端的MySQL数据库中，因此本属于服务层的部分可以直接整合在业务逻辑层中，所以数据层中只有数据库，其主要完成本基于Vue的非物质文化遗产系统的数据存储和管理功能。

3.2 系统功能模块设计

在上一章节中主要对系统的功能性需求和非功能性需求进行分析，并且根据需求分析了本基于Vue的非物质文化遗产系统中的用例。那么接下来就要开始对本基于Vue的非物质文化遗产系统的主要功能和数据库开始进行设计。基于Vue的非物质文化遗产系统根据前面章节的需求分析得出，其总体设计模块图如图3-2所示。

图3-2 系统功能模块图

3.3 数据库设计

数据库设计一般包括需求分析、概念模型设计、数据库表建立三大过程，其中需求分析前面章节已经阐述，概念模型设计有概念模型和逻辑结构设计两部分。

3.3.1 数据库概念结构设计

下面是整个基于Vue的非物质文化遗产系统中主要的数据库表总E-R实体关系图。

图3-3 系统总E-R关系图

3.3.2 数据库逻辑结构设计

通过上一小节中基于Vue的非物质文化遗产系统中总E-R关系图上得出一共需要创建很多个数据表。在此主要罗列几个主要的数据库表结构设计。

表access_token (登陆访问时长)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	token_id	int	10	0	N	Y		临时访问牌ID
2	token	varchar	64	0	Y	N		临时访问牌
3	info	text	65535	0	Y	N
4	maxage	int	10	0	N	N	2	最大寿命：默认2小时
5	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
6	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
7	user_id	int	10	0	N	N	0	用户编号:

表address (收货地址：)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	address_id	int	10	0	N	Y		收货地址：
2	name	varchar	32	0	Y	N		姓名：
3	phone	varchar	13	0	Y	N		手机：
4	postcode	varchar	8	0	Y	N		邮编：
5	address	varchar	255	0	N	N		地址：
6	user_id	mediumint	8	0	N	N		用户ID：[0,8388607]用户获取其他与用户相关的数据
7	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
8	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
9	default	bit	1	0	N	N	0	默认判断

表article (文章：用于内容管理系统的文章)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	article_id	mediumint	8	0	N	Y		文章id：[0,8388607]
2	title	varchar	125	0	N	Y		标题：[0,125]用于文章和html的title标签中
3	type	varchar	64	0	N	N	0	文章分类：[0,1000]用来搜索指定类型的文章
4	hits	int	10	0	N	N	0	点击数：[0,1000000000]访问这篇文章的人次
5	praise_len	int	10	0	N	N	0	点赞数
6	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
7	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
8	source	varchar	255	0	Y	N		来源：[0,255]文章的出处
9	url	varchar	255	0	Y	N		来源地址：[0,255]用于跳转到发布该文章的网站
10	tag	varchar	255	0	Y	N		标签：[0,255]用于标注文章所属相关内容，多个标签用空格隔开
11	content	longtext	2147483647	0	Y	N		正文：文章的主体内容
12	img	varchar	255	0	Y	N		封面图
13	description	text	65535	0	Y	N		文章描述

表article_type (文章分类)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	type_id	smallint	5	0	N	Y		分类ID：[0,10000]
2	display	smallint	5	0	N	N	100	显示顺序：[0,1000]决定分类显示的先后顺序
3	name	varchar	16	0	N	N		分类名称：[2,16]
4	father_id	smallint	5	0	N	N	0	上级分类ID：[0,32767]
5	description	varchar	255	0	Y	N		描述：[0,255]描述该分类的作用
6	icon	text	65535	0	Y	N		分类图标：
7	url	varchar	255	0	Y	N		外链地址：[0,255]如果该分类是跳转到其他网站的情况下，就在该URL上设置
8	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
9	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表auth (用户权限管理)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	auth_id	int	10	0	N	Y		授权ID：
2	user_group	varchar	64	0	Y	N		用户组：
3	mod_name	varchar	64	0	Y	N		模块名：
4	table_name	varchar	64	0	Y	N		表名：
5	page_title	varchar	255	0	Y	N		页面标题：
6	path	varchar	255	0	Y	N		路由路径：
7	position	varchar	32	0	Y	N		位置：
8	mode	varchar	32	0	N	N	_blank	跳转方式：
9	add	tinyint	3	0	N	N	1	是否可增加：
10	del	tinyint	3	0	N	N	1	是否可删除：
11	set	tinyint	3	0	N	N	1	是否可修改：
12	get	tinyint	3	0	N	N	1	是否可查看：
13	field_add	text	65535	0	Y	N		添加字段：
14	field_set	text	65535	0	Y	N		修改字段：
15	field_get	text	65535	0	Y	N		查询字段：
16	table_nav_name	varchar	500	0	Y	N		跨表导航名称：
17	table_nav	varchar	500	0	Y	N		跨表导航：
18	option	text	65535	0	Y	N		配置：
19	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
20	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表cart (购物车)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	cart_id	int	10	0	N	Y		购物车ID：
2	title	varchar	64	0	Y	N		标题：
3	img	varchar	255	0	N	N	0	图片：
4	user_id	int	10	0	N	N	0	用户ID：
5	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
6	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
7	state	int	10	0	N	N	0	状态：使用中，已失效
8	price	double	9	2	N	N	0.00	单价：
9	price_ago	double	9	2	N	N	0.00	原价：
10	price_count	double	11	2	N	N	0.00	总价：
11	num	int	10	0	N	N	1	数量：
12	goods_id	mediumint	8	0	N	N		商品id：[0,8388607]
13	type	varchar	64	0	N	N	未分类	商品分类：
14	description	varchar	255	0	Y	N		描述：[0,255]用于产品规格描述

表collect (收藏)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	collect_id	int	10	0	N	Y		收藏ID：
2	user_id	int	10	0	N	N	0	收藏人ID：
3	source_table	varchar	255	0	Y	N		来源表：
4	source_field	varchar	255	0	Y	N		来源字段：
5	source_id	int	10	0	N	N	0	来源ID：
6	title	varchar	255	0	Y	N		标题：
7	img	varchar	255	0	Y	N		封面：
8	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
9	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表comment (评论)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	comment_id	int	10	0	N	Y		评论ID：
2	user_id	int	10	0	N	N	0	评论人ID：
3	reply_to_id	int	10	0	N	N	0	回复评论ID：空为0
4	content	longtext	2147483647	0	Y	N		内容：
5	nickname	varchar	255	0	Y	N		昵称：
6	avatar	varchar	255	0	Y	N		头像地址：[0,255]
7	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
8	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
9	source_table	varchar	255	0	Y	N		来源表：
10	source_field	varchar	255	0	Y	N		来源字段：
11	source_id	int	10	0	N	N	0	来源ID：

表cultural_activity (文化活动)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	cultural_activity_id	int	10	0	N	Y		文化活动ID
2	activity_name	varchar	64	0	Y	N		活动名称
3	cultural_categories	varchar	64	0	Y	N		文化类别
4	picture	varchar	255	0	Y	N		图片
5	event_symbolism	varchar	64	0	Y	N		活动寓意
6	event_address	varchar	64	0	Y	N		活动地址
7	activity_introduction	longtext	2147483647	0	Y	N		活动介绍
8	hits	int	10	0	N	N	0	点击数
9	praise_len	int	10	0	N	N	0	点赞数
10	recommend	int	10	0	N	N	0	智能推荐
11	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
12	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表cultural_categories (文化类别)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	cultural_categories_id	int	10	0	N	Y		文化类别ID
2	cultural_categories	varchar	64	0	Y	N		文化类别
3	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
4	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表cultural_music (文化音乐)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	cultural_music_id	int	10	0	N	Y		文化音乐ID
2	music_name	varchar	64	0	Y	N		音乐名称
3	cultural_categories	varchar	64	0	Y	N		文化类别
4	cover	varchar	255	0	Y	N		封面
5	origin	varchar	64	0	Y	N		发源地
6	moral	varchar	64	0	Y	N		寓意
7	related_audio	varchar	255	0	Y	N		相关音频
8	details_introduction	longtext	2147483647	0	Y	N		详情介绍
9	hits	int	10	0	N	N	0	点击数
10	praise_len	int	10	0	N	N	0	点赞数
11	recommend	int	10	0	N	N	0	智能推荐
12	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
13	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表forum (论坛)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	forum_id	mediumint	8	0	N	Y		论坛id
2	display	smallint	5	0	N	N	100	排序
3	user_id	mediumint	8	0	N	N	0	用户ID
4	nickname	varchar	16	0	Y	N		昵称：[0,16]
5	praise_len	int	10	0	Y	N	0	点赞数
6	hits	int	10	0	N	N	0	访问数
7	title	varchar	125	0	N	N		标题
8	keywords	varchar	125	0	Y	N		关键词
9	description	varchar	255	0	Y	N		描述
10	url	varchar	255	0	Y	N		来源地址
11	tag	varchar	255	0	Y	N		标签
12	img	text	65535	0	Y	N		封面图
13	content	longtext	2147483647	0	Y	N		正文
14	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
15	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
16	avatar	varchar	255	0	Y	N		发帖人头像：
17	type	varchar	64	0	N	N	0	论坛分类：[0,1000]用来搜索指定类型的论坛帖

表forum_type (论坛分类)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	type_id	smallint	5	0	N	Y		分类ID：[0,10000]
2	name	varchar	16	0	N	N		分类名称：[2,16]
3	description	varchar	255	0	Y	N		描述：[0,255]描述该分类的作用
4	url	varchar	255	0	Y	N		外链地址：[0,255]如果该分类是跳转到其他网站的情况下，就在该URL上设置
5	father_id	smallint	5	0	N	N	0	上级分类ID：[0,32767]
6	icon	varchar	255	0	Y	N		分类图标：
7	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
8	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表goods (商品信息)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	goods_id	mediumint	8	0	N	Y		产品id：[0,8388607]
2	title	varchar	125	0	Y	N		标题：[0,125]用于产品和html的<title>标签中
3	img	text	65535	0	Y	N		封面图：用于显示于产品列表页
4	description	varchar	255	0	Y	N		描述：[0,255]用于产品规格描述
5	price_ago	double	8	2	N	N	0.00	原价：[1]
6	price	double	8	2	N	N	0.00	卖价：[1]
7	sales	int	10	0	N	N	0	销量：[0,1000000000]
8	inventory	int	10	0	N	N	0	商品库存
9	type	varchar	64	0	N	N		商品分类：
10	hits	int	10	0	N	N	0	点击量：[0,1000000000]访问这篇产品的人次
11	content	longtext	2147483647	0	Y	N		正文：产品的主体内容
12	img_1	text	65535	0	Y	N		主图1：
13	img_2	text	65535	0	Y	N		主图2：
14	img_3	text	65535	0	Y	N		主图3：
15	img_4	text	65535	0	Y	N		主图4：
16	img_5	text	65535	0	Y	N		主图5：
17	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
18	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
19	customize_field	text	65535	0	Y	N		自定义字段
20	source_table	varchar	255	0	Y	N		来源表：
21	source_field	varchar	255	0	Y	N		来源字段：
22	source_id	int	10	0	N	N	0	来源ID：
23	user_id	int	10	0	Y	N	0	添加人

表goods_type (商品类型)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	type_id	int	10	0	N	Y		商品分类ID：
2	father_id	smallint	5	0	N	N	0	上级分类ID：[0,32767]
3	name	varchar	255	0	Y	N		商品名称：
4	desc	varchar	255	0	Y	N		描述：
5	icon	varchar	255	0	Y	N		图标：
6	source_table	varchar	255	0	Y	N		来源表：
7	source_field	varchar	255	0	Y	N		来源字段：
8	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
9	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表hits (用户点击)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	hits_id	int	10	0	N	Y		点赞ID：
2	user_id	int	10	0	N	N	0	点赞人：
3	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
4	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
5	source_table	varchar	255	0	Y	N		来源表：
6	source_field	varchar	255	0	Y	N		来源字段：
7	source_id	int	10	0	N	N	0	来源ID：

表live_performance (现场演出)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	live_performance_id	int	10	0	N	Y		现场演出ID
2	performance_name	varchar	64	0	Y	N		演出名称
3	cover	varchar	255	0	Y	N		封面
4	performance_time	varchar	64	0	Y	N		演出时间
5	performance_location	varchar	64	0	Y	N		演出地点
6	ticket_price	int	10	0	Y	N	0	票价
7	content	longtext	2147483647	0	Y	N		内容
8	hits	int	10	0	N	N	0	点击数
9	praise_len	int	10	0	N	N	0	点赞数
10	timer_title	varchar	64	0	Y	N		计时器标题
11	timing_start_time	datetime	19	0	Y	N		计时开始时间
12	timing_end_time	datetime	19	0	Y	N		计时结束时间
13	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
14	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表login_user (登陆用户)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	login_user_id	int	10	0	N	Y		登陆用户ID
2	user_name	varchar	64	0	Y	N		用户姓名
3	gender	varchar	64	0	Y	N		性别
4	examine_state	varchar	16	0	N	N	已通过	审核状态
5	user_id	int	10	0	N	N	0	用户ID
6	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
7	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表logistics_delivery (物流配送)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	logistics_delivery_id	int	10	0	N	Y		物流配送ID
2	order_number	varchar	64	0	Y	N		订单号
3	product_name	varchar	64	0	Y	N		商品名称
4	purchase_quantity	varchar	64	0	Y	N		购买数量
5	total_transaction_amount	double	11	2	Y	N	0.00	交易总额
6	the_date_of_issuance	date	10	0	Y	N		发货日期
7	delivery_number	varchar	30	0	Y	N		配送订单
8	ordinary_users	int	10	0	Y	N	0	普通用户
9	shipping_address	varchar	64	0	Y	N		收货地址
10	delivery_status	varchar	64	0	Y	N		配送状态
11	signing_status	varchar	64	0	Y	N		签收状态
12	recommend	int	10	0	N	N	0	智能推荐
13	contact_name	varchar	255	0	Y	N		联系人名字
14	merchant_id	int	10	0	Y	N		商家id
15	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
16	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表notice (公告)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	notice_id	mediumint	8	0	N	Y		公告id：
2	title	varchar	125	0	N	N		标题：
3	content	longtext	2147483647	0	Y	N		正文：
4	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
5	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表order (订单)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	order_id	int	10	0	N	Y		订单ID：
2	order_number	varchar	64	0	Y	N		订单号：
3	goods_id	mediumint	8	0	N	N		商品id：[0,8388607]
4	title	varchar	32	0	Y	N		商品标题：
5	img	varchar	255	0	Y	N		商品图片：
6	price	double	10	2	N	N	0.00	价格：
7	price_ago	double	10	2	N	N	0.00	原价：
8	num	int	10	0	N	N	1	数量：
9	price_count	double	8	2	N	N	0.00	总价：
10	norms	varchar	255	0	Y	N		规格：
11	type	varchar	64	0	N	N	未分类	商品分类：
12	contact_name	varchar	32	0	Y	N		联系人姓名：
13	contact_email	varchar	125	0	Y	N		联系人邮箱：
14	contact_phone	varchar	11	0	Y	N		联系人手机：
15	contact_address	varchar	255	0	Y	N		收件地址：
16	postal_code	varchar	9	0	Y	N		邮政编码：
17	user_id	int	10	0	N	N	0	买家ID：
18	merchant_id	mediumint	8	0	N	N	0	商家ID：
19	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
20	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
21	description	varchar	255	0	Y	N		描述：[0,255]用于产品规格描述
22	state	varchar	16	0	N	N	待付款	订单状态：待付款，待发货，待签收，已签收，待退款，已退款，已拒绝，已完成
23	remark	text	65535	0	Y	N		订单备注
24	delivery_state	varchar	16	0	Y	N	未配送	发货状态：未配送，已配送
25	vip_discount	double	11	2	Y	N	0.00	折扣

表peripheral_goods (周边商品)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	peripheral_goods_id	int	10	0	N	Y		周边商品ID
2	product_specifications	varchar	64	0	Y	N		商品规格
3	commodity_manufacturers	varchar	64	0	Y	N		商品厂商
4	hits	int	10	0	N	N	0	点击数
5	praise_len	int	10	0	N	N	0	点赞数
6	cart_title	varchar	125	0	Y	N		标题：[0,125]用于产品html的标签中
7	cart_img	text	65535	0	Y	N		封面图：用于显示于产品列表页
8	cart_description	varchar	255	0	Y	N		描述：[0,255]用于产品规格描述
9	cart_price_ago	double	8	2	N	N	0.00	原价：[1]
10	cart_price	double	8	2	N	N	0.00	卖价：[1]
11	cart_inventory	int	10	0	N	N	0	商品库存
12	cart_type	varchar	64	0	N	N	未分类	商品分类：
13	cart_content	longtext	2147483647	0	Y	N		正文：产品的主体内容
14	cart_img_1	text	65535	0	Y	N		主图1：
15	cart_img_2	text	65535	0	Y	N		主图2：
16	cart_img_3	text	65535	0	Y	N		主图3：
17	cart_img_4	text	65535	0	Y	N		主图4：
18	cart_img_5	text	65535	0	Y	N		主图5：
19	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
20	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表praise (点赞)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	praise_id	int	10	0	N	Y		点赞ID：
2	user_id	int	10	0	N	N	0	点赞人：
3	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
4	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
5	source_table	varchar	255	0	Y	N		来源表：
6	source_field	varchar	255	0	Y	N		来源字段：
7	source_id	int	10	0	N	N	0	来源ID：
8	status	bit	1	0	N	N	1	点赞状态:1为点赞，0已取消

表sensitive_vocabulary (敏感词汇)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	sensitive_vocabulary_id	int	10	0	N	Y		敏感词汇ID
2	sensitive_vocabulary	varchar	64	0	Y	N		敏感词汇
3	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
4	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表slides (轮播图)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	slides_id	int	10	0	N	Y		轮播图ID：
2	title	varchar	64	0	Y	N		标题：
3	content	varchar	255	0	Y	N		内容：
4	url	varchar	255	0	Y	N		链接：
5	img	varchar	255	0	Y	N		轮播图：
6	hits	int	10	0	N	N	0	点击量：
7	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
8	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表upload (文件上传)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	upload_id	int	10	0	N	Y		上传ID
2	name	varchar	64	0	Y	N		文件名
3	path	varchar	255	0	Y	N		访问路径
4	file	varchar	255	0	Y	N		文件路径
5	display	varchar	255	0	Y	N		显示顺序
6	father_id	int	10	0	Y	N	0	父级ID
7	dir	varchar	255	0	Y	N		文件夹
8	type	varchar	32	0	Y	N		文件类型

表user (用户账户：用于保存用户登录信息)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	user_id	mediumint	8	0	N	Y		用户ID：[0,8388607]用户获取其他与用户相关的数据
2	state	smallint	5	0	N	N	1	账户状态：[0,10](1可用\|2异常\|3已冻结\|4已注销)
3	user_group	varchar	32	0	Y	N		所在用户组：[0,32767]决定用户身份和权限
4	login_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	上次登录时间：
5	phone	varchar	11	0	Y	N		手机号码：[0,11]用户的手机号码，用于找回密码时或登录时
6	phone_state	smallint	5	0	N	N	0	手机认证：[0,1](0未认证\|1审核中\|2已认证)
7	username	varchar	16	0	N	N		用户名：[0,16]用户登录时所用的账户名称
8	nickname	varchar	16	0	Y	N		昵称：[0,16]
9	password	varchar	64	0	N	N		密码：[0,32]用户登录所需的密码，由6-16位数字或英文组成
10	email	varchar	64	0	Y	N		邮箱：[0,64]用户的邮箱，用于找回密码时或登录时
11	email_state	smallint	5	0	N	N	0	邮箱认证：[0,1](0未认证\|1审核中\|2已认证)
12	avatar	varchar	255	0	Y	N		头像地址：[0,255]
13	open_id	varchar	255	0	Y	N		针对获取用户信息字段
14	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
15	vip_level	varchar	255	0	Y	N		会员等级
16	vip_discount	double	11	2	Y	N	0.00	会员折扣

表user_group (用户组：用于用户前端身份和鉴权)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	group_id	mediumint	8	0	N	Y		用户组ID：[0,8388607]
2	display	smallint	5	0	N	N	100	显示顺序：[0,1000]
3	name	varchar	16	0	N	N		名称：[0,16]
4	description	varchar	255	0	Y	N		描述：[0,255]描述该用户组的特点或权限范围
5	source_table	varchar	255	0	Y	N		来源表：
6	source_field	varchar	255	0	Y	N		来源字段：
7	source_id	int	10	0	N	N	0	来源ID：
8	register	smallint	5	0	Y	N	0	注册位置:
9	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
10	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表video_center (视频中心)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	video_center_id	int	10	0	N	Y		视频中心ID
2	title	varchar	64	0	Y	N		标题
3	cover	varchar	255	0	Y	N		封面
4	cultural_categories	varchar	64	0	Y	N		文化类别
5	moral	varchar	64	0	Y	N		寓意
6	origin	varchar	64	0	Y	N		发源地
7	related_videos	varchar	255	0	Y	N		相关视频
8	details_introduction	longtext	2147483647	0	Y	N		详情介绍
9	hits	int	10	0	N	N	0	点击数
10	praise_len	int	10	0	N	N	0	点赞数
11	recommend	int	10	0	N	N	0	智能推荐
12	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
13	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

3.4 本章小结

整个基于Vue的非物质文化遗产系统的需求分析主要对系统总体架构以及功能模块的设计，通过建立E-R模型和数据库逻辑系统设计完成了数据库系统设计。

4 系统详细设计与实现

基于Vue的非物质文化遗产系统的详细设计与实现主要是根据前面的基于Vue的非物质文化遗产系统的需求分析和基于Vue的非物质文化遗产系统的总体设计来设计页面并实现业务逻辑。主要从基于Vue的非物质文化遗产系统界面实现、业务逻辑实现这两部分进行介绍。

4.1 登录用户功能模块

4.1.1 用户注册界面

用户点击首页右上角“登录”进入页面后点击下方的“没有账户，创建一个账户吧！”进入注册页面填写账号、密码、确认密码、昵称、邮箱、身份等信息后点击“立即注册”按钮，系统会对输入的信息进行验证，验证通过后即可完成注册。其界面展示如下图4-1所示。

图4-1 用户注册界面图

注册的代码如下：

/**

* 注册

* @param user

* @return

@PostMapping("register")

public Map<String, Object> signUp(@RequestBody User user) {

// 查询用户

Map<String, String> query = new HashMap<>();

Map<String,Object> map = JSON.parseObject(JSON.toJSONString(user));

query.put("username",user.getUsername());

List list = service.selectBaseList(service.select(query, new HashMap<>()));

if (list.size()>0){

return error(30000, "用户已存在");

}

map.put("password",service.encryption(String.valueOf(map.get("password"))));

service.insert(map);

return success(1);

}

4.1.2 用户登录界面

用户注册后可以通过自己的账户名和密码进行登录的，点击首页右上角的“登录”进入页面输入自己的用户名和密码信息并点击“登录”按钮后，系统会对输入的信息进行验证，验证通过后即可完成登录。其界面如下图4-2所示。

图4-2用户登录界面图

登录的代码如下：

/**

* 登录

* @param data

* @param httpServletRequest

* @return

@PostMapping("login")

public Map<String, Object> login(@RequestBody Map<String, String> data, HttpServletRequest httpServletRequest) {

log.info("[执行登录接口]");

String username = data.get("username");

String email = data.get("email");

String phone = data.get("phone");

String password = data.get("password");

List resultList = null;

Map<String, String> map = new HashMap<>();

if(username != null && "".equals(username) == false){

map.put("username", username);

resultList = service.selectBaseList(service.select(map, new HashMap<>()));

}

else if(email != null && "".equals(email) == false){

map.put("email", email);

resultList = service.selectBaseList(service.select(map, new HashMap<>()));

}

else if(phone != null && "".equals(phone) == false){

map.put("phone", phone);

resultList = service.selectBaseList(service.select(map, new HashMap<>()));

}else{

return error(30000, "账号或密码不能为空");

}

if (resultList == null || password == null) {

return error(30000, "账号或密码不能为空");

}

//判断是否有这个用户

if (resultList.size()<=0){

return error(30000,"用户不存在");

}

User byUsername = (User) resultList.get(0);

Map<String, String> groupMap = new HashMap<>();

groupMap.put("name",byUsername.getUserGroup());

List groupList = userGroupService.selectBaseList(userGroupService.select(groupMap, new HashMap<>()));

if (groupList.size()<1){

return error(30000,"用户组不存在");

}

UserGroup userGroup = (UserGroup) groupList.get(0);

//查询用户审核状态

if (!StringUtils.isEmpty(userGroup.getSourceTable())){

String res = service.selectExamineState(userGroup.getSourceTable(),byUsername.getUserId());

if (res==null){

return error(30000,"用户不存在");

}

if (!res.equals("已通过")){

return error(30000,"该用户审核未通过");

}

//查询用户状态

if (byUsername.getState()!=1){

return error(30000,"用户非可用状态，不能登录");

}

String md5password = service.encryption(password);

if (byUsername.getPassword().equals(md5password)) {

// 存储Token到数据库

AccessToken accessToken = new AccessToken();

accessToken.setToken(UUID.randomUUID().toString().replaceAll("-", ""));

accessToken.setUser_id(byUsername.getUserId());

Duration duration = Duration.ofSeconds(7200L);

redisTemplate.opsForValue().set(accessToken.getToken(), accessToken,duration);

// 返回用户信息

JSONObject user = JSONObject.parseObject(JSONObject.toJSONString(byUsername));

user.put("token", accessToken.getToken());

JSONObject ret = new JSONObject();

ret.put("obj",user);

return success(ret);

} else {

return error(30000, "账号或密码不正确");

}

4.1.3 前台首页界面

系统首页以上中下的布局进行展示，正上方是系统的导航栏，中间是轮播图，下面是周边产品、天文新闻等信息。其主界面展示如下图4-3所示。

图4-3 前台首页界面图

4.1.4 文化论坛界面

用户点击导航栏的“文化论坛”进入页面可点击论坛列表中的某一论坛可以查看该论坛的详情并可以进行点赞、收藏操作；点击“发布内容”进入页面填写标题、分类、正文等信息后点击“提交”即可完成论坛的发布。其界面如下图4-4所示。

图4-4文化论坛界面图

4.1.5 资讯文章界面

用户点击导航栏的“资讯文章”进入页面查看资讯文章列表信息，点击列表中某一资讯文章可以进入页面查看该资讯文章的详细信息并可以进行点赞、收藏、发表评论操作。其界面如下图4-5所示。

图4-5资讯文章界面图

4.1.6 周边商品界面

用户点击导航栏的“周边商品”进入页面查看商品列表信息，点击列表中某一商品可以进入页面查看该商品详情；点击“立即购买”进入页面确认商品信息后完成支付即可完成该商品的购买。其界面如图4-6所示。

图4-6 周边商品界面图

4.1.7 视频中心界面

用户点击导航栏的“视频中心”进入页面查看视频列表信息，点击列表中某一视频可以进入页面查看该视频详情并进行点赞、收藏和发表评论操作；点击“查看视频”可以在线浏览视频。其界面如图4-7所示。

图4-7 视频中心界面图

4.1.8 文化活动界面

用户点击导航栏的“文化活动”进入页面可以查看文化活动列表信息，点击列表中某一文化活动进入页面可以查看该活动的详细信息并可以进行点赞、收藏和发表评论操作。其界面如下图4-8所示：

图4-8文化活动界面图

4.1.9 现场演出界面

用户点击导航栏的“现场演出”进入页面可以查看现场演出列表信息，点击列表中某一演出进入页面可以查看该演出的详细信息并可以进行点赞和发表评论操作。其界面如下图4-9所示：

图4-9现场演出界面图

4.1.10 个人中心界面

用户点击右上角我的头像的下拉按钮“个人中心”进入页面可以查看和管理个人中心中的个人首页、订单配送、论坛列表和收藏信息。可以对订单配送信息进行查询和重置操作；可以对论坛列表信息进行查询、重置和删除操作；可以查看或删除收藏列表信息。其界面如下图4-10所示：

图4-10个人中心界面图

4.2 管理员功能模块

4.2.1 视频中心管理界面

管理员点击“视频中心管理”下方的“视频中心列表”进入页面可以查看列表中某一视频的详情和评论信息，可以对列表信息进行查询、重置和删除操作；点击“视频中心添加”进入页面填写标题、类型、详细介绍等信息后点击“提交”即可完成视频中心的添加。其界面如下图4-11所示。

图4-11视频中心管理界面图

添加代码如下：

@PostMapping("/add")

@Transactional

public Map<String, Object> add(HttpServletRequest request) throws IOException {

service.insert(service.readBody(request.getReader()));

return success(1);

}

public Map<String, Object> addMap(Map<String,Object> map){

service.insert(map);

return success(1);

}

删除的代码如下：

@RequestMapping(value = "/del")

@Transactional

public Map<String, Object> del(HttpServletRequest request) {

service.delete(service.readQuery(request), service.readConfig(request));

return success(1);

}

public void delete(Map<String,String> query,Map<String,String> config){

QueryWrapper wrapper = new QueryWrapper<E>();

toWhereWrapper(query, "0".equals(config.get(FindConfig.GROUP_BY)),wrapper);

baseMapper.delete(wrapper);

log.info("[{}] - 删除操作：{}",wrapper.getSqlSelect());

}

4.2.2 文化音乐管理界面

管理员点击“文化音乐管理”下方的“文化音乐列表”进入页面可以查看列表中某一音乐的详情和评论信息，可以对列表信息进行查询、重置和删除操作；点击“文化音乐添加”进入页面填写音乐名称、文化类别、发源地等信息后点击“提交”即可完成文化音乐的添加。其界面如下图4-12所示。

图4-12文化音乐管理界面图

4.2.3 文化活动管理界面

管理员点击“文化活动管理”下方的“文化活动列表”进入页面可以查看列表中某一活动的详情和评论信息，可以对列表信息进行查询、重置和删除操作。点击“文化活动添加”进入页面填写活动名称、文化类别、活动寓意等信息后点击“提交”即可完成文化活动的添加。其界面如下图4-13所示。

图4-13文化活动管理界面图

4.2.4 系统管理界面

管理员点击系统管理下方的“轮播图管理”进入页面可以查看轮播图列表某一轮播图的详情；可以对轮播图列表信息进行查询、添加和删除操作。点击列表上方的“添加”按钮进入页面上传轮播图图片、填写标题后后点击“提交”即可完成轮播图的添加。其界面如下图4-14所示。

图4-14系统管理界面图

图片上传的代码如下：

@PostMapping("/upload")

public Map<String, Object> upload(@RequestParam("file") MultipartFile file) {

log.info("进入方法");

if (file.isEmpty()) {

return error(30000, "没有选择文件");

}

try {

//判断有没路径，没有则创建

String filePath = System.getProperty("user.dir") + "/src/main/resources/static/";

File targetDir = new File(filePath);

if (!targetDir.exists() && !targetDir.isDirectory()) {

if (targetDir.mkdirs()) {

log.info("创建目录成功");

} else {

log.error("创建目录失败");

}

String fileName = file.getOriginalFilename();

File dest = new File(filePath + fileName);

log.info("文件路径:{}", dest.getPath());

log.info("文件名:{}", dest.getName());

file.transferTo(dest);

JSONObject jsonObject = new JSONObject();

jsonObject.put("url", "/api/upload/" + fileName);

return success(jsonObject);

} catch (IOException e) {

log.info("上传失败：{}", e.getMessage());

}

return error(30000, "上传失败");

}

4.2.5 资源管理界面

管理员点击资源管理下方的“资讯文章”进入页面可以查看资讯文章列表中某一资讯文章的详情和评论信息，可以对资讯文章信息进行查询、重置、添加和删除操作；点击资源管理下方的“资讯分类”进入页面可以查看资讯分类列表中某一分类详情，可以对资讯分类信息进行查询、重置、添加和删除操作。其界面如下图4-15所示。

图4-15资源管理界面图

4.2.6 商城管理界面

管理员点击商城管理下方的“周边商品”进入页面可以查看商品列表中某一商品的详情和评论信息，可以对商品信息进行查询、重置、添加和删除操作；点击商城管理下方的“分类列表”进入页面可以查看分类列表中某一分类详情，可以对分类类别信息进行查询、重置、添加和删除操作；点击“订单列表”进入页面可以查看列表中某一订单详情，可以对订单列表信息进行查询、重置和删除操作；点击“订单配送”进入页面可以查看列表中某一订单配送详情，可以对订单配送信息进行查询、重置和删除操作。其界面如下图4-16所示。

图4-16商城管理界面图

5 系统测试

5.1 系统测试目的

无论什么样的系统，测试都至关重要，通过测试可以检查出潜藏的缺陷，从而确保系统的性能和稳定性，避免Bug的出现，并确保系统的功能和性价比达到预期的要求。

5.2 系统测试用例

系统测试包括：用户登录功能测试、资讯文章查看功能、轮播图信息添加功能、密码修改功能测试，如表5-1、5-2、5-3、5-4所示：

用户登录功能测试：

表5-1 用户登录功能测试表

用例名称	用户登录系统
目的	测试用户通过正确的用户名和密码可否登录功能
前提	未登录的情况下
测试流程	1) 进入登录页面 2) 输入正确的用户名和密码
预期结果	用户名和密码正确的时候，跳转到登录成功界面，反之则显示错误信息，提示重新输入
实际结果	实际结果与预期结果一致

资讯文章查看功能测试：

表5-2 资讯文章查看功能测试表

用例名称	资讯文章查看
目的	测试资讯文章查看功能
前提	用户登录
测试流程	点击资讯文章
预期结果	可以查看到所有资讯文章信息
实际结果	实际结果与预期结果一致

轮播图信息添加界面测试：

表5-3 轮播图信息添加界面测试表

用例名称	轮播图信息添加测试用例
目的	测试轮播图信息添加功能
前提	管理员用户正常登录情况下
测试流程	1）管理员点击系统管理下方的轮播图管理，然后点击添加进入添加页面填写信息。 2）填写完毕后点击进行提交。
预期结果	提交以后，页面首页会显示新的轮播图信息

密码修改功能测试：

表5-4 密码修改功能测试表

用例名称	密码修改测试用例
目的	测试登录用户密码修改功能
前提	登录用户用户正常登录情况下
测试流程	1）点击我的头像下拉菜单的“我的账户”，点击修改密码 2）修改后点击提交。
预期结果	使用新的密码可以登录
实际结果	实际结果与预期结果一致

5.3 系统测试结果

通过编写基于Vue的非物质文化遗产系统的测试用例，已经检测完毕用户登录功能测试、资讯文章查看功能、轮播图信息添加功能、密码修改功能测试，通过这四大模块的测试为基于Vue的非物质文化遗产系统的后期推广运营提供了强力的技术支撑。

结论

在基于Vue的非物质文化遗产系统开发之前，需要先对用户的具体需求进行分析。包括系统的可行性分析、功能需求分析以及其他需求等。在可行性分析过程中，对系统实现的技术性、经济性等方面进行了分析。总体上证明了系统实施的可行性。

本文总结了基于Vue的非物质文化遗产系统开发背景与意义，然后阐述了系统的具体业务需求，并根据系统需求对系统结构以及功能模块等进行了详细地设计，将整个系统划分为多个不同的功能模块。在分析系统功能需求时，对整个系统的总体架构以及功能模块等进行了分析，并选择合适的系统开发技术完成了对各个模块的开发工作。系统开发完成之后进行了部署，同时进行了系统的测试过程，通过测试证明了系统在功能以及性能等方面都达到了预期的要求，具有较高的稳定性与可靠性。

参考文献

[1]武际斌,段良华,金永亮.基于Vue+SpringBoot的课程思政素材库的设计与实现[C]//百色学院马克思主义学院.2023年思想政治教育论坛论文集.山东信息职业技术学院;,2023:3.

[2]姜一波.基于SpringBoot+Vue的在线考试系统设计与实现[J].无线互联科技,2023,20(23):68-71.

[3]郭艳娜.西安市非物质文化遗产文化基因的系统挖掘与保护利用研究[J].新西部,2023,(10):106-109.

[4]常媛媛,吴志清,武杰.大运河非物质文化遗产保护的系统研究——以体育非遗的保护为主线[J/OL].系统科学学报,2024,(03):131-135[2024-02-29].

[5]李蕊,黄天祺.基于GIS技术的非物质文化遗产研究方法与视阈分析——以西南地区非遗为例[J].中国文化产业评论,2023,33(02):418-433.

[6]沈罗兰,程晓曼,高菡.非物质文化遗产数字博物馆设计[J].收藏与投资,2023,14(07):143-145.

[7]罗江珍.非物质文化遗产的系统性保护与差异化传承探究——以云南省昭通市为例[J].百花,2023,(04):96-99.

[8]邱欣妍,宗诚.非物质文化遗产可视化传承路径探析[J].佳木斯大学社会科学学报,2023,41(02):96-100.

[9]罗江珍.非物质文化遗产的系统性保护与差异化传承探究——以云南省昭通市为例[J].民族音乐,2023,(01):94-96.

[10]纪聪聪.非物质文化遗产进入高职学前教育专业美术课程资源系统的路径[J].匠心,2023,(01):65-67.

[11]林继富,闫静.非物质文化遗产系统性保护内涵建设与实践模式研究[J].文化遗产,2023,(01):1-9.

[12]姚国章,刘增燕.国外非物质文化遗产数字化保护与传承实践借鉴[J].东南文化,2022,(06):179-185.

[13]贾英华.推动地方非物质文化遗产系统性保护传承——以山东省莱州市为例[J].大众文艺,2022,(18):1-3.

[14]董丽丽.信息化背景下非物质文化遗产档案资源跨机构集成策略研究[J].档案管理,2022,(02):41-42.

[15]姚国章,薛银.非物质文化遗产保护面临的挑战与数字化保护的重点[J].中国民族博览,2021,(24):97-99

[16]朱焱,邓述为.基于Java的基于Vue的非物质文化遗产系统[J].电脑编程技巧与维护,2022,(12):84-86.

[17]Hejing W .Commerce Middle Office Management System Based on Springboot[J].International Journal of Advanced Network, Monitoring and Controls,2022,7(2):32-45.

[18]邓阳名,顾潇,梁爱媚.基于Java语言的数据库访问技术应用研究[J].中国新通信,2023,25(08):83-85.

[19]Yang Y .Design and Implementation of Student Information Management System Based on Spring boot[J].Advances in Computer, Signals and Systems,2022,6(6):

[20]Liang C .School Vehicle Management System Based on JAVA Language[J].Academic Journal of Computing Information Science,2023,6(9):

致谢

首先，我要感谢我的论文指导老师。在论文完成的整个过程中，指导老师始终给予我无微不至的关爱与指导。在论文写作的过程中，导师那耐心细致的指导，以及提出的具有建设性的意见，都给予了我极大的帮助，让我受益匪浅。导师严谨的治学态度、敬业精神以及高水平的教学能力，都给我树立了追求卓越的典范，这对我以后的人生道路和学业成就都产生了极大的积极影响。

此外，我还要感谢我班的同学们，他们既是我的同窗好友，又是我的良师益友。正是由于你们的支持和关怀，使得我在大学期间的学习和生活都变得异常充实。感谢那些在大学期间给予我帮助的所有老师和同学们，是你们给予了我在学业道路上的前进动力。

当然，我也不能忘记我的父母，是他们用无私的爱抚养我成人。你们的养育之恩我将永生难忘，将来我一定会用我的成绩回报你们。在成长的道路上，我会不断努力，不负众望，用实际行动来回报你们对我的期望。

点赞+收藏+关注 →私信领取本源代码、数据库

weixin_MZ_ZXD001

关注

30
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
基于Vue的非物质文化遗产系统的设计与实现--附源码88713

本文首先阐述了系统的研究背景和意义；然后对系统进行了可行性、功能性等分析；接着详细介绍了系统的设计原理和实现细节，包括系统架构设计、系统功能结构设计、数据库设计等；最后对系统进行了部署和测试。通过本系统的的成功实施，不仅为非物质文化遗产的保护和传承提供了有力支持，也为其他类似系统的设计和实现提供了有益的参考。
复制链接

扫一扫