基于BS架构的新型公益平台的设计与实现

基于B/S架构的新型公益平台的设计与实现DesignandImplementationofNewPublicWelfareWebsiteBasedonB/Sarchitecture内容摘要□□随着前端开发的复杂度越来越高，单纯的原生代码已无法满足开发需求，再加上如今大多数主流浏览器的兼容性越来越好，普及的标准也在更新换代，因此前端框架成为了不少开发人员的优先选择。前端框架提供丰富多样的组件，支持自定义资源配置以及各种工具库的使用，前后端的分离和模块化的思想让整个开发过程变得更方便高效。本课题的研究基于B/S架构，从而开发一个方便用户在线上即可进行爱心慈善的新型公益平台。其中运用到的前端内容有HTML5标记语言、CSS3层叠样式表、JavaScript脚本语言以及VUE框架，运用到的后端内容有AXIOS库、Node.js服务器平台、npm软件注册表以及MySQL数据库。本论文详细介绍了基于B/S架构的新型公益平台的研究背景、开发意义以及它的可行性，简单概况了平台开发环境中的各项技术以及设计目标，根据需求分析的结果对平台的各个页面和功能模块进行设计、开发以及整合。□□关键词：公益平台B/S架构VUE框架MySQL数据库AbstractWiththeincreasingcomplexityoffront-enddevelopment,simplenativecodecannolongermeetthedevelopmentneeds.Inaddition,mostmainstreambrowsersarenowmoreandmorecompatible,andpopularstandardsarealsobeingupdated,sothefront-endframeworkhasbecomeaprioritychoiceformanydevelopers.Thefront-endframeworkprovidesavarietyofcomponents,supportsuser-definedresourceconfigurationandtheuseofvarioustoollibraries.Theideaoffront-endseparationandmodularizationmakesthewholedevelopmentprocessmoreconvenientandefficient.ThisresearchisbasedonB/Sarchitecture,soastodevelopanewpublicwelfareplatformwhichisconvenientforuserstodocharityonline.Thefront-endcontentincludesHTML5markuplanguage,CSS3cascadingstylesheet,JavaScriptscriptlanguageandVueframework.Theback-endcontentincludesAxioslibrary,node.jsrunningenvironment,NPMsoftwareregistryandMySQLdatabase.Thispaperintroducestheresearchbackground,developmentsignificanceandfeasibilityofthenewpublicwelfareplatformbasedontheB/Sarchitectureindetail,brieflyoutlinesthetechnologiesanddesignobjectivesintheplatformdevelopmentenvironment,anddesigns,developsandintegratesthevariouspagesandfunctionalmodulesoftheplatformaccordingtotheresultsofdemandanalysis.Keywords：PublicplatformB/SarchitectureVueframeworkMySQLdatabase目录TOC\o"1-2"\h\u21813第1章绪论 第1章绪论1.1本项目的背景随着科学技术的不断发展与进步，“互联网+公益”的新模式为中国慈善事业带来了变化，加上近年来人们生活水平的提高，越来越多的普通百姓愿意投身于公益之中，这是社会的进步，这是中国正能量的传递。近年来，明星公益成为公益传播的一大亮点，明星自身的公益行为影响着数千万粉丝，粉丝则通过公益应援来响应自己的偶像，这种现象甚至成为了一种时尚。但由于目前市场上关于明星公益及粉丝公益的平台尚少，为此该平台做出了尝试，将这种新兴公益融入其中，具有较好的市场前景和社会价值。1.2本项目的意义在过去，慈善事业基本是以电视、报纸、社区宣传为主的传统公益，人们获取的信息量较少，参与的方式较单一，这很大程度上遏制了人们对参与慈善的积极性。但如今随着互联网的飞速发展，人们有了更便捷快速的方式来获取信息，正因如此，足不出门的公益页随即诞生了。网络公益能更简单方便地展现人们的爱心，更快速有效地培养互助互信的社会关系，它是未来发展的趋势。因此实现一个新型公益平台是十分有意义的事情，它可以为广大热心公益的群众汇集各种资讯，并对公益项目进行透明公开的捐赠救助，积极推进公益事业的发展。1.3国内外发展现状首先，国内外对于慈善事业的基本情况有些不同。近年来，民众的捐赠热情与公益意识在明显增强，国内的慈善主体不断地增加，慈善规模在不断地扩大，慈善机制也在不断地完善。而在国外，以欧洲为例，从古代开始，他们的慈善大多是在宗教活动支撑下开展的，进入工业社会后才逐渐开始产生民间慈善组织，总体上欧洲的慈善事业发展较为健全。社会体制、意识形态、发展时间以及国家治理形态的不同是产生这种差距的主要原因。再者，国内外对于志愿者的总体情况也大有不同。在志愿事业发展初期，国内对志愿者仍存在偏见以及缺少最基本的尊重，后来随着志愿事业的不断发展，社会对志愿者的认知度发生提高，政府也积极利用财政手段为志愿服务提供保障，但由于志愿服务管理机制的不健全，志愿者的权益缺乏保障。与此相比，国外的发达国家几乎人人都参加过志愿活动，社会对于志愿者的认知度高，并且志愿服务类型多，机制较为完善，各别国家已有相关的法律法规，将志愿活动与个人的学业工作挂钩。文化、社会认知、政府重视度、资金及合法权益保障的不同是产生这种差距的主要原因。第2章项目开发环境及技术2.1项目所需的开发环境和工具软件环境：MySQL数据库，NodeJS开发运行环境；硬件环境：PC机，Windows操作系统；开发工具：VisualStudioCode开发编辑器、HBuilderX开发编辑器、phpMyAdmin数据库管理工具、Google浏览器等。2.2项目开发所需的技术本项目的开发利用HTML5、CSS3、JavaScript、B/S架构、VUE框架、AXIOS库以及MySQL数据库进行开发，其中用到vantUI组件库和ElementUI组件库，部分素材需要用到Photoshop和AdobeIllustrator的一些应用。2.2.1HTML概述HTML（HypertextMarkupLanguage）即超文本标记语言，它并不是一种编程语言，而是一种标识性语言。它可以通过标记指令在网页上显示诸如文本、图形、动画、声音、表格、表单、列表、链接等之类的信息，并通过超级链接将这些超文本信息与其他信息媒体连接起来，这种信息的组织方式可以帮助人们查找和检索信息。再结合使用组件、公共网关接口、脚本语言、层叠样式表和其他Web技术，开发者就能创造出具有强大功能且界面美观的页面。2.2.2CSS概述CSS（CascadingStyleSheet）即层叠样式表，它是一种用来表达文件样式（例如HTML）的计算机语言。它可以对网页中元素的布局位置执行像素级精确控制，为网页提供丰富的文档外观样式，并具有强大的网页对象和模型样式编辑功能。而且由于它能够层叠继承使用、多页面应用、可外部引用的特点，大大地降低了文件的大小、加快了下载显示的速度、节省了网络带宽，在使用、修改与维护上给程序员带来了很大的便利。2.2.3JS概述JS（JavaScript）即在客户端执行的脚本编程语言，它是一种解释性脚本语言，用于向HTML页面添加交互行为。它可以在网页上添加各种动态功能，为用户提供更流畅、更舒适、更美观的浏览效果。由于它是动态的、跨平台的、基于对象的，因此它不需要经过Web服务编辑，也不依赖操作系统，只需浏览器支持即可在客户端中进行读写HTML元素、响应浏览器事件等行为。2.2.4B/S架构概述B/S架构（Browser/ServerArchitecture）即浏览器与服务器网络架构模式，它是一种三层架构模式，这种体系结构即是在客户端与服务端之间加入一个用于交互数据的中间层，通过表示层、业务逻辑层和数据访问层之间的链接和交互来完成系统功能（如下图2-1所示）。该模式统一了客户端，并在服务器上集中了系统的核心功能实现，从而实现了信息的分布式处理。用户只需要安装浏览器，使用Web服务器与数据库进行交互，然后将其与脚本语言结合使用即可实现强大的交互功能，从而极大地简化了客户端的载荷量并降低了系统升级的工作量和维护的成本。这使得系统的开发、使用和维护更加方便。图2-1B/S架构中请求与响应数据的流程图2.2.5VUE概述VUE即构建用户界面的渐进式框架，它是一套可以自底向上逐层应用的框架。由于VUE的核心库只关注视图层，不仅易于上手，还便于与第三方库或已有项目进行整合，再加上其极简的API就可实现数据的双向绑定与视图集合的各种组合，它具有响应式数据绑定、组件化思想、单页面刷新和灵活易用的特点，更好地保持状态和数据的同步，提高代码复用率，减少工作量。VUE采用的是MVVM设计模式，它能直接对数据进行操作，从而完全摆脱一系列DOM的繁琐操作（如下图2-2所示）。不仅如此，VUE官方还出品了能快速构建单页应用的vue-cli脚手架、单页应用的链接路径管理器vue-router、集中式状态管理架构vuex。图2-2MVVM模式的开发思想图2.2.6AXIOS概述AXIOS即基于Promise的用于浏览器和node.js的HTTP库，它是AJAX技术的一种具体实现。与AJAX相比，AXIOS更符合MVVM模式的编程，它通过Promise实现XHR封装，因此无须像AJAX一样要引入整个JQuery工具库才能够使用。它具有简洁高效、包含丰富的配置项、能拦截请求和响应、转换请求和响应数据以及自动转换JSON数据的特点，它既提供了并发的封装，也提供了一些并发请求的接口，再加上体积相对较小，是非常不错的请求方式。2.2.7MySQL概述MySQL即关系型数据库管理系统，它是一个安全高效的跨平台数据库系统，与主流编程语言（例如PHP）紧密集成。由于其体积小、速度快、开放源码、提供多种语言支持等特点，许多公司都喜欢使用MySQL数据库来降低成本。除了其他数据库中没有的强大功能之外，MySQL数据库还具有运行速度快、大型数据库存储容量、支持各种开发语言、支持面向对象、支持强大的内置函数等优点。第3章项目分析3.1项目需求分析就目前来说，公益的参与形式主要分为线上公益和线下公益两种，而它们分别也有许多参与的渠道，其公益的内容也丰富多样。因此，很多人会选择自己喜爱的方式来积极参与公益活动。笔者通过问卷调查的方法来采集身边各年龄段群众公益参与度的数据，以下为统计的结果。参与公益的年龄段有18岁以下、18岁~28岁、29岁~39岁、40岁~50岁和50岁以上这五个选项供问卷填写者选择，通过统计得出不同年龄段的公益人群参与比例，如下图3-1所示：79.6%18岁~28岁79.6%18岁~28岁图3-1不同年龄段的公益人群参与比例参与公益的方式有线上和线下这两个选项供问卷填写者选择，通过统计得出不同公益方式的人群参与比例，如下图3-2所示：图3-2不同公益方式的人群参与比例参与公益的行为有线下捐款、线上捐款、捐步数、捐衣物、献血、做公益志愿者、社区公益和其他这八个选项供问卷填写者选择，通过统计得出不同公益行为的人群参与比例，如下图3-3所示：图3-3不同公益行为的人群参与比例通过统计得出公益人群中追星族的参与比例，如下图3-4所示：图3-4公益人群中追星族的参与比例线上参与公益的渠道有公益平台、粉丝组织、慈善基金会、综合类社会公益组织和媒体类社会公益组织这五个选项供问卷填写者选择，通过统计得出不同线上公益渠道的人群参与比例，如下图3-5所示：图3-5不同线上公益渠道的人群参与比例对于粉丝公益应援的行为有支持、不支持和不推崇这三个选项供问卷填写者选择，通过统计得出不同人对于粉丝公益应援的态度比例，如下图3-6所示：92.3%支持92.3%支持图3-6不同人对于粉丝公益应援的态度比例经过统计分析显示：经常参与公益的人群主要集中在年龄段为18~28岁，参与形式以线上公益居多，其中捐款、捐步数以及捐衣物是公益人群中最为常见的公益行为。由此可见年轻人更喜欢简单便捷的慈善方式，更喜欢在网上进行公益活动，主动参与公益的主观意愿较强。除此之外，据调查反馈显示，追星一族在公益人群的比重也不容忽视，不少人反馈，他们除了通过公益平台这个线上公益的普遍渠道进行公益行为之外，还会积极参与响应由粉丝群体组织或发起的公益活动。在问卷的最后，笔者还收集了不同人对于粉丝用公益应援这种行为的看法，有绝大一部分人是表示支持态度的，他们认为大众需要正确看待粉丝给社会带来的贡献。由此看出，推广公益平台能更好地推动社会公益事业的发展，而粉丝公益是一种体现粉丝正面效应的新型公益类型。而本平台是一个包容了粉丝群体的公益平台，许多成功的例子说明粉丝公益是一种给社会带来积极正面影响与帮助的，正能量的粉丝效应值得被大众关注与认可，这股力量需要被正视且被正确地引导。在此背景下，这个群体需要一个不同于传统公益平台的参与慈善的聚集地，这就是本课题所要设计与实现的公益平台。在这个公益平台上，既满足了大多数用户对响应公益的需求，也解决了他们在哪里做公益、怎么才能做公益的问题；在项目的真伪性方面，每个项目都会公开注明接收方与相关组织的联系方式；在资金交接转移的安全性方面，每个已完成的项目都可以查看资金流向与项目动态。在该公益平台上，他们可以对公益项目一目了然，可以浏览不同公益类型、不同时间等等公益项目，可以对项目进行浏览、选择、收藏等操作，真正实现随时随地做公益。3.2项目可行性分析开发本项目的可行性可以从技术的可行性、操作的可行性、经济的可行性以及法律的可行性这四个方面来进行分析。3.2.1技术的可行性本平台主要是使用VUE+AXIOS+MySQL并以B/S架构模式相结合的形式开发的，开发过程以前端页面的设计和开发以及数据库的调用、开发和管理为主要部分。该公益平台前端采用的是目前比较主流的前端框架Bootstrap，该框架提供了简洁的层叠样式表和HTML规则，兼容了大多数JQuery工具库和各大主流浏览器，更能够对平台进行人性化的设计。对于基于B/S架构嵌入PHP前端应用程序的开发，它具备功能完善、界面友好、使用简单等特征。而对于平台后台数据采用的是目前比较流行的MySQL数据库，它具备强大的数据完整性、数据安全性和高数据稳定性。PHP具有性能稳定、可升级性强、开发速度快、易于管理等优点。这多种技术的结合，完全可以把该公益平台搭建成一个功能齐全的公益网站平台。因此，本平台开发具备技术可行性。3.2.2操作的可行性基于B/S架构的新型公益平台的快速注册&登录界面简单且易于操作，支持第三方注册和登录，帮助用户减少一系列复杂繁琐的输入操作。另外，在用户未登录的状态下，游客仍然可以自由浏览平台和公益项目的信息，增强用户体验。其次，用户参与公益的流程便捷清晰，只需要通过平常使用的电脑就能进行访问操作，可以在PC端或手机端对项目进行慈善捐款，更大限度地满足不同用户的需求，非常方便且高效。因此，本平台开发具备操作可行性。3.2.3经济的可行性基于B/S架构的新型公益平台是以B/S架构嵌入VUE开发，再基于B/S架构模式并采用了MySQL数据库储存数据，程序开发主要是管理平台的开发和维护，所需求的PC机和软件环境都很容易具备，开发过程对人力需求不高，再加上该平台的结构简洁、开发周期短，满足低成本开发。因此，本平台开发具备经济可行性。3.2.4法律的可行性基于B/S架构的新型公益平台作为一个自行设计和开发的平台，它的开发环境以开源代码为主，所以其开发区别于其他平台软件的设计，且该平台在合法的开发环境内进行，不存在非法以及其他问题的发生。因此，本平台开发具备法律可行性。第4章饭窝公益平台的详细设计4.1平台简介平台概述：饭窝公益平台是一个为开展公益活动事业提供一切服务及保障而成立的新型公益平台。平台核心理念：每个人都有传递美好的力量。平台主色调：蔚蓝色，晴朗天空的颜色，清新开阔，值得信赖。给人营造自然、亲切、舒适的感觉，象征自由、纯洁、安定与和平。平台特点：为用户提供便捷的功能和安全的服务，为受益者提供可靠的功能服务；面向广大年轻用户群体，向用户提供亲切的问候语和友好礼貌的提示语；为用户提供许多辅助功能能避免许多需要用户手动输入的情况，如第三方注册&登录、快捷选项、扫码捐款等，一方面提高了用户的体验感，另一方面减少了错误操作或输入的情况，大大提高效率；对平台的字体大小和界面颜色搭配进行视觉设计，让用户在浏览平台的过程中快速了解到开发者的操作用意，直截了当又不失美观。平台组成：平台主要分为首页、公益项目、粉丝联盟、明星基金这四个模块。在前端中，用户的主要交互行为有公益资讯和项目的浏览、公益项目的收藏与捐赠、用户注册&登录、个人中心的查看、账户设置等；在后端中，平台管理员的主要操作功能有用户信息的增删改查、项目数据的增删改查等。平台目的：营造高互动、高响应的公益氛围，吸引并集中更多的年轻人参与到公益之中。该平台除了涉及教育助学、扶贫赈灾、绿色环保、卫生医疗、社区服务等领域，还会开设明星公益、粉丝公益、捐衣捐物和义工服务的模块，界面清晰、便于操作。其功能包括用户的注册、登录、修改信息等，公益项目的发起、浏览、捐款、查看进度等。其面向的用户分为群体组织和普通用户，群体组织能够发起公益活动，普通用户能够对此进行捐款或参与线下的社会服务。4.2平台设计要求前端的设计要求主要包括以下几点： （1）页面要美观大方、符合大众的审美，能够展示公益平台的形象。 （2）公益项目的分类不要过于繁杂详尽，按公共服务领域来归纳类别，用户可按不同的公益类型来对项目活动进行查看。 （3）发掘出正能量事件并在平台新鲜事中发布资讯加以宣传展示，最大力度发挥平台的作用。 （4）提高用户与平台的交互性，提高用户的浏览体验。 （5）平台要有用户欢迎语，制作响应式页面。后端的设计要求主要包括以下几点： （1）规范、完善用户基础信息设置 （2）进行增删改查等操作需同步更新到数据库中4.3平台的模式功能设计本平台分为游客模式和用户模式两种，不同模式下，用户对各界面中的功能操作权限如下图4-1所示：图4-1饭窝公益的模式功能（1）游客模式：在游客模式下，无法查看收藏夹界面和个人信息界面，以及无法进行评论、退出登录、项目捐赠和项目收藏等功能，在此模式下，游客仅可以对平台、新鲜事资讯以及项目详情页等进行浏览，若需要体验更多的功能则需要登录平台进行操作。（2）用户模式用户成功注册之后，数据库会创建一个新的内存空间来存放了新用户的信息数据，用户通过登录即可进入用户模式。在用户模式下，用户拥有游客模式下所有权限，另外还提供了用户对项目进行捐赠操作、收藏、评论、退出登录等功能。在个人中心里，用户可以查看自己的公益行为、收藏夹和数据信息，也可以对个人信息进行编辑修改等。4.4用户注册登录流程设计为了让基于B/S架构的新型公益平台的安全性得到保障，用户需要登录平台后才能进行捐赠、收藏、评论等行为，本平台的注册/登录流程设计如下图4-2所示：图4-2用户注册/登录流程图4.5平台的页面结构设计饭窝公益平台主要分为首页、公益项目、粉丝联盟、明星基金这四个导航菜单，其页面结构分布如下图4-3所示：图4-3饭窝公益的页面结构4.6数据库的分析与设计一个完整的平台离不开数据，而数据库则是储存和管理数据的重要工具。数据库的开发需要做的准备工作有数据库的设计原则、数据库的概念模型和数据库表的设计。4.6.1数据库设计原则在设计数据库的过程中，整理出必要的表和字段，创建数据字典和E-R图，定义标准的对象命名规范。[15]在设计表的过程中：注意表和字段的标准化与命名规范化，标记好可能会发生变更的数据字段，增加删除标记字段，尽量避免整行删除，且所有的键都必须唯一。[15]4.6.2数据库概念模型通过对项目与用户的需求进行调查与分析之后，整理及汇总出分类的信息来建立数据库概念模型，其中E-R模型是被广泛使用的工具。确立实体的属性和关系后，绘制出基于B/S架构的新型公益平台E-R图。用户实体类型含有用户ID、手机号、邮箱、头像、昵称、已捐金额、密码、公益时、爱心数这九个属性。用户信息E-R图详细参考图如下图4-4所示：图4-4用户信息E-R图收藏项目实体类型含有收藏编号、进行收藏行为的用户ID、被收藏的项目ID这三个属性。收藏项目E-R图详细参考图如下图4-5所示：图4-5收藏项目E-R图评论留言实体类型含有评论编号、评论内容、评论时间、发表评论的用户ID、被评论的项目ID这五个属性。评论留言E-R图详细参考图如下图4-6所示：图4-6评论留言E-R图4.6.3数据库表设计在制定好E-R图后，在本平台的fanswarm数据库中创建相应的数据表。在MySQL中输入CreateTABLEIFNOTEXISTS`tb_user`(字段名字段类型默认内容)来创建用户信息数据表，具体字段代码的输入内容参考表4-1所示：表4-1tb_user用户信息表字段字段类型（长度）主键默认说明idint(11)√AUTO_INCREMENT用户IDphonevarchar(20)NULL用户手机号passwordvarchar(30)NULL用户密码moneyfloat0已捐金额loveint(11)0爱心数timeint(11)0公益时imgsrcmediumtextNULL头像路径nametextNULL用户昵称emailvarchar(20)NULL用户邮箱在MySQL中输入CreateTABLEIFNOTEXISTS`tb_collection`(字段名字段类型默认内容)来创建收藏项目数据表，具体字段代码的输入内容参考表4-2所示：表4-2tb_collection收藏项目表字段字段类型（长度）主键默认说明idint(11)√AUTO_INCREMENT收藏IDuidint(11)NULL进行收藏行为的用户IDpidint(11)NULL被收藏的项目ID在MySQL中输入CreateTABLEIFNOTEXISTS`tb_comment`(字段名字段类型默认内容)来创建评论留言数据表，具体字段代码的输入内容参考表4-3所示：表4-3tb_comment评论留言表字段字段类型（长度）主键默认说明idint(11)√AUTO_INCREMENT评论IDuidint(11)NULL发布评论的用户IDpidint(11)NULL被评论的项目IDcontentvarchar(255)NULL评论内容timetimestampNULL评论时间第5章公益平台的实现5.1页面头部公共模块的实现页面头部的基本要素有：欢迎栏、饭窝公益APP二维码、日期栏、LOGO展示、广告栏、导航菜单栏、登录/注册按钮。页面头部的要素布局如下图5-1所示：图5-1平台页面头部公共模块的要素布局图在该模块中，饭窝公益APP二维码的显示与隐藏功能是通过hover选择器来改变二维码的CSS样式来实现的，关键代码如下图5-2所示：图5-2“二维码的显示与隐藏”功能的关键代码获取当前时间功能是通过创建Date()实例，调用getFullYear()、getMonth()、getData()方法来实现的，再通过双向绑定在页面中显示获取到的时间，关键代码如下图5-3所示：图5-3“获取及显示当前时间”功能的关键代码高亮当前导航菜单列表项功能是通过获取当前路由的路径，通过匹配来高亮相对应的导航菜单列表项，关键代码如下图5-4所示：图5-4“高亮当前导航菜单列表项”功能的关键代码根据当前用户模式控制用户中心入口功能是通过当前用户的状态来设置flag变量的值，进而根据该值来控制是否开通用户中心入口，关键代码如下图5-5所示：图5-5“根据当前用户模式控制用户中心入口”功能的关键代码导航菜单栏随页面滚动改变透明度及触顶固定功能是通过获取当前滚动高度，再判断其与目标高度相差的大小来控制菜单栏背景的透明度，关键代码如下图5-6所示：图5-6“导航菜单栏随页面滚动改变透明度及触顶固定”功能的关键代码综合上方的UI设计与功能设计后，页面头部公共模块的最终展示效果如下图5-7所示：图5-7平台页面头部公共模块的展示效果图5.2页面脚部公共模块的实现页面脚部的基本要素有：平台联系方式、平台订阅方式、广告栏、版权所有。页面脚部的要素布局如下图5-2所示：图5-8平台页面脚部公共模块的要素布局图综合上方的UI设计后，页面脚部公共模块的最终展示效果如下图5-9所示：图5-9平台页面脚部公共模块的展示效果图5.3登录注册公共模块的实现登录注册弹框的基本要素有：账号、密码、验证码、按钮。登录注册弹框的要素布局如下图5-10所示：图5-10平台登录注册公共模块的要素布局图在该模块中，登录/注册弹框的显示、切换与隐藏功能是通过fadeIn()、show()、fadeOut()、hide()方法来动态显示与隐藏，关键代码如下图5-11所示：图5-11“登录/注册弹框的显示、切换与隐藏”功能的关键代码随机验证码的初始化获取及点击后更新功能是通过Math.random()方法来随机选取四个数组中的元素来实现的，每次页面刷新或者点击更新时切换一次验证码，关键代码如下图5-12所示：图5-12“随机验证码的初始化获取及点击后更新”功能的关键代码注册表单验证功能是通过$axios请求将前端的数据提交给后端的register接口进行判断处理，前端关键代码如下图5-13所示：图5-13“注册表单验证”功能的前端关键代码若通过表单验证以及符合注册规则，则向数据库表中插入一条数据后端关键代码；若不通过，则终止代码执行，返回相应的code码，后端关键代码如下图5-14所示：图5-14“注册表单验证”功能的后端关键代码登录表单验证功能是通过$axios请求将前端的数据提交给后端的login接口进行判断处理，再根据后端返回的code码来改变当前用户的状态，显示及隐藏相对应的内容，前端关键代码如下图5-15所示：图5-15“登录表单验证”功能的前端关键代码若通过表单验证以及符合注册规则，则在数据库表中筛选出该用户的信息并返回；若不通过，则终止代码执行，返回相应的code码，后端关键代码如下图5-16所示：图5-16“登录表单验证”功能的后端关键代码综合上方的UI设计和功能设计后，登录注册公共模块的最终展示效果如下图5-17所示：图5-17平台登录注册公共模块的展示效果图5.4首页展示页面的实现首页是一个网站平台的核心，当用户进入一个网站后，首先映入眼帘的就是该网站的首页，一个足够独特、符合大众审美且设计风格鲜明的首页能冲击用户的视觉，加深用户的印象，从而触发用户继续浏览平台和在平台中进行操作行为的想法。首页的作用在于让用户能够快速地对平台进行了解并引导用户进行浏览等操作。首页的基本要素有：平台介绍模块、三分钟视频快速了解平台模块、平台优势模块、广告栏模块、公益项目类型模块、平台公益数据模块、专题活动模块、合作伙伴模块。首页的要素布局和最终效果如下图5-18和图5-19所示：图5-18平台首页展示页面的要素布局图图5-19平台首页展示页面的效果图5.5公益项目展示页面的实现公益项目是一个集合了教育助学、扶贫赈灾、卫生医疗、绿色环保、社区服务这五个方面的公益项目的页面，用户能够对感兴趣的项目进行具体详细的查看，以及进行慈善公益操作。公益项目的基本要素有：公益新鲜事模块、筛选模块、公益项目列表模块、分页器模块。公益项目的要素布局如下图5-20所示：图5-20平台公益项目展示页面的要素布局图在该模块中，无缝自动轮播功能是通过elementUI工具库的carousel组件来实现的，关键代码如下图5-21所示：图5-21“无缝自动轮播”功能的后端关键代码动态渲染列表功能是通过$axios请求后端的projectslist接口来获取数据，再通过数据的双向绑定来显示在页面上，关键代码如下图5-22所示：图5-22“无缝自动轮播”功能的后端关键代码点击项目列表项跳转到对应详情页功能是将点击的项目ID通过url传递给后台，再将返回的数据渲染到页面上，前端关键代码如下图5-23所示：图5-23“点击项目列表跳转到对应详情页”功能的前端关键代码根据项目ID找到接口中存储的一整条数据，再将该条数据返回给前端，后端关键代码如下图5-24所示：图5-24“点击项目列表跳转到对应详情页”功能的后端关键代码项目收藏功能是通过绑定数据库来实现的，进行收藏操作之前，必须确保用户为已登录状态，否则不能进行收藏操作，关键代码如下图5-25所示：图5-25“项目收藏”功能的关键代码综合上方的UI设计和功能设计后，公益项目展示页面的最终效果如下图5-26所示：图5-26平台公益项目展示页面的效果图5.6粉丝联盟展示页面的实现粉丝联盟是一个粉丝群体发起或响应公益活动的页面，用户能够通过响应粉丝团发起的应援来支持公益。粉丝联盟的基本要素有：当前最热推荐栏模块、公益最新资讯模块、各公益类型前五名的贡献榜单模块。粉丝联盟的要素布局如下图5-27所示：图5-27平台粉丝联盟展示页面的要素布局图综合上方的UI设计后，粉丝联盟展示页面的最终效果如下图5-28所示：图5-28平台粉丝联盟展示页面的效果图5.7明星基金展示页面的实现明星基金是一个集合了明星基金会的页面，用户可以进入对应的明星中查看该明星的基金会信息以及公益支持渠道。明星基金的基本要素有：轮播图模块、明星基金列表模块。明星基金的要素布局如下图5-29所示：图5-29平台明星基金展示页面的要素布局图在该模块中，自动无缝轮播功能是通过原生JS来实现的，其中包括过渡动画、导航点高亮、自动轮播、点击导航点切换图片、点击左右按钮切换图片、鼠标移出停止轮播、鼠标移出继续轮播的功能实现，关键代码如下图5-30所示：图5-30“自动无缝轮播图”功能的后端关键代码综合上方的UI设计和功能设计后，明星基金展示页面的最终效果如下图5-31所示：图5-31平台明星基金展示页面的效果图5.8个人中心展示页面的实现个人中心是一个记录了用户个人信息及动态的页面，用户可以进行查看、删除、管理等一系列的操作。个人中心的基本要素有：用户基本信息模块、菜单栏模块、用户公益信息模块，用户动态栏模块。在该模块中，包括动态渲染用户的动态信息和公益数据等功能。个人中心的要素布局如下图5-32所示：图5-32平台个人中心展示页面的要素布局图综合上方的UI设计后，个人中心展示页面的最终效果如下图5-33所示：图5-33平台个人中心展示页面的效果图5.9账户设置展示页面的实现账户设置是一个修改用户个人信息的页面，用户可以对其昵称、密码、手机、邮箱、头像进行更新。账户设置的基本要素有：更新用户昵称、密码、手机、邮箱的输入模块、更换用户头像的输入模块，确认修改按钮。在该模块中，包括头像的上传与更新等功能。个人中心的要素布局如下图5-34所示：图5-34平台账户设置展示页面的要素布局图综合上方的UI设计后，个人中心展示页面的最终效果如下图5-35所示：图5-35平台账户设置展示页面的效果图第6章测试6.1平台的测试意义平台测试是基于B/S架构的新型公益平台非常重要的一个检验环节，让测试人员站在用户的角度去对本平台进行浏览和操作，确保用户在使用过程中有更好的用户体验，检查平台的各个方面是否能够满足平台与用户的需求。由于平台的后续开发与修改完善是受测试结果直接影响的，因此本次的测试包括功能、可用性、安全、性能等方面，如：检查编译的代码是否正常执行，页面是否能正常显示，平台中的各个功能是否能够正常使用，平台是否具有完整性，平台的流程程度等等。综上所述，本次的测试将会从编译情况、功能实现、实际操作以及资源占用进行测试。6.2平台的功能测试首先进行的是代码编译和界面测试。本平台在不同的浏览器环境中运行测试后，均没有出现乱码、布局错乱等情况，数据获取与样式读取正常。综上所述，代码编译和界面测试通过。再者进行的是功能测试。本平台在不同的浏览器环境中测试后，游客模式和用户模式均能使用其对应的功能，模式之间均切换正常。进行注册&登录操作时，符合指定规则的表单才能通过验证进行提交，数据匹配正常，触发事件均为正常满足用户的使用要求。综上所述，功能测试通过。最后进行的是性能测试。本平台在不同的浏览器环境中运行后，均没有出现延迟等情况，平台运行速度正常。在网络正常情况下，响应时间为2秒到5秒，符合正常的网络响应时间。综上所述，性能测试通过。6.3平台的测试结果基于B/S架构的新型公益平台在开发时充分参考了海内外优秀网站的优势，确保管理员和用户轻松地对平台进行操作。该平台的测试总结如下：（1）平台的代码编译及显示无出现错误的情况。（2）平台的界面友好美观，功能完善，用户可以与平台有很好地交互体验。（3）平台的兼容性强，可以在不同的系统上正常运行，方便用户的使用。（4）平台的资源显示流畅，资源占用情况正常。经过平台测试分析，基于B/S架构的新型公益平台运行良好、操作简单、功能完善，能够满足用户的需求。第7章总结与展望7.1总结光阴飞逝，我的大