【基于ASPNET的闲置物品交易网站的设计与实现15000字（论文）】

基于ASPNET的闲置物品交易网站的设计与实现摘要：网的飞速发展，人们的生活方式也受其影响，发生了翻天覆地的变化，人们获取各类信息也越来越方便。在大学校园里，随着学生人数与经济水平的不停提高，产生了大量各种类型闲置商品与需求。因此，充分利用移动互联网开发一款校园闲置信息发布平台可以极大的方便双方选择。该系统整体基于Vuejs与ASP.net进行移动端H5开发，采用前后端分离的开发模式，使用Axios进行前后端数据交互，使得网页整体架构清晰，便于维护；网站前端使用Script语言的，使用Vuejs框架进行前端开发；后端使用ASP.net的Express框架搭配Mysql进行后端开发。在整个开发过程中使用VisualStudioCode为开发工具，通过以上技术平台完成了网站的架构设计和详细设计，并最终实现了包括闲置商品的信息的发布、修改与展示，闲置信息的全局搜索，用户注册与登陆、管理员对信息的删除，撤回，同时为了丰富网站的功能，还为其添加了校园吐槽和校园活动的相关功能。关键词：H5开发、Vuejs、ASP.net、Mysql目录引言 11.绪论 21.1选题背景及意义 21.2课题研究现状 21.3研究目的与开发意义 22.开发环境介绍 32.1前后端分离开发模式 32.2B/S模式 32.3Vuejs简介 42.4HTML5技术 42.5Mysql 43.系统分析 53.1系统可行性分析 53.1.1技术可行性 53.1.2经济可行性 53.1.3操作可行性 53.1.4法律可行性 53.2功能需求分析 53.3需求用例 73.4开发运行环境需求 113.5性能需求 114.系统概要设计 124.1系统架构设计 124.2系统架构类图 134.3系统交互图 134.4数据库概要设计 144.5系统功能设计 164.5.1注册功能设计 164.5.2登录功能设计 174.5.3找回密码功能设计 184.5.4发布信息功能设计 204.5.5浏览信息功能设计 204.5.6搜索信息功能设计 215.系统详情设计 235.1数据库文档设计 235.2系统功能具体实现 265.2.1注册功能实现 265.2.2登录功能实现 275.2.3找回密码功能实现 285.2.4发布信息功能实现 295.2.5浏览信息功能实现 305.2.6后台信息管理功能实现 316.系统的测试 326.1系统测试目的与意义 326.2测试过程 326.3测试结果分析 337.总结 34参考文献 36附录A：源程序代码 37附录B：软件使用说明 46引言2020年我国毕业大学生数量达到874万人，但是当这些大学生离开校园的时候，有许多日常用品都会选择丢弃，造成资源浪费，不利于校园循环经济的发展。为此我开发的学生闲置信息发布网站，此网站包括发布闲置信息，浏览闲置信息等功能。可以让学生在上面发布自己离校时不能带走的物品，供其他有需求的学生进行闲置商品采购，使得资源得以重复利用，让学生树立争取的消费观，同时可以让学生建立自己的市场，提高了学生的社会实际能力。1.绪论1.1选题背景及意义随着我国经济的飞速发展，高校录取学生的逐年增长，大学生数量和消费能力都在急剧增长。而在消费水平提升的同时，在校大学生对于闲置物品的处理还不够绿色，不够有效，造成了校园闲置物品的重大浪费。如今各大高校不定期的举办线下跳蚤市场进行来进行闲置物品交易，这种形式虽好，但是有很多的局限性，如闲置信息了解不及时、获取信息途径单一，使得商品信息无法做到及时的被获取，造成了大量资源的浪费。为解决大学生闲置物品问题而开发的学生闲置物品信息发布网站可以帮助大学生妥善的处理自己的闲置物品，减少资源浪费。通过使用此网站，可以使每个在校大学生用户发挥自己的主动性，可以十分便捷的发布闲置商品信息与获取闲置商品信息，还能够对同类产品进行横向对比，选择更廉价，更适合自己的闲置商品。在充分利用移动互联网资源的情况下也极其符合在校大学生的自身利益需求。最终促进校园闲置物品的重复利用，减少资源浪费为大学校园循环经济的发展，友好型、资源节约型社会的构建奉献出自己的一份力量。1.2课题研究现状应大学生的要求，全国各地的高校都为大学生开设了类似的跳蚤市场，如：陕西理工大学每年毕业季都有线下的跳蚤市场，西安电子科技大学学生会在5月15日举行跳蚤市场，西安石油大学在百度贴吧发贴举办跳蚤市场，北京市内多所大学在毕业季组织旧物甩卖。虽然全国各地大学都积极组建类似的跳蚤市场，跳蚤市场也成为了全国在校大学生绿色生活，合理规划个人物品的一个良好平台。然而，许多学校在组织活动过程中缺乏合理的规定，导致卖方无法出售，买方不敢购买，这影响了同学的积极性。同时物品的售后也没有保证，也没有明确的相关负责人来进行相关负责。要不然因为活动组织时间太长或根本没有固定的交易时间。活动的举行时间短和宣传性不足以及制度的不完善导致无法满足大学生闲置商品交易的需求，同时也会打消学生合理处理闲置货的热情，导致校园闲置商品的重复使用率无法提高。1.3研究目的与开发意义通过建设学生闲置物品信息发布网站，可以为国内的在校大学生处理闲置物品提供更多的便捷，并且能够让更多的大学生亲身参与绿色生活，为构建绿色资源型社会贡献自己的力量。而随着移动互联网渐成熟，智能手机的普及，人们已经深刻意识到互联网带给人们的便利，移动互联网已经进入了人类社会发展的各个领域，并实际发挥着十分重要的作用。学生闲置物品信息发布网站的开发充分利用了互联网资源，利用计算机对闲置物品信息进行管理，有着人工管理所没有办法比拟的优点，因此，移动互联网来管理信息成为必然。

