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

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

HYPERLINK如何選擇組裝電腦配件

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

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

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

一、CPU

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

二、內(nèi)存

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

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

三、主板

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

四、硬盤(pán)

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

五、顯示器

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

六、電源

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