基于微信小程序的影視評論交流系統(tǒng)設(shè)計12000字【論文】

基于微信小程序的影視評論交流系統(tǒng)設(shè)計目錄TOC\o"2-3"\t"標(biāo)題1,1,1級標(biāo)題,1"1引言 引言課題背景微信小程序目前處于手機(jī)應(yīng)用軟件時代的發(fā)展飽和時期，抓住手機(jī)軟件發(fā)展的弊端，做到“觸手可及”和“隨處可用”的特點，利用微信掃一掃或搜一搜的功能，無須下載過程，不占據(jù)手機(jī)內(nèi)存，為用戶帶來高滿足感的體驗[2]。小程序社交平臺系統(tǒng)便是眾多小程序中的一種類型。人們通過篩選小程序社交平臺的興趣屬性，便捷且精準(zhǔn)地尋得自身感興趣的社交平臺，與擁有共同愛好的網(wǎng)友進(jìn)行分享與交流。它是應(yīng)網(wǎng)絡(luò)時代的輕量化所需，將傳統(tǒng)APP化繁為簡后的產(chǎn)物。只需要一部手機(jī)和一個微信，無須注冊以及幾乎無感的加載時間，人們彈指間即可使用小程序。在小程序社交平臺中，人們可以閱讀自己感興趣的信息，發(fā)布閱讀心得，與其他興趣共同愛好者有所交集，進(jìn)而分享和交流，其中不乏專業(yè)性的見解?？梢娫谛〕绦蛏缃黄脚_中分享信息不失為一種高效的社交和體現(xiàn)個人價值的方式。微信小程序是目前用戶量最大，最活躍的平臺。依托于微信龐大的用戶群，微信小程序無論是應(yīng)用數(shù)量，還是用戶數(shù)量，相比其他的支付寶、百度等小程序，都有明顯的優(yōu)勢[5]。綜上所述，微信小程序迎合網(wǎng)絡(luò)時代所需，因此本課題有著重要的研究意義，希望通過本課題讓人們對微信小程序社交平臺的技術(shù)實現(xiàn)有所了解。1.2國內(nèi)研究情況中國研究者針對虛擬社區(qū)展開了大量的探究和分析?？偨Y(jié)出虛擬社區(qū)內(nèi)涵大致包含了下述四項內(nèi)容：其一，虛擬社區(qū)是伴隨著計算機(jī)網(wǎng)絡(luò)技術(shù)發(fā)展而產(chǎn)生的線上社區(qū)。其二，虛擬社區(qū)的發(fā)展離不開眾多動機(jī)或訴求一致的成員及其彼此的溝通與分享。其三，具有明確的主題或話題且社區(qū)規(guī)范化，即為社區(qū)中全體人員必須遵守的行為準(zhǔn)則。而其主要特點有：以通訊手段為基礎(chǔ)，利用計算機(jī)實現(xiàn)的交互行為；（2）成員借助于交流與互動自發(fā)建立的組織，互動行為打破了地域的限制；（3）成員彼此具有堅實的信任基礎(chǔ)，依托于社會紐帶相關(guān)聯(lián)對社區(qū)的強(qiáng)烈歸屬感；（4）成員彼此的需求與喜好相投，基于此進(jìn)行了多種社區(qū)活動；（5）社會交換是社區(qū)成員互動行為的實質(zhì)，互動行為是網(wǎng)絡(luò)生產(chǎn)和消費的組成內(nèi)容之一。1.3國外研究情況國外有關(guān)虛擬社區(qū)的學(xué)術(shù)成果大多是從社區(qū)角度展開分析的。社會學(xué)家采用對比分析的方式梳理了相關(guān)的概念，同時總結(jié)了互聯(lián)網(wǎng)傳播對社會資本與社會政策所產(chǎn)生的影響。而站在傳播和心理學(xué)的視角進(jìn)行的探究具體涵蓋了：參與或潛水的意圖、虛擬社區(qū)成員的活動形式、網(wǎng)絡(luò)滿足和網(wǎng)絡(luò)成癮的心理學(xué)成因、分享和私密等。而后，針對信息結(jié)構(gòu)和信息平臺的研究則主要涉及“信任機(jī)制”的構(gòu)建、“虛擬社區(qū)感”的產(chǎn)生等內(nèi)容，其中虛擬社區(qū)信息分享的動機(jī)始終是重要的研究課題之一。1.4課題研究目標(biāo)及意義傳統(tǒng)的社交往往是面對面的，而線上社交平臺的出現(xiàn)打破了這種限制。它讓每個互聯(lián)網(wǎng)用戶都能更迅速地找到合適自己的社交圈子，在舒適的網(wǎng)絡(luò)環(huán)境中與他人互相交流、分享、學(xué)習(xí)，甚至體現(xiàn)個人價值。有針對性地搭建一個網(wǎng)絡(luò)社交平臺，讓人們得以跨越年齡、地域、社會地位、性格等交流障礙，從而更容易獲得歸屬感和認(rèn)同感。通過微信開發(fā)者工具開發(fā)線上社區(qū)系統(tǒng)，可以迅速和便捷地開發(fā)出符合用戶需求的，靈活便捷的輕量級應(yīng)用程序。本課題旨在開發(fā)出一個基于微信小程序的線上社交平臺，幫助大家了解線上社交平臺如何通過微信小程序的技術(shù)實現(xiàn)，同時也對本人大學(xué)四年來所學(xué)習(xí)的技術(shù)和只是進(jìn)行一次總結(jié)和運用，為未來的工作奠定基礎(chǔ)。

