基于Vue+Node的校内闲置物品回收管理系统

 

摘 要

随着循环经济的发展，国家对绿色环保进一步推动环保政策，一批批绿色回收项目将进入校园，探索“互联 +回收”的回收模式与路径，从而推动再生资源回收体系向校园延伸。高校人口密集，作为一个特殊且庞大的大学生群体，经济能力逐渐独立，消费能力强，并且追求新颖多样的物品，因而每天产生闲置物品的数量是十分庞大的。其中有一部分是可回收再利用的，这些闲置资源如果不及时处理，既浪费了资源又占用了我们的生活空间。尤其是在校园，一个有限的集体生活空间，如果不及时处理，肯定对大学生生活造成很大的影响，所以对于一个新生的及时性的闲置物品回收渠道是一个难得的机遇。

校内闲置物品回收管理系统的主要使用者分为管理员、和用户，实现功能包括：首页、用户管理（管理员、用户）、更多管理（废品回收管理、分类管理、积分记录、排行榜以及订单表管理）由于本系统的功能模块设计比较全面，所以使得整个校内闲置物品回收管理系统的过程得以完善。本系统的使用可以实现垃圾回收的信息化，可以方便管理员进行更加方便快捷的管理，可以提高垃圾回收的管理效率。

关键词：Node；闲置物品回收；Vue

Vue + node based management system for school idle goods recycling

Abstract

With the development of circular economy, the state further promotes environmental protection policy for green environment. A batch of green recycling projects will enter the campus, explore the “Internet plus recovery” recycling mode and path, thereby promoting the recycling system of renewable resources to the campus. Colleges and universities are densely populated. As a special and huge group of college students, their economic ability is gradually independent, their consumption ability is strong, and they pursue novel and diverse goods. Therefore, the number of idle goods produced every day is very large. Some of them can be recycled. If these idle resources are not handled in time, they will not only waste resources but also occupy our living space. Especially on campus, if a limited collective living space is not handled in time, it will certainly have a great impact on the life of college students. Therefore, it is a rare opportunity for a freshman’s timely recycling channel of idle goods.

The main users of the school idle goods recycling management system are divided into administrators, and users. The functions include: home page, user management (administrators, users), more management (waste recycling management, classification management, score record, ranking list and order form management). The functional module design of the system is relatively comprehensive, so the process of the whole school idle goods recycling management system can be improved. The use of this system can realize the informatization of waste recycling, facilitate the administrator to manage more conveniently and quickly, and improve the management efficiency of waste recycling.

Key words ：Node； Recovery of idle goods; Vue

 目  录

摘 要

1 绪论

1.1研究背景与意义

1.2国内外研究现状

1.3研究内容

2 相关技术介绍

2.1 koa框架

2.2 Vue.js主要功能

2.3 MVVM模式介绍

2.4 B/S体系工作原理

2.5 Mysql数据库

2.6 koa框架优点

2.7JavaScript 运行模式

3 系统分析

3.1 可行性分析

3.1.1 技术可行性

3.1.2经济可行性

3.1.3操作可行性

3.2 系统性能分析

3.3 系统功能分析

3.4系统流程分析

3.4.1登录流程

3.4.2注册流程

3.4.3添加信息流程

3.4.4删除信息流程

4　系统设计

4.1系统概要设计

4.2系统结构设计

4.3系统顺序图设计

4.3.1登录模块顺序图

4.3.2添加信息模块顺序图

4.4数据库设计

4.4.1数据库E-R图设计

4.4.2数据库表设计

5 系统详细设计

5.1系统功能模块

6 系统测试

6.1 测试定义

6.2 测试目的

6.3测试方案

（1）模块测试

（2）集成测试：

（3）验收测试：

6.4系统分析

7 结论

参考文献

致谢

1 绪论

1.1研究背景与意义

1.2国内外研究现状

随着我国经济的持续发展，人们的生活水平不断提高，当代大学生的消费能力也日渐增强，在校生有些不用的东西丢在寝室里成了鸡肋。据有关资料显示全.国每年约有3亿元毕业生闲置物资，因找不到再利用渠道而被浪费,其中有相当一部分资源对低年级的同学有着特殊的价值，与此同时，低年级的同学，又得花更高的价钱购置同类的物品，资源浪费严重。学生们(尤其是毕业生)高声呼吁，“节约型 会”建设应从学生抓起,学校及 会应建立学生物资、闲置物品等回收、交易机制，最大化利用资源。因此，创建校园内闲置物品回收管理系统，是建设节约型校园的重要手段。本系统采用Vue+Node.技术进行开发，通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，项目前端通过栅格布局实现响应式，可适应PC端、平板端、手机端等不同屏幕大小尺寸的完美布局展示。此系统的开发可更有助于校园闲置物品的回收利用，以达到资源的充分节约利用。

1.3研究内容

