基于NodeJS的開發(fā)者交流社區(qū)

摘要本論文旨在解決現(xiàn)有的技術(shù)交流社區(qū)網(wǎng)站的不完善問題，以現(xiàn)有的各類社區(qū)作為主要研究對(duì)象?；谥髁鞯拈_發(fā)語言和工具，包括React、Antd、NodeJS、MongoDB等框架和數(shù)據(jù)庫，設(shè)計(jì)并實(shí)現(xiàn)一款運(yùn)行于PC端瀏覽器上的技術(shù)交流社區(qū)，給程序員等其他技術(shù)人員提供一個(gè)全面的交流平臺(tái)。本系統(tǒng)基于MVVM設(shè)計(jì)模式，在前后端架構(gòu)上選取流行的模式（分離前后臺(tái)），選用React作為前臺(tái)的主要技術(shù)棧，而后端則選用Node.js，數(shù)據(jù)庫則選取非關(guān)系型數(shù)據(jù)庫MongoDB，各類編程語言結(jié)合VSCode編輯器使得本系統(tǒng)具有較高的實(shí)用性、拓展性。系統(tǒng)主要功能包含發(fā)表技術(shù)文章、發(fā)表沸點(diǎn)動(dòng)態(tài)、在線加好友、在線聊天等。關(guān)鍵詞：React；NodeJS；MongoDB；SPA；技術(shù)社區(qū)；開發(fā)者AbstractThisthesisaimstosolvetheimperfectproblemoftheexistingtechnicalcommunicationcommunitywebsite,andtakesvariousexistingcommunitiesasthemainresearchobject.Thetechnologyusedisbasedonmainstreamdevelopmentlanguagesandtools,includingReact,Antd,NodeJS,MongoDBandotherframeworks.Anddatabase,designandimplementaPC-basedbrowsertechnologycommunicationcommunity，provideprogrammersandothertechnicalpersonnelwithacomprehensivecommunicationplatform.MVVMisthecornerstoneofthissystem,usingacompletelyseparatefrontandbackendform,thefrontendusesFiberReactisanarchitecture.ThebackendusesNodeJStobuildasingleapplication.Thedatabaseusesanon-relationaldatabaseMongoDB.Variousprogramminglanguages??combinedwiththeVSCodeeditormakethissystemhighlypracticalandscalable.Themainfunctionsofthesystemincludepublishingtechnicalarticles,publishingboilingpointdynamics,addingfriendsonline,onlinechat,etc.Keywords：React;NodeJS;MongoDB;SPA;Technologycommunity;Developer

目錄第一章緒論 第一章緒論1.1研究背景目的和意義近幾年，互聯(lián)網(wǎng)產(chǎn)業(yè)飛速磅礴發(fā)展，計(jì)算機(jī)作為互聯(lián)網(wǎng)的主要載體，發(fā)揮了重要的作用，正因?yàn)槿绱?，?jì)算機(jī)軟件開發(fā)行業(yè)也快速崛起，從而催生出了軟件開發(fā)工程師這個(gè)職業(yè)，并且程序員數(shù)量日益增多，眾所周知，知識(shí)是沒有國(guó)界的，那么眾多的程序員如何互相交流，分享知識(shí)呢?博客（Blog），以用戶聯(lián)系為基礎(chǔ)，用戶可以在其上發(fā)布各種內(nèi)容，包括但不限于隨筆、感想、技術(shù)交流等，它是一個(gè)網(wǎng)絡(luò)平臺(tái)，用戶可以在該平臺(tái)上建立自己的圈子和社區(qū)，借此來分享信息。博客（Blog）是網(wǎng)絡(luò)發(fā)展的潮流下催生的優(yōu)秀產(chǎn)物，它的分享性強(qiáng)，快速傳播，有效地將“你”、“我”、“他”三者結(jié)合。特別是對(duì)于軟件開發(fā)人員來說，需要一個(gè)能將自己的想法、開發(fā)經(jīng)驗(yàn)、開發(fā)心得分享給其他開發(fā)者、能汲取到其他開發(fā)者的知識(shí)的平臺(tái)。博客類似于一個(gè)社交網(wǎng)絡(luò)，每一個(gè)用戶不僅僅只是一個(gè)觀眾（Visitor），觀閱自己有興趣的信息，同時(shí)也是一個(gè)分享者（Sharer），將自己的知識(shí)分享給他人。用一句話來概括：“人皆可聽，人皆可言，人皆可寫”[1]。但是，對(duì)于開發(fā)者這一專業(yè)的群體來說，僅僅依靠博客來單純地發(fā)表文章、評(píng)論是遠(yuǎn)遠(yuǎn)不夠的。進(jìn)而，需要一個(gè)功能更為完善的平臺(tái)，姑且稱它為——社區(qū)。目前，市面上已經(jīng)有很多技術(shù)交流社區(qū)，諸如CSDN、掘金、思否、開發(fā)者頭條等……以上這些都是比較知名的平臺(tái)。它們都在博客的基礎(chǔ)上，添加了發(fā)表動(dòng)態(tài)、發(fā)表想法等功能，這讓眾多開發(fā)者可以在閑暇時(shí)間去舒緩自己的心情。諸如掘金、思否、CSDN等社區(qū)，基本功能是很完善的，但是仍然存在一些欠缺的點(diǎn)，比如缺少私信功能。因?yàn)殚_發(fā)者對(duì)于代碼、各類文件、圖片的需求是很大的，僅僅依靠文章評(píng)論作為運(yùn)輸載體肯定是不夠的，所以需要“私信”。什么是私信?簡(jiǎn)單來說就是在線聊天，兩個(gè)開發(fā)者可以在交流平臺(tái)上進(jìn)行遠(yuǎn)程的在線聊天，利用本系統(tǒng)在線聊天室提供的發(fā)送文件、發(fā)送代碼、發(fā)送圖片等輔助型功能進(jìn)行更深層級(jí)的交流。以下為本系統(tǒng)的主要特點(diǎn)：高交流性：在保持博客的基本功能前提下，增加的在線聊天室，使得開發(fā)者可以通過實(shí)時(shí)添加、刪除好友，來進(jìn)行高質(zhì)量、隨時(shí)隨地的在線聊天。高性能：采用Redis作為緩存數(shù)據(jù)庫，解決點(diǎn)贊、統(tǒng)計(jì)在線情況的需求。1.2論文總體結(jié)構(gòu)本系統(tǒng)前端采用React，后端采用NodeJS，數(shù)據(jù)存儲(chǔ)則選用MongoDB。React作為前端三大框架之一，以其“組件化”的思想收獲了一大批開發(fā)者；NodeJS則是一個(gè)后起之秀；MongoDB作為一個(gè)非關(guān)系型數(shù)據(jù)庫，其優(yōu)質(zhì)的特性可以與NodeJS完美融合；Redis作為數(shù)據(jù)緩存數(shù)據(jù)庫，有效的解決點(diǎn)贊時(shí)產(chǎn)生的性能問題。以下為本論文的大致框架：第一章：論文緒論，簡(jiǎn)要概述本論文的研究背景、研究目的、技術(shù)架構(gòu)等。第二章：介紹本系統(tǒng)采用的各種技術(shù)棧，包括前端、后端、數(shù)據(jù)庫，以及各技術(shù)的特點(diǎn)。第三章：需求分析模塊，以功能導(dǎo)向?yàn)榛A(chǔ)，提前規(guī)劃整個(gè)系統(tǒng)，包括需求是否可行，需求是否合理等。第四章：系統(tǒng)設(shè)計(jì)板塊，著重對(duì)整個(gè)系統(tǒng)的數(shù)據(jù)庫加以設(shè)計(jì)，包括字段可行性、字段拓展性等。第五章：系統(tǒng)實(shí)現(xiàn)和測(cè)試，利用編程技術(shù)，結(jié)合需求分析的結(jié)果，對(duì)系統(tǒng)加以實(shí)現(xiàn)和完善；并最終進(jìn)行自測(cè)，對(duì)于明顯的BUG加以解決。第六章：論文總結(jié)部分，也是整篇論文的收尾工作，包括系統(tǒng)的結(jié)構(gòu)優(yōu)化、功能優(yōu)化、代碼優(yōu)化，以及對(duì)于整篇論文的總結(jié)和展望。