2.开发环境介绍2.1前后端分离开发模式在早期的网站开发，前端开发及其对后端开发的依赖中，在开发过程中，前端代码经常与后端代码混合在一起，导致大量的耦合，使得整个开发过程非常繁琐、复杂。随着Ajax技术的逐渐成熟，前端和后端逐渐分离。如今的前后端分离开发模式使得前端摆脱了对后端的依赖进行单独开发，后端为前端提高数据接口，前端通过Ajax进行数据交互，解决耦合问题，大大的提高了软件开发效率。AjaxAjax进行数据交互前端开发后端开发图2.1前后端分离开发结构2.2B/S模式在网络的发展中，最常见的就是B/S结构。这种结构是联合服务器和浏览器的方式，更是在WEB的基础上的一种模式，他是是C/S结构[4]演变而来的。在我们现在在说的这种构造中，访问时的用户依据浏览器对应用进行访问，看到的是一个网页，因此前端要做的是一个信息显示界面，然后在后台进行逻辑操作，这便是三层3-tier结构了。这种结构使得客户端的电脑大层次的减少，更在一定程度上起到节约成本的目的。目前形式以及这样社会生活中，又简单又不费钱的方式是人们最喜爱的了。在B/S之后，JAVA这种脚本语言变得更高效快速了。B/S出现WWW的网站以及inter技术的普遍应用之后。在那之前使用的构造凡事已经落后了，以至于不能满足现在网络技术。现在是新时代的网络，开放互联、及时传播是她的特点，在做与互联网有关的的东西是要牢牢把握这一点。B/S结构有很多优点，其中最大的就是用户直接浏览的不是他么所看到的那些文件或是音频，而是浏览器给予的。由于数据都是在服务器中储存，并且WEB端可以有多种多样的服务器来从实现信息的交换。用户一般都是在WEB端上下载所需要的程序到本地来安装使用，不需要通过其他的用户程序，WEB服务器在这下载的时候会将数据等信息交给数据库服务器来执行，处理后还会返回给WEB端。这种三层体系结构如图2.2所示：图2.2B/S三层体系结构表示层、业务逻辑层以及数据层这三种是这个结构包含的，三者之间既关联由独立。我们顺便说一下：（1）表示层。这一层需要向访问者做内容的展示，同时接收从访问者处发过来的信息，并将其发给业务逻辑层，让它进行处理，最终把返回来的信息内容再展示给访问者。信息显示在浏览器中。（2）业务逻辑层。这一层需要对访问者发过来的信息进行处理，可以进行简单的判断或者是运算，也可能要和下一个数据层进行连接，获取到需要的信息内容之后，再传递给表示层，让它展示给访问者。这一层可以把其他两层联系在一起，进行信息的沟通交流以及传递。（3）数据层。这一层需要分析来自访问者的信息，在数据库中寻找对应的内容，或者对其中的内容进行删改，最后把正确的内容向上传递，最终展示给访问者。2.3ASP.NET简介ASP.NET是开源，跨平台，高性能，轻量级的Web应用构建框架，使用.NET构建Web应用。ASP.NET是一个开发框架，用于通过HTML、CSS、JavaScript以及服务器脚本来构建网页和网站。构建用户界面的渐进式框架前端开发框架，发展到今天已经成为前端最受欢迎的前端框架之一。它具有简介、轻量、组件化的特点，让开发者在开发过程中只关注视图层2.4HTML5技术这也是一种与语言，更是一种互联网的基础构造语言。在现阶段，没有网站不是利用这种技术开发出来的。WHATWG构造出了他，里面的组成人员认为之前使用的从静态文档出发的标准已经没有办法再在现在这样一个充满网页应用的环境中施行了。新的标准应该考虑到网页应用的发展情况，并在未来的网络世界中扮演更重要的角色。从使用者的角度考虑，使用该技术之后，其上网时的感受，不管是操作还是视觉上都会更加舒适。在手机上，使用者在没有插件的情况下应然可以玩游戏或是看视频。使用者也有了更舒适的体验。从开发者的角度考虑，该技术能够在多个系统中使用。原始的安装在手机上的应用程序，开发人员不得不因为系统的差异而开发多个软件版本，经济投入比较多，而且也需要很多管理、储存以及功能上的消耗。利用上述所说的几种脚本语言使之分散到所有的浏览器。即使我们用应用商店这种渠道来推广，也只要把做好的HTML4程序用应用的外壳包起来，不管是从时间考虑，还是从金钱考虑，投入的都要比前者少。2.5MysqlMysql在C++基础上编写的文件存储的分布式数据库软件。它开发的目的是为B/S软件的服务端提供更高服务能力，是一个能够扩展的数据存储解决方法。Mysql是一个介于关系型数据库和非关系型（NoSQL）数据库之间的软件，是性能非常好，功能最相似关系型数据库软件的非关系数据库软件。它能够存储的数据类型非常宽松，就像json的存储格式，所以它能够存储比较繁琐复杂的数据类型，Mysql最大的特征是它可以支持非常强大的查询语句，他有类似于面向对象语言的特点，Mysql还支持建立数据索引，可以实现很多关系数据库单表操作的功能。