该校内闲置物品回收管理系统的开发和设计根据用户的实际情况出发，对系统的需求进行了详细的分析，然后进行系统的整体设计，最后通过测试使得系统设计的更加完整，可以实现系统中所有的功能，在开始编写论文之前亲自到图书馆借阅Vue框架书籍，MYSQL数据库书籍等编程书籍，然后针对开发的校内闲置物品回收管理系统，去 上查找了很多别人做好的系统，参照他们的设计结果，来对自己的系统进行更加详细的系统的设计，将系统中所有的功能结果一一列举出来，然后进行需求分析，最后对所有的功能模块进行编码，最后完成系统的整体测试，实现系统的正常运行。

这次编写的论文包含了6个部分的内容，具体内容如下：

第一部分绪论：文章主要从课题背景以及研究现状综合阐述了开发此系统的必要性。

第二部分相关技术：系统开发用到的各种技术都大致做出了简介。

第三部分系统分析：对系统的可行性分析以及对所有功能需求进行详细的分析，来查看该系统是否具有开发的可能。

第四部分系统设计：功能模块设计和数据库设计这两部分内容都有专门的表格和图片表示。

第五部分系统实现：进行系统主要功能模块的界面展示。

第六部分系统测试：测试系统的每一个功能是否能够正常运行，是否可以满足人们的需求。

2 相关技术介绍

2.1 koa框架

Node.js是一个异步的世界，官方API支持的都是callback形式的异步编程模型，这会带来许多问题，例如:1、callback嵌套问题；2、异步函数中可能同步调用callback返回数据，带来不一致性。为了解决以上问题Koa出现了。

koa是由Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的Web框架。使用koa编写web应用，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。koa不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库，使得编写Web应用变得得心应手。开发思路和express差不多，最大的特点就是可以避免异步嵌套。

阿里内部就在使用Koa框架，并在Koa基础上面做了一些扩展和封装。并且基于koa开发了一个开源框架egg。

2.2 Vue.js 主要功能：

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能驱动复杂的单页应用。

2.3  MVVM模式介绍：

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

2.4  B/S体系工作原理：

B/S架构采取浏览器请求，服务器响应的工作模式。

用户可以通过浏览器去访问Internet上由Web服务器产生的文本、数据、图片、动画、视频点播和声音等信息；

而每一个Web服务器又可以通过各种方式与数据库服务器连接，大量的数据实际存放在数据库服务器中；

从Web服务器上下载程序到本地来执行，在下载过程中若遇到与数据库有关的指令，由Web服务器交给数据库服务器来解释执行，并返回给Web服务器，Web服务器又返回给用户。在这种结构中，将许许多多的 连接到一块，形成一个巨大的 ，即全球 。而各个企业可以在此结构的基础上建立自己的Internet。

在 B/S 模式中，用户是通过浏览器针对许多分布于 络上的服务器进行请求访问的，浏览器的请求通过服务器进行处理，并将处理结果以及相应的信息返回给浏览器，其他的数据加工、请求全部都是由Web Server完成的。通过该框架结构以及植入于操作系统内部的浏览器，该结构已经成为了当今软件应用的主流结构模式。

2.5 MySQL数据库

Mysql的语言是非结构化的，用户可以在数据上进行工作。MySQL因为其速度、可靠性和适应性而备受关注。大多数人都认为在不需要事务化处理的情况下，MySQL是管理内容最好的选择。并且因为Mysql的语言和结构比较简单，但是功能和存储信息量很强大，所以得到了普遍的应用。

Mysql数据库在编程过程中的作用是很广泛的，为用户进行数据查询带来了方便。Mysql数据库的应用因其灵活性强，功能强大，所以在实现某功能时只需要一小段代码，而不像其他程序需要编写大段代码。总体来说，Mysql数据库的语言相对要简洁很多。

数据流程分析主要就是数据存储的储藏室，它是在计算机上进行的，而不是现实中的储藏室。数据的存放是按固定格式，而不是无序的，其定义就是：长期有固定格式，可以共享的存储在计算机存储器上。数据库管理主要是数据存储、修改和增加以及数据表的建立。为了保证系统数据的正常运行，一些有能力的处理者可以进行管理而不需要专业的人来处理。数据表的建立，可以对数据表中的数据进行调整，数据的重新组合及重新构造，保证数据的安全性。介于数据库的功能强大等特点，本系统的开发主要应用了Mysql进行对数据的管理。

2.6 koa框架优点

首先，借助promise和generator的能力，丢掉了callback，完美解决异步组合问题和异步异常捕获问题。

其次，koa 把express中内置的router、view 等功能都移除了，使得框架本身更轻量化。该设计有如下好处：1、把express各种中间件移植到koa是很简单的一件事；2、express 中内置的功能件未必好，比如view，想添加自己的view engine进入得做较深层次的hack，又比如router，它的效率不是最好的。koa没有内置这些，给了开发者很大的自由度，开发者都能自由发挥制作出更精细更专业的中间件。