2相關(guān)框架和技術(shù)簡介2.1MINA框架MINA框架是微信團(tuán)隊為小程序提供并命名的。MINA框架通過封裝由微信客戶端提供的任務(wù)管理、文件系統(tǒng)、網(wǎng)絡(luò)通信、數(shù)據(jù)安全等基礎(chǔ)功能，對上層提供一整套JavaScriptAPI，讓開發(fā)者便捷地使用微信客戶端提供的各種基礎(chǔ)能力和功能，高速構(gòu)建應(yīng)用。MINA框架主要分為兩大部分，第一部分為頁面視圖層，第二部分為AppService應(yīng)用邏輯層?？蚣艿暮诵氖且粋€響應(yīng)式的數(shù)據(jù)綁定系統(tǒng)，它能令視圖和數(shù)據(jù)很簡單地保持同步。只需在邏輯層修改數(shù)據(jù)，視圖便會做出對應(yīng)的更新。2.2云開發(fā)2.2.1云函數(shù)云函數(shù)的寫法與一個在本地定義的JavaScript方法相同，云函數(shù)代碼運行在云端Node.js中。在物理設(shè)計上，各個云函數(shù)相互完全獨立，能夠分別部署在不同地區(qū)。一個云函數(shù)可以是由多個文件組合而成，占用一定量的內(nèi)存、CPU等計費資源。開發(fā)者可以免費使用云端，只需要編寫代碼并部署到云端即可隨時在小程序端調(diào)用，且云函數(shù)之間亦可相互調(diào)用。2.2.2云數(shù)據(jù)庫云數(shù)據(jù)庫是高性能、高安全、高可靠、實惠易用的數(shù)據(jù)庫服務(wù)系統(tǒng)，并且能夠有效地降低用戶的運維壓力，為用戶帶來安全可靠的優(yōu)質(zhì)體驗。當(dāng)云數(shù)據(jù)庫運用于微信小程序時，與傳統(tǒng)的前端向后端添加新對象不同，云開發(fā)模式下，開發(fā)者將通過前端的js邏輯文件與云函數(shù)向數(shù)據(jù)庫添加新對象。本段內(nèi)容將不在下文多加贅述。2.2.3云存儲云存儲是一種線上存儲（CloudStorage）的模式，即把數(shù)據(jù)存放在一般由第三方托管的多臺虛擬服務(wù)器，而非專屬的服務(wù)器中。使用者可以在任何地點、任何時間，通過任何聯(lián)網(wǎng)裝置連接到云中便可實現(xiàn)方便地存儲數(shù)據(jù)。此外，云存儲擁有優(yōu)秀的保證數(shù)據(jù)安全的性能，并節(jié)約儲存空間。2.3wxAppCMS內(nèi)容管理系統(tǒng)為了解決傳統(tǒng)靜態(tài)網(wǎng)站建設(shè)中產(chǎn)生的系列問題，形成了以動態(tài)網(wǎng)頁技術(shù)和數(shù)據(jù)庫技術(shù)為基礎(chǔ)的CMS，它能針對政府和企業(yè)網(wǎng)站建設(shè)需求，專門面向網(wǎng)站內(nèi)容編輯、發(fā)布與管理的應(yīng)用系統(tǒng)。CMS基于強(qiáng)健的多層體系架構(gòu)，遵從開放標(biāo)準(zhǔn)，易于與其它應(yīng)用集成，實現(xiàn)功能擴(kuò)展和快速部署[3]。

在微信開發(fā)者工具中由微信團(tuán)隊提供的wxAppCMS便是一個CMS管理系統(tǒng)，其基于云開發(fā)之上采用了PHP和MySQL構(gòu)建，在云開發(fā)控制臺中點擊開通即可安裝在自己的云開發(fā)環(huán)境中，為開發(fā)者的微信小程序提供了一個完美的解決方案。2.4VantWeapp組件庫VantWeapp是移動端Vue組件庫Vant的小程序版本，兩者基于相同的視覺規(guī)范，提供一致的API接口，幫助開發(fā)者快速搭建小程序應(yīng)用。在本人的系統(tǒng)設(shè)計和實現(xiàn)中VantWeapp被用來處理前端的頁面渲染和提交異步請求，大幅降低了前端的代碼量。