3.系统分析3.1系统可行性分析下面对学生闲置物品信息发布网站从技术可行性、经济可行性，操作可行性和法律可行性进行分析以保证系统的正常开发。3.1.1技术可行性硬件可行性分析：学生闲置物品信息发布网站的硬件不存在特殊的要求，只需要一台可以普通性能的服务器即可保证网站的正常运行，而用户只需要一部能访问互联网的手机就可以使用此网站。因此，该信息发布网站的开发在硬件方面是可行的。软件可行性分析：学生闲置物品信息发布网站采用Mysql数据库与Node服务器都是世界一流企业或组织机构进行维护的开源软件，软件质量可靠，获取方便可以在项目中放心使用。因此，开发此网站具有很高的技术可行性。3.1.2经济可行性此次设计开发的过程中只使用了微软开源工具VisualStudioCode为代码编辑器，所用框架都是开源免费的。因此在开发软件过程，对资金要求不高，具有经济可行性。3.1.3操作可行性此网站设计使用移动端B/S架构，因此只要在手机上装浏览器就可以对网站进行浏览操作，同时此网站适配了市面上常见的手机类型，因此可以保证用户使用各种机型都可以正常访问此网站。同时网页设计简洁、易用只要熟悉手机操作的用户，都能够理解其中的内容。所以说此次的设计在操作上不存在什么困难，所以能够进行开发。3.1.4法律可行性此网站的内容符合国家相关的法律法规，没有违规内容。同时此网站所有内容都是自己设计开发，在开发工程中使用的工具和框架均为开源框架不存在侵权问题，在法律上完全具有可行性。3.2功能需求分析功能需求分析是整个开发过程中非常重要的一个环节，它是后续所有流程的基础和方向。这一环节就是对网站使用者可能提出的需求进行分析和判断，用来决定整个系统要开发的功能有哪些。整个系统的用户主要分为两类，一类是用于发布信息和查找信息的普通用户，另一类是对发布信息进行管理的管理员用户。普通用户要包括登录、注册、发布信息、搜索信息、修改信息等功能模块，管理员用户要包括登录、撤回信息、删除信息等功能模块。系统模块图如图3.1所示。系统功能图管理员用户普通用户登录注册系统功能图管理员用户普通用户登录注册发布信息查看信息修改信息个人中心登录用户管理信息管理搜索信息信息操作搜索信息图3.1功能模块图普通用户需求：（1）登录注册功能：用户在此界面填写个人信息进行登录注册，只有登录过的用户才能发布闲置商品信息和查看个人中心。（2）发布信息功能：对于已经登录的用户可以发布信息，信息总共分为出售商品、采购需求、校园吐槽、校园活动四类信息，针对不同类型的信息，用户需要填写相应的数据才能够发布。（3）修改信息功能：此功能分为两部分，一部分是修改用户自己已经发布的交易信息，另一部分是修改用户个人信息，如头像、密码等信息（4）查看信息功能：对于所有网站用户都有查看信息的权限，用户只需要在网站首页点击分类按钮，即可查看该类信息的列表，点击则会进入详情页面，用户可以在此页面查看该条信息的详细内容。（5）搜索信息功能：用户可以在首页的搜索框中通过输入标题的关键字来检索信息，此功能可以帮助用户根据自己的需求快速进行筛选。（6）个人中心功能：用户可以在首页点击“我的”进入个人中心，个人中心里面展示了当前用户发布的所有信息。同时也可以对这些信息进行修改。管理员需求：（1）登陆功能：管理员必须通过输入账号和密码进行登陆，页面登陆成功后才能进行其他操作。（2）用户管理功能：在初始情况下会有一个默认后台管理员账号，管理员通过此账号登录后可以添加和删除其他管理员账号，用户可以通过新的账号登陆进行后台管理。（3）信息管理功能：管理员登陆后可以查看每一条已经发布了的信息，这些信息的关键内容会以表格的形式进行展示（如标题，发布者，发布时间）（4）搜索信息功能：管理员通过输入关键字来检索信息，然后进行相应操作，如撤回修改，删除等操作。提高了管理效率。（5）信息操作：管理员对违规的信息进行删除和撤回，者两者的区别在于对撤回的信息，普通用户可以通过重新编辑后重新发布；而删除信息后普通用户的个人中心中也会消失此消息。3.3需求用例对普通用户所需完成的有注册、发布信息、修改账号、浏览信息的用例需求分析。（1）注册用例表3.1注册用例分析用例名称用例简介前置条件注册用例用户进入网站，点击注册按钮，进行用户信息注册。用户设备正常，网络连接正常。注册操作明细（1）通过点击按钮进入注册界面。（2）用户填写用户账号、注册的昵称、登录的密码、用户的常用手机号码、正确的手机验证码等信息。（3）点击注册按钮。（4）系统会自动校验用户填写的账号是否已被注册。（5）没有被注册提示用户注册成功否则提示注册失败。登录操作明细（1）通过点击按钮进入登录界面。（2）用户填写账号、密码、密码、图片验证码信息。（3）点击注册按钮。（4）系统校验是否登录成功。（5）若登录成功给出登录成功提示否则给出登录失败提示。（2）发布信息用例表3.2发布信息用例分析用例名称用例简介前置条件发布信息用例用户在系统中发布信息。用户成功登录，进入个人中心。发布信息明细（1）用户在个人中心中点击发布消息。（2）用户选择发布消息的类型、输入消息标题、详细描述、联系方式、上传相应的图片。（3）点击提交按钮。（3）修改账号用例表3.3修改账号用例分析用例名称用例简介前置条件修改账号用例用户在个人中心中进行账号密码修改。用户已经登登录，网络连接正常。修改账号操作明细（1）用户进入网站。（2）用户点击“我的”进入个人中心，点击设置，点击账户密码。（3）用户输入旧密码，新密码，确认新密码。（4）点击确认修改。（5）若修改成功，系统提示“修改成功”，否则提示“修改失败”。找回账号操作明细（1）用户进入登录界面。（2）点击“忘记密码”。（3）用户输入账号并点击下一步按钮。（4）用户填写注册的手机号，获取验证码。（5）输入验证码，点击下一步按钮。（6）用户输入新密码和确认密码（7）点击提交按钮（4）浏览信息用例表3.4浏览信息用例分析用例名称用例简介前置条件浏览信息用例用户在系统中浏览信息。用户设备正常，网络正常。浏览信息明细（1）用户点击相应浏览的信息分类。（2）进入该分类的列表页。（3）点击感兴趣的列表，进入详情页。查询信息明细（1）用户在首页的搜了框输入关键字。（2）点击搜索图标。（3）进入搜索列表页。（4）点击列表，进入详情页面管理员需求用例包括登录、发布信息管理、用户管理用例，如图3.2所示。登陆登陆发布信息管理用户管理修改管理员删除管理员增加管理员校园吐槽管理校园活动管理采购需求管理出售商品管理图3.2管理员需求用例图（1）管理员登录表3.5管理员登录用例分析用例名称用例简介前置条件管理员登录管理员登录后台管理系统。系统登录正常，网络连接正常。管理员登录明细（1）管理员在浏览器中输入后台登陆地址。（2）进入后台管理员登录界面，输入设定好的登录账号及密码。（3）登录系统，进入系统主界面。（2）发布信息管理表3.6发布信息管理用例分析用例名称用例简介前置条件发布信息管理对用户对已发布信息进行撤回，删除操作管理。系统登录正常，网络连接正常。出售商品管理明细（1）管理员输入后台登陆地址。（2）进入后台管理员登录界面，输入设定好的登录账号及密码，点击登录按钮。（3）登录系统，进入系统主界面。（4）点击发布信息管理，展开二级菜单。（5）点击出售商品管理，加载所有的出售商品信息。（6）点击撤回或删除按钮对信息进行撤回或删除操作。采购需求管理明细（1）管理员输入后台登陆地址。（2）进入后台管理员登录界面，输入设定好的登录账号及密码，点击登录按钮。（3）登录系统，进入系统主界面。（4）点击采购需求管理，展开二级菜单。（5）点击采购需求管理，加载所有的采购需求管理。（6）点击撤回或删除按钮对信息进行撤回或删除操作。校园活动管理明细（1）管理员输入后台登陆地址。（2）进入后台管理员登录界面，输入设定好的登录账号及密码，点击登录按钮。（3）登录系统，进入系统主界面。（4）点击发布信息管理，展开二级菜单。（5）点击校园活动管理，加载所有的出售商品信息。（6）点击撤回或删除按钮对信息进行撤回或删除操作。校园吐槽信息明细（1）管理员输入后台登陆地址。（2）进入后台管理员登录界面，输入设定好的登录账号及密码，点击登录按钮。（3）登录系统，进入系统主界面。（4）点击发布信息管理，展开二级菜单。（5）点击校园吐槽管理，加载所有的出售商品信息。（6）点击撤回或删除按钮对信息进行撤回或删除操作。。（3）用户管理表3.7用户管理用例分析用例名称用例简介前置条件用户管理对系统管理员进行添加、删除等管理。系统登录正常，网络连接正常。添加用户明细（1）管理员打开系统。（2）进入系统登录界面，输入设定好的登录账号及密码，点击登录按钮。（3）登录系统，进入系统主界面。（4）点击用户管理导航，加载用户管理界面。（5）点击添加用户按钮，弹出添加表单。（6）输入登录账号、昵称、密码、确认密码等信息，点击确定按钮。删除管理员明细（1）处于用户管理管理界面。（2）点击想要删除的管理员条目后的删除按钮。修改管理员明细（1）处于用户管理管理界面。（2）点击想要修改的管理员条目后的编辑按钮，弹出对应的编辑弹框。（3）在弹框中输入旧密码，新密码，确认新密码后点击确定按钮3.4开发运行环境需求开发环境需求如下：（1）硬件要求intelI33.0GHZ或以上的cup8GB或以上的内存64G或以上硬盘（2）软件要求操作系统：Windows7、Windows8、Windows10等开发环境：VisualStudioCode、Node8以上3.5性能需求系统的优良不仅要考虑它是不是满足了用户最初的需求，还要从下面列出的几个角度考虑。见表3-4：表3.8软件性能需求分析属性严谨报告是否正确按照操作说明实打实进行步骤。是否健康健康并具有一定的自我恢复能力。是否可靠不到千分之三的失败率。效率怎样效率及高，响应时间最慢不会超过三秒。是否易用简单易懂易于上手操作。是否安全安全健康，不会随随便便被他人盗取个人隐私。并有一定的安全保护措施。能否拓展二次开发的可能性极高，前景广阔。是否都兼容目前都兼容。能否移植很容易移植，并在移植后立即工作。

