基于BS架構(gòu)的新型公益平臺的設計與實現(xiàn)

基于B/S架構(gòu)的新型公益平臺的設計與實現(xiàn)DesignandImplementationofNewPublicWelfareWebsiteBasedonB/Sarchitecture內(nèi)容摘要□□隨著前端開發(fā)的復雜度越來越高，單純的原生代碼已無法滿足開發(fā)需求，再加上如今大多數(shù)主流瀏覽器的兼容性越來越好，普及的標準也在更新?lián)Q代，因此前端框架成為了不少開發(fā)人員的優(yōu)先選擇。前端框架提供豐富多樣的組件，支持自定義資源配置以及各種工具庫的使用，前后端的分離和模塊化的思想讓整個開發(fā)過程變得更方便高效。本課題的研究基于B/S架構(gòu)，從而開發(fā)一個方便用戶在線上即可進行愛心慈善的新型公益平臺。其中運用到的前端內(nèi)容有HTML5標記語言、CSS3層疊樣式表、JavaScript腳本語言以及VUE框架，運用到的后端內(nèi)容有AXIOS庫、Node.js服務器平臺、npm軟件注冊表以及MySQL數(shù)據(jù)庫。本論文詳細介紹了基于B/S架構(gòu)的新型公益平臺的研究背景、開發(fā)意義以及它的可行性，簡單概況了平臺開發(fā)環(huán)境中的各項技術以及設計目標，根據(jù)需求分析的結(jié)果對平臺的各個頁面和功能模塊進行設計、開發(fā)以及整合?！酢蹶P鍵詞：公益平臺B/S架構(gòu)VUE框架MySQL數(shù)據(jù)庫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本項目的背景隨著科學技術的不斷發(fā)展與進步，“互聯(lián)網(wǎng)+公益”的新模式為中國慈善事業(yè)帶來了變化，加上近年來人們生活水平的提高，越來越多的普通百姓愿意投身于公益之中，這是社會的進步，這是中國正能量的傳遞。近年來，明星公益成為公益?zhèn)鞑サ囊淮罅咙c，明星自身的公益行為影響著數(shù)千萬粉絲，粉絲則通過公益應援來響應自己的偶像，這種現(xiàn)象甚至成為了一種時尚。但由于目前市場上關于明星公益及粉絲公益的平臺尚少，為此該平臺做出了嘗試，將這種新興公益融入其中，具有較好的市場前景和社會價值。1.2本項目的意義在過去，慈善事業(yè)基本是以電視、報紙、社區(qū)宣傳為主的傳統(tǒng)公益，人們獲取的信息量較少，參與的方式較單一，這很大程度上遏制了人們對參與慈善的積極性。但如今隨著互聯(lián)網(wǎng)的飛速發(fā)展，人們有了更便捷快速的方式來獲取信息，正因如此，足不出門的公益頁隨即誕生了。網(wǎng)絡公益能更簡單方便地展現(xiàn)人們的愛心，更快速有效地培養(yǎng)互助互信的社會關系，它是未來發(fā)展的趨勢。因此實現(xiàn)一個新型公益平臺是十分有意義的事情，它可以為廣大熱心公益的群眾匯集各種資訊，并對公益項目進行透明公開的捐贈救助，積極推進公益事業(yè)的發(fā)展。1.3國內(nèi)外發(fā)展現(xiàn)狀首先，國內(nèi)外對于慈善事業(yè)的基本情況有些不同。近年來，民眾的捐贈熱情與公益意識在明顯增強，國內(nèi)的慈善主體不斷地增加，慈善規(guī)模在不斷地擴大，慈善機制也在不斷地完善。而在國外，以歐洲為例，從古代開始，他們的慈善大多是在宗教活動支撐下開展的，進入工業(yè)社會后才逐漸開始產(chǎn)生民間慈善組織，總體上歐洲的慈善事業(yè)發(fā)展較為健全。社會體制、意識形態(tài)、發(fā)展時間以及國家治理形態(tài)的不同是產(chǎn)生這種差距的主要原因。再者，國內(nèi)外對于志愿者的總體情況也大有不同。在志愿事業(yè)發(fā)展初期，國內(nèi)對志愿者仍存在偏見以及缺少最基本的尊重，后來隨著志愿事業(yè)的不斷發(fā)展，社會對志愿者的認知度發(fā)生提高，政府也積極利用財政手段為志愿服務提供保障，但由于志愿服務管理機制的不健全，志愿者的權益缺乏保障。與此相比，國外的發(fā)達國家?guī)缀跞巳硕紖⒓舆^志愿活動，社會對于志愿者的認知度高，并且志愿服務類型多，機制較為完善，各別國家已有相關的法律法規(guī)，將志愿活動與個人的學業(yè)工作掛鉤。文化、社會認知、政府重視度、資金及合法權益保障的不同是產(chǎn)生這種差距的主要原因。第2章項目開發(fā)環(huán)境及技術2.1項目所需的開發(fā)環(huán)境和工具軟件環(huán)境：MySQL數(shù)據(jù)庫，NodeJS開發(fā)運行環(huán)境；硬件環(huán)境：PC機，Windows操作系統(tǒng)；開發(fā)工具：VisualStudioCode開發(fā)編輯器、HBuilderX開發(fā)編輯器、phpMyAdmin數(shù)據(jù)庫管理工具、Google瀏覽器等。2.2項目開發(fā)所需的技術本項目的開發(fā)利用HTML5、CSS3、JavaScript、B/S架構(gòu)、VUE框架、AXIOS庫以及MySQL數(shù)據(jù)庫進行開發(fā)，其中用到vantUI組件庫和ElementUI組件庫，部分素材需要用到Photoshop和AdobeIllustrator的一些應用。2.2.1HTML概述HTML（HypertextMarkupLanguage）即超文本標記語言，它并不是一種編程語言，而是一種標識性語言。它可以通過標記指令在網(wǎng)頁上顯示諸如文本、圖形、動畫、聲音、表格、表單、列表、鏈接等之類的信息，并通過超級鏈接將這些超文本信息與其他信息媒體連接起來，這種信息的組織方式可以幫助人們查找和檢索信息。再結(jié)合使用組件、公共網(wǎng)關接口、腳本語言、層疊樣式表和其他Web技術，開發(fā)者就能創(chuàng)造出具有強大功能且界面美觀的頁面。2.2.2CSS概述CSS（CascadingStyleSheet）即層疊樣式表，它是一種用來表達文件樣式（例如HTML）的計算機語言。它可以對網(wǎng)頁中元素的布局位置執(zhí)行像素級精確控制，為網(wǎng)頁提供豐富的文檔外觀樣式，并具有強大的網(wǎng)頁對象和模型樣式編輯功能。而且由于它能夠?qū)盈B繼承使用、多頁面應用、可外部引用的特點，大大地降低了文件的大小、加快了下載顯示的速度、節(jié)省了網(wǎng)絡帶寬，在使用、修改與維護上給程序員帶來了很大的便利。2.2.3JS概述JS（JavaScript）即在客戶端執(zhí)行的腳本編程語言，它是一種解釋性腳本語言，用于向HTML頁面添加交互行為。它可以在網(wǎng)頁上添加各種動態(tài)功能，為用戶提供更流暢、更舒適、更美觀的瀏覽效果。由于它是動態(tài)的、跨平臺的、基于對象的，因此它不需要經(jīng)過Web服務編輯，也不依賴操作系統(tǒng)，只需瀏覽器支持即可在客戶端中進行讀寫HTML元素、響應瀏覽器事件等行為。2.2.4B/S架構(gòu)概述B/S架構(gòu)（Browser/ServerArchitecture）即瀏覽器與服務器網(wǎng)絡架構(gòu)模式，它是一種三層架構(gòu)模式，這種體系結(jié)構(gòu)即是在客戶端與服務端之間加入一個用于交互數(shù)據(jù)的中間層，通過表示層、業(yè)務邏輯層和數(shù)據(jù)訪問層之間的鏈接和交互來完成系統(tǒng)功能（如下圖2-1所示）。該模式統(tǒng)一了客戶端，并在服務器上集中了系統(tǒng)的核心功能實現(xiàn)，從而實現(xiàn)了信息的分布式處理。用戶只需要安裝瀏覽器，使用Web服務器與數(shù)據(jù)庫進行交互，然后將其與腳本語言結(jié)合使用即可實現(xiàn)強大的交互功能，從而極大地簡化了客戶端的載荷量并降低了系統(tǒng)升級的工作量和維護的成本。這使得系統(tǒng)的開發(fā)、使用和維護更加方便。圖2-1B/S架構(gòu)中請求與響應數(shù)據(jù)的流程圖2.2.5VUE概述VUE即構(gòu)建用戶界面的漸進式框架，它是一套可以自底向上逐層應用的框架。由于VUE的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或已有項目進行整合，再加上其極簡的API就可實現(xiàn)數(shù)據(jù)的雙向綁定與視圖集合的各種組合，它具有響應式數(shù)據(jù)綁定、組件化思想、單頁面刷新和靈活易用的特點，更好地保持狀態(tài)和數(shù)據(jù)的同步，提高代碼復用率，減少工作量。VUE采用的是MVVM設計模式，它能直接對數(shù)據(jù)進行操作，從而完全擺脫一系列DOM的繁瑣操作（如下圖2-2所示）。不僅如此，VUE官方還出品了能快速構(gòu)建單頁應用的vue-cli腳手架、單頁應用的鏈接路徑管理器vue-router、集中式狀態(tài)管理架構(gòu)vuex。圖2-2MVVM模式的開發(fā)思想圖2.2.6AXIOS概述AXIOS即基于Promise的用于瀏覽器和node.js的HTTP庫，它是AJAX技術的一種具體實現(xiàn)。與AJAX相比，AXIOS更符合MVVM模式的編程，它通過Promise實現(xiàn)XHR封裝，因此無須像AJAX一樣要引入整個JQuery工具庫才能夠使用。它具有簡潔高效、包含豐富的配置項、能攔截請求和響應、轉(zhuǎn)換請求和響應數(shù)據(jù)以及自動轉(zhuǎn)換JSON數(shù)據(jù)的特點，它既提供了并發(fā)的封裝，也提供了一些并發(fā)請求的接口，再加上體積相對較小，是非常不錯的請求方式。2.2.7MySQL概述MySQL即關系型數(shù)據(jù)庫管理系統(tǒng)，它是一個安全高效的跨平臺數(shù)據(jù)庫系統(tǒng)，與主流編程語言（例如PHP）緊密集成。由于其體積小、速度快、開放源碼、提供多種語言支持等特點，許多公司都喜歡使用MySQL數(shù)據(jù)庫來降低成本。除了其他數(shù)據(jù)庫中沒有的強大功能之外，MySQL數(shù)據(jù)庫還具有運行速度快、大型數(shù)據(jù)庫存儲容量、支持各種開發(fā)語言、支持面向?qū)ο?、支持強大的?nèi)置函數(shù)等優(yōu)點。第3章項目分析3.1項目需求分析就目前來說，公益的參與形式主要分為線上公益和線下公益兩種，而它們分別也有許多參與的渠道，其公益的內(nèi)容也豐富多樣。因此，很多人會選擇自己喜愛的方式來積極參與公益活動。筆者通過問卷調(diào)查的方法來采集身邊各年齡段群眾公益參與度的數(shù)據(jù)，以下為統(tǒng)計的結(jié)果。參與公益的年齡段有18歲以下、18歲~28歲、29歲~39歲、40歲~50歲和50歲以上這五個選項供問卷填寫者選擇，通過統(tǒng)計得出不同年齡段的公益人群參與比例，如下圖3-1所示：79.6%18歲~28歲79.6%18歲~28歲圖3-1不同年齡段的公益人群參與比例參與公益的方式有線上和線下這兩個選項供問卷填寫者選擇，通過統(tǒng)計得出不同公益方式的人群參與比例，如下圖3-2所示：圖3-2不同公益方式的人群參與比例參與公益的行為有線下捐款、線上捐款、捐步數(shù)、捐衣物、獻血、做公益志愿者、社區(qū)公益和其他這八個選項供問卷填寫者選擇，通過統(tǒng)計得出不同公益行為的人群參與比例，如下圖3-3所示：圖3-3不同公益行為的人群參與比例通過統(tǒng)計得出公益人群中追星族的參與比例，如下圖3-4所示：圖3-4公益人群中追星族的參與比例線上參與公益的渠道有公益平臺、粉絲組織、慈善基金會、綜合類社會公益組織和媒體類社會公益組織這五個選項供問卷填寫者選擇，通過統(tǒng)計得出不同線上公益渠道的人群參與比例，如下圖3-5所示：圖3-5不同線上公益渠道的人群參與比例對于粉絲公益應援的行為有支持、不支持和不推崇這三個選項供問卷填寫者選擇，通過統(tǒng)計得出不同人對于粉絲公益應援的態(tài)度比例，如下圖3-6所示：92.3%支持92.3%支持圖3-6不同人對于粉絲公益應援的態(tài)度比例經(jīng)過統(tǒng)計分析顯示：經(jīng)常參與公益的人群主要集中在年齡段為18~28歲，參與形式以線上公益居多，其中捐款、捐步數(shù)以及捐衣物是公益人群中最為常見的公益行為。由此可見年輕人更喜歡簡單便捷的慈善方式，更喜歡在網(wǎng)上進行公益活動，主動參與公益的主觀意愿較強。除此之外，據(jù)調(diào)查反饋顯示，追星一族在公益人群的比重也不容忽視，不少人反饋，他們除了通過公益平臺這個線上公益的普遍渠道進行公益行為之外，還會積極參與響應由粉絲群體組織或發(fā)起的公益活動。在問卷的最后，筆者還收集了不同人對于粉絲用公益應援這種行為的看法，有絕大一部分人是表示支持態(tài)度的，他們認為大眾需要正確看待粉絲給社會帶來的貢獻。由此看出，推廣公益平臺能更好地推動社會公益事業(yè)的發(fā)展，而粉絲公益是一種體現(xiàn)粉絲正面效應的新型公益類型。而本平臺是一個包容了粉絲群體的公益平臺，許多成功的例子說明粉絲公益是一種給社會帶來積極正面影響與幫助的，正能量的粉絲效應值得被大眾關注與認可，這股力量需要被正視且被正確地引導。在此背景下，這個群體需要一個不同于傳統(tǒng)公益平臺的參與慈善的聚集地，這就是本課題所要設計與實現(xiàn)的公益平臺。在這個公益平臺上，既滿足了大多數(shù)用戶對響應公益的需求，也解決了他們在哪里做公益、怎么才能做公益的問題；在項目的真?zhèn)涡苑矫?，每個項目都會公開注明接收方與相關組織的聯(lián)系方式；在資金交接轉(zhuǎn)移的安全性方面，每個已完成的項目都可以查看資金流向與項目動態(tài)。在該公益平臺上，他們可以對公益項目一目了然，可以瀏覽不同公益類型、不同時間等等公益項目，可以對項目進行瀏覽、選擇、收藏等操作，真正實現(xiàn)隨時隨地做公益。3.2項目可行性分析開發(fā)本項目的可行性可以從技術的可行性、操作的可行性、經(jīng)濟的可行性以及法律的可行性這四個方面來進行分析。3.2.1技術的可行性本平臺主要是使用VUE+AXIOS+MySQL并以B/S架構(gòu)模式相結(jié)合的形式開發(fā)的，開發(fā)過程以前端頁面的設計和開發(fā)以及數(shù)據(jù)庫的調(diào)用、開發(fā)和管理為主要部分。該公益平臺前端采用的是目前比較主流的前端框架Bootstrap，該框架提供了簡潔的層疊樣式表和HTML規(guī)則，兼容了大多數(shù)JQuery工具庫和各大主流瀏覽器，更能夠?qū)ζ脚_進行人性化的設計。對于基于B/S架構(gòu)嵌入PHP前端應用程序的開發(fā)，它具備功能完善、界面友好、使用簡單等特征。而對于平臺后臺數(shù)據(jù)采用的是目前比較流行的MySQL數(shù)據(jù)庫，它具備強大的數(shù)據(jù)完整性、數(shù)據(jù)安全性和高數(shù)據(jù)穩(wěn)定性。PHP具有性能穩(wěn)定、可升級性強、開發(fā)速度快、易于管理等優(yōu)點。這多種技術的結(jié)合，完全可以把該公益平臺搭建成一個功能齊全的公益網(wǎng)站平臺。因此，本平臺開發(fā)具備技術可行性。3.2.2操作的可行性基于B/S架構(gòu)的新型公益平臺的快速注冊&登錄界面簡單且易于操作，支持第三方注冊和登錄，幫助用戶減少一系列復雜繁瑣的輸入操作。另外，在用戶未登錄的狀態(tài)下，游客仍然可以自由瀏覽平臺和公益項目的信息，增強用戶體驗。其次，用戶參與公益的流程便捷清晰，只需要通過平常使用的電腦就能進行訪問操作，可以在PC端或手機端對項目進行慈善捐款，更大限度地滿足不同用戶的需求，非常方便且高效。因此，本平臺開發(fā)具備操作可行性。3.2.3經(jīng)濟的可行性基于B/S架構(gòu)的新型公益平臺是以B/S架構(gòu)嵌入VUE開發(fā)，再基于B/S架構(gòu)模式并采用了MySQL數(shù)據(jù)庫儲存數(shù)據(jù)，程序開發(fā)主要是管理平臺的開發(fā)和維護，所需求的PC機和軟件環(huán)境都很容易具備，開發(fā)過程對人力需求不高，再加上該平臺的結(jié)構(gòu)簡潔、開發(fā)周期短，滿足低成本開發(fā)。因此，本平臺開發(fā)具備經(jīng)濟可行性。3.2.4法律的可行性基于B/S架構(gòu)的新型公益平臺作為一個自行設計和開發(fā)的平臺，它的開發(fā)環(huán)境以開源代碼為主，所以其開發(fā)區(qū)別于其他平臺軟件的設計，且該平臺在合法的開發(fā)環(huán)境內(nèi)進行，不存在非法以及其他問題的發(fā)生。因此，本平臺開發(fā)具備法律可行性。第4章飯窩公益平臺的詳細設計4.1平臺簡介平臺概述：飯窩公益平臺是一個為開展公益活動事業(yè)提供一切服務及保障而成立的新型公益平臺。平臺核心理念：每個人都有傳遞美好的力量。平臺主色調(diào)：蔚藍色，晴朗天空的顏色，清新開闊，值得信賴。給人營造自然、親切、舒適的感覺，象征自由、純潔、安定與和平。平臺特點：為用戶提供便捷的功能和安全的服務，為受益者提供可靠的功能服務；面向廣大年輕用戶群體，向用戶提供親切的問候語和友好禮貌的提示語；為用戶提供許多輔助功能能避免許多需要用戶手動輸入的情況，如第三方注冊&登錄、快捷選項、掃碼捐款等，一方面提高了用戶的體驗感，另一方面減少了錯誤操作或輸入的情況，大大提高效率；對平臺的字體大小和界面顏色搭配進行視覺設計，讓用戶在瀏覽平臺的過程中快速了解到開發(fā)者的操作用意，直截了當又不失美觀。平臺組成：平臺主要分為首頁、公益項目、粉絲聯(lián)盟、明星基金這四個模塊。在前端中，用戶的主要交互行為有公益資訊和項目的瀏覽、公益項目的收藏與捐贈、用戶注冊&登錄、個人中心的查看、賬戶設置等；在后端中，平臺管理員的主要操作功能有用戶信息的增刪改查、項目數(shù)據(jù)的增刪改查等。平臺目的：營造高互動、高響應的公益氛圍，吸引并集中更多的年輕人參與到公益之中。該平臺除了涉及教育助學、扶貧賑災、綠色環(huán)保、衛(wèi)生醫(yī)療、社區(qū)服務等領域，還會開設明星公益、粉絲公益、捐衣捐物和義工服務的模塊，界面清晰、便于操作。其功能包括用戶的注冊、登錄、修改信息等，公益項目的發(fā)起、瀏覽、捐款、查看進度等。其面向的用戶分為群體組織和普通用戶，群體組織能夠發(fā)起公益活動，普通用戶能夠?qū)Υ诉M行捐款或參與線下的社會服務。4.2平臺設計要求前端的設計要求主要包括以下幾點： （1）頁面要美觀大方、符合大眾的審美，能夠展示公益平臺的形象。 （2）公益項目的分類不要過于繁雜詳盡，按公共服務領域來歸納類別，用戶可按不同的公益類型來對項目活動進行查看。 （3）發(fā)掘出正能量事件并在平臺新鮮事中發(fā)布資訊加以宣傳展示，最大力度發(fā)揮平臺的作用。 （4）提高用戶與平臺的交互性，提高用戶的瀏覽體驗。 （5）平臺要有用戶歡迎語，制作響應式頁面。后端的設計要求主要包括以下幾點： （1）規(guī)范、完善用戶基礎信息設置 （2）進行增刪改查等操作需同步更新到數(shù)據(jù)庫中4.3平臺的模式功能設計本平臺分為游客模式和用戶模式兩種，不同模式下，用戶對各界面中的功能操作權限如下圖4-1所示：圖4-1飯窩公益的模式功能（1）游客模式：在游客模式下，無法查看收藏夾界面和個人信息界面，以及無法進行評論、退出登錄、項目捐贈和項目收藏等功能，在此模式下，游客僅可以對平臺、新鮮事資訊以及項目詳情頁等進行瀏覽，若需要體驗更多的功能則需要登錄平臺進行操作。（2）用戶模式用戶成功注冊之后，數(shù)據(jù)庫會創(chuàng)建一個新的內(nèi)存空間來存放了新用戶的信息數(shù)據(jù)，用戶通過登錄即可進入用戶模式。在用戶模式下，用戶擁有游客模式下所有權限，另外還提供了用戶對項目進行捐贈操作、收藏、評論、退出登錄等功能。在個人中心里，用戶可以查看自己的公益行為、收藏夾和數(shù)據(jù)信息，也可以對個人信息進行編輯修改等。4.4用戶注冊登錄流程設計為了讓基于B/S架構(gòu)的新型公益平臺的安全性得到保障，用戶需要登錄平臺后才能進行捐贈、收藏、評論等行為，本平臺的注冊/登錄流程設計如下圖4-2所示：圖4-2用戶注冊/登錄流程圖4.5平臺的頁面結(jié)構(gòu)設計飯窩公益平臺主要分為首頁、公益項目、粉絲聯(lián)盟、明星基金這四個導航菜單，其頁面結(jié)構(gòu)分布如下圖4-3所示：圖4-3飯窩公益的頁面結(jié)構(gòu)4.6數(shù)據(jù)庫的分析與設計一個完整的平臺離不開數(shù)據(jù)，而數(shù)據(jù)庫則是儲存和管理數(shù)據(jù)的重要工具。數(shù)據(jù)庫的開發(fā)需要做的準備工作有數(shù)據(jù)庫的設計原則、數(shù)據(jù)庫的概念模型和數(shù)據(jù)庫表的設計。4.6.1數(shù)據(jù)庫設計原則在設計數(shù)據(jù)庫的過程中，整理出必要的表和字段，創(chuàng)建數(shù)據(jù)字典和E-R圖，定義標準的對象命名規(guī)范。[15]在設計表的過程中：注意表和字段的標準化與命名規(guī)范化，標記好可能會發(fā)生變更的數(shù)據(jù)字段，增加刪除標記字段，盡量避免整行刪除，且所有的鍵都必須唯一。[15]4.6.2數(shù)據(jù)庫概念模型通過對項目與用戶的需求進行調(diào)查與分析之后，整理及匯總出分類的信息來建立數(shù)據(jù)庫概念模型，其中E-R模型是被廣泛使用的工具。確立實體的屬性和關系后，繪制出基于B/S架構(gòu)的新型公益平臺E-R圖。用戶實體類型含有用戶ID、手機號、郵箱、頭像、昵稱、已捐金額、密碼、公益時、愛心數(shù)這九個屬性。用戶信息E-R圖詳細參考圖如下圖4-4所示：圖4-4用戶信息E-R圖收藏項目實體類型含有收藏編號、進行收藏行為的用戶ID、被收藏的項目ID這三個屬性。收藏項目E-R圖詳細參考圖如下圖4-5所示：圖4-5收藏項目E-R圖評論留言實體類型含有評論編號、評論內(nèi)容、評論時間、發(fā)表評論的用戶ID、被評論的項目ID這五個屬性。評論留言E-R圖詳細參考圖如下圖4-6所示：圖4-6評論留言E-R圖4.6.3數(shù)據(jù)庫表設計在制定好E-R圖后，在本平臺的fanswarm數(shù)據(jù)庫中創(chuàng)建相應的數(shù)據(jù)表。在MySQL中輸入CreateTABLEIFNOTEXISTS`tb_user`(字段名字段類型默認內(nèi)容)來創(chuàng)建用戶信息數(shù)據(jù)表，具體字段代碼的輸入內(nèi)容參考表4-1所示：表4-1tb_user用戶信息表字段字段類型（長度）主鍵默認說明idint(11)√AUTO_INCREMENT用戶IDphonevarchar(20)NULL用戶手機號passwordvarchar(30)NULL用戶密碼moneyfloat0已捐金額loveint(11)0愛心數(shù)timeint(11)0公益時imgsrcmediumtextNULL頭像路徑nametextNULL用戶昵稱emailvarchar(20)NULL用戶郵箱在MySQL中輸入CreateTABLEIFNOTEXISTS`tb_collection`(字段名字段類型默認內(nèi)容)來創(chuàng)建收藏項目數(shù)據(jù)表，具體字段代碼的輸入內(nèi)容參考表4-2所示：表4-2tb_collection收藏項目表字段字段類型（長度）主鍵默認說明idint(11)√AUTO_INCREMENT收藏IDuidint(11)NULL進行收藏行為的用戶IDpidint(11)NULL被收藏的項目ID在MySQL中輸入CreateTABLEIFNOTEXISTS`tb_comment`(字段名字段類型默認內(nèi)容)來創(chuàng)建評論留言數(shù)據(jù)表，具體字段代碼的輸入內(nèi)容參考表4-3所示：表4-3tb_comment評論留言表字段字段類型（長度）主鍵默認說明idint(11)√AUTO_INCREMENT評論IDuidint(11)NULL發(fā)布評論的用戶IDpidint(11)NULL被評論的項目IDcontentvarchar(255)NULL評論內(nèi)容timetimestampNULL評論時間第5章公益平臺的實現(xiàn)5.1頁面頭部公共模塊的實現(xiàn)頁面頭部的基本要素有：歡迎欄、飯窩公益APP二維碼、日期欄、LOGO展示、廣告欄、導航菜單欄、登錄/注冊按鈕。頁面頭部的要素布局如下圖5-1所示：圖5-1平臺頁面頭部公共模塊的要素布局圖在該模塊中，飯窩公益APP二維碼的顯示與隱藏功能是通過hover選擇器來改變二維碼的CSS樣式來實現(xiàn)的，關鍵代碼如下圖5-2所示：圖5-2“二維碼的顯示與隱藏”功能的關鍵代碼獲取當前時間功能是通過創(chuàng)建Date()實例，調(diào)用getFullYear()、getMonth()、getData()方法來實現(xiàn)的，再通過雙向綁定在頁面中顯示獲取到的時間，關鍵代碼如下圖5-3所示：圖5-3“獲取及顯示當前時間”功能的關鍵代碼高亮當前導航菜單列表項功能是通過獲取當前路由的路徑，通過匹配來高亮相對應的導航菜單列表項，關鍵代碼如下圖5-4所示：圖5-4“高亮當前導航菜單列表項”功能的關鍵代碼根據(jù)當前用戶模式控制用戶中心入口功能是通過當前用戶的狀態(tài)來設置flag變量的值，進而根據(jù)該值來控制是否開通用戶中心入口，關鍵代碼如下圖5-5所示：圖5-5“根據(jù)當前用戶模式控制用戶中心入口”功能的關鍵代碼導航菜單欄隨頁面滾動改變透明度及觸頂固定功能是通過獲取當前滾動高度，再判斷其與目標高度相差的大小來控制菜單欄背景的透明度，關鍵代碼如下圖5-6所示：圖5-6“導航菜單欄隨頁面滾動改變透明度及觸頂固定”功能的關鍵代碼綜合上方的UI設計與功能設計后，頁面頭部公共模塊的最終展示效果如下圖5-7所示：圖5-7平臺頁面頭部公共模塊的展示效果圖5.2頁面腳部公共模塊的實現(xiàn)頁面腳部的基本要素有：平臺聯(lián)系方式、平臺訂閱方式、廣告欄、版權所有。頁面腳部的要素布局如下圖5-2所示：圖5-8平臺頁面腳部公共模塊的要素布局圖綜合上方的UI設計后，頁面腳部公共模塊的最終展示效果如下圖5-9所示：圖5-9平臺頁面腳部公共模塊的展示效果圖5.3登錄注冊公共模塊的實現(xiàn)登錄注冊彈框的基本要素有：賬號、密碼、驗證碼、按鈕。登錄注冊彈框的要素布局如下圖5-10所示：圖5-10平臺登錄注冊公共模塊的要素布局圖在該模塊中，登錄/注冊彈框的顯示、切換與隱藏功能是通過fadeIn()、show()、fadeOut()、hide()方法來動態(tài)顯示與隱藏，關鍵代碼如下圖5-11所示：圖5-11“登錄/注冊彈框的顯示、切換與隱藏”功能的關鍵代碼隨機驗證碼的初始化獲取及點擊后更新功能是通過Math.random()方法來隨機選取四個數(shù)組中的元素來實現(xiàn)的，每次頁面刷新或者點擊更新時切換一次驗證碼，關鍵代碼如下圖5-12所示：圖5-12“隨機驗證碼的初始化獲取及點擊后更新”功能的關鍵代碼注冊表單驗證功能是通過$axios請求將前端的數(shù)據(jù)提交給后端的register接口進行判斷處理，前端關鍵代碼如下圖5-13所示：圖5-13“注冊表單驗證”功能的前端關鍵代碼若通過表單驗證以及符合注冊規(guī)則，則向數(shù)據(jù)庫表中插入一條數(shù)據(jù)后端關鍵代碼；若不通過，則終止代碼執(zhí)行，返回相應的code碼，后端關鍵代碼如下圖5-14所示：圖5-14“注冊表單驗證”功能的后端關鍵代碼登錄表單驗證功能是通過$axios請求將前端的數(shù)據(jù)提交給后端的login接口進行判斷處理，再根據(jù)后端返回的code碼來改變當前用戶的狀態(tài)，顯示及隱藏相對應的內(nèi)容，前端關鍵代碼如下圖5-15所示：圖5-15“登錄表單驗證”功能的前端關鍵代碼若通過表單驗證以及符合注冊規(guī)則，則在數(shù)據(jù)庫表中篩選出該用戶的信息并返回；若不通過，則終止代碼執(zhí)行，返回相應的code碼，后端關鍵代碼如下圖5-16所示：圖5-16“登錄表單驗證”功能的后端關鍵代碼綜合上方的UI設計和功能設計后，登錄注冊公共模塊的最終展示效果如下圖5-17所示：圖5-17平臺登錄注冊公共模塊的展示效果圖5.4首頁展示頁面的實現(xiàn)首頁是一個網(wǎng)站平臺的核心，當用戶進入一個網(wǎng)站后，首先映入眼簾的就是該網(wǎng)站的首頁，一個足夠獨特、符合大眾審美且設計風格鮮明的首頁能沖擊用戶的視覺，加深用戶的印象，從而觸發(fā)用戶繼續(xù)瀏覽平臺和在平臺中進行操作行為的想法。首頁的作用在于讓用戶能夠快速地對平臺進行了解并引導用戶進行瀏覽等操作。首頁的基本要素有：平臺介紹模塊、三分鐘視頻快速了解平臺模塊、平臺優(yōu)勢模塊、廣告欄模塊、公益項目類型模塊、平臺公益數(shù)據(jù)模塊、專題活動模塊、合作伙伴模塊。首頁的要素布局和最終效果如下圖5-18和圖5-19所示：圖5-18平臺首頁展示頁面的要素布局圖圖5-19平臺首頁展示頁面的效果圖5.5公益項目展示頁面的實現(xiàn)公益項目是一個集合了教育助學、扶貧賑災、衛(wèi)生醫(yī)療、綠色環(huán)保、社區(qū)服務這五個方面的公益項目的頁面，用戶能夠?qū)Ω信d趣的項目進行具體詳細的查看，以及進行慈善公益操作。公益項目的基本要素有：公益新鮮事模塊、篩選模塊、公益項目列表模塊、分頁器模塊。公益項目的要素布局如下圖5-20所示：圖5-20平臺公益項目展示頁面的要素布局圖在該模塊中，無縫自動輪播功能是通過elementUI工具庫的carousel組件來實現(xiàn)的，關鍵代碼如下圖5-21所示：圖5-21“無縫自動輪播”功能的后端關鍵代碼動態(tài)渲染列表功能是通過$axios請求后端的projectslist接口來獲取數(shù)據(jù)，再通過數(shù)據(jù)的雙向綁定來顯示在頁面上，關鍵代碼如下圖5-22所示：圖5-22“無縫自動輪播”功能的后端關鍵代碼點擊項目列表項跳轉(zhuǎn)到對應詳情頁功能是將點擊的項目ID通過url傳遞給后臺，再將返回的數(shù)據(jù)渲染到頁面上，前端關鍵代碼如下圖5-23所示：圖5-23“點擊項目列表跳轉(zhuǎn)到對應詳情頁”功能的前端關鍵代碼根據(jù)項目ID找到接口中存儲的一整條數(shù)據(jù)，再將該條數(shù)據(jù)返回給前端，后端關鍵代碼如下圖5-24所示：圖5-24“點擊項目列表跳轉(zhuǎn)到對應詳情頁”功能的后端關鍵代碼項目收藏功能是通過綁定數(shù)據(jù)庫來實現(xiàn)的，進行收藏操作之前，必須確保用戶為已登錄狀態(tài)，否則不能進行收藏操作，關鍵代碼如下圖5-25所示：圖5-25“項目收藏”功能的關鍵代碼綜合上方的UI設計和功能設計后，公益項目展示頁面的最終效果如下圖5-26所示：圖5-26平臺公益項目展示頁面的效果圖5.6粉絲聯(lián)盟展示頁面的實現(xiàn)粉絲聯(lián)盟是一個粉絲群體發(fā)起或響應公益活動的頁面，用戶能夠通過響應粉絲團發(fā)起的應援來支持公益。粉絲聯(lián)盟的基本要素有：當前最熱推薦欄模塊、公益最新資訊模塊、各公益類型前五名的貢獻榜單模塊。粉絲聯(lián)盟的要素布局如下圖5-27所示：圖5-27平臺粉絲聯(lián)盟展示頁面的要素布局圖綜合上方的UI設計后，粉絲聯(lián)盟展示頁面的最終效果如下圖5-28所示：圖5-28平臺粉絲聯(lián)盟展示頁面的效果圖5.7明星基金展示頁面的實現(xiàn)明星基金是一個集合了明星基金會的頁面，用戶可以進入對應的明星中查看該明星的基金會信息以及公益支持渠道。明星基金的基本要素有：輪播圖模塊、明星基金列表模塊。明星基金的要素布局如下圖5-29所示：圖5-29平臺明星基金展示頁面的要素布局圖在該模塊中，自動無縫輪播功能是通過原生JS來實現(xiàn)的，其中包括過渡動畫、導航點高亮、自動輪播、點擊導航點切換圖片、點擊左右按鈕切換圖片、鼠標移出停止輪播、鼠標移出繼續(xù)輪播的功能實現(xiàn)，關鍵代碼如下圖5-30所示：圖5-30“自動無縫輪播圖”功能的后端關鍵代碼綜合上方的UI設計和功能設計后，明星基金展示頁面的最終效果如下圖5-31所示：圖5-31平臺明星基金展示頁面的效果圖5.8個人中心展示頁面的實現(xiàn)個人中心是一個記錄了用戶個人信息及動態(tài)的頁面，用戶可以進行查看、刪除、管理等一系列的操作。個人中心的基本要素有：用戶基本信息模塊、菜單欄模塊、用戶公益信息模塊，用戶動態(tài)欄模塊。在該模塊中，包括動態(tài)渲染用戶的動態(tài)信息和公益數(shù)據(jù)等功能。個人中心的要素布局如下圖5-32所示：圖5-32平臺個人中心展示頁面的要素布局圖綜合上方的UI設計后，個人中心展示頁面的最終效果如下圖5-33所示：圖5-33平臺個人中心展示頁面的效果圖5.9賬戶設置展示頁面的實現(xiàn)賬戶設置是一個修改用戶個人信息的頁面，用戶可以對其昵稱、密碼、手機、郵箱、頭像進行更新。賬戶設置的基本要素有：更新用戶昵稱、密碼、手機、郵箱的輸入模塊、更換用戶頭像的輸入模塊，確認修改按鈕。在該模塊中，包括頭像的上傳與更新等功能。個人中心的要素布局如下圖5-34所示：圖5-34平臺賬戶設置展示頁面的要素布局圖綜合上方的UI設計后，個人中心展示頁面的最終效果如下圖5-35所示：圖5-35平臺賬戶設置展示頁面的效果圖第6章測試6.1平臺的測試意義平臺測試是基于B/S架構(gòu)的新型公益平臺非常重要的一個檢驗環(huán)節(jié)，讓測試人員站在用戶的角度去對本平臺進行瀏覽和操作，確保用戶在使用過程中有更好的用戶體驗，檢查平臺的各個方面是否能夠滿足平臺與用戶的需求。由于平臺的后續(xù)開發(fā)與修改完善是受測試結(jié)果直接影響的，因此本次的測試包括功能、可用性、安全、性能等方面，如：檢查編譯的代碼是否正常執(zhí)行，頁面是否能正常顯示，平臺中的各個功能是否能夠正常使用，平臺是否具有完整性，平臺的流程程度等等。綜上所述，本次的測試將會從編譯情況、功能實現(xiàn)、實際操作以及資源占用進行測試。6.2平臺的功能測試首先進行的是代碼編譯和界面測試。本平臺在不同的瀏覽器環(huán)境中運行測試后，均沒有出現(xiàn)亂碼、布局錯亂等情況，數(shù)據(jù)獲取與樣式讀取正常。綜上所述，代碼編譯和界面測試通過。再者進行的是功能測試。本平臺在不同的瀏覽器環(huán)境中測試后，游客模式和用戶模式均能使用其對應的功能，模式之間均切換正常。進行注冊&登錄操作時，符合指定規(guī)則的表單才能通過驗證進行提交，數(shù)據(jù)匹配正常，觸發(fā)事件均為正常滿足用戶的使用要求。綜上所述，功能測試通過。最后進行的是性能測試。本平臺在不同的瀏覽器環(huán)境中運行后，均沒有出現(xiàn)延遲等情況，平臺運行速度正常。在網(wǎng)絡正常情況下，響應時間為2秒到5秒，符合正常的網(wǎng)絡響應時間。綜上所述，性能測試通過。6.3平臺的測試結(jié)果基于B/S架構(gòu)的新型公益平臺在開發(fā)時充分參考了海內(nèi)外優(yōu)秀網(wǎng)站的優(yōu)勢，確保管理員和用戶輕松地對平臺進行操作。該平臺的測試總結(jié)如下：（1）平臺的代碼編譯及顯示無出現(xiàn)錯誤的情況。（2）平臺的界面友好美觀，功能完善，用戶可以與平臺有很好地交互體驗。（3）平臺的兼容性強，可以在不同的系統(tǒng)上正常運行，方便用戶的使用。（4）平臺的資源顯示流暢，資源占用情況正常。經(jīng)過平臺測試分析，基于B/S架構(gòu)的新型公益平臺運行良好、操作簡單、功能完善，能夠滿足用戶的需求。第7章總結(jié)與展望7.1總結(jié)光陰飛逝，我的大