3系統(tǒng)分析3.1可行性分析3.1.1技術(shù)可行性本設(shè)計使用微信開發(fā)者工具的云開發(fā)技術(shù)開發(fā)。而作為微信小程序邏輯開發(fā)和數(shù)據(jù)管理的開發(fā)語言是JavaScript，微信小程序官方提供的組件和API可以說是基于JavaScript的開發(fā)庫，開發(fā)者可以使用己有的JavaScript語言進(jìn)行開發(fā)，微信小程序默認(rèn)已經(jīng)加載此開發(fā)庫[6]。在微信開發(fā)者工具中，WXML與WXSS由微信開發(fā)團(tuán)隊提供，前者相當(dāng)于Html，后者相當(dāng)于CSS。前端使用WXML作為視圖顯示并使用VantWeapp組件庫以代替大量的代碼工作,簡化開發(fā)。后端關(guān)于管理文章、用戶消息、留言等數(shù)據(jù)內(nèi)容，通過結(jié)合CMS管理系統(tǒng)與云數(shù)據(jù)庫完成。后端數(shù)據(jù)庫隨小程序版本升級和兼容。小程序使用的服務(wù)器從微信開發(fā)者工具中的云能力中獲得使用。程序前后端皆使用微信開發(fā)者工具的編輯器進(jìn)行編輯。微信團(tuán)隊作為強(qiáng)大的技術(shù)后盾，已經(jīng)為開發(fā)者提供了較為完善的開發(fā)文檔，且其他的技術(shù)己經(jīng)較為成熟，有非常多成熟的代碼可以參考[4]。綜上所述，本設(shè)計在技術(shù)層面上的實現(xiàn)是完全可行的。3.1.2操作可行性微信小程序只需要通過一部智能手機(jī)或者一臺電腦且網(wǎng)絡(luò)可用，即可通過微信客戶端訪問本小程序。本設(shè)計對新手友好，操作簡單，不要求用戶具備任何專業(yè)知識便可根據(jù)引導(dǎo)和提示完成操作。綜合以上的描述，本設(shè)計的操作性完全可行。3.1.3經(jīng)濟(jì)可行性小程序原生云開發(fā)采用騰訊團(tuán)隊的服務(wù)器，提供免費的額度[9]。其所給予的免費額度已經(jīng)足夠本人將本社交平臺系統(tǒng)搭建完成，并且足夠在小程序正式上線后正常運營。而計費項目只需要在系統(tǒng)使用流量超過免費額度時才適合購買，且價格低廉。由此可知本社交平臺系統(tǒng)在經(jīng)濟(jì)理念中考慮是可行的。3.1.4法律可行性本社交平臺系統(tǒng)在開發(fā)過程中所用到的資源都是健康且合法的內(nèi)容。此外，本系統(tǒng)所有的開發(fā)技術(shù)不牽涉任何知識產(chǎn)權(quán)問題以及法律法規(guī)。從法律層次出發(fā)，本系統(tǒng)的開發(fā)是可行的。3.2需求分析3.2.1功能性需求（1）瀏覽文章、查看評論、查看留言、查看歷史記錄。（2）用戶登錄。用戶直接通過系統(tǒng)接口直接關(guān)聯(lián)微信賬號進(jìn)行登錄。（3）用戶評論、留言、點贊。已登錄的用戶可對文章進(jìn)行點贊和留言，亦可對用戶發(fā)布的消息進(jìn)行評論和點贊。（4）管理員登錄。系統(tǒng)通過識別管理員的微信賬號切換為管理員模式。（5）文章管理。管理員可以通過系統(tǒng)后端對文章進(jìn)行查詢、添加、修改和刪除操作。（6）分類管理。管理員可以通過系統(tǒng)后端對文章分類進(jìn)行添加、修改和刪除操作。（7）評論管理。管理員可以通過系統(tǒng)后端對用戶發(fā)布的評論進(jìn)行查看、回復(fù)和刪除操作。（8）留言管理。管理員可以通過系統(tǒng)后端對留言進(jìn)行查看、刪除操作。（9）圖片與視頻文件管理。管理員可通過后臺對圖片以及視頻進(jìn)行查詢、上傳和刪除操作。3.2.2系統(tǒng)用例圖本系統(tǒng)前端的參與者分別有游客、用戶和管理員。游客無須登錄即可在前端進(jìn)行瀏覽文章、查看用戶發(fā)布的內(nèi)容、瀏覽留言板等一系列操作。用戶的權(quán)限在游客的基礎(chǔ)之上，增加了發(fā)布消息、發(fā)表評論、發(fā)表留言和點贊功能等。管理員可以在系統(tǒng)后端中對系統(tǒng)模塊進(jìn)行管理，可以管理文章、管理留言或評論、管理點贊、管理圖片和視頻、管理分類等。用戶的用例圖是作為對用戶信息進(jìn)行分析的依據(jù)，其中包括游客和授權(quán)登錄的用戶兩種對象。游客的功能有：授權(quán)登錄、瀏覽文章、瀏覽評論、瀏覽用戶發(fā)布的信息等。用戶用例圖如圖3.1所示。圖3.1用戶用例圖管理員的功能包括有管理文章、關(guān)麗麗評論、管理留言、管理分類、管理云存儲的圖片與視頻、管理用戶發(fā)布的消息。管理員用例圖如圖3.2所示。圖3.2管理員用例圖3.2.3非功能性需求（1）前端界面需求。本設(shè)計作為一個小程序，區(qū)別于傳統(tǒng)APP，有著小巧便捷即輕量化的特征。因而本系統(tǒng)在界面設(shè)計上將盡量保持簡潔、舒適、有現(xiàn)代化元素的特點。本設(shè)計雖然在功能上不及一部分大體量的傳統(tǒng)APP，但也能通過其平臺特色，以及系統(tǒng)的無須下載、無須安裝、用完即走的輕量化特點成為人們的不二之選。（2）安全性需求。在社交平臺安全層次上，主要考慮的是用戶的信息安全，例如用戶賬戶及數(shù)據(jù)庫的安全。因此在這個大數(shù)據(jù)時代中，做好數(shù)據(jù)信息的安全防護(hù)工作是重中之重。本人采用微信開發(fā)者工具對本系統(tǒng)進(jìn)行開發(fā)，系統(tǒng)全程由微信團(tuán)隊的技術(shù)支持。如用戶授權(quán)登錄本系統(tǒng)時，系統(tǒng)只會采集用戶昵稱以及頭像的圖片地址，并不會直接采集用戶密碼，甚至連用戶地區(qū)信息都會忽略采集。數(shù)據(jù)庫的安全性能同樣由微信團(tuán)隊提供及支持。因此，依賴于強(qiáng)大的微信技術(shù)團(tuán)隊，本系統(tǒng)中用戶的信息數(shù)據(jù)安全可靠。系統(tǒng)的響應(yīng)速度。從用戶的角度出發(fā)，系統(tǒng)的響應(yīng)時間對用戶的體驗感有直接的影響。由于本系統(tǒng)需要頻繁請求數(shù)據(jù)庫與接口，因此本設(shè)計第一步將從控制小程序包的大小開始著手。所以在上傳代碼時壓縮代碼包體積，其次及時清理無用的代碼和資源文件，以及減少資源包中圖片等資源的數(shù)量和大小。第二步，減少不必要的https請求，使用緩存技術(shù)方法將數(shù)據(jù)儲存到本地，以及合理規(guī)劃請求能夠在onLoad頁面就加載，而不需要等頁面ready后再異步請求數(shù)據(jù)。（4）系統(tǒng)的最大并發(fā)量。系統(tǒng)的最大并發(fā)量即系統(tǒng)能夠同時承受多少個用戶進(jìn)行訪問?？紤]到本系統(tǒng)為社交平臺的前提下，對系統(tǒng)的性能十分具有考驗性。本系統(tǒng)通過微信開發(fā)者工具在開發(fā)過程中，免費的服務(wù)資源配額足夠支撐整個開發(fā)過程。若考慮程序上線運營，則需要開通相關(guān)計費服務(wù)。而微信小程序從2017年至今，發(fā)展越發(fā)成熟，擁有絕對可靠的技術(shù)支持。假設(shè)并發(fā)量為300個用戶。每月只需要支付不到20元的價格，便可輕松保障用戶的正常使用。