第二章系統(tǒng)有關(guān)技術(shù)2.1ReactJSReact.js是一個(gè)幫助前端開發(fā)者構(gòu)建頁面UI的庫，與Vue、Angular同屬前端的優(yōu)秀框架之一。React會(huì)在數(shù)據(jù)流發(fā)生變化的情況下，利用內(nèi)部的調(diào)和、調(diào)度機(jī)制更新組件（聲明式）；聲明式使得React代碼更加健壯，利于開發(fā)者們?nèi)フ{(diào)試糅合，并且可維護(hù)性大大提高；此外，React將界面分成了獨(dú)立的小塊，每一塊就是一個(gè)組件，這些組件之間可以相互嵌套、組合，借此可以輕松地在應(yīng)用中傳遞數(shù)據(jù)，并使得狀態(tài)與DOM分離，這就是組件化[4]。本系統(tǒng)前端采用React，后端采用NodeJS，數(shù)據(jù)存儲(chǔ)則選用MongoDB。React作為前端三大框架之一，以其“組件化”的思想收獲了一大批開發(fā)者，React的聲明式特性，使得創(chuàng)建交互式的UI視圖變得輕而易舉，配合redux，當(dāng)數(shù)據(jù)改變時(shí)能有效地更新并且正確渲染組件，通過聲明式編寫的UI，可以讓代碼更加可靠，方便調(diào)試，并且可維護(hù)性大大提高[3]。本系統(tǒng)采用目前主流的前后端分離的開發(fā)模式，利用SPA架構(gòu)，結(jié)合較為前沿的主流編程技術(shù)棧進(jìn)行開發(fā)。前后端分離模式利用其可維護(hù)性強(qiáng)、用戶體驗(yàn)友好等特點(diǎn)，解決傳統(tǒng)的不分離模式下存在的前后端開發(fā)人員工作不合理、代碼健壯性差的問題；SPA架構(gòu)則是近幾年較為流行的，中文又稱“單頁應(yīng)用”，隨著用戶體驗(yàn)標(biāo)準(zhǔn)的提高，傳統(tǒng)的多頁應(yīng)用（MPA）已經(jīng)無法滿足用戶的審美，SPA架構(gòu)下，B/S類型的網(wǎng)站可以在不刷新頁面的情況下獲取后端數(shù)據(jù)，所有的路由由前端統(tǒng)一管理，據(jù)此可以實(shí)現(xiàn)各種過度動(dòng)畫效果，提升用戶體驗(yàn)[2]。2.2NodeJSNode.js是一個(gè)基于ChromeV8引擎的JavaScript運(yùn)行時(shí)[5]。他的目標(biāo)是幫助開發(fā)者構(gòu)建可伸縮且高度化的應(yīng)用程序，編寫能夠處理上萬條同時(shí)連接在一個(gè)物理機(jī)的高并發(fā)代碼[6]。Node.js有很多內(nèi)置的模塊，比如文件（fs）、網(wǎng)絡(luò)（http）、process（進(jìn)程）等，使得開發(fā)者可以對(duì)計(jì)算機(jī)底層進(jìn)行更深層次的操作；并且它的語法是以JavaScript為基礎(chǔ)的，使得前端開發(fā)者可以快速上手；Node.js是以事件做為驅(qū)動(dòng)的，這使得開發(fā)者可在不借助線程的情況下開發(fā)出一個(gè)高并發(fā)的服務(wù)器，相較于其它編程語言來說，Node.js在高并發(fā)下的性能是極好的。Node.js提出了模塊化的概念，每個(gè)文件都屬于一個(gè)模塊，各個(gè)模塊之間互不影響，這解決了遺留很久的變量重復(fù)等問題；其通過npm來進(jìn)行包管理，開發(fā)者只需執(zhí)行相應(yīng)的命令，便可在npm包市場(chǎng)下載所需要的工具包。2.3SPA架構(gòu)傳統(tǒng)的B/S（Broswer/Server，瀏覽器/服務(wù)器）模式下的web開發(fā)存在很多問題，比如前后端工作冗雜，分工不明確，所有的工作幾乎由后端獨(dú)自完成，并且產(chǎn)出的代碼無法復(fù)用，重構(gòu)困難[2]。這種情況下，多頁應(yīng)用（MPA，multiplepagewebapplication）極為流行。但是，隨著互聯(lián)網(wǎng)的不斷發(fā)展，用戶對(duì)于視覺和感官體驗(yàn)的要求越來越高，多頁應(yīng)用由于要頻繁的刷新整個(gè)頁面，用戶體驗(yàn)極為不好，所以應(yīng)允的出現(xiàn)了SPA，它提倡單個(gè)html文件，也就是說所有的模塊都在同一個(gè)html文件里面來展現(xiàn)，瀏覽器在首次渲染時(shí)加載所需的HTML、CSS、JavaScript資源，所有的操作都在該html中進(jìn)行。單頁應(yīng)用具有以下特點(diǎn)：速度快：可以在不刷新頁面的情況下發(fā)送并接收后端數(shù)據(jù)，并且可以按需請(qǐng)求數(shù)據(jù)，避免頁面刷新之后再次請(qǐng)求造成的性能問題。用戶體驗(yàn)友好：前端開發(fā)者可以控制路由，來實(shí)現(xiàn)各種過渡動(dòng)畫效果。路由：路由由前端統(tǒng)一控制,并且在錨點(diǎn)跳轉(zhuǎn)之后，不會(huì)重新刷新頁面。業(yè)務(wù)邏輯：偏向前端，前端利用AJAX獲取數(shù)據(jù)，并負(fù)責(zé)渲染到頁面。2.4模塊化在Node.js時(shí)期，涌現(xiàn)出了“模塊化”這個(gè)詞匯，每個(gè)JavaScript文件都屬于一個(gè)小模塊，里面包含了自己的變量、自己的方法，各個(gè)模塊之間互不影響，只需要將該模塊想分享給其它模塊的變量或者方法暴露出去就可，這解決了遺留很久的變量重復(fù)等問題；此外，一個(gè)個(gè)小的模塊，通過組合的方式，可以形成npm包，npm理所當(dāng)然的成為了Node.js最受喜愛的包管理，開發(fā)者只需執(zhí)行相應(yīng)的命令，便可在npm包市場(chǎng)下載所需要的工具包。現(xiàn)在Web3.0時(shí)代已經(jīng)到來，Web2.0也早已滲透到互聯(lián)網(wǎng)各處，前端的整個(gè)生態(tài)鏈深受Node.js影響，目前前端各種構(gòu)建工具都基于Node.js，隨著前端代碼結(jié)構(gòu)上的不斷增大、可維護(hù)性要求越來越高，模塊化會(huì)變得愈發(fā)重要。2.5MongoDBMongoDB是非關(guān)系型數(shù)據(jù)庫的一種，存儲(chǔ)的數(shù)據(jù)格式是JSON形式的，易學(xué)易用，對(duì)于本系統(tǒng)是非常合適的。MongoDB廣泛應(yīng)用于不同規(guī)模的公司和多個(gè)行業(yè)，它的數(shù)據(jù)模式不是一塵不變的，也就是說，當(dāng)你的應(yīng)用迭代時(shí)，它也可以很靈敏的升級(jí)更新，另外，像MySql提供的多級(jí)索引，n表查詢等功能，MongoDB也有提供，由此可見，它非常適合項(xiàng)目周期短，快速上手的項(xiàng)目。同時(shí)，MongoDB具有較強(qiáng)的可拓展性、高性能等特點(diǎn)，可以部署多服務(wù)器集群，并完美解決多服務(wù)器互相依賴的情況下，機(jī)器故障的問題；再者，得益于內(nèi)存計(jì)算，MongoDB可以進(jìn)行高性能的數(shù)據(jù)讀取與寫入[7]。2.6Webpack隨著大前端的興起，以及Web、H5等應(yīng)用的體積不斷增大，開發(fā)難度大大提高，說明前端已經(jīng)不可或缺。從復(fù)雜龐大的管理后臺(tái)，到對(duì)性能要求苛刻的移動(dòng)網(wǎng)頁，再到類似于ReactNative的原生應(yīng)用開發(fā)方案，通過直接編寫JavaScript、CSS、HTML開發(fā)Web應(yīng)用的方式已經(jīng)無法應(yīng)對(duì)當(dāng)前Web應(yīng)用的發(fā)展[8]。Webpack作為一款優(yōu)秀的打包工具，可以將JavaScript、CSS代碼以及各種圖片，打包在一起，可以在瀏覽器中使用。并且，由于SPA模式的盛行，網(wǎng)站的功能和源代碼變得愈發(fā)復(fù)雜、龐大，進(jìn)而Web開發(fā)向模塊化演進(jìn)。同時(shí)，Webpack可以在眾多的打包工具中脫穎而出，成為構(gòu)建工具的首選，原因如下：一體化：Webpack將一系列能做的工作，包括打包、壓縮、性能優(yōu)化，統(tǒng)統(tǒng)處理了，留給開發(fā)者的只剩下專心的處理業(yè)務(wù)邏輯。生態(tài)圈：Webpack具有強(qiáng)大的生態(tài)圈和維護(hù)團(tuán)隊(duì)，以及眾多的使用者，可以提供良好的保障能力。健壯性：Webpack被大量團(tuán)隊(duì)所使用，容錯(cuò)性和BUG大幅度減少，可以很輕松的于互聯(lián)網(wǎng)上找到教程和開發(fā)經(jīng)驗(yàn)。2.7AntDesign原始的網(wǎng)站開發(fā)，只需編寫簡(jiǎn)單的CSS樣式，但是隨著Web3.0時(shí)代的到來，以及Web2.0時(shí)代的大量普及，為了保持良好的重構(gòu)性，以提供最好的性能，有時(shí)多個(gè)模塊，或者多個(gè)項(xiàng)目都需要使用同一塊樣式，這時(shí)候傳統(tǒng)的方式，就會(huì)變得難以復(fù)用，捉襟見肘了。所以，為了更有效、更快速地編寫健壯地CSS樣式代碼，就需要將樣式和腳本封裝起來，使用的時(shí)候直接調(diào)用其提供的接口即可，這就是UI框架。AntDesign是一款優(yōu)秀的UI框架，可以與React.js完美搭配，開發(fā)出美觀實(shí)用的站點(diǎn)，隨著商業(yè)化的趨勢(shì)，愈來愈多的企業(yè)級(jí)產(chǎn)品對(duì)更好的用戶體驗(yàn)要求有了現(xiàn)象級(jí)的提升，AntDesign以自然性、確定性、意義感、生長(zhǎng)性為基礎(chǔ)，提供給開發(fā)者一套完美的CSS模塊化解決方案，讓開發(fā)者專注于更好的用戶體驗(yàn)。2.8RedisRedis是一個(gè)以鍵值對(duì)作存儲(chǔ)的緩存數(shù)據(jù)庫，提供了多種數(shù)據(jù)結(jié)構(gòu)，比如字符串、集合、散列等，使得開發(fā)者可以選用合適的形式進(jìn)行存儲(chǔ)。Redis基于內(nèi)存，這就使得它可以進(jìn)行更快速的讀寫操作，據(jù)此可以實(shí)現(xiàn)點(diǎn)贊等較為頻繁的數(shù)據(jù)庫讀寫操作。同時(shí)，Redis基于它優(yōu)秀的拓展性以及強(qiáng)大的并發(fā)性，可以存儲(chǔ)大批量的數(shù)據(jù)，并且在高并發(fā)的情景下，也能高質(zhì)量的讀寫，這一點(diǎn)，相對(duì)于MySql等其它數(shù)據(jù)庫來說，可以說是最大的優(yōu)勢(shì)所在，因此，對(duì)于開發(fā)社區(qū)這種中小站點(diǎn)來說，是極為合適的。第三章系統(tǒng)分析3.1系統(tǒng)市場(chǎng)可行性分析目前已存在的眾多技術(shù)交流社區(qū)，諸如掘金、思否等并沒有為眾多開發(fā)者提供一個(gè)功能完善、體驗(yàn)優(yōu)良的在線聊天系統(tǒng)，當(dāng)開發(fā)者需要私聊或者分享資料時(shí)，就不得不去添加其它好友，是極為不便利的。因此，本系統(tǒng)有必要站出來，通過內(nèi)置的聊天室模塊，抓準(zhǔn)市面上眾多的技術(shù)社區(qū)共同的痛點(diǎn)，有針對(duì)性地提出一整套地解決方案。本站點(diǎn)實(shí)現(xiàn)可持續(xù)運(yùn)行地道路就是與其它平臺(tái)進(jìn)行積極的溝通和合作，據(jù)此為眾多開發(fā)者提供一個(gè)優(yōu)質(zhì)地交流社區(qū)，提升用戶體驗(yàn)。3.2系統(tǒng)可操作性分析 本系統(tǒng)基于傳統(tǒng)的B/S（Browser/Server，瀏覽器端/服務(wù)端）架構(gòu)，旨在為廣大開發(fā)者提供一個(gè)優(yōu)質(zhì)的社區(qū)平臺(tái)，系統(tǒng)整體操作簡(jiǎn)潔明了，與已存在的各類平臺(tái)類似。本系統(tǒng)設(shè)計(jì)的原則就是不僅要功能實(shí)用，更要操作方便，也要界面優(yōu)美，吸引用戶，本系統(tǒng)采用“綠色”作為主色調(diào)，綠色象征和平寧靜，意義在于讓開發(fā)者可以在社區(qū)內(nèi)得到更大的技術(shù)提升，以及得到充分的身心放松。3.3系統(tǒng)MVVM架構(gòu)設(shè)計(jì)分析3.3.1傳統(tǒng)MVC架構(gòu)實(shí)現(xiàn)視圖層（View）業(yè)務(wù)邏輯層（Controller）數(shù)據(jù)層（Model）視圖層（View）業(yè)務(wù)邏輯層（Controller）數(shù)據(jù)層（Model）數(shù)據(jù)庫圖3-1MVC3.3.2增強(qiáng)型MVVM結(jié)構(gòu)實(shí)現(xiàn)本系統(tǒng)采用增強(qiáng)型MVVM架構(gòu)，如圖3-2所示：圖3-2MVVM架構(gòu)MVVM模式相較于傳統(tǒng)的MVC模式，消除了Controller之間的耦合性；可測(cè)試性；可移植性，由VM層則替代了傳統(tǒng)的Controller層。View代表視圖層，也就是DOM樹，ViewModel代表前端的數(shù)據(jù)流管理，比如Redux，Model就是數(shù)據(jù)庫層。View層的所有改變只能由ViewModel層來直接控制。3.3.3MVVM架構(gòu)處理業(yè)務(wù)邏輯MVVM將業(yè)務(wù)邏輯統(tǒng)一放置于VM層中管理，每個(gè)系統(tǒng)根據(jù)功能進(jìn)行區(qū)分，每個(gè)功能點(diǎn)又拆分為獨(dú)立的子系統(tǒng)，各個(gè)系統(tǒng)互相協(xié)同，配合完成整套的業(yè)務(wù)流程，前端部分如圖3-3所示：登錄注冊(cè)模塊邏輯登錄注冊(cè)模塊邏輯文章管理模塊邏輯動(dòng)態(tài)管理模塊邏輯VM（ViewModel）聊天系統(tǒng)邏輯好友系統(tǒng)邏輯足跡系統(tǒng)邏輯圖3-3MVVM架構(gòu)處理業(yè)務(wù)邏輯圖3-4為整套的業(yè)務(wù)流程：把一個(gè)整體的系統(tǒng)拆分為多個(gè)子模塊，以功能作為劃分的的主要依據(jù)，各子模塊之間互相不干擾，各自處理邏輯功能：登錄注冊(cè)模塊登錄注冊(cè)模塊文章管理模塊動(dòng)態(tài)模塊聊天模塊ViewModel業(yè)務(wù)邏輯層Redis緩存數(shù)據(jù)庫MongoDB數(shù)據(jù)庫后端用戶路由后端文章路由后端動(dòng)態(tài)&足跡路由后端聊天路由圖3-4整體業(yè)務(wù)流程3.4系統(tǒng)主要功能需求分析登陸注冊(cè)功能：登錄之后的權(quán)限認(rèn)證，采用目前流行的JWT（jsonwebtoken）技術(shù)，jwt驗(yàn)證可以有效的解決傳統(tǒng)的Cookie認(rèn)證存在的可拓展性差、XSRF（跨站請(qǐng)求偽造）的問題。Token和Cookie盡不相同，服務(wù)端不用保存用戶的登錄信息，而是在每次HTTP請(qǐng)求的Header部分添加Authorization字段即可，并且Token還支持?jǐn)y帶其它有用的數(shù)據(jù)。在線人數(shù)統(tǒng)計(jì)功能：為了更好的統(tǒng)計(jì)網(wǎng)站流量，需要對(duì)網(wǎng)站在線訪客加以統(tǒng)計(jì)，由于傳統(tǒng)的HTTP協(xié)議無法實(shí)時(shí)收發(fā)數(shù)據(jù)，屬于半雙工通信，故采用Websocket，用戶登錄本系統(tǒng)之后，系統(tǒng)自動(dòng)websocket請(qǐng)求，后端將當(dāng)前用戶的ID保存至Redis緩存中。Websocket基于HTTP，是全雙工通信的，也就是說，客戶端和服務(wù)端分別可以接收和主動(dòng)發(fā)送數(shù)據(jù)。后端采用Redis存儲(chǔ)用戶的在線狀態(tài)，因?yàn)樵诰€狀態(tài)是隨時(shí)變化的，此時(shí)為了服務(wù)端的性能，減少數(shù)據(jù)庫的讀寫操作，故采用Redis。加好友功能：用戶A可以在網(wǎng)站內(nèi)添加用戶B為好友，進(jìn)行更近一步的私聊。用戶B可以實(shí)時(shí)的接收到用戶A發(fā)出的加好友請(qǐng)求，不需要重載頁面，如何實(shí)時(shí)的接收數(shù)據(jù)呢?就需要Websocket，基于Webscoket的全雙工通信機(jī)制，服務(wù)端在接收到用戶A發(fā)出的加好友請(qǐng)求之后，可以主動(dòng)的推送該消息給用戶B，無需用戶B主動(dòng)請(qǐng)求。具體的流程如圖3-5所示：?jiǎn)瘟墓δ埽喝绻脩鬉和用戶B互為好友，那么在雙方的好友列表中對(duì)方都是存在的。本系統(tǒng)采用自定義的ID作為每個(gè)單聊的唯一標(biāo)識(shí)，該ID通過組合用戶A和用戶B的userId來實(shí)現(xiàn)。加好友加好友44444好友請(qǐng)求圖STYLEREF3\s0SEQ圖\*ARABIC\s31圖STYLEREF3\s0SEQ圖\*ARABIC\s32用戶A用戶B互為好友同意ss拒絕圖3-5好友申請(qǐng)流程3.5系統(tǒng)流程設(shè)計(jì)由于本系統(tǒng)采用前后端完全分離的開發(fā)模式，所以將主要的邏輯都交予前端處理，后端部分只需要負(fù)責(zé)數(shù)據(jù)存儲(chǔ)和讀取。前端界面采用組件化的React和高度可定制的UI框架AntDesign，旨在為用戶呈現(xiàn)出精美的網(wǎng)站；前端腳本采用TypeScript，TypeScript（TS）是JavaScript（JS）的超集，它可以在眾多的平臺(tái)上運(yùn)行，TypeScript提供了一系列強(qiáng)大的類型聲明，比如接口（Interface）、類（Class）、命名空間（Namespace）、泛型等，TypeScript始于JavaScript，歸于JavaScript，并且具有強(qiáng)大的工具用來構(gòu)建大型應(yīng)用程序。本系統(tǒng)采用Axios作為HTTP請(qǐng)求的工具，用來與后端進(jìn)行數(shù)據(jù)交互，Axios是一款非常優(yōu)秀的Ajax請(qǐng)求框架，它基于Promise，可以同時(shí)在前端和后端使用，它提供了一套攔截方案，可以針對(duì)符合特定要求的HTTP請(qǐng)求和HTTP響應(yīng)，進(jìn)行攔截處理，并且在數(shù)據(jù)過濾方面，還可自行將文本轉(zhuǎn)換為JSON格式的數(shù)據(jù)，非常適合本項(xiàng)目。本系統(tǒng)的總體流程，如圖3-6所示：用戶社區(qū)首頁注冊(cè)成功注冊(cè)功能用戶社區(qū)首頁注冊(cè)成功注冊(cè)功能登錄功能登錄成功功能模塊沸點(diǎn)個(gè)人中心話題聊天室寫文章文章詳情圖3-6系統(tǒng)大體流程第四章系統(tǒng)設(shè)計(jì)4.1系統(tǒng)體系結(jié)構(gòu)設(shè)計(jì)瀏覽器（Browser）服務(wù)端（Server）數(shù)據(jù)存儲(chǔ)（Database）系統(tǒng)的主要面向用戶群體，用戶通過系統(tǒng)提供的UI界面，進(jìn)行發(fā)表文章、聊天等各種操作瀏覽器（Browser）服務(wù)端（Server）數(shù)據(jù)存儲(chǔ)（Database）系統(tǒng)的主要面向用戶群體，用戶通過系統(tǒng)提供的UI界面，進(jìn)行發(fā)表文章、聊天等各種操作，通過Ajax將數(shù)據(jù)發(fā)送給后端處理瀏覽器發(fā)送的HTTP請(qǐng)求，對(duì)數(shù)據(jù)庫進(jìn)行增刪改查后，將數(shù)據(jù)返回給瀏覽器持久化保存用戶數(shù)據(jù)，其中包括緩存數(shù)據(jù)庫和持久化數(shù)據(jù)庫兩個(gè)部分圖4-1系統(tǒng)構(gòu)思圖B/S（瀏覽器/服務(wù)器，Browser/Server）架構(gòu)，相對(duì)于C/S（客戶端/服務(wù)器，Client/Server）架構(gòu)，有幾個(gè)比較突出的優(yōu)點(diǎn)：B/S架構(gòu)下，用戶只需操作瀏覽器，極大的降低了使用門檻，開發(fā)者不需要關(guān)注用戶操作系統(tǒng)的差異性，因此開發(fā)者在開發(fā)過程中把所有精力投入到業(yè)務(wù)邏輯的開發(fā)而不是項(xiàng)目的最終部署。B/S架構(gòu)下，可以在一定程度減少客戶端上的資源消耗和投入，對(duì)于用戶來說，他們更傾向于一個(gè)節(jié)省資源的訪問方式，而不是大費(fèi)周章的下載客戶端安裝包。B/S架構(gòu)下，大大的節(jié)省了開發(fā)人員的開發(fā)周期，并且后續(xù)的可維護(hù)性也比C/S架構(gòu)下的系統(tǒng)高。4.2系統(tǒng)數(shù)據(jù)關(guān)系設(shè)計(jì)（1）文章實(shí)體，如圖4-2所示：文章信息已閱用戶文章標(biāo)題創(chuàng)建時(shí)間文章模式文章類型文章信息已閱用戶文章標(biāo)題創(chuàng)建時(shí)間文章模式文章類型文章ID文章評(píng)論更新時(shí)間文章描述文章內(nèi)容沸點(diǎn)ID圖片內(nèi)容沸點(diǎn)評(píng)論創(chuàng)建時(shí)間文本內(nèi)容話題ID沸點(diǎn)項(xiàng)（沸點(diǎn)ID圖片內(nèi)容沸點(diǎn)評(píng)論創(chuàng)建時(shí)間文本內(nèi)容話題ID沸點(diǎn)項(xiàng)圖4-3沸點(diǎn)項(xiàng)實(shí)體圖話題ID沸點(diǎn)列表關(guān)注用戶發(fā)表用戶話題描述創(chuàng)建時(shí)間話題名稱話題項(xiàng)話題ID沸點(diǎn)列表關(guān)注用戶發(fā)表用戶話題描述創(chuàng)建時(shí)間話題名稱話題項(xiàng)圖4-4話題項(xiàng)實(shí)體圖（4）足跡實(shí)體，如圖4-5所示：關(guān)注用戶關(guān)注用戶關(guān)注話題發(fā)表文章收藏文章點(diǎn)贊沸點(diǎn)發(fā)表沸點(diǎn)點(diǎn)贊文章足跡圖4-5足跡實(shí)體圖評(píng)論ID評(píng)論人ID圖片內(nèi)容文章ID文本內(nèi)容回復(fù)列表評(píng)論ID評(píng)論人ID圖片內(nèi)容文章ID文本內(nèi)容回復(fù)列表創(chuàng)建時(shí)間文章評(píng)論圖4-6文章評(píng)論實(shí)體圖單聊標(biāo)識(shí)ID最后會(huì)話更新時(shí)間創(chuàng)建時(shí)間最后會(huì)話時(shí)間消息總數(shù)消息列表接收方發(fā)起方單聊標(biāo)識(shí)ID最后會(huì)話更新時(shí)間創(chuàng)建時(shí)間最后會(huì)話時(shí)間消息總數(shù)消息列表接收方發(fā)起方單聊圖4-7單聊實(shí)體圖消息ID更新時(shí)間單聊ID未讀消息創(chuàng)建時(shí)間消息內(nèi)容消息類型接收方消息ID更新時(shí)間單聊ID未讀消息創(chuàng)建時(shí)間消息內(nèi)容消息類型接收方發(fā)送方單聊圖4-8單聊消息實(shí)體圖4.3系統(tǒng)數(shù)據(jù)表設(shè)計(jì)開發(fā)者交流社區(qū)系統(tǒng)為了保證多個(gè)子模塊的可行性以及彼此之間的互相協(xié)同配合，就需要基于實(shí)體的屬性關(guān)系，制定相對(duì)完善的數(shù)據(jù)庫表，如下多表為其中的幾個(gè)數(shù)據(jù)表展示：（1）用戶數(shù)據(jù)表，如表4-1所示。表4-1用戶表名稱類型空默認(rèn)值其他備注_idString否auto_increment標(biāo)識(shí)IDusernameString否空用戶名userpwdString否空密碼，加密usergenderString否空性別useravatarString是‘’頭像create_timeNumber是Date.now()注冊(cè)時(shí)間update_timeNumber是Date.now()更新時(shí)間articlesArray是[]文章列表attentionObject是[]關(guān)注followersArray是[]關(guān)注者列表friendsArray是[]好友列表chat_memoryArray是[]聊天歷史列表notificationsArray是[]通知列表activitiesArray是[]動(dòng)態(tài)列表tracksArray是[]足跡列表pinsArray是[]沸點(diǎn)列表collectionsArray是[]收藏夾列表profile_cover_imgString是‘’封面圖片addressString是‘’地址websiteString是‘’個(gè)人站點(diǎn)introductionString是‘’個(gè)人介紹jobString是‘’職業(yè)educationString是‘’學(xué)歷bind_third_partyObject是{}第三方綁定（2）單聊消息數(shù)據(jù)表，如表4-2所示。表4-2單聊消息表名稱類型空默認(rèn)值其他備注chat_idString否空所屬單聊ID_idObject否空auto_increment自增IDfrom_member_idObject否空發(fā)送人IDto_member_idObject否空接收人IDcontent_typeString否空消息類型(image|files|plain|contentString否空消息內(nèi)容create_timeNumber是空Date.now()創(chuàng)建時(shí)間update_timeNumber是空Date.now()更新時(shí)間（3）沸點(diǎn)數(shù)據(jù)表，如表4-3所示。表4-3沸點(diǎn)表名稱類型空默認(rèn)值其他備注_idObject否auto_increment自增IDauthor_idObject否空發(fā)布者IDtopic_idObject否空所屬話題IDcontent_plainString是‘’文本內(nèi)容content_imageString是‘’圖片內(nèi)容content_linkString是‘’鏈接內(nèi)容commentsArray是[]評(píng)論列表create_timeNumber是Date.now()創(chuàng)建時(shí)間update_timeNumber是Date.now()更新時(shí)間第五章系統(tǒng)實(shí)現(xiàn)與測(cè)試5.1項(xiàng)目整體結(jié)構(gòu)本項(xiàng)目整體偏向前端，由于前端利用Node.js來進(jìn)行項(xiàng)目搭建，所以將前后端項(xiàng)目源碼一起放置于同個(gè)項(xiàng)目文件夾內(nèi)部，如圖5-1所示：圖5-1項(xiàng)目整體結(jié)構(gòu)圖前端源代碼目錄如圖5-2所示：圖5-2前端源碼結(jié)構(gòu)圖后端源代碼目錄如圖5-3所示：圖5-3后端整體結(jié)構(gòu)圖5.2登錄模塊登錄模塊主要采用jwt（jsonwebtoken）技術(shù)做權(quán)限認(rèn)證，并且集成了Github第三方登錄，因?yàn)殚_發(fā)人員對(duì)于Github是很熟悉的，所以新老用戶可以使用Github賬號(hào)直接登錄，Github登錄的流程如圖5-4所示：圖5-4Github登錄流程圖前端主要邏輯：登錄時(shí)，將用戶輸入的用戶名和密碼通過Ajax發(fā)送到后端，再根據(jù)后端返回的JSON信息進(jìn)行路由跳轉(zhuǎn)以及持久化存放用戶ID等操作后端主要邏輯：后端接收到前端傳遞過來的用戶登錄數(shù)據(jù)，在判斷用戶信息是否合理的同時(shí),也要進(jìn)行token的更新，以及用戶狀態(tài)讀取5.3文章模塊在本系統(tǒng)內(nèi)部，用戶可以創(chuàng)建并發(fā)表不同類型的文章，包括但不僅僅局限于前端、后端、數(shù)據(jù)庫、運(yùn)維等，同時(shí)，發(fā)表文章是有明確的權(quán)限控制的，也就是說，未登錄的用戶不能發(fā)表文章。后端接收到前端提供的文章信息，進(jìn)行數(shù)據(jù)庫的讀寫操作，主要針對(duì)文章數(shù)據(jù)表（Posts）來進(jìn)行，同時(shí)需要更新用戶數(shù)據(jù)表（User），將該文章ID同步添加至用戶創(chuàng)建的文章列表內(nèi)，后端部分邏輯如圖5-5所示：圖5-5發(fā)表文章后端邏輯圖5.4沸點(diǎn)模塊用戶可以在沸點(diǎn)分享自己的感想和心情，沸點(diǎn)可以說是一個(gè)小型的社交平臺(tái)，沸點(diǎn)模塊的前端主要代碼如圖5-6所示：圖5-6沸點(diǎn)布局圖沸點(diǎn)模塊的后端邏輯,主要是進(jìn)行常規(guī)的沸點(diǎn)增刪改查,以及創(chuàng)建用戶足跡等。5.5話題模塊話題模塊也是本系統(tǒng)的一個(gè)內(nèi)置亮點(diǎn)功能，本系統(tǒng)內(nèi)置了20多種話題，比如報(bào)offer、今日最佳、內(nèi)推招聘等，用戶可以將自己的沸點(diǎn)發(fā)表到對(duì)應(yīng)的話題下。話題模塊的后端主要工作,同樣是話題的添加,但是本系統(tǒng)目前的設(shè)定是：暫時(shí)只能由系統(tǒng)管理員來創(chuàng)建新的話題，后續(xù)可能會(huì)開放給普通用戶。5.6聊天模塊這是本系統(tǒng)最大的亮點(diǎn)模塊，也是本系統(tǒng)對(duì)于市面上已知的同類型網(wǎng)站的功能上的補(bǔ)充，用戶可以在通過好友申請(qǐng)，添加對(duì)方為好友，進(jìn)而進(jìn)行私聊，并且在私聊中可以發(fā)送圖片、文件、代碼等，聊天模塊的前端路由設(shè)計(jì)，如圖5-7所示：圖5-7聊天頁前端路由設(shè)計(jì)圖前后端的數(shù)據(jù)交互采用Websocket來傳輸，包括好友申請(qǐng)、聊天消息發(fā)送和接收等。當(dāng)接收方同意好友申請(qǐng)方的請(qǐng)求時(shí)，后端的主要處理邏輯如圖5-8所示：圖5-8同意好友申請(qǐng)后端邏輯圖5.7足跡模塊足跡系統(tǒng)記錄了每個(gè)用戶的行為，包括用戶點(diǎn)贊、好友申請(qǐng)、發(fā)表文章、收藏文章等，但是足跡功能有很多需要注意的點(diǎn)，以點(diǎn)贊文章為例，后端的主要邏輯如圖5-9所示：圖5-9創(chuàng)建足跡后端主要邏輯圖5.8收藏模塊收藏模塊包括收藏文章和收藏沸點(diǎn)兩部分，用戶瀏覽到自己喜歡的文章，可以將其添加至收藏夾，以供后續(xù)閱讀，后端的主要代碼如圖5-10所示：圖5-10創(chuàng)建收藏夾后端邏輯圖5.9各模塊測(cè)試結(jié)果登錄界面，前端對(duì)用戶輸入的賬戶名以及密碼作是否為空和字段合理性校驗(yàn)，符合規(guī)范則跳轉(zhuǎn)至首頁部分，如圖5-11所示：圖5-11登錄頁圖系統(tǒng)主頁，如圖5-12所示：圖5-12系統(tǒng)主頁圖沸點(diǎn)主頁，進(jìn)入沸點(diǎn)首頁，默認(rèn)展示一個(gè)話題，并且發(fā)布沸點(diǎn)框位于中央,利于吸引用戶的眼球，激發(fā)用戶的創(chuàng)作欲望，此外，發(fā)布沸點(diǎn)時(shí)，可以選擇上傳圖片和選擇一個(gè)對(duì)應(yīng)的話題，但是上傳圖片的數(shù)量是有限制的，前端已經(jīng)做了判斷處理，同時(shí)發(fā)布沸點(diǎn)時(shí)必須選擇一個(gè)話題，便于后端作分類處理，如圖5-13所示：圖5-13沸點(diǎn)主頁圖話題主頁，包括我關(guān)注的話題，和全部話題，用戶可以在此處關(guān)注自己感興趣地話題，當(dāng)完成關(guān)注話題后，該話題圖標(biāo)會(huì)出現(xiàn)在“我關(guān)注地話題”下，如圖5-14所示：圖5-14話題主頁圖話題詳情頁，對(duì)于每個(gè)話題，進(jìn)行詳細(xì)的介紹，并展示該話題內(nèi)部的沸點(diǎn)列表。整個(gè)話題頁的布局思想與沸點(diǎn)頁一致，采取左中右的布局形式，同時(shí)將沸點(diǎn)發(fā)布框置于相對(duì)中央的位置，右側(cè)則介紹該話題并展示了該話題包括的沸點(diǎn)數(shù)以及關(guān)注的用戶數(shù)，同時(shí)，也會(huì)將在該話題下發(fā)表過沸點(diǎn)的用戶一一列出，如圖5-15所示：圖5-15話題詳情頁圖點(diǎn)擊關(guān)注按鈕，會(huì)關(guān)注該話題，該話題會(huì)出現(xiàn)在“我關(guān)注的話題”列表內(nèi)部，如圖5-16所示：圖5-16關(guān)注話題圖發(fā)表沸點(diǎn)，創(chuàng)建新的沸點(diǎn)，并發(fā)表到對(duì)應(yīng)的話題下面，前端已經(jīng)做了相應(yīng)的數(shù)據(jù)驗(yàn)證，當(dāng)點(diǎn)擊發(fā)布按鈕時(shí)，前端會(huì)分別驗(yàn)證沸點(diǎn)內(nèi)容是否為空、上傳的圖片數(shù)量是否超出限制、上傳的圖片大小是否符合規(guī)范、圖片格式是否支持，最重要的是是否已經(jīng)選擇了話題，如圖5-17所示：圖5-17發(fā)表沸點(diǎn)圖發(fā)表文章頁，可以使用富文本編輯器來編輯文章，因?yàn)楸鞠到y(tǒng)主要面向的用戶群體都是開發(fā)者，所以就采用了富文本作為主要語言，由于文章的數(shù)據(jù)表定義了文章類型、文章形式、文章頭圖、文章標(biāo)簽等多個(gè)字段，所以前端也根據(jù)這種思路來進(jìn)行頁面布局，如圖5-18所示：圖5-18發(fā)表文章圖通知系統(tǒng)，當(dāng)用戶點(diǎn)擊我的沸點(diǎn)或者文章、申請(qǐng)好友、好友申請(qǐng)狀態(tài)改變、文章被收藏時(shí)，都會(huì)有實(shí)時(shí)的通知提醒，這是通過Websocket實(shí)現(xiàn)的，當(dāng)用戶進(jìn)行如上操作時(shí)，前端會(huì)實(shí)時(shí)的通知后端，旨在提供更好的用戶體驗(yàn)，如圖5-19所示：圖5-19點(diǎn)贊通知圖文章控制，在文章詳情頁，主人和訪客都可以進(jìn)行點(diǎn)贊文章、收藏文章等操作，當(dāng)看到自己喜歡的文章時(shí)，可以將其添加到自定義的文件夾里面，方面日后閱讀，如圖5-20所示：圖5-20收藏文章圖在個(gè)人中心內(nèi)部，可以編輯用戶的個(gè)人信息等，這里是有權(quán)限區(qū)分的，如果是主人訪問，則前端控制并暴露出“編輯個(gè)人信息”和“上傳頭像”按鈕入口，用戶可以訪問特定的頁面；如果是訪客訪問，那么就隱藏上述兩個(gè)入口。另外，在上傳頭像時(shí)，也進(jìn)行了圖片的格式、大小等判斷，如圖5-21所示：圖5-21上傳頭像圖個(gè)人中心的足跡模塊，記錄了當(dāng)前用戶所有的行為，包括發(fā)表文章、發(fā)表沸點(diǎn)、點(diǎn)贊文章、點(diǎn)贊沸點(diǎn)、收藏文章、添加好友、關(guān)注話題、關(guān)注用戶等，這是本系統(tǒng)的附加功能，可以有效地提升用戶體驗(yàn)，如圖5-22所示：圖5-22個(gè)人足跡圖個(gè)人中心的文章區(qū)塊，可以很清晰的查看到自己發(fā)表的文章，并且這些文章會(huì)按照時(shí)間由近到遠(yuǎn)的順序依次排列，方便用戶搜尋，其實(shí)，此處還可以添加一個(gè)搜索功能，當(dāng)用戶創(chuàng)作的文章過多時(shí)，可以很便捷的檢索到想要的文章，如圖5-23所示：圖5-23個(gè)人文章圖個(gè)人中心的收藏區(qū)塊，可以很清楚的看到用戶創(chuàng)建的收藏夾，提供了兩個(gè)入口，入口一為進(jìn)入該收藏夾詳情頁，收藏夾詳情頁詳盡的列出了用戶已收藏的文章信息、并且可以編輯收藏夾，比如添加圖片等；入口二為刪除收藏夾，如圖5-24所示：圖5-24個(gè)人收藏圖如果用戶想查看自己關(guān)注了哪些人和話題，可以在個(gè)人中心的關(guān)注選項(xiàng)卡中找到，并且還可以進(jìn)行關(guān)注操作，極大的方便了用戶，如圖5-25所示：圖5-25個(gè)人關(guān)注圖在設(shè)置模塊的賬號(hào)管理區(qū)塊，用戶可以自行綁定或者解綁第三方賬號(hào)，包括微信、微博、Github、郵箱、手機(jī)號(hào)等，由于開發(fā)者重度依賴Github，所以提供一個(gè)Github登錄入口非常重要，如圖5-26所示：圖5-26賬號(hào)關(guān)聯(lián)區(qū)塊圖于文章詳情頁，除了正常地評(píng)論，用戶還可以進(jìn)行加好友和關(guān)注操作，這也是本系統(tǒng)設(shè)計(jì)的唯一地加好友入口，當(dāng)申請(qǐng)好友時(shí)，也可以附帶備注信息，好友申請(qǐng)的界面如圖5-27所示：圖5-27申請(qǐng)好友彈窗圖當(dāng)用戶接收到好友申請(qǐng)時(shí)，首頁通知欄會(huì)實(shí)時(shí)的提示，此時(shí)用戶可以自行選擇同意或者拒絕，如圖5-28所示：圖5-28好友申請(qǐng)通知圖當(dāng)好友申請(qǐng)被同意或拒絕時(shí)，發(fā)送方也會(huì)收到一條提示消息，如圖5-29所示：圖5-29同意好友申請(qǐng)通知圖聊天時(shí)，支持發(fā)送普通文本消息、圖片、代碼以及文件，并且可以在線預(yù)覽，單聊的主界面如圖5-30所示：圖5-30聊天主界面圖第六章總結(jié)與展望6.1總結(jié)隨著互聯(lián)網(wǎng)的不斷快速發(fā)展，未來肯定會(huì)有更多的同類產(chǎn)品參與競(jìng)爭(zhēng)，競(jìng)爭(zhēng)的同時(shí)意味著會(huì)有勝者和敗者，哪個(gè)平臺(tái)吸引的用戶多，那么它肯定有自己的過人之處，但是大量的同類產(chǎn)品，必定會(huì)產(chǎn)生一系列問題，比如功能繁多、使用復(fù)雜，必要功能缺失等。因此，一個(gè)取其糟粕，取其精華的技術(shù)交流平臺(tái)，是非常有必要的?；仡櫼幌卤菊撐?，本論文闡述的關(guān)于開發(fā)者交流社區(qū)的種種，包括技術(shù)要求、需求分析、代碼實(shí)現(xiàn)、架構(gòu)分析、前后端代碼撰寫、前后端聯(lián)調(diào)等，都由本人獨(dú)立實(shí)現(xiàn)。同時(shí)，由于功能較多，所以開發(fā)周期很長(zhǎng)，其中衍生出了很多問題，比如代碼質(zhì)量、組件復(fù)用、邏輯重構(gòu)等，對(duì)整個(gè)系統(tǒng)的完成起到了強(qiáng)大的阻力。目前，經(jīng)過多次重構(gòu)，已經(jīng)基本形成了一個(gè)中等質(zhì)量的項(xiàng)目結(jié)構(gòu)，但是依然存在著一些問題，比如瀏覽器的兼容度不全面等，還需要花更多的時(shí)間和精力去解決。6.2展望隨著軟件開發(fā)行業(yè)的不斷滲透，市面上肯定會(huì)涌現(xiàn)出更多的開發(fā)者技術(shù)交流社區(qū)，這說明此類產(chǎn)品的前景是很廣闊的。但是，本系統(tǒng)依然存在一些問題，比如后臺(tái)管理能力，一個(gè)強(qiáng)大完善的社區(qū)，必然需要穩(wěn)定的后臺(tái)管理支持，包括日常的文章管理、沸點(diǎn)管理、各種消息管理等，目前本系統(tǒng)的后臺(tái)管理操作仍然需要直接查看數(shù)據(jù)庫，這是極為不方便的；再者比如瀏覽器兼容范圍，目前本系統(tǒng)只兼容主流瀏覽器（Chrome、Firefox、Safari）等，對(duì)于一些大眾化的瀏覽器，比如QQ瀏覽器、360瀏覽器的支持度并不完善，由于項(xiàng)目的開發(fā)周期有限，只能選取最通用的方案，這一問題也是需要等待未來去解決的；再比如設(shè)備兼容性，目前本系統(tǒng)只支持PC端瀏覽器訪問，不支持移動(dòng)端瀏覽器，這也是一個(gè)急需解決的問題，因?yàn)槟壳暗氖謾C(jī)網(wǎng)民還是占據(jù)了很大一部分，解決這個(gè)問題，對(duì)于本系統(tǒng)的用戶群推廣是至關(guān)重要的。參考文獻(xiàn)[1]鐵建文.基于Node.js搭建多人博客系統(tǒng)[D].內(nèi)蒙古:內(nèi)蒙古大學(xué),2016.[2]杜艷美,黃曉芳.面向企業(yè)級(jí)web應(yīng)用的前后端分離開發(fā)模式及實(shí)踐[D].四川綿陽:西南科技大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院,2017.[3]Facebook.React中文文檔[Z].中國(guó):React.js開發(fā)團(tuán)隊(duì),2017.[4]胡子大哈.React.js小書[Z].中國(guó),2017.[5]nodejs.Node.js中文文檔[Z].中國(guó):印記中文,2014.[6]鄒競(jìng)瑩.Node.JS博客系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].黑龍江:黑龍江大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院,2016.[7]KristinaChodorow.深入學(xué)習(xí)MongoDB[M].巨成,程顯峰,譯.北京:人民郵電出版社,2012.[8]吳浩麟.深入淺出Webpack[M].北京:電子工業(yè)出版社,2018.[9]上野宣.圖解HTTP[M].于均良,譯.北京:人民郵電出版社,2014.[10]DavidFlanagan.JavaScript權(quán)威指南(第6版)[M].淘寶前端團(tuán)隊(duì),譯.北京:機(jī)械工業(yè)出版社,2012.[11]AddyOsmani.JavaScript設(shè)計(jì)模式[M].徐濤,譯.北京:人民郵電出版社,2013.[12]NicholasC.Zakas.JavaScript高級(jí)程序設(shè)計(jì)(第3版)[M].李松峰,曹力,譯.北京:人民郵電出版社,2012.[13]LeaVerou.CSS揭秘[M].CSS魔法,譯.北京:人民郵電出版社,2016.致謝轉(zhuǎn)眼間寫到了致謝這一章節(jié)，這也意味著整篇論文的即將技術(shù)，同時(shí)意味著整個(gè)大學(xué)生活的接近尾聲，心中既有歡喜，又有些揣揣不安，就像一位十月懷胎的婦女。歡喜，意味著終于結(jié)束自己的論文寫作和畢業(yè)設(shè)計(jì)，心中的顧慮一下減輕了許多；不安，意味著大學(xué)生活即將結(jié)束，即將與陪伴自己四年的同學(xué)、老師訣別。歲月蹉跎，白駒過隙，時(shí)間轉(zhuǎn)瞬即逝。在撰寫畢業(yè)論文的過程中，我的導(dǎo)師周老師，一直很有耐心地輔導(dǎo)，論文的格式、論文的排版，甚至一個(gè)小小的標(biāo)點(diǎn)符號(hào)，她都會(huì)一一指出，這與她的細(xì)致入微和對(duì)工作的認(rèn)真負(fù)責(zé)密不可分。她給我的感覺，就像是冬天里的一把火，又或者說是沙漠里的一片綠洲，每當(dāng)我沒寫作思路的時(shí)候，請(qǐng)教她，她都會(huì)一一解答，周老師治學(xué)嚴(yán)謹(jǐn)?shù)膽B(tài)度和勤勉的工作態(tài)度深深感動(dòng)了我，給我巨大的啟迪、鼓舞和鞭撻，這種精神將成為我的人生中一筆重要的財(cái)富。同時(shí)，也要感謝大學(xué)四年所有的老師們，在你們的授業(yè)解惑下，對(duì)于計(jì)算機(jī)、操作系統(tǒng)、網(wǎng)絡(luò)、政治等多種門類的知識(shí)都有涉獵，極大的豐富了我的大腦知識(shí)體系，在課堂上每一筆、每一話、每一言、每一行，都充斥著大學(xué)問、大道理，讓我受益匪淺；感謝所有的老師們，本論文的技術(shù)支撐，離不開你們的知識(shí)輸送。再者，感謝學(xué)校，提供給我學(xué)習(xí)的機(jī)會(huì)，學(xué)校精致的管理和細(xì)微至極的貼心服務(wù)，特別是學(xué)?？煽诘娘埐?，也是我孜孜不倦的堅(jiān)持學(xué)習(xí)的動(dòng)力所在。歲月如梭，時(shí)光荏苒，記憶的那片雪花隨風(fēng)飄舞，遲遲不肯落下，思緒停留在那四年前的金秋九月，充滿朝氣的面龐，在校園里，揮灑過汗水，也揮灑過淚花，那里的一切，都是我所喜歡、我所熱愛的，正是在美麗的校園、有干勁的校園氛圍熏陶下，我度過了人生中最美的瞬間，鳳凰涅槃需要經(jīng)歷烈火的煎熬和考驗(yàn)，并在最終，我完成了畢業(yè)論文，給自己的大學(xué)四年畫上了一個(gè)相對(duì)完美的句號(hào)。

