摘 要
随着网络游戏的快速发展，相关的附属产业也不断出现和兴起，游戏饰品的交易需求增加，游戏饰品交易传统模式很不方便，需要线下见面交易，成本高，周期长，本课题研究的重点是为玩家提供一个安全快捷的游戏饰品交易平台。能够实现用户的注册与登录、商品信息的显示、商品详情的显示、商品信息的查询与筛选、商品的收藏、商品的购买、用户信息的更改。经过自己查询相关书籍以及运用在学校学到的知识，决定开发系统选择B/S模式完成系统功能开发。首先，使用Vue框架搭建了前端页面，然后用Node.js搭建了后端页面，最后用MongoDB数据库进行数据的存放，该平台使用方便，开发简单，有良好的推广和应用前景，为其他游戏饰品交易平台的设计提供了新的方法和思路。
关键词：游戏饰品交易平台;Vue框架;Node.js;数据库
1.3 研究内容与解决的主要问题
（1）研究内容
基于Vue框架，设计游戏饰品交易平台，具体要求实现如下功能：
用户注册：提供了注册功能。用户通过输入用户名、密码后完成注册。
用户登录：提供了登录功能。进入登录页面，输入用户名和密码。如果都正确进入系统，否则提示错误。
商品列表的浏览：可以在首页与饰品市场浏览商品。
商品详情的浏览：提供了对商品详情的浏览功能。包括商品名称、商品价格，卖家等信息。
商品信息的搜索与筛选：提供了对商品信息搜索和筛选的功能。
商品分类管理：提供了商品分类功能。如匕首、手枪、步枪等分类。
用户信息管理：提供了用户修改个人信息的功能，用户可以通过个人中心修改自己的个人信息。如头像、用户名、密码。
商品收藏：提供了商品收藏的功能，用户可以在商品详情页面对商品进行收藏，并且在我的收藏查看已经收藏的商品。
商品订单：用户可以我的订单查看已经购买的商品信息。
（2）解决问题
根据不同模块对应的功能，对各个功能模块进行优化细分以及编写代码。搜集资料和数据以及录入对应的数据库。系统界面的设计，通过学习UI设计课程以及百度ElementUI相关信息，设计系统界面环节。根据游戏饰品交易平台的架构模式，下载和学习相关开发软件等。
2.2 系统框架和技术
本游戏饰品交易平台是基于Vue框架进行开发的，Vue是一套用于构建用户界面的渐进式框架。Vue采用自底向上增量开发的设计，提供了MVVM数据绑定和可组合的组件系统，具有简单、灵活的API，通过简单的API可实现响应式的数据绑定和可组合的视图组件。数据交互采用Nodejs实现，Nodejs是能够在服务器端运行javascript的开发源代码、跨平台运行环境[16]。
2.2.1 vue介绍
Vue（发音 /vjuː/，类似于 view）是一个用于构建用户界面的渐进式JavaScript框架。Vue通过一系列的库和可重用的组件，使开发 Web 应用变得更加简单。它是由尤雨溪创建的，于2014年首次发布。Vue具有易学易用、轻量级、灵活和可组件化的特点，成为了当前最受欢迎的前端开发框架之一。
与其他 JavaScript 框架类似，Vue的核心库（vue.js）是以 MVVM 框架为核心，它双向绑定数据和 DOM 元素，通过虚拟 DOM 的操作使数据变化同步到页面上。Vue还提供了一系列的高级特性，如异步组件、单文件组件、路由、Vuex状态管理等等，这些都使得开发者可以更加轻松地构建复杂的单页应用程序（SPA）[17]。
Vue还拥有庞大的社区和高质量的开源组件库，如Element UI、Vuetify、Ant Design Vue等等，使得开发者可以更加轻松地开发出符合用户和设计师要求的高质量界面。
2.2.2 Node.js介绍
Node.js 是一个基于 Chrome V8 引擎的 Javascript 运行环境。 创建于2009年，由 Ryan Dahl 开始编写，是一个在服务器端运行 JavaScript 的开源平台。Node.js 运行在一个单一进程上并保存着事件驱动、非阻塞的特性，因此可以实现高并发和低延迟的服务端应用程序。
Node.js 的核心模块提供了许多惊人的功能，包括文件系统I/O、网络I/O、加密、流处理以及其它一些常见的编程任务。Node.js 包管理器 npm，提供了成千上万的开源库和工具供用户使用，覆盖了广泛的应用场景。
以下是 Node.js 的一些特点：
- 事件驱动：Node.js 使用事件驱动模型，非阻塞式 I/O 操作的回调函数在异步调用时执行。这使得 Node.js 可以高效地处理并发请求。
- 单线程：Node.js 使用单一进程的模型，但是通过事件轮询（Event Loop）和轻量级的线程（Worker Threads）机制实现并发。
- 高效、可扩展：Node.js 构建在 Chrome V8 引擎之上，可提供出色的性能，支持运行在分布式或云计算中，因此可以轻松的扩展。
- 跨平台：Node.js 可在多个平台上运行，包括 Windows、Linux、macOS 和 Unix 等。
- 社区活跃：Node.js 在开源社区中很受欢迎，并且有广泛的社区支持。
Node.js 广泛用于构建 Web 后端服务、命令行工具、实时数据处理、物联网（IoT）应用程序等各个领域。
4.2 系统功能模块设计
用户可以对商品进行一系列操作，下面是对游戏商品交易平台每个部分分别进行的详细设计。
4.2.1 注册登录模块
为了平台的安全，没有登录的用户，不能进行平台的相关操作，在注册并登录成功后，才能使用系统的功能。用户在注册表单中输入的信息都会做验证，确保输入信息合法，才能调用注册接口，向后台发送请求。登录时的表单也一样，需要做验证，这样可以减少请求的发送，提高系统性能。
4.2.2 商品模块
登录以后，用户可以查看商品列表以及商品详情，也可以对商品进行搜索与筛选，找到自己想要的商品，避免了一个一个商品的查找，更加的方便快捷。同时也可以对自己哦喜欢的商品进行购买与收藏，我的订单与我的收藏在个人中心查看。
4.2.3用户模块
用户可以在个人中心进行个人信息的修改，比如头像、昵称、密码，并且可以查看我的订单与收藏，增加了用户的体验感。
5.2 登录功能实现
用户输入账号与密码进行登录，如果账号或者密码输入错误，则会登录失败，登录成功以后会跳转到首页。登录失败图如图5.3所示，登录成功图如图5.4所示。
图5.3 登录失败图
图5.4 登录成功图
5.3 商品列表实现
用户登录以后可以看到首页与饰品市场展示的商品，首页商品展示图如图5.5所示，饰品市场商品展示图如图5.6所示
图5.5 首页商品图
图5.6 饰品市场商品图
5.4 商品详情实现
用户点击商品可以看见商品的详细信息，包括名称，卖家以及价格，商品详情图如图5.7所示
图5.7 商品详情图
5.5 商品搜索实现
用户可以在右上角进行关键字查询，搜索自己想搜的饰品名称，AWP的搜索结果如图5.8所示
图5.8 商品搜索结果图
5.6 商品筛选实现
用户可以在左上角进行商品的筛选，点击哪个就是进行哪个商品的筛选，商品P90的筛选结果如图5.9所示
图5.9 商品筛选结果图
注：展示部分文档内容和系统截图，需要完整的视频、代码、文章和安装调试环境请私信up主。
目 录
致谢 25
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