4概要設(shè)計4.1系統(tǒng)功能模塊設(shè)計本社交平臺系統(tǒng)整體的功能結(jié)構(gòu)設(shè)計包含前端模塊和后端模塊。前端模塊有：用戶授權(quán)登錄、社區(qū)首頁、導(dǎo)航欄、發(fā)現(xiàn)頁面、文章分類、關(guān)于我的、評論版塊、留言板、點贊、發(fā)布按鈕。后臺模塊包括：文章管理、分類管理、導(dǎo)航欄管理、用戶動態(tài)管理、留言管理等。其層次結(jié)構(gòu)如圖4.1所示。圖4.1管理員用例圖4.2系統(tǒng)前端設(shè)計4.2.1用戶登錄模塊微信小程序的登錄模塊區(qū)別于傳統(tǒng)APP，目前版本，其只需要通過設(shè)置button并將open-type指定為getUserInfo類型，通過用戶一個點擊便可輕松可獲取用戶基本信息。簡而言之，微信小程序的登錄不需要進(jìn)行繁雜的注冊操作，只需要關(guān)聯(lián)并調(diào)用原有的微信賬戶即可完成登錄操作。本系統(tǒng)若沒登錄，便是游客身份，可以進(jìn)行基本的瀏覽操作，但不能對文章進(jìn)行點贊、評論和發(fā)布動態(tài)等操作。當(dāng)游客進(jìn)行授權(quán)登錄后，即可成為本系統(tǒng)用戶，從而獲得更高的操作權(quán)限，如可以發(fā)布動態(tài)、評論和點贊等。當(dāng)游客登錄后，系統(tǒng)就會獲取用戶的基本信息，同時用戶也擁有了身份標(biāo)識，為用戶之間的交流以及管理員的管理提供了基礎(chǔ)。本系統(tǒng)的用戶登錄流程如圖4.2所示。圖4.2用戶登錄流程圖4.2.2社區(qū)首頁模塊用戶進(jìn)入首頁后，就能夠?qū)ι鐓^(qū)首頁進(jìn)行瀏覽。社區(qū)平臺首頁包括有頂部導(dǎo)航欄、最新的文章列表、底部導(dǎo)航欄和上拉觸底等部分。用戶能夠通過點擊頁面功能來進(jìn)行相應(yīng)操作。社區(qū)平臺首頁的瀏覽文章功能流程圖如圖4.3所示。圖4.3首頁瀏覽文章功能流程圖4.2.3導(dǎo)航欄模塊導(dǎo)航欄模塊主要分為頂部導(dǎo)航欄和底部導(dǎo)航欄。用戶點擊頂部導(dǎo)航欄可根據(jù)分類獲取到不同的內(nèi)容，其中包括不同類型的文章列表以及用戶的動態(tài)消息區(qū)。底部導(dǎo)航欄固定于小程序底部，用于供用戶轉(zhuǎn)跳到其他功能頁面，即發(fā)現(xiàn)頁面和關(guān)于我的頁面。頂部導(dǎo)航欄模塊的流程圖如圖4.4所示。圖4.4頂部導(dǎo)航欄模塊流程圖4.2.4瀏覽記錄模塊瀏覽記錄模塊位于“關(guān)于我的”頁面中，其分別記錄了用戶點過贊的以及評論過的文章。通過這個模塊用戶可以輕松地查閱自己曾經(jīng)瀏覽過的且感興趣的內(nèi)容，以提高用戶的體驗感。瀏覽記錄流程圖如圖4.5所示。圖4.5瀏覽記錄模塊流程圖4.2.5發(fā)布動態(tài)模塊為了讓用戶更能展現(xiàn)個人價值，本社交平臺系統(tǒng)設(shè)置了發(fā)布動態(tài)模塊。已登錄的用戶可以通過點擊虛擬按鈕使用此功能，在社區(qū)平臺中發(fā)布個人動態(tài)。發(fā)布動態(tài)流程圖如圖4.6所示。圖4.6發(fā)布動態(tài)模塊流程圖4.2.6留言板模塊本社交平臺系統(tǒng)設(shè)置留言板模塊，旨在加強(qiáng)用戶之間的互動感，游客和用戶皆可在留言板中查看所有留言信息。已登錄的用戶可以使用留言板的留言功能。留言板活動圖如圖4.7所示。圖4.7留言板模塊流程圖4.2.7點贊模塊本社交平臺中設(shè)置有點贊模塊，已登錄的用戶可以為自己喜歡的文章或者其他用戶發(fā)布的動態(tài)點贊。而點贊作為一種正向的交互行為，通過點贊模塊用戶可以從中感受到來自其他用戶的認(rèn)同，從而獲得成就感以及歸屬感。文章點贊的活動圖如圖4.8所示。圖4.8點贊模塊流程圖4.3系統(tǒng)后端設(shè)計微信小程序允許對接任意語言開發(fā)的后端接口，例如：PHP、Node.js、JavaEE等。用戶可以根據(jù)實際擅長情況任意選擇一款進(jìn)行后端開發(fā)和接口的制作[10]。本系統(tǒng)后端設(shè)計部分主要依賴微信開發(fā)者工具中的云數(shù)據(jù)庫以及CMS管理系統(tǒng)。其管理模式相對固定、界面簡潔和便捷高效，不僅易于新手開發(fā)者上手，而且能滿足企業(yè)級的應(yīng)用需求。以下小節(jié)將展示出系統(tǒng)部分關(guān)鍵的流程圖。4.3.1文章管理模塊本系統(tǒng)管理員通過登錄系統(tǒng)后端，可以對社區(qū)文章進(jìn)行管理。其中包含添加文章、修改文章、刪除文章等操作。文章管理模塊是本系統(tǒng)后端模塊的核心，其重點在于合理規(guī)劃各項數(shù)據(jù)的屬性，以求取得更便利的管理方式，同時本模塊還影響著前端用戶對操作本系統(tǒng)的體驗感。管理文章活動圖如圖4.9所示。圖4.9文章管理活動圖圖4.3.2云存儲模塊管理員可通過微信開發(fā)者工具的云存儲功能上傳文本、圖片、視頻等到云端，云存儲不僅可訪問性強(qiáng)還能減少存儲空間浪費。云存儲活動圖如圖4.10所示。圖4.10云存儲模塊活動圖4.3.3用戶動態(tài)管理模塊管理員通過后端，可以對用戶所發(fā)布的動態(tài)進(jìn)行管理。其中包含添加、刪除和評論操作。用戶動態(tài)管理活動圖如圖4.11所示圖4.11用戶動態(tài)管理活動圖4.3.4導(dǎo)航欄管理模塊管理員登錄本系統(tǒng)后端后，可以對導(dǎo)航欄進(jìn)行增加、修改和刪除。其中可通過修改導(dǎo)航欄的索引值進(jìn)而影響對應(yīng)的用戶可以獲取的數(shù)據(jù)內(nèi)容。導(dǎo)航欄管理活動圖如圖4.12所示。圖4.12導(dǎo)航欄管理活動圖4.3.5評論管理模塊管理員登錄系統(tǒng)后端后，可以對評論進(jìn)行添加和刪除操作。評論管理模塊的活動圖如圖4.13所示。圖4.13評論管理模塊活動圖

