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

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

HYPERLINK如何選擇組裝電腦配件

如何選擇組裝的電腦配件．

第一，選擇好CPU平臺，就是INTER還是AMD，看你是要配什么樣的電腦，高端還是低端的，兩個平臺都高低的產(chǎn)品。第二，選擇主板了，主板的品牌比較多，質(zhì)量，價格也不一，當(dāng)你第一步卻定了，那么主板也就相應(yīng)的卻定下來了，以INTER為例，只可以選擇775接口的主板（早期有478接口的，不推薦），主板的選擇主要有兩種，一是集成顯卡，二是不集成顯卡。集成顯卡的話，就可以省下顯卡的錢，但是對游戲玩家不推薦。那么當(dāng)然是選擇不集成顯卡的主板了，而且最好選擇一線品牌，如華碩，技嘉等。主板里，還有個蕊片組的選擇。關(guān)于蕊片組，各個品牌的主板命名有些不一樣，主流是INTER965，945，915，VIA的KT890，還有NFORCE4，NFORCE5。等。比較難說清楚。最好是選擇INTER的蕊片組，雖然價格會稍高一些。推薦945，技術(shù)比較成熟。第三，顯卡的選擇。顯卡主要還是有兩類品牌，GEFORCE和ATI，兩個品牌有高，中，低的顯卡。顯卡選擇要看你個人喜歡了，預(yù)算充足的話，最好是買中，高端的顯卡。

第四，就是內(nèi)存了，內(nèi)存關(guān)系電腦的穩(wěn)定性。當(dāng)然是要好一點(diǎn)的。買一線品牌的?，F(xiàn)在配電腦，主流是DDR667，DDR800DDR1333第五，顯示器的選擇，推薦液晶。如何選擇硬件組裝電腦這是一個老生常談的問題了，這也是一個讓高手們顯示自己硬件功底的問題，同時這還是一個讓很多新手為之焦頭爛額的問題。該怎么配？具體配什么？怎樣配才能盡量減小瓶頸？本文就將從內(nèi)到外，從理論到實(shí)踐，為朋友們抽絲剝繭一一道來。

一、CPU

作為一臺電腦最關(guān)鍵的組成部分，CPU確實(shí)起著舉足輕重的作用，但體現(xiàn)一臺電腦的綜合速度，并不是僅僅依靠CPU的，常?？吹胶芏嘈率謧冊谂潆娔X的時候，把CPU選的很好，但其他的東西諸如內(nèi)存、主板、硬盤等都選的不太理想，好像這臺電腦速度的快慢就體現(xiàn)在CPU速度的快慢上似的。甚至很多著名的品牌機(jī)廠商，都推出過類似“P4+256M內(nèi)存”的這種跛腳配置。其實(shí)對于一般的家用電腦而言，一個真正會配的高手，是不會把大量的錢花在CPU上的。家用電腦，畢竟不是做密集型科學(xué)計算用的，它講求的是多種媒體的配合工作，講求的是能一邊下載文件、一邊上網(wǎng)瀏覽網(wǎng)頁、一邊聽音樂、一邊還能打開其他的程序，在這種情況下，提升內(nèi)存的容量比提升CPU的主頻對速度的影響要明顯的多?，F(xiàn)今的中國家庭用戶，很多家長對于電腦一竅不通，他們只聽說“奔四”代表著速度快，并不知道整機(jī)速度的快慢除了CPU以外，還有很多其他的因素影響著它。但在買電腦的時候，最后做決定并掏錢的人，往往都是這些啥都不懂的家長們，于是就出現(xiàn)了上面的一幕：品牌機(jī)廠商為了能有更好的銷路、兼容機(jī)裝機(jī)店的銷售人員為了能拿到更多的獎金，開始違背良心來配置出這種高主頻處理器、低容量內(nèi)存的跛腳電腦。說嚴(yán)重點(diǎn)，這是屬于對消費(fèi)者的不負(fù)責(zé)任，是一種商業(yè)欺詐行為！同樣5000元的配置，高手配出來的賽揚(yáng)，比新手配出來的P4還要快很多，曾經(jīng)有一家全球著名的硬件網(wǎng)站在2003年的時候刊登過一篇關(guān)于配置家用電腦時各硬件占用總預(yù)算百分比的文章，文中很明確的提到了CPU的價錢最好不要超過總預(yù)算的10％－15％，我們雖然不能說他肯定完全正確，但至少人家是通過很多調(diào)查后得出的結(jié)論，有借鑒的理由。反觀現(xiàn)在的很多所謂的“低價奔四電腦”、“3999元買P4品牌機(jī)”之類的廣告，我想說的就是：你花了3999元，只買了一塊P4的處理器，其他的什么都沒有了！