4.系统概要设计4.1系统架构设计在这里，我们把整个系统分割成包含有代码的程序、包含系统相关信息的文档、数据库、包含一般信息的文本文件还有手工过程，不过其中的每一部分的信息仍旧不够清晰。还需要对它们的详细内容进行细心规划。在这一时期还有一个很关键的目标就是要规划软件的架构，也就是要明确软件内部可以分成哪些功能组件，确定它们之间的联系。以较低的投入,并在更抽象的层面上,各种可能的系统实现和软件结构进行了分析和比较,和最佳的解决方案,选择最合理的软件结构开发高质量的软件系统的成本。这一步需要完成的任务：1．可行性。确保系统可以顺利完成。2．可靠性。确保系统运行过程中不会轻易发生问题。3．安全性。确保数据库中储存的所有信息对不会遭到破坏或者窃取。因为这些信息对用户十分重要，因此这一点很关键。4．可定制化。能够按照用户的要求为系统添加功能。5．可扩展性。即便系统已经建设完成，也能够很简单地在里面增添新的功能，或为已经存在的功能添加新的特性。6．可维护性。能够很简单地对系统中存在地问题进行处理，或者增添新的功能。7．可升级性。若是使用的用户变多，系统应该可以进行升级，确保始终支持大量用户的访问。在实现了这一点之后，系统才能够长时期正常工作。8．简单性。系统操作必须简单、易于使用。接下来为系统建立架构设计模型。按照图4.1，可以把系统分为三层：视图层、业务逻辑层、数据访问层，再把各层中的一些公共部分提出来，得到包图4.2：视图层视图层业务逻辑层数据访问层组件接口全局样式Axios拦截器接口业务处理Schema异常捕获Mongoose图4.1系统体系架构图权限管理权限管理用户界面业务逻辑数据访问异常处理图4.2系统功能模块包图4.2系统架构类图展开系统包图，得到类图，它包含各个种类之间的关系，如下图4.3所示。输入界面输入界面输出界面用户操作权限管理数据库操作业务处理异常处理图4.3系统类图4.3系统交互图系统架构类的交互图如图4.4所示：图4.4系统架构类的交互图4.4数据库概要设计数据库存储了大量信息，可以说是信息管理系统的核心和基础，数据库还提供了添加，删除，修改和检查，使系统可以快速找到自己想要的信息，而不是在程序代码中查找。数据库中信息表的每个部分根据一定的关系精确地组合，排列和组合成数据表。Mysql将数据存储为一个文档，数据结构由键值(key，value)对构成。Mysql文档比较像JSON对象，属性值能够包含其他文档，数组以及文档型数组。Mysql是非关系型数据库中最像关系型数据库的一种NoSQL数据库，因为Mysql可以通过嵌入来引入关系,因此可以用关系型数据库的思想来进行数据库设计。设计概念就是在数据分析的基础上自下而上的对整个系统的数据库概念结构进行设计。从用户的角度对视图进行开发，然后集成视图，最后分析从而取得最后的结果。对概念进行设计时采用实体—联系（E-R）的模型开发措施。E-R模型法的构成元素有：关系以及属性不等，用E-R图能用来表现其模型来，他能提示相关环境中联系相关事物。实体主要是具有公共性质，但是对于公共性质也具有区分功能，每一个实体都有不一样的特征，根据不同的实体不同的特征进行区分不同的实力，对于属性是描述实体特征的数据项，属于一个实体的所有实例都有相同的性质，在E-R模型中，这些性质就是属性，根据系统的数据需求进行画出相应的属性图。出售商品信息实体E-R图，如图4.5所示。信息分类信息分类标题价格发布日期_id发布人联系方式图片出售商品信息图4.5出售商品信息实体E-R图管理员实体E-R图，如图4.6所示。管理员管理员账号密码昵称头像昵称图4.6题目信息实体E-R图用户信息实体E-R图，如图4.7所示。用户用户昵称电话账号密码头像创建时间修改时间性别_id图4.7用户信息实体E-R图4.5系统功能设计4.5.1注册功能设计（1）模块描述：用户在登录网页时，可以通过点击“注册”链接，在跳转的注册网页中填写账号、昵称、密码、确认密码、手机号码后注册个人账号，用户在使用个人账号登录网页后可以进行信息发布、信息修改等功能。（2）用户注册流程图如图4.8所示：开始开始填写注册信息输入账号是否存在