5數(shù)據(jù)庫設(shè)計5.1概念模型的實現(xiàn)根據(jù)本社交平臺系統(tǒng)的業(yè)務(wù)需求，通過對主要業(yè)務(wù)的抽象，設(shè)計云數(shù)據(jù)庫的實體，以及與業(yè)務(wù)之間的聯(lián)系。本社交平臺系統(tǒng)的系統(tǒng)E-R圖如圖5.1所示。圖5.1系統(tǒng)E-R圖本系統(tǒng)數(shù)據(jù)庫主要實體及其聯(lián)系如上圖5.1所示。其中包括了管理員、用戶、文章、標(biāo)簽索引、評論、點贊、動態(tài)、云存儲等實體。其中清楚說明了實體間的關(guān)系，如：管理員、用戶、文章分別是一對多關(guān)系。由于篇幅關(guān)系，本章節(jié)將不再多加贅述。下面將列出部分實體的具體E-R圖。文章具有標(biāo)題、索引值、內(nèi)容、封面圖片、點贊數(shù)等主要屬性，且具有是否留言這類用于判斷的屬性。文章列表和詳情頁將面根據(jù)這些屬性來判斷需要顯示的內(nèi)容。文章的實體圖如圖5.2所示。圖5.2文章實體圖管理員具有管理員ID、昵稱、頭像屬性。管理員的實體圖如圖5.3所示。圖5.3管理員實體圖用戶具有用戶ID、昵稱、頭像、添加時間屬性。用戶實體圖如圖5.4所示。圖5.4用戶實體圖評論具有用戶ID、評論ID、評論內(nèi)容、添加時間屬性。評論實體圖如圖5.5所示。圖5.5評論實體圖5.2數(shù)據(jù)結(jié)構(gòu)表本設(shè)計使用微信開發(fā)者工具中原生的云數(shù)據(jù)庫，當(dāng)開發(fā)者在云數(shù)據(jù)庫中創(chuàng)建數(shù)據(jù)內(nèi)容時，除數(shù)據(jù)類型外云數(shù)據(jù)庫對各項數(shù)據(jù)屬性的默認(rèn)值設(shè)置不作要求，其會自根據(jù)自身內(nèi)部設(shè)定自動識別。故微信開發(fā)者工具中的云開發(fā)能力大大節(jié)約了開發(fā)者的開發(fā)時間。為了能夠更加清晰地展示出本設(shè)計的數(shù)據(jù)結(jié)構(gòu)，以及規(guī)劃數(shù)據(jù)的邏輯，下面將給出本設(shè)計的文章、管理員、用戶、評論、點贊、導(dǎo)航欄的數(shù)據(jù)表。每個表有字段名稱、類型、主鍵、非空等幾個方面，對數(shù)據(jù)表進(jìn)行說明。表中“類型”使用云數(shù)據(jù)庫的數(shù)據(jù)類型表述。文章表中的_id是文章的唯一標(biāo)識，通過此值可不重復(fù)地列出每一篇存在數(shù)據(jù)庫中的文章；classid為文章的索引值，導(dǎo)航欄功能通過識別不同的索引值對文章進(jìn)行分類。文章表如表5.1所示。表5.1文章表字段名稱類型主鍵非空自增說明_idString是是是這條記錄的idtitleString否是否文章標(biāo)題authorString否是否作者名稱classidNumber否是否索引值idcontentString否是否文章內(nèi)容picUrlArray否否否封面圖片pingNumber否否否評論數(shù)zanNumber否否否贊數(shù)posttimeNumber否是是創(chuàng)建時間小程序為每個用戶分配唯一的標(biāo)識碼openid，它相當(dāng)于用戶在小程序里的身份證，通過獲取openid識別用戶身份的過程稱為鑒權(quán)[1]。管理員表如表5.2所示。表5.2管理員表字段名稱類型主鍵非空自增說明openidString是是是管理員idnicknameString否是否昵稱avatarUrlString否是否頭像languageString否是否語言用戶表中的nickname和avatarUrl是用戶在授權(quán)登錄時，系統(tǒng)通過微信授權(quán)接口，經(jīng)用戶同意后獲取的該用戶的微信昵稱和微信頭像。用戶表如表5.3所示。表5.3用戶表字段名稱類型主鍵非空自增說明openidString是是是用戶idnicknameString否是否昵稱avatarUrlString否是否頭像languageString否是否語言點贊表如表5.4所示。表5.4點贊表字段名稱數(shù)據(jù)類型主鍵非空自增說明_idString是是是這條記錄的idpidString否是否評論idpingTxtString否是否評論內(nèi)容posttimeNumber否是否添加時間userInfoObject否是否用戶信息以下展示的為文章評論表，其中為了維護(hù)用戶發(fā)布信息的文明規(guī)范，特設(shè)置“評論狀態(tài)”這項數(shù)據(jù)，管理員可根據(jù)消息內(nèi)容判斷是否修改布爾值，從而決定顯示或隱藏選中的評論。文章評論表如表5.5所示。表5.5文章評論表字段名稱類型主鍵非空自增說明_idString是是是這條記錄的idparenridString否是否上層評論的idcontentString否是否評論內(nèi)容posttimeNumber否是否添加時間openidObject否是否用戶idnickeNameString否是否昵稱avatarUrlSteing否是否頭像likeArrArray否是否點贊用戶checkedBoolean否是否評論狀態(tài)articleidString否是否文章id導(dǎo)航欄表如表5.6所示表5.6導(dǎo)航欄表字段名稱數(shù)據(jù)類型主鍵非空自增說明_idString是是是這條記錄的idclassidNumber否是否索引值classnameString否是否導(dǎo)航欄名稱posttimeNumber否是否添加時間