二、內(nèi)存

對于配置一臺電腦來說，內(nèi)存是重頭戲，容量、速度、類型等等每一項指標(biāo)都對最終的整機(jī)綜合速度起著至關(guān)重要的影響，尤其是內(nèi)存的帶寬和容量。對于內(nèi)存帶寬而言，很多人都認(rèn)為400MHz、533MHz前端總線的賽揚(yáng)四或P4，配單通道的DDR內(nèi)存就足夠了，雙通道DDR內(nèi)存是配合800MHz以上前端總線的P4處理器用的，其實(shí)這樣就大錯特錯了，哪怕是最老的賽揚(yáng)四，都需要雙通道的DDR內(nèi)存才能達(dá)到它的帶寬！也就是說，你如果選擇賽揚(yáng)四1.8G，必須配合865以上的主板和至少雙通道DDR200的內(nèi)存，才能滿足它的帶寬要求！稍微計算一下就可以得知：賽揚(yáng)四1.8G的前端總線是400MHz，它的內(nèi)存帶寬理論值是400MHz×64bit÷8＝3.2G/s，但當(dāng)它裝在845系列的主板上時，由于845主板的限制，即使你插上能符合它帶寬要求的DDR400內(nèi)存，也只能運(yùn)行在DDR266上，這時的內(nèi)存所能提供的帶寬是266MHz×64bit÷8＝2.1G/s，比3.2G/s要小很多，即使你通過BIOS里的內(nèi)存調(diào)節(jié)選項往上調(diào)節(jié)一檔（也只能調(diào)節(jié)一檔而已），讓內(nèi)存運(yùn)行在DDR333下，所能提供的帶寬也僅僅是333MHz×64bit÷8＝2.66G/s，離3.2G/s還是有一定的距離，而內(nèi)存帶寬的降低，能非常明顯的降低整機(jī)的綜合速度，運(yùn)行任何程序都能明顯的感覺出來！所以如果想滿足賽揚(yáng)1.8G處理器的內(nèi)存帶寬要求，你必須要為它配置865以上的主板和雙通道的內(nèi)存才行！P4亦是如此。很多人也許會問：那845系列的主板是配什么處理器的呢？我想回答你的就是：845系列的主板是屬于“不能用”的主板，因?yàn)樘幚砥饔肋h(yuǎn)比主板發(fā)展的快，當(dāng)初Intel造出845系列的芯片組是為了能給當(dāng)時的賽揚(yáng)和P4提供一個過渡的平臺，不至于讓它們成為“沒有主板配合”的處理器而已，也是為了能在低端市場分一杯羹，而現(xiàn)今865甚至9xx系列的主板橫行的時候，845系列的主板確實(shí)是屬于“不能用”的主板了，滿足不了任何一款處理器的內(nèi)存帶寬，造成性能上的嚴(yán)重低下，試問這種主板你會選擇么？即使配臺2000多元的超低價電腦，也不要去選擇845系列的主板，至少需要865以上的和雙通道內(nèi)存才行，因?yàn)閮?nèi)存帶寬是一個非常影響系統(tǒng)性能的參數(shù)，倘若一味的為了省錢而配置845系列的主板，那就得不償失了。

內(nèi)存的容量方面，應(yīng)每個人對電腦的使用方向不同，容量的要求也是不同的，現(xiàn)在配置的家用電腦，筆者建議：如果不打游戲，或者是打打掃雷、紙牌之類的游戲，平時注重于上網(wǎng)瀏覽或者是聊天、看電影之類的應(yīng)用的話，內(nèi)存容量不應(yīng)該低于1G；如果是偶爾打打單機(jī)游戲或者是網(wǎng)絡(luò)游戲，內(nèi)存容量應(yīng)該選擇在2G左右，如果是經(jīng)常打大型的游戲或是進(jìn)行HDTV視頻編輯等應(yīng)用，那么4G的內(nèi)存是必不可少的。

三、主板