PowerPoint課件制作實(shí)用技巧PowerPoint是微軟公司生產(chǎn)的制作幻燈片和簡(jiǎn)報(bào)的軟件（以下簡(jiǎn)稱PPT）。在我們?cè)S多人看來,它只不過是一個(gè)簡(jiǎn)單地對(duì)文字、圖形、圖片進(jìn)行演示的軟件，教學(xué)中的課件制作軟件當(dāng)屬Authorware、Flash。Authorware和Flash制作的動(dòng)畫效果的確很好，而且它們的功能也很強(qiáng)大。不過這些軟件在制作課件的過程中往往非常耗時(shí)，用這些專業(yè)軟件來制作課件用于平時(shí)的教學(xué)往往效率很低。PPT就是一個(gè)非常簡(jiǎn)單、實(shí)用的制作課件的軟件，只要你用好它,同樣能做非常棒的課件來。一、掌握基本，知道“插入”。（一）知道從“插入”菜單進(jìn)入，會(huì)給PPT課件添加文字、圖片、影片和聲音等，也就會(huì)做一般的課件了。（二）圖片插入與處理1.插入圖片具體方法：a)插入剪貼畫或文件中的圖片；b)添加圖片做背景；c)給自選圖形做填充。2.處理圖片具體方法：我們用PPT制作課件時(shí)，經(jīng)常從網(wǎng)上下載圖片來用，而網(wǎng)絡(luò)中的圖片往往含有超鏈接和網(wǎng)站名稱痕跡，我們需要?jiǎng)h除其中超鏈接，并對(duì)圖片進(jìn)行裁剪處理。在Powerpoint中，我們一般可以利用“圖片”工具欄上的“裁剪”工具進(jìn)行裁剪處理，但是，這里的工具只能對(duì)圖片進(jìn)行矩形裁剪，若想裁剪成圓形、多邊形等其他形狀，通常方法就無能為力了。其實(shí)這個(gè)問題在PPT中是可以解決的。我們用給自選圖形做填充圖片的方法就可以實(shí)現(xiàn)我們需要的效果。具體步驟：a)首先利用“繪圖”工具欄畫一個(gè)想要裁剪的圖形，如橢圓。b)選中橢圓后單擊“繪圖”工具欄上“填充顏色”按鈕右側(cè)黑三角，從列表菜單中單擊“填充效果”命令。c)打開選擇“圖片”選項(xiàng)卡，單擊〔選擇圖片〕按鈕，從“選擇圖片”對(duì)話框中找到合適的圖片，單擊〔插入〕按鈕后返回到“填充效果”對(duì)話框最后單擊〔確定〕按鈕后退出。此圖片當(dāng)作橢圓圖形的背景出現(xiàn)，改變了原來的矩形形狀，獲得了滿意的裁剪圖片效果。圖片在插入PPT之前，我們可以用ACDSEE軟件進(jìn)行加工，如改變大小，裁剪等操作。二、學(xué)會(huì)下載，查找方法。在制作課件過程中，我們時(shí)常需要從網(wǎng)絡(luò)上下載各種資源用以豐富課件內(nèi)容，提升課堂效果。但有許多網(wǎng)站的flash動(dòng)畫都不提供下載；還有網(wǎng)站為我們提供了許多視頻素材，這些視頻素材都是FLV流媒體格式。FLV流媒體格式是一種新的視頻格式，全稱為FlashVideo。由于它形成的文件極小、加載速度極快，使得網(wǎng)絡(luò)觀看視頻文件成為可能，它的出現(xiàn)也有效地解決了視頻文件導(dǎo)入Flash后，使導(dǎo)出的SWF文件體積龐大，不能在網(wǎng)絡(luò)上很好的使用等缺點(diǎn)。目前各在線視頻網(wǎng)站均采用此視頻格式。如新浪播客、56、優(yōu)酷、土豆、酷6等，無一例外。FLV已經(jīng)成為當(dāng)前視頻文件的主流格式。這些網(wǎng)站一般都不提供下載。我們想要這些素材，怎樣辦？1.尋找下載方法：a)在百度網(wǎng)站搜索欄中輸入下載的內(nèi)容，搜索下載方法。b)弄清格式，再搜索方法。2.具體方法推薦①flasah動(dòng)畫的下載方法一：IE緩存中尋找在網(wǎng)上看過一個(gè)flash后，一般情況下都會(huì)保存在IE緩存里。右擊桌面上的IE圖標(biāo)，選“屬性”命令，單擊中間的“設(shè)置”按鈕，彈出“Internet臨時(shí)文件和歷史記錄設(shè)置”面板，單擊“查看文件”，可以打開臨時(shí)文件夾，按時(shí)間排序，找到剛才打開的flash動(dòng)畫文件。優(yōu)點(diǎn)：不需要安裝其它軟件。缺點(diǎn)：操作相對(duì)煩瑣。方法二：借助Flashsaver等軟件下載，這些軟件都可以快速、方便的下載你所需要的flash文件。優(yōu)點(diǎn)：簡(jiǎn)單、方便、快速。缺點(diǎn)：需要安裝使用。②FLV視頻的獲取方法一：IE緩存中尋找，方法同flasah。方法二：flv視頻解析下載/三、學(xué)用控件，轉(zhuǎn)化應(yīng)用1.flash動(dòng)畫的插入方法一：安裝flash插件，再插入flash。步驟：a)安裝“ppt插flash軟件”插件；b)單擊“插入”→“flashmovie”→打開要播放的flash文件→確定。方法二：利用控件插入flash動(dòng)畫。步驟：a)插入“ShockwaveFlashObject”控件對(duì)象：右擊“工具欄”→選“控件工具箱”（或點(diǎn)“視圖→工具欄→控件工具箱”）；點(diǎn)“其他控件”（控件工具箱中最后一個(gè)形似錘子斧頭的按鈕），拖動(dòng)滾動(dòng)條或在英文輸入法狀態(tài)下按鍵盤上“s”鍵，快速定位到以s開頭的控件，選擇“ShockwaveFlashObject”控件。將鼠標(biāo)移到幻燈片工作區(qū)，鼠標(biāo)指針變成“十”字型，拖動(dòng)鼠標(biāo)繪制出一個(gè)形似信封的矩形。b)打開控件對(duì)象“屬性”對(duì)話框：右擊矩形控件對(duì)象，在彈出的快捷菜單中選“屬性”命令。c)正確設(shè)置控件對(duì)象屬性：主要是在“Movie”空白文本域中正確輸入演示文稿要播放的.swf動(dòng)畫的完整名稱。d)將控件對(duì)象適當(dāng)縮放：為了獲得比較好的播放效果，拖動(dòng)控件對(duì)象的縮放點(diǎn)使它幾乎覆蓋整個(gè)幻燈片工作區(qū)，但要在幻燈片工作區(qū)底部保留少許空白區(qū)域。這樣既可以享受.swf動(dòng)畫大屏幕播放的好處，又能夠保證幻燈片能夠順利地切換。e)一般情況下，幻燈片應(yīng)顯示出動(dòng)畫的第一幀圖形。如果控件對(duì)象仍是空白的，可保存演示文稿，關(guān)閉后再打開它，按F5放映幻燈片，應(yīng)該能夠正確播放動(dòng)畫。2.FLV視頻的插入FLV視頻與FLASH不一樣的。全稱是flashvideo，所用的播放器也不一樣。①利用控件插入PPT的方法也是有區(qū)別的。不同點(diǎn)：先要下載pptflv.swf文件，此文件是類似于網(wǎng)頁中FLV視頻播放器的一個(gè)Flash文件(可用百度搜索下載下來后記著要改文件名，保留擴(kuò)展名)；例如改成：pptflv1.swf“Movie”參數(shù)值填入方法不一樣，參數(shù)值示例：pptflv.swf?file=視頻.FLV“pptflv.swf”即為步驟一下載下來的Flash文件的完整文件，“視頻.FLV”即為需要播放的FLV視頻的文件名，大家只要將pptflv.swf換成自己下載后起的文件名，將“視頻.FLV”換成自己的FLV視頻文件名，則此FLV文件就可以在PowerPoint中播放了。如播放2.flv視頻參數(shù)填法：示例：pptflv1.swf?file=2.FLV②方法二：將flv轉(zhuǎn)換成swf再插入轉(zhuǎn)換軟件：UltraFlashVideoFLVConverter3.2.0軟件說明：該軟件又叫全格式FLV轉(zhuǎn)換器，支持將幾乎所有主流視頻格式轉(zhuǎn)換為FLV或者SWF且對(duì)用戶較為關(guān)心的RealMedia(RM/RMVB...)和QuickTime(MOV/QT...)支持良好。三大特色功能：既可輸出FLV格式，也可輸出SWF格式，甚至同時(shí)輸出FLV+SWF格式。此軟件也支持創(chuàng)建調(diào)用播放的網(wǎng)頁支持導(dǎo)入所有的主流字幕格式。srt,*.sub,*.idx,*.ssa,*.ass,*.psb,*.smi)有字幕合成功能，你現(xiàn)在無需再使用那些繁瑣的專業(yè)軟件來合成字幕到視頻中去，字幕合成與格式轉(zhuǎn)換一氣呵成！支持視頻分割，右鍵點(diǎn)擊列表中的源文件，選擇[編輯視頻]，自己設(shè)置下起點(diǎn)終點(diǎn)即可對(duì)視頻進(jìn)行去粗取精處理?、鄯椒ㄈ簩lv轉(zhuǎn)換成其他格式視頻文件再插入工具：FLV轉(zhuǎn)AVI（FreeFLVtoAVIConverter1.5）作用：一個(gè)免費(fèi)的將FLV轉(zhuǎn)換成AVI的軟件，簡(jiǎn)單好用，自帶解碼器。四、學(xué)做交互，理解運(yùn)用。1.利用母版進(jìn)行交互母版≠模版母版和模版可以使課件統(tǒng)一整體風(fēng)格，展現(xiàn)自己的個(gè)性和特點(diǎn)；模版是對(duì)同一類課件所做的整體風(fēng)格統(tǒng)一設(shè)置，母版則是對(duì)某一部課件內(nèi)部所做的個(gè)性化統(tǒng)一設(shè)置。母版設(shè)置得好，就可以存為模版，供別人在制作同類題材時(shí)使用。修改幻燈片母板的方法和技巧。如果我們希望為每一張幻燈片添加上一項(xiàng)固定的內(nèi)容，并做超鏈接，可以通過修改“母板”來實(shí)現(xiàn)。a)執(zhí)行“視圖→母板→幻燈片母板”命令，進(jìn)入“幻燈片母板”編輯狀態(tài)。b)插入固定內(nèi)容。例如：將圖片插入到幻燈片中，調(diào)整好大小、定位到合適的位置上。c)給這張圖片插入超鏈接，就可以進(jìn)行交互了。d)單擊“關(guān)閉母板視圖”按鈕退出“幻燈片母板”編輯狀態(tài)。以后添加幻燈片時(shí)，該幻燈片上自動(dòng)添加上該圖片。如果說一個(gè)PPT有它的靈魂的話，那就是PPT的母板，它的作用猶如摩天大廈的根基一般。2.在PPT演示文稿中插入PowerPoint演示文稿對(duì)象實(shí)現(xiàn)交互具體效果：①導(dǎo)航目錄內(nèi)容展示效果②單擊小圖片就可看到該圖片的放大圖自動(dòng)縮效果《畫家鄉(xiāng)》一課五個(gè)畫面交互的具體操作方法：a)單擊“插入→對(duì)象”，在出現(xiàn)的選擇頁中選擇“MicrosoftPowerPoint演示文稿”，單擊確定。此時(shí)就會(huì)在當(dāng)前幻燈片中插入一個(gè)“PowerPoint演示文稿”的編輯區(qū)域。b)在此編輯區(qū)域中我們就可以對(duì)插入的演示文稿對(duì)象進(jìn)行編輯了，編輯方法與PowerPoint演示文稿的編輯方法一樣。c)在插入的演示文稿對(duì)象中創(chuàng)建所需的幻燈片。可將圖片設(shè)置為幻燈片相同大小，退出編輯后，就可發(fā)現(xiàn)圖片以縮小方式顯示了（其實(shí)是整個(gè)插入的演示文稿對(duì)象被縮小顯示了）。d)最后，我們只需對(duì)剩余的圖片進(jìn)行插入。為了提高效率，可將這個(gè)插入的演示文稿對(duì)象進(jìn)行復(fù)制，并按照上面的方法對(duì)圖片進(jìn)行替換即可。e)完畢后，單擊“觀看放映”命令進(jìn)行演示，單擊小圖片馬上會(huì)放大，再單擊放大的圖片馬上又返回到了瀏覽小圖片的幻燈片中了。原理：這里的小圖片實(shí)際上是插入的演示文稿對(duì)象，它們的“動(dòng)作設(shè)置”屬性中的“單擊鼠標(biāo)”中的“對(duì)象動(dòng)作”被設(shè)為了“演示”（這是默認(rèn)值）。因此我們?cè)谘菔緯r(shí)，單擊小圖片，就是等于對(duì)插入的演示文稿對(duì)象進(jìn)行“演示觀看”。而演示文稿對(duì)象在播放時(shí)就會(huì)自動(dòng)全屏幕顯示。所以我們看到的圖片就好像被放大了一樣，而我們單擊放大圖片時(shí)，插入的演示文稿對(duì)象實(shí)際上已被播放完了（因?yàn)橹挥幸粡垼?，它就?huì)自動(dòng)退出，所以就回到了主幻燈片中了。3.用觸發(fā)器控制自定義動(dòng)畫進(jìn)行交互以前我們?cè)谑褂肞owerPoint制作課件時(shí)，常常發(fā)現(xiàn)制作人機(jī)交互性的課件非常麻煩。其實(shí)在PowerPoint2003里，用觸發(fā)器控制自定義動(dòng)畫可以輕松地制作出交互性很強(qiáng)的課件。觸發(fā)器功能可以將畫面中的任一對(duì)象設(shè)置為觸發(fā)器，單擊它，該觸發(fā)器下的所有對(duì)象就能根據(jù)預(yù)先設(shè)定的動(dòng)畫效果開始運(yùn)動(dòng)，并且設(shè)定好的觸發(fā)器可以多次重復(fù)使用。類似于Authorware、Flash等軟件中的熱對(duì)象、按鈕、熱文字等，單擊后會(huì)引發(fā)一個(gè)或者的一系列動(dòng)作。例1：?jiǎn)螕簟袄馀_(tái)”后，“小球”開始按一定路徑運(yùn)動(dòng)。例2：分別單擊“變色一”和“變色二”，讓“笑臉”顏色。例3：?jiǎn)螕粝旅嬉欢卧挼年P(guān)鍵詞，讓詞語變紅色讀下面一段話，說說從哪些詞語中可以看出侵略者采用了各種野蠻手段掠奪、毀滅圓明園的？他們把園內(nèi)凡是能拿走的東西，統(tǒng)統(tǒng)掠走，拿不動(dòng)的，就用大車或牲口搬運(yùn)。實(shí)在運(yùn)不走的，就任意破壞、毀掉。步驟：a)將原來段落中的重點(diǎn)詞消去；（將詞語顏色變成和背景色一樣）b)將重點(diǎn)詞作為單獨(dú)文本覆蓋到原來位置；c)設(shè)置重點(diǎn)詞自定義動(dòng)畫為“添加效果→強(qiáng)調(diào)→更改字體顏色→紅色”d)右擊重點(diǎn)詞自定義動(dòng)畫，選擇“效果選項(xiàng)”，選擇“計(jì)時(shí)”，選擇“觸發(fā)器”，選“單擊下列對(duì)象時(shí)啟動(dòng)效果”，再選重點(diǎn)詞，按確定。五、學(xué)會(huì)截取，合理選用。（一）視頻的截取加工1.工具：萬能轉(zhuǎn)換器（英文名TotalVideoConverter）作用：可以幫助你快速的分割,修整大的AVI、MPEG、ASF或者WMV文件為一個(gè)個(gè)小的視頻文件,內(nèi)置視頻播放器,你可以很方便的按照所選擇的播放時(shí)間進(jìn)行切割操作,不需要另外具備高深的技術(shù)知識(shí),簡(jiǎn)單容易使用!2.繪聲繪影會(huì)聲會(huì)影是一套操作最簡(jiǎn)單，功能最強(qiáng)悍的DV、HDV影片剪輯軟件。不僅完全符合家庭或個(gè)人所需的影片剪輯功能，甚至可以挑戰(zhàn)專業(yè)級(jí)的影片剪輯軟件。（二）flash的片段截取有時(shí)候，在網(wǎng)絡(luò)上下載了一個(gè)課件，對(duì)自己的課堂教學(xué)有幫助，但是又不想全部應(yīng)用這個(gè)課件，只想取出其中一部分，應(yīng)該則么辦呢？先用碩思閃客精靈將.swf文件和.exe文件轉(zhuǎn)換成fla文件，再用flash8打開進(jìn)行編輯，截取自己所需的片段，然后插入到ppt里面為我所用。1.碩思閃客精靈：它是一款用于瀏覽和解析Flash動(dòng)畫（.swf文件和.exe文件）的工具。最新版本有著強(qiáng)大的功能，可以將swf文件導(dǎo)出成FLA文件。它還能夠?qū)lash動(dòng)畫中的圖片、矢量圖、聲音、視頻（*.flv）、文字、按鈕、影片片段、幀等基本元素完全分解，最重要的是可以對(duì)動(dòng)作的腳本(Actionscript)進(jìn)行解析，清楚的顯示其動(dòng)作的代碼，讓對(duì)Flash動(dòng)畫的構(gòu)造一目了然。支持將SWF文件導(dǎo)出成FLA文件，幫助丟失FLA文件的影片作者重新獲得FLA文件，從而可以再編輯。完全兼容Flash8文件和動(dòng)作腳本(ActionScript)2.0。碩思閃客精靈支持將包含組件的SWF文件轉(zhuǎn)換成FLA格式，用戶可以在Flash中編輯這些組件。支持解析Flash影片中的視屏(video)文件，并將Flash影片中的視頻文件導(dǎo)出為*.flv格式。2.碩思閃客精靈具體使用方法：①解析Flash課件，提取課件素材在Flash課件作品中有大量的圖片、聲音和視頻等資源。由于制作者擁有的資源不同，在制作課件時(shí)，很難及時(shí)、方便地尋找到適合的素材。如果可以從同類作品中將所需要的資源提取出來為己所用的話，不僅大大節(jié)約了搜集素材資源的時(shí)間，而且會(huì)極大地提高課件利用率。但是，F(xiàn)lash課件發(fā)布時(shí)一般都進(jìn)行加密處理，使教師無法用普通的方式導(dǎo)入到Flash中進(jìn)行編輯。而碩思閃客精靈可以解析出Flash作品中的元件及腳本，并且可以保存成swf格式，這樣在創(chuàng)作時(shí)就可以直接導(dǎo)入Flash中使用。啟動(dòng)閃客精靈，單擊工具上的“快速打開”按鈕打開一個(gè)Flash動(dòng)畫(可以是swf格式或exe格式)，閃客精靈會(huì)自動(dòng)分解當(dāng)前動(dòng)畫(圖2)，包括用到的腳本語言(Actions語句)，并在資源欄中分類羅列著動(dòng)畫中的各種元件(圖片、按鈕、影片和聲音等);單擊某個(gè)元件，可以在中間的窗口中預(yù)覽;勾選需要的元件，然后單擊“導(dǎo)出”按鈕，就可以把選中的元件分類保存到原文件所在的文件夾中。②反編譯Flash課件，獲取課件源代碼碩思閃客精靈的最大亮點(diǎn)就是能夠?qū)lash動(dòng)畫(swf格式)還原成其源文件(Fla格式)，相信這個(gè)功能是很多朋友期待已久的。還原的方法十分的簡(jiǎn)單，只需要打開Flash動(dòng)畫，再單擊工具欄上的“導(dǎo)出Fla”按鈕，選擇保存位置，稍等后就完成了還原工作，此時(shí)還會(huì)提示“是否愿意用Flash打開它”，單擊“Yes”即可啟動(dòng)系統(tǒng)中安裝的Flash打開還原后的源文件，此時(shí)你就可以隨心所欲地對(duì)它進(jìn)行修改啦。3.用flash8進(jìn)行編輯基本方法：選取需要幀，復(fù)制，粘貼到新的flash中，調(diào)試修改。上面介紹了關(guān)于破解Flash課件的一些方法和手段，有一個(gè)特定的使用范圍，即為了課堂教學(xué)服務(wù)，只有資源共享才能提高教學(xué)效率，促進(jìn)教學(xué)效果的提高。不能做為商業(yè)目的，也不能將別人的課件的署名修改一下，便成為自己的作品，用于參加比賽，這是不道德的行為。在PPT演示中禁用右鍵快捷菜單和滑鼠滾動(dòng)一大群與會(huì)人員正襟危坐，你豪情滿懷地進(jìn)行著某個(gè)新產(chǎn)品的演示或介紹，卻不小心由于鼠標(biāo)左鍵的誤操作導(dǎo)致幻燈片跳到了本不應(yīng)該出現(xiàn)的位置，或者本應(yīng)按下鼠標(biāo)左鍵切換到下一張，卻由于按下了右鍵而出現(xiàn)一個(gè)快捷菜單。不用擔(dān)心，只要進(jìn)行小小的設(shè)置，就可以將這些煩人的問題統(tǒng)統(tǒng)搞定。從任務(wù)窗格中打開“幻燈片切換”，將換片方式小節(jié)中的“單擊鼠標(biāo)時(shí)”和“每隔”兩個(gè)復(fù)選項(xiàng)全部去除，然后將這個(gè)設(shè)置應(yīng)用于所有幻燈片，以后切換到下一張或上一張，只有通過鍵盤上的方向鍵才能進(jìn)行操作。至于另外一個(gè)問題，解決的辦法也很簡(jiǎn)單，從“工具”菜單下打開“選項(xiàng)→視圖”窗口，取消“幻燈片放映”小節(jié)上的“右鍵單擊快捷菜單”復(fù)選框即可。■在PPT演示文稿內(nèi)復(fù)制幻燈片要復(fù)制演示文稿中的幻燈片，請(qǐng)先在普通視圖的“大綱”或“幻燈片”選項(xiàng)中，選擇要復(fù)制的幻燈片。如果希望按順序選取多張幻燈片，請(qǐng)?jiān)趩螕魰r(shí)按Shift鍵；若不按順序選取幻燈片，請(qǐng)?jiān)趩螕魰r(shí)按Ctrl鍵。然后在“插入”菜單上，單擊“幻燈片副本”，或者直接按下“Ctrl+shift+D”組合鍵，則選中的幻燈片將直接以插入方式復(fù)制到選定的幻燈片之后?！鯬owerpoint自動(dòng)黑屏在用Powerpoint展示課件的時(shí)候，有時(shí)需要學(xué)生自己看書討論，這時(shí)為了避免屏幕上的圖片影響學(xué)生的學(xué)習(xí)注意力可以按一下“B”鍵，此時(shí)屏幕黑屏。學(xué)生自學(xué)完成后再接一下“B”鍵即可恢復(fù)正常。按“W”鍵也會(huì)產(chǎn)生類似的效果?！鰧⒒脽羝l(fā)送到word文檔1、在Powerpoint中打開演示文稿，然后在“文件”菜單上，指向“發(fā)送”，再單擊“MicrosoftWord”。2、在“將幻燈片添加到Microsoftword文檔”之下，如果要將幻燈片嵌入word文檔，請(qǐng)單擊“粘貼”；如果要將幻燈片鏈接到word文檔，請(qǐng)單擊“粘貼鏈接”。如果鏈接文件，那么在Powerpoint中編輯這些文件時(shí)，它們也會(huì)在word文檔中更新。3、單擊“確定”按鈕。此時(shí)，系統(tǒng)將新建一個(gè)word文檔，并將演示文稿復(fù)制到該文檔中。如果word未啟動(dòng)，則系統(tǒng)會(huì)自動(dòng)啟動(dòng)word?！鲎尰脽羝詣?dòng)播放要讓powerpoint的幻燈片自動(dòng)播放，只需要在播放時(shí)右鍵點(diǎn)擊這個(gè)文稿，然后在彈出的菜單中執(zhí)行“顯示”命令即可，或者在打開文稿前將該文件的擴(kuò)展名從PPT改為PPS后再雙擊它即可。這樣一來就避免了每次都要先打開這個(gè)文件才能進(jìn)行播放所帶來的不便和繁瑣。■增加PPT的“后悔藥”在使用powerpoint編輯演示文稿時(shí)，如果操作錯(cuò)誤，那么只要單擊工具欄中的“撤消”按鈕，即可恢復(fù)到操作前的狀態(tài)。然而，默認(rèn)情況下Powerpoint最多只能夠恢復(fù)最近的20次操作。其實(shí)，powerpoint允許用戶最多可以“反悔”150次，但需要用戶事先進(jìn)行如下設(shè)置：在“工具－選項(xiàng)”，擊“編輯”選項(xiàng)卡，將“最多可取消操作數(shù)”改為“150”，確定?！鯬PT中的自動(dòng)縮略圖效果你相信用一張幻燈片就可以實(shí)現(xiàn)多張圖片的演示嗎？而且單擊后能實(shí)現(xiàn)自動(dòng)放大的效果，再次單擊后還原。其方法是：新建一個(gè)演示文稿，單擊“插入”菜單中的“對(duì)象”命令，選擇“Microsoftpowerpoint演示文稿”，在插入的演示文稿對(duì)象中插入一幅圖片，將圖片的大小改為演示文稿的大小，退出該對(duì)象的編輯狀態(tài)，將它縮小到合適的大小，按F5鍵演示一下看看，是不是符合您的要求了？接下來，只須復(fù)制這個(gè)插入的演示文稿對(duì)象，更改其中的圖片，并排列它們之間的位置就可以了。■快速靈活改變圖片顏色利用powerpoint制作演示文稿課件，插入漂亮的剪貼畫會(huì)為課件增色不少?？刹⒉皇撬械募糍N畫都符合我們的要求，剪貼畫的顏色搭配時(shí)常不合理。這時(shí)我們右鍵點(diǎn)擊該剪貼畫選擇“顯示‘圖片’工具欄”選項(xiàng)（如果圖片工具欄已經(jīng)自動(dòng)顯示出來則無需此操作），然后點(diǎn)擊“圖片”工具欄上的“圖片重新著色”按鈕，在隨后出現(xiàn)的對(duì)話框中便可任意改變圖片中的顏色?！鰹镻PT添加公司LOGO用powerpoint為公司做演示文稿時(shí)，最好第一頁都加上公司的Logo，這樣可以間接地為公司做免費(fèi)廣告。執(zhí)行“視圖－母版－幻燈片母版”命令，在“幻燈片母版視圖”中，將Logo放在合適的位置上，關(guān)閉母版視圖返回到普通視圖后，就可以看到在每一頁加上了Logo，而且在普通視圖上也無法改動(dòng)它了。■“保存”特殊字體為了獲得好的效果，人們通常會(huì)在幻燈片中使用一些非常漂亮的字體，可是將幻燈片拷貝到演示現(xiàn)場(chǎng)進(jìn)行播放時(shí)，這些字體變成了普通字體，甚至還因字體而導(dǎo)致格式變得不整齊，嚴(yán)重影響演示效果。在powerpoint中，執(zhí)行“文件－另存為”，在對(duì)話框中點(diǎn)擊“工具”按鈕，在下拉菜單中選擇“保存選項(xiàng)”，在彈出其對(duì)話框中選中“嵌入TrueType字體”項(xiàng)，然后根據(jù)需要選擇“只嵌入所用字符”或“嵌入所有字符”項(xiàng)，最后點(diǎn)擊“確定”按鈕保存該文件即可。■利用組合鍵生成內(nèi)容簡(jiǎn)介我們?cè)谟胮owerpoint2003制作演示文稿時(shí)，通常都會(huì)將后面幾個(gè)幻燈片的標(biāo)題集合起來，把它們作為內(nèi)容簡(jiǎn)介列在首張或第二張幻燈片中，讓文稿看起來更加直觀。如果是用復(fù)制粘貼來完成這一操作，實(shí)在有點(diǎn)麻煩，其實(shí)最快速的方法就是先選擇多張幻燈片，接著按下alt+shift+s即可。■演示文稿中的圖片隨時(shí)更新在制作演示文稿中，如果想要在其中插入圖片，執(zhí)行“插入－圖片－來自文件”，然后打開“插入圖片”窗口插入相應(yīng)圖片。其實(shí)當(dāng)我們選擇好想要插入的圖片后，可以點(diǎn)擊窗口右側(cè)的“插入”按鈕，在出現(xiàn)的下拉列表中選“鏈接文件”項(xiàng)，點(diǎn)擊確定。這樣一來，往后只要在系統(tǒng)中對(duì)插入圖片進(jìn)行了修改，那么在演示文稿中的圖片也會(huì)自動(dòng)更新，免除了重復(fù)修改的麻煩。■快速調(diào)用其他PPT在進(jìn)行演示文檔的制作時(shí)，需要用到以前制作的文檔中的幻燈片或要調(diào)用其他可以利用的幻燈片，如果能夠快速復(fù)制到當(dāng)前的幻燈片中，將會(huì)給工作帶來極大的便利。在幻燈片選項(xiàng)卡時(shí)，使光標(biāo)置于需要復(fù)制幻燈片的位置，選擇“菜單”中的“幻燈片（從文件）”命令，在打開的“幻燈片搜索器”對(duì)話框中進(jìn)行設(shè)置。通過“瀏覽”選擇需要復(fù)制的幻燈片文件，使它出現(xiàn)在“選定幻燈片”列表框中。選中需要插入的幻燈片，單擊“插入”，如果需要插入列表中所有的幻燈片，直接點(diǎn)擊“全部插入”即可。這樣，其他文檔中的幻燈片就為我們所用了?！隹焖俣ㄎ换脽羝诓シ舙owerpoint演示文稿時(shí)，如果要快進(jìn)到或退回到第5張幻燈片，可以這樣實(shí)現(xiàn)：按下數(shù)字5鍵，再按下回車鍵。若要從任意位置返回到第1張幻燈片，還有另外一個(gè)方法：同時(shí)按下鼠標(biāo)左右鍵并停留2秒鐘以上?！隼眉糍N畫尋找免費(fèi)圖片當(dāng)我們利用powerpoint2003制作演示文稿時(shí)，經(jīng)常需要尋找圖片來作為鋪助素材，其實(shí)這個(gè)時(shí)候用不著登錄網(wǎng)站去搜索，直接在“剪貼畫”中就能搞定。方法如下：插入－圖片－剪貼畫，找到“搜索文字”一欄并鍵入所尋找圖片的關(guān)鍵詞，然后在“搜索范圍”下拉列表中選擇“Web收藏集”，單擊“搜索”即可。這樣一來，所搜到的都是微軟提供的免費(fèi)圖片，不涉及任何版權(quán)事宜，大家可以放心使用?！鲋谱鳚L動(dòng)文本在powerpoint中有時(shí)因顯示文本內(nèi)容較多就要制作滾動(dòng)文本。具體制作方法如下：視圖－工具欄－控件箱，打開控件工具箱，點(diǎn)擊“文字框”選項(xiàng)，插入“文字框”控件，然后在幻燈片編輯區(qū)按住鼠標(biāo)左鍵拖拉出一個(gè)文本框，并根據(jù)版面來調(diào)整它的位置和大小。接著在“文字框”上右擊鼠標(biāo)，選擇快捷菜單中的“屬性”命令，彈出“文字框”屬性窗口，在屬性窗口中對(duì)文字框的一些屬性進(jìn)行相關(guān)的設(shè)置。設(shè)置好后右擊“文字框”，選擇“文字框?qū)ο蟆敝械摹熬庉嫛泵?，這時(shí)就可以進(jìn)行文字的輸入，文本編輯完之后，在文字框外任意處單擊鼠標(biāo)，即可退出編輯狀態(tài)。一個(gè)可以讓框內(nèi)文字也隨滾動(dòng)條拖動(dòng)而移動(dòng)的文本框就做好了?！鐾黄?0次的撤消極限Powerpoint的“撤消”功能為文稿編輯提供了很大方便。但powerpoint默認(rèn)的操作次數(shù)卻只有20次。執(zhí)行“工具－選擇”，擊“編輯”標(biāo)簽卡，在“最多可取消操作數(shù)”中設(shè)置你需要的次數(shù)即可。不過要注意，powerpoint撤消操作次數(shù)限制最多為150次?！隼卯嫻P來做標(biāo)記利用powerpoint2003放映幻燈片時(shí)，為了讓效果更直觀，有時(shí)我們需要現(xiàn)場(chǎng)在幻燈片上做些標(biāo)記，這時(shí)該怎么辦？在打開的演示文稿中單擊鼠標(biāo)右鍵，然后依次選擇“指針選項(xiàng)－繪圖”即可，這樣就可以調(diào)出畫筆在幻燈片上寫寫畫畫了，用完后，按ESC鍵便可退出?！隹焖僬{(diào)節(jié)文字大小在powerpoint中輸入文字大小不合乎要求或者看起來效果不好，一般情況是通過選擇字體字號(hào)加以解決，其實(shí)我們有一個(gè)更加簡(jiǎn)潔的方法。選中文字后按ctrl+]是放大文字，ctrl+[是縮小文字。■計(jì)算字?jǐn)?shù)和段落執(zhí)行“文件－屬性”，在其對(duì)話框中選“統(tǒng)計(jì)”選項(xiàng)卡，該文件的各種數(shù)據(jù)，包括頁數(shù)、字?jǐn)?shù)、段落等信息都顯示在該選項(xiàng)卡的統(tǒng)計(jì)信息框里。■輕松隱藏部分幻燈片對(duì)于制作好的p