6系統(tǒng)實現(xiàn)6.1模型的實現(xiàn)本系統(tǒng)的模型主要以數(shù)據(jù)驅(qū)動、腳本邏輯和通信模型三方面實現(xiàn)。數(shù)據(jù)驅(qū)動。通常界面視圖和變量狀態(tài)是相關(guān)聯(lián)的，讓狀態(tài)和視圖綁定在一起，即狀態(tài)改變時，視圖也能自動更變，而非手動修改視圖的工作，這便是數(shù)據(jù)驅(qū)動。在本系統(tǒng)中，數(shù)據(jù)驅(qū)動的表現(xiàn)為，系統(tǒng)中的WXML先轉(zhuǎn)成JS對象，繼而渲染出真正的DOM樹。腳本邏輯。本系統(tǒng)的腳本邏輯是通過編輯系統(tǒng)文件中的JS文件實現(xiàn)的，JS文件也稱小程序的邏輯層文件。通信模式。本系統(tǒng)的渲染層和邏輯層分別由兩個線程管理。渲染層的界面使用了WebView進(jìn)行渲染；邏輯層采用JsCore線程運行JS腳本。本系統(tǒng)存在多個界面，所以渲染層存在多個WebView線程，這兩個線程的通信會經(jīng)由微信客戶端中轉(zhuǎn)，邏輯層發(fā)送網(wǎng)絡(luò)請求也經(jīng)由微信客戶端轉(zhuǎn)發(fā)。就功能模塊而言。微信小程序要先分功能模塊，然后再把每一個大的功能模塊慢慢一步一步細(xì)化成一個個小的功能模塊，由整體到局部的設(shè)計原則。每一個功能模塊之間的功能要有獨立性，不能相互影響到彼此{(lán)8}。6.2業(yè)務(wù)控制器的實現(xiàn)以用戶授權(quán)登錄為例，以下是用戶授權(quán)登錄業(yè)務(wù)控制層邏輯實現(xiàn)的代碼。//獲取管理員openidgetAdmin(){wx.cloud.callFunction({name:"demo_get_openid"}).then(res=>{if(res.result.code==1){this.setData({admin:true})}else{this.setData({admin:false})}})},//獲取授權(quán)信息hasUserInfo(){if(this.globalData.userInfo&&this.globalData.userInfo.nickName){returntrue;}letuserInfo=wx.getStorageSync('userInfo');if(userInfo&&userInfo.nickName){this.globalData.userInfo=userInfo;returntrue;}else{returnfalse;}},getUser(){if(app.hasUserInfo()){varuserInfo=app.globalData.userInfo;this.setData({dataUser:userInfo})}},6.3視圖的實現(xiàn)視圖采用WXML結(jié)合Vue技術(shù)中的VantWeapp來顯示。以本社交平臺系統(tǒng)的發(fā)現(xiàn)頁面為例。由于發(fā)現(xiàn)頁面篇幅過長只展示含有以上兩項技術(shù)的部分代碼。下面是本系統(tǒng)發(fā)現(xiàn)頁面的核心實現(xiàn)代碼。<viewclass="header"><viewclass="containerhdCon"><navigatoropen-type="switchTab"url="/pages/index/index"class="logo"><imagemode="heightFix"src="/images/faxian.png"></image></navigator><viewclass="kefu"><buttonclass="btn"open-type="contact">123</button><imageclass="pic"mode="heightFix"src="/images/jiaojuan.png"></image></view></view></view><viewclass="banner"><swiperindicator-dotsindicator-color="rgba(.5)"indicator-active-color="#fff"circularautoplayinterval="4000"><swiper-item><imagemode="aspectFill"src="/images/mazi.jpg"/></swiper-item><swiper-item><imagemode="aspectFill"src="/images/mazi.jpg"/></swiper-item><swiper-item><imagemode="aspectFill"src="/images/mazi.jpg"/></swiper-item></swiper></view>6.4系統(tǒng)相關(guān)配置的實現(xiàn)6.4.1VantWeapp的配置實現(xiàn)VantWeapp的配置代碼如下："usingComponents":