两次输入密码是否相同数据库添加数据注册成功结束

判断密码是否符合要求否是是提示账号已存在提示请输入5~20个字符，包含字母和数字！提示两次输入密码不一致是否否图4.8注册流程图4.5.2登录功能设计（1）模块描述：用户在浏览网页时，若想进行留言、评论等功能，需要登录自己的个人账户，通过点击网站首页的“登录/注册”按钮，在输入正确的用户名，密码后即可登录成功。网站首页会显示“已登录”状态。（2）系统登录流程如图4.9所示：开始开始填写登录信息登录成功结束判断图片验证码是否正确

判断用户名密码是否匹配

提示用户名密码匹配提示验证码错误

否否是是图4.9登录流程图4.5.3找回密码功能设计（1）功能描述：当用户在登录的时候发现自己忘记了已经注册的密码，此时点击忘记密码按钮，可以通过注册的手机号码进行密码重置。（3）流程图如图4.10所示开始输入账号判断账号是否已经注册输入手机号获取验证码判断手机号和账号是否匹配输入手机验证码提示账号未注册提示账号未注册否否是是验证码是否正确输入新密码和确认密码提示账号未注册是否修改数据库结束提示账号未注册是否操作成功密码是否一致图4.10登录功能流程图 4.5.4发布信息功能设计（1）功能描述：用户登录后使用此功能可以将自己的需求进行发布。让更多的用户看到自己的需求信息。提升系统内容的丰富性，增加系统用户黏性。（2）流程图如图4.11所示开始开始选择发布类型填写发布消息填写消息是否完整保存到数据库结束提示填写完整信息是否图4.11发布信息流程图4.5.5浏览信息功能设计（1）功能描述：用户在浏览信息的时候，为了更好的提升用户的使用体验，所有内容以懒加载的形式进行呈现。（2）流程图如图4.12所示开始开始加载第一页数据用户是否滑动到页面最下面数据是否全部显示结束加载下页数据否是是否图4.12浏览信息流程图4.5.6搜索信息功能设计（1）功能描述：为了用户快速的让用户找到有用的信息，用户可以在首页搜索栏通过输入关键字进行搜索。（2）操作流程图及程序流程文字介绍：用户在搜索栏输入关键字后，点击搜索，若关键字为空则不会进行，若不为空进行搜索，有搜索结果展示搜索结果，没有给出用户提示。流程图如图4.13所示开始开始输入关键字关键字是否为空搜索结果是否为空结束显示搜索结果提示搜索没有搜索内容是否是否图4.13搜索信息流程图