2.7 JavaScript 运行模式

JavaScript是一种属于 络的高级脚本语言,已经被广泛用于Web应用开发,常用来为 页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1.1是一种解释性脚本语言（代码不进行预编译）。

1.2主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

1.3可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

1.4跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

1.5 JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。JavaScript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

3 系统分析

3.1 可行性分析

在系统开发之初要进行系统可行分析，这样做的目的就是使用最小成本解决最大问题，一旦程序开发满足用户需要，带来的好处也是很多的。下面我们将从技术上、操作上、经济上等方面来考虑这个系统到底值不值得开发。

3.1.1 技术可行性

本校内闲置物品回收管理系统采用Vue框架技术、java语言和MYSQL数据库进行开发设计，作为计算机专业学生，在学校期间就接触到许多关于编程方面的知识，当然也包括各种编程软件，对他们的了解度也比较系统，所以技术开发上面还是有一定把握。

3.1.2经济可行性

我在设计该系统的时候主要是从节约成本出发，然后进行具体的系统的设计，在系统的设计过程中由于采用的所有工具以及技术支持全部都是免费的，因此不需要有任何的成本就可以进行该系统的设计。所用到的所有资源都是免费的，只要有 络就可以进行下载使用，不需要支付相应的费用，因此该项目在经济方面是完全可以实行的。

3.1.3操作可行性

本人自己就是学生，程序开发经验不足，在界面设计上面不会设计太复杂，要讲究简单好看，操作上要方便，不能让用户觉得不流畅。用户一旦进入操作界面，界面上就会有相应提示，跟着操作提示就可以找到对应的功能操作模块，对于用户来说免培训就能使用。

从上面几个部分的可行性分析得出，这次开发的校内闲置物品回收管理系统在开发上面没有什么大问题，值得开发。

3.2 系统性能分析

（1）系统响应效率：页面响应时问应该在3秒以内，最长不能超过4秒，并支持至少10000人同时在线所有系统。

（2）界面简洁清晰：系统界面要求简单明了，容易操作，符合用户操作习惯。

（3）储存性高：因为校内闲置物品回收管理系统中有很多的信息需要存储，因此对于系统的存储量有很大的要求，需要有一个强大的数据库的支持才能确保所有的信息都能安全稳定的进行存储。

（4）易学性：该系统在操作上必须简单好上手，没有很多复杂的操作，只需要简单的进行学习就能操作该系统。

（5）稳定性需求：开发的校内闲置物品回收管理系统要求运行稳定，运行过程中无界面不清楚、字体模糊等现象。

（6）稳定性：开发的校内闲置物品回收管理系统要求运行稳定，运行过程中无界面不清楚、字体模糊等现象。

3.3 系统功能分析

本校内闲置物品回收管理系统主要包括两大功能模块，即管理员功能模块和用户模块。

（1）管理员模块：系统中的核心用户是系统管理员，管理员登录后，通过管理员菜单来管理后台系统。主要功能有：首页、用户管理（管理员、用户）、更多管理（新闻列表管理、分类管理、废品回收管理、订单表管理、排行榜管理、积分记录管理）等功能。管理员用例图如图3-1所示。

图3-1管理员用例图

（2）用户：首页、新闻、公告栏、废品回收、排行榜等功能。用户用例图如图3-2所示。

图3-2 用户用例图

3.4系统流程分析

3.4.1登录流程

登录模块主要满足管理员、用户的权限登录，登录流程图如图3-3所示。

图3-3 登录流程图

3.4.2注册流程

未有账 的用户可进入注册界面进行注册操作，用户注册流程图如图3-4所示。

图3-4 注册流程图

3.4.3添加信息流程

用户在添加信息时，信息编 自动生成，系统会对添加的信息进行验证，验证通过则添加至数据库，添加信息成功，反之添加失败。添加信息流程如图3-5所示。

图3-5 添加信息流程图

3.4.4删除信息流程

用户可选择要删除的信息进行信息删除操作，在删除信息时系统提示是否确定删除信息，是则删除信息成功，系统数据库将信息进行删除。删除信息流程图如图3-6所示。

图3-6 删除信息流程图

4系统设计

4.1系统概要设计

本校内闲置物品回收管理系统选择B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式。适合在互联 上进行操作，只要用户能连 ，任何时间、任何地点都可以进行系统的操作使用。系统工作原理图如图4-1所示：

图4-1 系统工作原理图

4.2系统结构设计

整个系统是由多个功能模块组合而成的，要将所有的功能模块都一一列举出来，然后进行逐个的功能设计，使得每一个模块都有相对应的功能设计，然后进行系统整体的设计。

本校内闲置物品回收管理系统结构图如图4-2所示。

图4-2 系统功能结构图

4.3系统顺序图设计