{

"van-button":

"@vant/weapp/button/index",

"van-icon":

"@vant/weapp/icon/index",

"van-panel":

"@vant/weapp/panel/index",

"van-cell":

"@vant/weapp/cell/index",

"van-grid":

"@vant/weapp/grid/index",

"van-grid-item":

"@vant/weapp/grid-item/index",

"van-popup":"@vant/weapp/popup/index",

"van-row":

"@vant/weapp/row/index",

"van-col":

"@vant/weapp/col/index",

"van-field":

"@vant/weapp/field/index"}6.4.2云存儲的配置實現(xiàn)云存儲是微信開發(fā)工具中云開發(fā)模式的一項功能，關(guān)于云存儲的代碼配置主要針對文件的上傳日期讓存儲文件的操作更加便捷。代碼如下：//創(chuàng)建云存儲文件夾if(this.data.tempPath.length){this.data.tempPath.forEach((item)=>{vard=newDate();varyear=d.getFullYear()+"";varmonth=d.getMonth()+1;month=month<10?"0"+month:month+"";varday=d.getDate();day=day<10?"0"+day:day+"";varfile=this.getMyId()varfilename="demoimg/"+year+month+day+"/"+file+this.getMyFile(item);this.uploadFile(filename,item)})}//上傳圖像到云存儲uploadFile(filename,path){wx.cloud.uploadFile({cloudPath:filename,filePath:path}).then(res=>{pathArr.push(res.fileID)if(pathArr.length==this.data.tempPath.length){formData.picUrl=pathArrthis.pushCloud(formData)}})},}6.4.3云函數(shù)的配置實現(xiàn)以點贊功能為例，點贊功能的云函數(shù)核心代碼如下：//云函數(shù)入口exports.main=async(event,context)=>{constopenid=cloud.getWXContext().OPENIDconst_id=event._id;varres=awaitdb.collection("demonews").where({_id,zanNum:_.all([openid])}).count();if(res.total){returnawaitdb.collection("demonews").doc(_id).update({data:{zanNum:_.pull(openid)}})}returnawaitdb.collection("demonews").doc(_id).update({data:{zanNum:_.push([openid])}})}，6.5系統(tǒng)功能的實現(xiàn)6.5.1前端功能的實現(xiàn)前端功能模塊包含了很多頁面，故而不一一列舉。以下給出部分模塊功能實現(xiàn)后的頁面布局效果圖，并展示出部分核心代碼。本系統(tǒng)首頁中包含了導(dǎo)航欄模塊、文章列表模塊和發(fā)布動態(tài)模塊。前端首頁的功能如圖6.1所示。圖6.1平臺首頁圖本社交平臺系統(tǒng)首頁功能的核心代碼如下所示。//獲取文章列表gesNewsData(classid=11,page=0,num=5){wx.cloud.callFunction({name:"demo_get_news",data:{classid:classid,num,page,}}).then(res=>{if(res.result.data.length==0){this.setData({onLoaded:false})}varoldData=this.data.newsListvarnewData=oldData.concat(res.result.data)if(classid==11){this.setData({newsList:newData})本系統(tǒng)中的導(dǎo)航欄模塊旨在優(yōu)化用戶閱讀，為了讓操作體驗感也能得到提升，設(shè)置了導(dǎo)航欄左右滑動以及導(dǎo)航欄坐標(biāo)定位功能。前端導(dǎo)航欄功能如圖6.2所示。圖6.2導(dǎo)航欄圖導(dǎo)航欄的核心代碼如下所示。//獲取導(dǎo)航欄getNavlist(){wx.cloud.callFunction({name:"get_nav_list"}).then(res=>{this.setData({navList:res.result.data})})},//點擊導(dǎo)航clickNav(res){var

navIdx=res.currentTarget.dataset.idxvar

navID=res.currentTarget.dataset.idnavIdOut=navIDthis.setData({newsList:[],onLoaded:true,navIdx,navID})this.gesNewsData(navID)this.getScrLeft(navIdx)},//滑動導(dǎo)航欄getScrLeft(navIdx){var

itemWth=wx.getSystemInfoSync().windowWidth/4var

scrLeft=(navIdx-1)*itemWthif(scrLeft<0){scrLeft=0}this.setData({scrLeft})},討論區(qū)是展示用戶動態(tài)的頁面，其中用戶可以上傳文案和圖片，并可以對動態(tài)進(jìn)行評論與點贊。用戶動態(tài)頁面如圖6.3所示。圖6.3用戶動態(tài)頁面圖用戶發(fā)布動態(tài)功能如圖6.4所示。圖6.4用戶發(fā)布動態(tài)界面圖管理員發(fā)布文章功能圖如圖6.5所示。圖6.5管理員發(fā)布文章界面圖用戶發(fā)布動態(tài)的核心代碼如下。//點擊提交表單onSubmit(res){wx.showLoading({title:

'發(fā)布中...',mask:true})formData

=

res.detail.valuevar{title,author}=res.detail.value;if(title.length==0

||

author.length==0){wx.showToast({title:

'標(biāo)題及作者必填',icon:"loading",mask:true})return}if(this.data.tempPath.length){this.data.tempPath.forEach((item)=>{var

d=new

Date();var

year=d.getFullYear()+"";var

month=d.getMonth()+1;month=month<10

?

"0"+month

:

month+"";var

day=d.getDate();day=

day<10

?

"0"+day

:

day+"";var

file

=

this.getMyId()var

filename="demoimg/"+year+month+day+"/"+file+this.getMyFile(item);this.uploadFile(filename,item)})}else{this.pushCloud(formData)}},留言板模塊有文章評論模塊和用戶動態(tài)留言彈窗兩部分，以更好地針對用戶對不同模塊的功能需求，以及提高用戶使用本系統(tǒng)平臺的體驗感。文章評論模塊以組件方式搭建，并構(gòu)建二級回復(fù)功能，在將功能模塊化的前提下滿足用戶在文章的評論模塊中評論功能和回復(fù)功能的基本需求。用戶動態(tài)留言板采用彈窗功能實現(xiàn)，提升用戶閱讀和操作的體驗感。用戶動態(tài)留言板功能如圖6.6所示。圖6.6彈窗留言板圖文章評論功能如圖6.7所示。圖6.7文章評論功能圖彈框留言板的核心代碼如下所示。//評論框pingChange(e){this.setData({pingTxt:e.detail})},//顯示評論框showPopup(){this.setData({pingShow:false})},//獲取評論列表getPingData(){wx.cloud.callFunction({name:"blog_get_ping",data:{pingId}}).then(res=>{this.setData({pingList:res.result.data})})},文章評論模塊的核心代碼如下所示。//點擊提交評論clickSubmit(){wx.showLoading({title:'請稍后...',mask:true})commentObj={content:mentValue,nickName:this.data.userInfo.nickName,avatarUrl:this.data.userInfo.avatarUrl,articleid:id,parentid:"",likeArr:[],checked:true}wx.cloud.callFunction({name:"yssq_comment_add",data:{commentObj}}).then(res=>{wx.hideLoading()wx.showToast({title:'提交成功',})this.setData({commentValue:""})this.getCommentData()})},//獲取評論列表getCommentData(){wx.cloud.callFunction({name:"yssq_comment_get",data:{articleid:id}}).then(res=>{this.setData({commentList:res.result.data,count:res.result.count})})},二級回復(fù)功能核心代碼如下所示。//提交回復(fù)clickSubmit(){letreplyObj={content:this.data.repValue,nickName:this.data.userInfo.nickName,avatarUrl:this.data.userInfo.avatarUrl,articleid:this.data.pItem.articleid,parentid:this.data.pItem._id,posstime，likeArr:[],checked:true}wx.cloud.callFunction({name:"yssq_comment_add",data:{commentObj:replyObj}}).then(res=>{let_id=res.result._idwx.showToast({title:'回復(fù)成功',})letreplyList=this.data.replyList;replyObj.posttime=Date.now();replyObj._id=_idreplyList.unshift(replyObj)this.setData({replyList,repValue:""})replySize++;wx.setNavigationBarTitle({title:replySize+'條回復(fù)',})})},//獲取二級回復(fù)getReplyList(){wx.cloud.callFunction({name:"yssq_reply_get",data:{id:this.data.pItem._id}}).then(res=>{console.log(res);this.setData({replyList:res.result.data,loading:false})replySize=res.result.countwx.setNavigationBarTitle({title:replySize+'條回復(fù)',})}),},文章點贊功能如圖6.8所示。圖6.8文章點贊按鈕圖用戶動態(tài)點贊功能如圖6.9所示圖6.9用戶動態(tài)點贊按鈕圖點贊功能的核心代碼如下所示。//點贊操作clickZan(e){wx.showLoading({title:

'加載中...',mask:true})var

{id,idx}=e.currentTarget.dataset;wx.cloud.callFunction({name:"blog_add_zan",data:{_id:id

}}).then(res=>{var

_newsList=this.data.newsListif(_newsList[idx].isZan){_newsList[idx].num++}else{_newsList[idx].num--

}_newsList[idx].isZan=!_newsList[idx].isZanthis.setData({newsList:_newsList})wx.hideLoading()})},6.5.2后端功能的實現(xiàn)由于有CMS與云數(shù)據(jù)庫技術(shù)的支持，本設(shè)計不需重新搭建一個功能齊全的后端管理系統(tǒng)，因此在開發(fā)過程中只保留必要的數(shù)據(jù)導(dǎo)入功能。本設(shè)計的各項數(shù)據(jù)的輸入輸出主要通過云函數(shù)收發(fā)，其各個對象也可通過CMS管理系統(tǒng)進(jìn)行增加、查詢、修改和刪除。文章管理列表的實現(xiàn)如圖6.10所示。圖6.10文章管理列表圖添加文章的核心代碼如下。//

云函數(shù)入口函數(shù)exports.main

=

async

(event,

context)

=>

{const

openid

=

cloud.getWXContext().OPENIDvar

{title,author,content,picUrl}=event.formDatavar

{nickName,avatarUrl}

=

event.userInforeturn

await

db.collection("demonews").add({data:{title,author,content,openid,zan:0,ping:0,classid:12,posttime:Date.now()

,picUrl,nickName,avatarUrl

}})}，從上述代碼可見，在“云開發(fā)”模式下，小程序端和云環(huán)境的開發(fā)體系是保持一致的，這有利于簡化業(yè)務(wù)流程[1]。后端的導(dǎo)航管理中，導(dǎo)航欄分類管理功能的實現(xiàn)如圖6.11所示。圖6.11導(dǎo)航欄管理列表圖其通過云函數(shù)實現(xiàn)的核心代碼如下。//

云函數(shù)入口函數(shù)exports.main

=

async

(event,

context)

=>

{const

openid

=

cloud.getWXContext().OPENIDreturn

await

db.collection("nav_list").orderBy("type","asc").get()}評論管理的實現(xiàn)如圖6.12。圖6.12評論管理列表圖評論管理的核心代碼如下：//

云函數(shù)入口函數(shù)exports.main

=

async

(event,

context)

=>

{var

{pingObj}=event;const

openid

=

cloud.getWXContext().OPENIDpingObj.openid=openid;pingObj.posttime=Date.now()return

await

db.collection("blog_ping").add({data:pingObj})}，

7測試7.1測試目的對系統(tǒng)進(jìn)行測試是為了發(fā)現(xiàn)本系統(tǒng)中可能存在的但是在開發(fā)過程中并未被發(fā)現(xiàn)的錯誤和缺陷，在系統(tǒng)上線之前對其進(jìn)行測試，可保證系統(tǒng)的可用性和安全性。本社交平臺系統(tǒng)為了確保每個功能模塊的可用性和準(zhǔn)確性，因而對系統(tǒng)進(jìn)行測試，從各個方面和角度測試本系統(tǒng)的功能是否存在漏洞，以及系統(tǒng)界面的顯示是否正常。本系統(tǒng)的測試使用微信小程序中的真機(jī)調(diào)試模式進(jìn)行。選擇調(diào)試模式后，系統(tǒng)將會自動打開調(diào)試面板，并在手機(jī)上打開微信調(diào)試窗口。無論手機(jī)端進(jìn)行什么操作，都會在控制面板上直接顯示[7]。7.2測試內(nèi)容本系統(tǒng)開發(fā)完成后，使用安卓及IOS系統(tǒng)的不同機(jī)型進(jìn)行測試。服務(wù)器及數(shù)據(jù)庫由微信云開發(fā)功能提供，其版本在微信開發(fā)者工具中保持最新。出于篇幅關(guān)系的考慮，下面將只列出部分功能模塊的測試內(nèi)容。用戶登錄是用戶所需求的基本功能，是程序各項功能模塊是否能被用戶