5.系统详情设计5.1数据库文档设计Mysql数据库没有表的概念，此数据库的数据全部以文档的形式进行存储，文档里面以JSON的形式存储每一条数据。因此可以将Mysql中的文档理解成关系型数据库的表。而在开发过程中通过使用Mongoose对Mysql进行管理，所有可以将Mysql的文档设计转换为Mongoose的Schema设计。表4.1发布信息表序号属性类型是否必填备注1_idObjectId是主键2titleString是标题3priceString否价格4descriptionString是详细描述5createdTimeDate是发布时间6owner_idObjectId是发布人7statusNumber是状态（1：已发布，0：撤回）8categoryNumber是分类（1:发布出售信息,2:发布采购信息,3:发布活动信息,4:发布吐槽信息）9img[String]否图片10contactString是联系方式发布信息表对应的Schema{category:{required:true,type:Number,enum:[1,2,3,4]},title:{type:String,required:true},price:{type:String,//required:true},description:{type:String,required:true},createdTime:{type:Date,default:Date.now},owner_id:{type:Schema.Types.ObjectId,required:true},status:{type:Number,enum:[1,0],default:1,required:true},img:{type:[String]},contact:String}表4.2管理员表序号属性类型是否必填备注1_idObjectId是主键2accountString是账号3passwordString否密码4nameString否昵称5avatarString否头像管理员表对应的Schema{account:{type:String,required:true},password:{type:String,required:true},name:{type:String,},avatar:{type:String,},}表4.3用户表序号属性类型是否必填备注1_idObjectId是主键2phoneNumber是电话3accountString是账号4nickNameString是昵称5passwordString是密码6avatarString否头像7createdTimeDate是创建时间8lastModifiedTimeDate是修改时间9gender:Number否性别（-1：保密，0：男，1：女）用户对应的Schema{phone:{type:Number,required:true},account:{type:String,required:true},nickName:{type:String,required:true},password:{type:String,required:true},avatar:{type:String},createdTime:{type:Date,default:Date.now},lastModifiedTime:{type:Date,default:Date.now},gender:{type:Number,enum:[-1,0,1],//限定default:-1}}5.2系统功能具体实现在本部分将详细介绍每一给功能的具体实现结果和对应的界面展示5.2.1注册功能实现用户可以通过注册获得个人账号，用户在注册账号的时候，首先进入注册页面，按照要求填写账号，若用账号已被占用的话，则不能注册，提示“账号不可以”，若账号未被占用，则不提示，用户继续操作填写昵称、填写密码和确认密码不符合5~20个包含数字与字母的字符，则提示“请输入5~20个字符，包含字母和数字！”并且不能注册；若二次设置的密码不一致，则提示“密码输入不一致”且不能注册。具体操作界面正如图片5.1这样。图5.1注册界面核心代码：asynccheckUserName(){if(!/^[a-zA-Z0-9]{5,20}$/.test(this.username)){this.usernameTips="请输入5~20个字符，包含字母或数字！";return;}else{let{data:res}=awaitthis.$api.userApi.hasUserName({account:this.username});if(res.code==0){this.usernameTips="";this.userHasCheck=true;}else{this.usernameTips="账号不可用";}}}5.2.2登录功能实现用户要想进入本主题网站进行留言等功能时，均需通过正确的用户名和密码进行登录，若登录过程中输入了错误的登录名或密码，则登录失败，网页会提示“用户名或密码错误！”。后台提取用户名，并将输入的密码保存到临时的字符串当中，如果数据库中存在该用户名，则说明管理员已经添加了该用户，即该用户有登录资格，接着会查询数据库中对应的密码，如果与用户输入的一致，则按照相应的用户权限进入对应的操作页面。至此，登录流程完成，否则登录失败。具体操作界面正如图片5.2这样：图5.2登陆界面核心代码：asynclogin(){if(this.usernameTips==""&&this.username!==""&&this.passwordTips==""&&this.password!==""&&this.checkPic!==""&&this.checkPicTips==""){try{let{data}=awaitthis.$api.userApi.login({account:this.username,password:this.md5(this.password),code:this.checkPic});if(data.code===0){//登录成功保存tokenthis.$ls.set('token',data.data.token,1000*60*60)//将用户信息存到vuexthis.$ls.set('user',data.data,60*60*1000)this.$mit("changeUserData",data.data);this.$toast.success('登录成功')setTimeout(()=>{this.$router.push({name:'home'});},1000);}}catch(error){this.changePic()}}else{this.$toast.fail("*必填");}},5.2.3找回密码功能实现当用户点击忘记密码的时候会跳转的忘记密码页面，用户输入账号，后台会判断此账号有没有注册过，若是没有，则提示“该用户不存在”，用户不能进入下一步，若存在用户点击“下一步”按钮进入新页面后输入注册时的手机号码，系统判断手机号是否与账号匹配，若不匹配提示用户，用户不能进入下一步，如果匹配点击“发送验证码”按钮，输入手机接收到的验证码，若验证码错误，则会提示“验证码有误”，用户不能进入下一步操作，若验证码有效，点击“下一步”按钮进入新页面后输入新密码和确认密码，若两次输入不一致则会提示用户，若两次输入一致提示用户密码已经重置。具体操作界面正如图片5.3这样：图5.3找回密码功能 核心代码：asyncnext(){if(this.sms===''){this.$toast('请输入验证码')return}try{awaitthis.$api.userApi.checkPhoneVerification({phone:this.phone,code:this.sms})this.$router.push({name:"findPwd3"});}catch(err){return}}5.2.4发布信息功能实现用户在发布信息的时候需要根据发布信息的类型，进行填写对应的信息标题、描述、上传图片等表单等操作，然后点击提交按钮，进行提交，提交后其他用户会在信息展示页面查看此条信息的详情。具体操作界面正如图片5.4这样：图5.4信息发布页面和展示页面核心代码onConfirm(value){if(value==='发布活动信息'){this.priceShow=false}else{this.priceShow=true}this.priceShow=value==='发布活动信息'||value==='发布吐槽信息'?false:truethis.contactShow=value==='发布吐槽信息'?false:truethis.category=value;this.showPicker=false;}5.2.5浏览信息功能实现用户在浏览信息的时候每次只加载15条数据，每当手机页面滑动到最下面的时候自动加载数据，直至数据全部加载。具体操作界面正如图片5.5这样图5.5浏览信息页面核心代码asyncgetData(){try{let{data:res}=awaitthis.$Api.sellInfoList({category:1,currentPage:this.currentPage,showCount:this.showCount});this.loading=false;this.data=[...this.data,...res.data];if(this.currentPage>=Math.ceil(res.total/this.showCount)){this.finished=true;}else{this.currentPage++;}}catch(error){console.log(error);}}5.2.6后台信息管理功能实现 当用户发布了违规或者不合法的内容的时候，管理员可以通过登录后台管理系统对信息进行撤回或者删除，用来保证网站内容的质量，增加用户的使用体验，具体界面如图5.5所示：图5.5所示6.系统的测试6.1系统测试目的与意义这最后一步同时也是最重要的一步就是这个部分，它的作用十分关键。开发人员应该在这里查看程序是否能够正常工作，性能是不是达到了标准，是否实现了最初的所有预设功能。如果这一步骤能够做到仔细、全面、标准，会极大的提升程序的品质，减少可能发生问题的机率，为使用者提供了更多的保障。这一步骤中不但要检查系统是不是实现了最初预设的所有功能，还一定要查看它工作的时候有没有什么问题。在开始以前，要根据具体的工作环境，做出具体的测试规划，并据此对系统进行调试。同时，为了更好的做到对实际情况的模仿，完善过程中使用的例子，不但要检查系统的输入输出是不是正常，还要检查出现问题的时候系统如何对其进行处理。除此之外，还要考虑极限情况，搭建具体的环境，找到系统在性能上存在的缺陷，并做出处理。6.2测试过程在设计转款软件的时候，我们用结构测试和功能测试测试了这个系统。功能测试也就是我们常说的黑盒测试。通过此过程检查系统中有没有问题，并知道系统应该具有特定的功能。在过程中，测试人员不知道系统里面具体的架构或者其他信息，只能按照要求中的标准对其进行测试，看他能不能按照要求对输入进行处理，并返回适当的信息。白盒测试听名字就知道，他与黑盒测试是完完全全不一样的。测试系统能否正常运转只需要根据规范就好了。在系统工作的时候，如果发现它没有根据预先设定的要求进行工作，那么不管最终功能是不是实现了，都要判断是不是存在问题。这种方式考察的是系统中的逻辑是不是存在问题，大多数出现在对于软件的检查中。我们对用户以后可能遇到的一系列问题进行了测试，其测试结果如下表测：表6-1测试用例模块名称测试用例预期结果实际结果是否通过登录模块账号：null密码：null登录按钮不可点击参考图6.1通过登录模块账号：123456密码：null登录按钮不可点击参考图6.2通过登录模块账号：zhaozhao密码：1123456弹出错误提醒，用户名与密码不匹配参考图6.3通过登录模块账号：zhaozhao密码：123qwe,.弹出验证成功提示参考图6.4通过发布信息模块发布类型:发布出售信息标题:手机4价格:1234/部详细描述:闲置手机联系方式:123456789弹出发布成功提示参考图6.5图6.6通过图6.1测试输入为空登录图6.2测试密码为空登录图6.3错误账号密码登录图6.4正确的账号密码登录图6.5发布消息测试图6.6发布成功提示6.3测试结果分析不是什么行家，更不是什么专业的技术人员，所以这款软件或是系统目前肯定存在着什么看不见的缺陷。因为我在进行编码时，有的时候得到的结果和预期不一样。比如说，若是没有明确的条文规定，不匹配的接口导致与用户不匹配。所以在最终推出之前一定要机型多次的调试，不断重复优化。在进行测试之前，要按照一开始为系统编写的文档，完成测试用例的构造，提高调试过程发现问题的能力。若是系统中存在任何问题，不但会让其功能无法正常实现，还可能出现响应速度缓慢甚至卡顿的情况。这时候就需要很多的测试来提高系统稳定。

7.总结我的这篇文章讨论的是在移动端开发信息发布的网页，这种情况下的软件拓展性极强，性能也容易优化以及非常安全可靠。我把这些功能都集中在了一个移动端的单页面应用程序。这款软件的系统有普通用户端和管理员端，普通用户端主要包括信息发布，信息查询等实用性功能，管理员端主要包括信息管理、信息删除等功能。在进行需求分析、设计以及各功能等多方面之后，这款学生闲置物品信息发布软件已经初步得到实现。再进行具体的功能设计时，所遇到的问题有对于信息发布的设计实现，当用户在进行商品信息发布时，如何确定用户信息发布的内容是否合法。解决的方法在后台添加管理功能，当用户提交自己的信息时，后台对用户信息发布的内容进行审核，若不合法直接删除或撤回，当管理员登陆后台查看到所有已经发布的信息，即可了解这是用户所提交分类信息。在从无到有的开发学生闲置物品信息发布网站的过程中，我自己学会了以产品经理的视角来设计一款软件，在设计的过程中会考虑功用户的实际需求功能需求，产品和用户之间的交互过程，用这些来确定要开发的功能。学会了从开发工程师的视角来开发一款软件，会学着考虑软件的安全性，拓展性，学会在去考虑多种技术的优缺点，从而选择一款最适合的技术进行开发。比如在选择数据库的时候，当时我考虑是用MySQL还是Mysql，通过在网上查询各种资料，对比两种数据库的优劣再将其与实际业务进行结合，从而选择了Mysql作为系统的数据库。还有再开发登录功能的时候，考虑如果以后随着用户的增加，后台服务器如何更方便的进行拓展，而选择了更为新的token技术来替代cookie和session技术。通过这段时间的开发和学习，自己在软件设计和开发的能力都得到了突飞猛进。为以后的工作打下了坚实的基础。在目前的阶段，我所利用的东西以及资源都是有限的，所以我的系统还是有分多需要完善和跟新优化的地方。在以后我会慢慢学习改进，并增加一些没有提到的功能。

参考文献[1]柯迪,池翠萍,周莹,张艳华.闲置市场与货物的分期付款——以皖南医学院闲置市场为例[J].

现代商业.

2017.[2]汤敏,郑乾,陈佳雨