一臺電腦的穩(wěn)定性和兼容性，一大部分是看主板的，一款優(yōu)秀的主板不僅需要擁有上等的用料和優(yōu)良的做工，還需要擁有合理的走線設(shè)計，那些沒有技術(shù)實(shí)力的三、四線主板廠家生產(chǎn)的主板，多數(shù)是采用公版走線，而且用料非常差，穩(wěn)定性不堪一擊，這種類型的主板，筆者建議寧愿不買電腦也不要配這種主板，否則以后將會是個淘氣的祖宗。對于家庭用戶，主板方面一定不能省錢，預(yù)算夠的話最好能買個一線的主板品牌，如果預(yù)算實(shí)在不足，二線的主板是底線了，不要再往下選擇了，畢竟家用電腦是用來使用的，不是用來整天維修的。再談到主板的用料，筆者常常看到很多新手在配置主板的時候，貌似老鳥似的說某某品牌的主板好，某某品牌的不好，試問你知道它好在哪里么？不好在哪里么？這個就要看主板的用料了，雖然用料好的主板并不能代表一定是高檔主板，但最少能代表它的電氣性能出色。舉一個很簡單的例子吧：有A、B兩款主板，A主板的處理器供電濾波電容采用的是日系電容，B主板的處理器供電濾波電容采用的是臺系電容，那么基本上可以肯定的是：如果在電源輸出電壓的波動范圍比較大的情況下，A主板就比較能耐得住，而B主板就很容易產(chǎn)生電容鼓包、漏夜等情況。不要小看這小小的電容，筆者從一個開維修店的朋友那里得知，來維修主板的人，有80％的都是這幾個小電容損壞，究其原因，就是電源選擇的不好，導(dǎo)致了輸出電壓的不穩(wěn)定，久而久之最終導(dǎo)致這幾個小電容爆漿，并且詳細(xì)敘述了主板的品牌：“一線廠家的×碩牌主板就很少出現(xiàn)這種情況，但同樣為一線廠家的×星牌主板，經(jīng)常遇到！原因就是前者的大部分主板使用的是日系電容，而后者的大部分主板為了省錢，選用的是臺系電容！”廠家的廣告不能信，宣傳也不能信，看到一個產(chǎn)品的廣告之后，你所能相信的唯一一點(diǎn)就是：地球上有這么個產(chǎn)品的存在！然后其他的就統(tǒng)統(tǒng)都不能信了！網(wǎng)上有好多所謂的“評測”文章，都是槍手寫的，基本上沒有任何參考余地，只能作為一篇小說來讀，一款主板的真正性能，只有你自己使用了之后才能知道。廠家為了銷量、商家為了利潤，他們能把最最垃圾的主板宣傳為最頂級的產(chǎn)品，筆者曾經(jīng)就看到過一款四線品牌的主板廠商，在對其主流主板的廣告上說“最優(yōu)秀的設(shè)計、最精湛的工藝、最穩(wěn)定的性能”……結(jié)果一看報價：550元/塊……其他的話我也不想多說了，只想問問這家廠商：你這么垃圾的主板都用了三個“最”字，那么華碩的同芯片組主板，售價是你三倍的，應(yīng)該用什么詞語來描述了？？中國有一句古話：一分錢一分貨，說的非常正確！不要認(rèn)為價格高的主板就是暴利產(chǎn)品，從市場經(jīng)濟(jì)學(xué)上說，暴利產(chǎn)品是不會被市場所接受的，之所以他能存活到今天，而且售價依然是這么高，肯定有他的理由，他在做工用料方面肯定比其他品牌的要好很多，成本高所以售價高，在此，筆者奉勸大家一句：買主板千萬不要憑僥幸心理，認(rèn)為自己能花很少的錢買到很好的東西，只有錯買的沒有錯賣的，商家永遠(yuǎn)都比你精明！主板上面還是老老實(shí)實(shí)的多花點(diǎn)錢來買個一線產(chǎn)品吧，否則以后有你吃苦的時候！

四、硬盤

現(xiàn)在的電腦，硬盤的速度當(dāng)之無愧的成為了“第一大瓶頸”，無論你是再高的高手，配電腦的時候也無法消除這個瓶頸的存在，我們只有盡量的減小…再減小……。對于家用電腦的硬盤來說，容量和速度是兩個非常重要的參數(shù)，容量上而言，筆者建議：如果你的電腦只是上網(wǎng)瀏覽瀏覽、偶爾打打小游戲的，那么160G的硬盤是個不錯的選擇；如果你常常下載軟件或電影，那么250G的硬盤是個不錯的選擇，如果你是個下載狂人，那么400G的硬盤比較適合你；如果你有DV或者是經(jīng)常編輯大型的視頻文件，那么400G×2比較適合你，如果你是個玩HDTV的人，那么恭喜你，400G×4也許你都不夠用。對于硬盤容量上的選擇，你不能考慮現(xiàn)在是否夠用，你應(yīng)該考慮未來的1年里是否夠用，大概的公式是：現(xiàn)在需要的容量×3。也就是說，如果你現(xiàn)在感覺80G的硬盤差不多夠用了，那么你就需要買個250G的硬盤。如果你現(xiàn)在感覺120G的硬盤夠用了，那么就去買個400G的硬盤吧。硬盤另外的一個參數(shù)就是速度，受到內(nèi)部傳輸率等諸多因素的限制，一塊硬盤的實(shí)際傳輸速度是不可能達(dá)到它的接口速度的，現(xiàn)在的并口硬盤基本上都是ATA133了，串口硬盤也都是150了，但民用級硬盤的實(shí)際傳輸速度最快的也還沒突破66M/s，所以跟內(nèi)存相比，硬盤的速度是電腦中最大的瓶頸，那么怎么來減小這個瓶頸呢？于是人們就發(fā)明了RAID，就是磁盤陣列（當(dāng)然RAID不是僅僅為了這個而發(fā)明的），用兩塊一模一樣的硬盤來組成RAID0，速度理論上能提高1倍，雖然實(shí)際上是不可能達(dá)到1倍的，但至少能非常非常明顯的感覺到了硬盤速度的提升，筆者建議：如果你買的主板是帶有RAID功能的，并且你需要保存的數(shù)據(jù)不是很重要的話，那么強(qiáng)烈建議你在預(yù)算允許的情況下購買兩塊硬盤來組建RAID0，這將使你能親身體會到飛機(jī)與火車的速度差別！但最好是串口的，如果是并口的話，因?yàn)椴⒖谧叩氖荘CI總線，由于PCI總線上的設(shè)備比較多，所以速度不可能達(dá)到比較高的地步，但如果是串口的話，那么硬盤的速度提升將更加明顯！

五、顯示器

顯示器方面，筆者想澄清一個觀念：曾經(jīng)聽過非常多的人說液晶顯示器保護(hù)眼睛，因?yàn)闆]有輻射和閃爍……包括很多業(yè)內(nèi)人士都這么認(rèn)為的，其實(shí)錯了，液晶顯示器比普通的CRT還要傷眼睛！因?yàn)閭劬Σ粌H僅是輻射和閃爍，還有對比度、亮度等參數(shù)，雖然液晶顯示器的輻射和閃爍比CRT要小的多，但它那要命的對比度、那要命的色澤度、還有那大于每平方米300cd的亮度，這些都會對眼睛造成很大的傷害，并且你即使將液晶顯示器的亮度和對比度調(diào)節(jié)到最低，也還是非常的刺眼。德國的一家權(quán)威機(jī)構(gòu)做過一項調(diào)查：液晶顯示器用久了會使人的眼睛感覺到疲倦，甚至頭痛等癥狀，而使用相同時間的CRT顯示器，卻基本沒有這些情況出現(xiàn)?，F(xiàn)在的通過TCO03認(rèn)證的CRT顯示器，其實(shí)外露的輻射已經(jīng)相當(dāng)小了，基本上對人已經(jīng)沒有多大的傷害了，閃爍感也可以通過調(diào)節(jié)刷新率來降低，筆者實(shí)在是搞不懂為什么很多人非要去選擇液晶顯示器，還非要說液晶顯示器不傷眼睛？？一個最差的17寸液晶顯示器的價格，能買一臺不錯的、通過TCO03標(biāo)準(zhǔn)的19寸CRT了，顯示面積也差不多大，而且CRT又比液晶更保護(hù)眼睛，液晶顯示器唯一的一個優(yōu)點(diǎn)就是占用空間小而已，其他的統(tǒng)統(tǒng)是缺點(diǎn)，為什么不選擇CRT呢？？說到TCO03標(biāo)準(zhǔn)，現(xiàn)在很多的號稱是通過TCO03認(rèn)證的顯示器，其實(shí)都是貼牌的，都沒有真正的通過，關(guān)于怎樣鑒別一臺TCO03的顯示器，網(wǎng)上已經(jīng)有很多文章可以搜索到，筆者在此不想過多敘述，只是提醒大家一點(diǎn)：一臺真正的通過TCO03認(rèn)證的顯示器，外表的顏色除了白色以外，是不會有其他顏色的了，因?yàn)門CO03認(rèn)證中有重要的一條就是外殼可回收性，而除了白色以外，其他的任何顏色都加了有機(jī)染料在里面，是不能作為回收利用的，這點(diǎn)請大家購買顯示器的時候一定要注意了！

六、電源

作為一臺電腦的動力之源，電源質(zhì)量的好壞直接關(guān)系到這臺電腦的壽命，在這點(diǎn)上筆者先要肯定一下品牌機(jī)廠商的做法了，在各大品牌機(jī)中，雖然其他配件可以用跛腳來形容，但所配的電源和機(jī)箱基本上都是不錯的