基于node.js的個(gè)人博客

基于node.js的個(gè)人博客第1章緒論1.1課題背景1967年，哈佛大學(xué)社會(huì)心理學(xué)家斯坦利米格爾得出的六度分割理論“任何兩個(gè)陌生人都可以通過“親友的親友”建立聯(lián)系，他們之間所間隔的人不會(huì)超過六個(gè)”被公認(rèn)為是構(gòu)成SNS存在基礎(chǔ)的核心理論，諸多文獻(xiàn)當(dāng)中都采用這種看法。艾瑞公司《中國網(wǎng)絡(luò)社區(qū)研究報(bào)告簡版（2009）》將社會(huì)性網(wǎng)絡(luò)（社會(huì)網(wǎng)絡(luò)，SocialNetworking:SN）定義為：是指個(gè)人之間的關(guān)系網(wǎng)絡(luò)，基于社會(huì)網(wǎng)絡(luò)關(guān)系系統(tǒng)思想的網(wǎng)站就是社會(huì)性網(wǎng)絡(luò)網(wǎng)站（SNS網(wǎng)站）。早期社交網(wǎng)絡(luò)的服務(wù)網(wǎng)站呈現(xiàn)為在線社區(qū)的形式。用戶多通過聊天室進(jìn)行交流。隨著Blog等新的網(wǎng)上交際工具的出現(xiàn)用戶可以通過網(wǎng)站上建立的個(gè)人主頁來分享喜愛的信息。在國外，facebook是覆蓋最廣的社交網(wǎng)站。不過有些國家也有自己本土的社交網(wǎng)站，一般是年輕人使用。在國內(nèi)，社交網(wǎng)站一般是以基于特定功能。如：基于各類生活愛好：豆瓣；基于白領(lǐng)和學(xué)生用戶的交流：人人網(wǎng)；基于信息的快速分享：新浪微博。而博客一般用于在網(wǎng)絡(luò)上出版、發(fā)表和張貼個(gè)人文章，并與博友之間進(jìn)行互動(dòng)。Node.js是一個(gè)劃時(shí)代的技術(shù)，它在原有的Web前端和后端技術(shù)的基礎(chǔ)上總結(jié)并提煉出了許多新的概念和方法，堪稱是十多年來Web開發(fā)經(jīng)驗(yàn)的集大成者。Node.js可以作為服務(wù)器向用戶提供服務(wù)，與PHP、Python、RubyonRails相比，它跳過了Apache、Nginx等HTTP服務(wù)器，直接面向前端開發(fā)。Node.js的許多設(shè)計(jì)理念與經(jīng)典架構(gòu)（如LAMP）有著很大的不同，可提供強(qiáng)大的伸縮能力，以適應(yīng)21世紀(jì)10年代以后規(guī)模越來越龐大的互聯(lián)網(wǎng)環(huán)境。1.2目的和意義隨著計(jì)算機(jī)技術(shù)的發(fā)展和普及，人們對資源共享的需求也在不斷地增強(qiáng)。Blog是Weblog的簡稱，它是繼E-mail、BBS、ICQ之后出現(xiàn)的第4種新的生活方式、新的工作方式、新的學(xué)習(xí)方式和新的網(wǎng)絡(luò)交流方式。Blog主要應(yīng)用于3個(gè)方面：一是新的人際交流通道；二是以個(gè)人為中心的信息摘選和知識(shí)管理平臺(tái)；三是以個(gè)人為中心的傳播出版資源庫。Node采用事件驅(qū)動(dòng)、異步編程。使用Node的開發(fā)人員可以根據(jù)自己的業(yè)務(wù)需要來定制相應(yīng)的回調(diào)函數(shù)。同時(shí)，這些定義的回調(diào)函數(shù)是異步執(zhí)行的。Node采用了一系列“非阻塞”庫來支持事件循環(huán)。其本質(zhì)就是為文件系統(tǒng)和數(shù)據(jù)庫之類的資源提供接口。充分利用了系統(tǒng)資源，節(jié)約了任務(wù)之間的等待時(shí)間，節(jié)省出來的資源可以為其他任務(wù)服務(wù)。在服務(wù)器開發(fā)過程中，并發(fā)數(shù)是一個(gè)很大的問題，傳統(tǒng)阻塞式的函數(shù)會(huì)導(dǎo)致資源的浪費(fèi)和延遲。通過事件機(jī)制和非阻塞編程，會(huì)大大提高資源利用率。這是使用Node其意義所在。服務(wù)端JavaScript：node.js一出現(xiàn)，勢必會(huì)引發(fā)一系列博客應(yīng)用的開發(fā)，本系統(tǒng)便是對此領(lǐng)域的探索。1.3系統(tǒng)開發(fā)的相關(guān)技術(shù)本系統(tǒng)在Windows8下，基于Node0.10.31（具有內(nèi)建服務(wù)器），數(shù)據(jù)庫為MongoDB2.6.9，Express4.10.2框架。1.3.1JavaScript簡介近年來，JavaScript在業(yè)界的地位一直在穩(wěn)步上升。一開始它只是被當(dāng)做檢驗(yàn)表單做出花俏效果的“玩具”語言，后來隨著DouglasCrockford等人的挖掘以及傳道，JavaScript的一些高級模式得以普及。隨著Ajax的到來，JavaScript在Web2.0潮流中起到了核心的作用，各種豐富多彩的Ajax庫應(yīng)運(yùn)而生，擴(kuò)充了JavaScript本來不具有的功能，如方便的DOM查詢、操作、命名空間、模塊空間、模塊管理、依賴管理、面向?qū)ο缶幊獭，F(xiàn)在使用較多的JavaScript庫有：jQuery，Yahoo！UI，Dojo，ExtJS，Mootools，Prototype等。幾乎每個(gè)庫都有自己成熟的開發(fā)社區(qū)和一批追隨使用者。另外，瀏覽器MozillaFirefox，GoogleChrome，AppleSafari的JavaScript解析速度比起以前的老式IE的JavaScript解析器速度提升非常之大。特別是V8引擎，速度更是遙遙領(lǐng)先。而在服務(wù)器編程領(lǐng)域，大規(guī)模并發(fā)的需求變得越來越大，JavaScript事件驅(qū)動(dòng)的異步機(jī)制使得它非常適合這項(xiàng)任務(wù)。因此，node.js誕生。雖然目前node.js的生態(tài)環(huán)境已經(jīng)逐步完善，與業(yè)界的各種工具的對應(yīng)接口模塊也逐漸被完成，不過用node寫成的工具目前還比較少，其中一個(gè)是Blog系統(tǒng)。1.3.2Node.js簡介Node.js是什么？Node.js是一個(gè)\o"事件驅(qū)動(dòng)"事件驅(qū)動(dòng)\o"I/O"I/O服務(wù)端\o"JavaScript"JavaScript環(huán)境，基于\o"Google"Google的\o"V8(JavaScript引擎)"V8引擎。目的是為了提供撰寫可擴(kuò)充網(wǎng)絡(luò)程序，如Web服務(wù)。與一般\o"JavaScript"JavaScript不同的地方，Node.js并不是在\o"Web瀏覽器"Web瀏覽器上運(yùn)行，而是一種在服務(wù)器上運(yùn)行的JavaScript。Node.js旨在解決什么問題？Node公開宣稱的目標(biāo)是“旨在提供一種簡單的構(gòu)建可伸縮網(wǎng)絡(luò)程序的方法。”在當(dāng)前的服務(wù)器程序開發(fā)中存在這一個(gè)問題：通常服務(wù)器程序開發(fā)所使用的語言主要是Java和PHP，在這類語言中，每個(gè)連接都會(huì)生成一個(gè)新的線程，而每個(gè)新的線程可能需要配套2MB的內(nèi)存。假設(shè)在一個(gè)擁有8GBRAM的系統(tǒng)上，理論上最大的并發(fā)連接數(shù)量4000個(gè)用戶。隨著您的客戶群的增長，如果希望您的Web應(yīng)用程序支持更多的用戶，那么就必須添加更多的服務(wù)器。隨之而來的問題就是會(huì)增加服務(wù)器成本、流量成本和人工成本等成本。除了成本上升外，還有一個(gè)潛在的技術(shù)問題，即用戶可能針對每個(gè)請求使用不同的服務(wù)器，因此，任何共享資源都必須在所有服務(wù)器之間共享。鑒于上述原因，整個(gè)Web應(yīng)用程序架構(gòu)（包括流量、處理器速度和內(nèi)存速度）中的瓶頸是：服務(wù)器能夠處理的并發(fā)連接的最大數(shù)量。而Node解決這問題的方法是:更改連接到服務(wù)器的方式。每個(gè)連接發(fā)射一個(gè)在Node引擎的進(jìn)程中運(yùn)行的事件，而不是為每個(gè)連接生成一個(gè)新的線程（并為其分配一些配套內(nèi)存）。Node不會(huì)使用到鎖，不會(huì)直接阻塞I/O調(diào)用。Node還支持?jǐn)?shù)萬個(gè)并發(fā)連接。我們可以通過下面這兩張圖深入理解一下PHP和Node.js對處理Http請求時(shí)的區(qū)別：圖1-1PHP的模型圖1-2Node.js的模型Node.js原創(chuàng)者是RyanLienhartDahl，后由眾多開發(fā)者推動(dòng)其發(fā)展，現(xiàn)仍處于活躍的開發(fā)狀態(tài)。Node.js能做的遠(yuǎn)不止開發(fā)一個(gè)網(wǎng)站，使用Node.js，可以輕松地開發(fā)：具有復(fù)雜邏輯的網(wǎng)站；基于社交網(wǎng)絡(luò)的大規(guī)模Web應(yīng)用；WebSocket服務(wù)器；TCP/UDP套接字應(yīng)用程序；命令行工具；交互式終端程序；帶有圖形用戶界面的本地應(yīng)用程序；單元測試工具；客戶端JavaScript編譯器...Node.js作為一個(gè)新興的語言，有很多吸引人的地方：單線程；非阻塞I/O；V8虛擬機(jī)；事件驅(qū)動(dòng)單線程的優(yōu)缺點(diǎn)？Node.js的單線程具有它的優(yōu)勢，但也并非十全十美，在保持單線程模型的同時(shí)，它是如何保證非阻塞的呢？高性能：首先，單線程避免了傳統(tǒng)PHP那樣頻繁創(chuàng)建、切換線程的開銷，使執(zhí)行速度更加迅速。第二，資源占用小，如果有對Node.js的web服務(wù)器做過壓力測試的朋友可能發(fā)現(xiàn)，Node.js在大負(fù)荷下對內(nèi)存占用仍然很低，同樣的負(fù)載PHP因?yàn)橐粋€(gè)請求一個(gè)線程的模型，將會(huì)占用大量的物理內(nèi)存，很可能會(huì)導(dǎo)致服務(wù)器因物理內(nèi)存耗盡而頻繁交換，失去響應(yīng)。線程安全：單線程的js還保證了絕對的線程安全，不用擔(dān)心同一變量同時(shí)被多個(gè)線程進(jìn)行讀寫而造成的程序崩潰。比如我們之前做的web訪問統(tǒng)計(jì)，因?yàn)閱尉€程的絕對線程安全，所以不可能存在同時(shí)對count變量進(jìn)行讀寫的情況，我們的統(tǒng)計(jì)代碼就算是成百的并發(fā)用戶請求都不會(huì)出現(xiàn)問題，相較PHP的那種存文件記錄訪問，就會(huì)面臨并發(fā)同時(shí)寫文件的問題。線程安全的同時(shí)也解放了開發(fā)人員，免去了多線程編程中忘記對變量加鎖或者解鎖造成的悲劇。單線程的異步和非阻塞：Node.js是單線程的，但是它如何做到I/O的異步和非阻塞的呢？其實(shí)Node.js在底層訪問I/O還是多線程的，有興趣的朋友可以翻看Node.js的fs模塊的源碼，里面會(huì)用到libuv來處理I/O，所以在我們看來Node.js的代碼就是非阻塞和異步形式的。阻塞/非阻塞與異步/同步是兩個(gè)不同的概念，同步不代表阻塞，但是阻塞肯定就是同步了。舉個(gè)現(xiàn)實(shí)生活中的例子，我去食堂打飯，我選擇了A套餐，然后工作人員幫我去配餐，如果我就站在旁邊，等待工作人員給我配餐，這種情況就稱之為同步；若工作人員幫我配餐的同時(shí)，排在我后面的人就開始點(diǎn)餐，這樣整個(gè)食堂的點(diǎn)餐服務(wù)并沒有因?yàn)槲以诘却鼳套餐而停止，這種情況就稱之為非阻塞。這個(gè)例子就簡單說明了同步但非阻塞的情況。再如果我在等待配餐的時(shí)候去買飲料，等聽到叫號再回去拿套餐，此時(shí)我的飲料也已經(jīng)買好，這樣我在等待配餐的同時(shí)還執(zhí)行了買飲料的任務(wù)，叫號就等于執(zhí)行了回調(diào)，就是異步非阻塞了。1.3.3MongoDB簡介MongoDB是一個(gè)基于分布式文件存儲(chǔ)的數(shù)據(jù)庫。由\t"/subview/3385614/_blank"C++語言編寫。旨在為WEB應(yīng)用提供可擴(kuò)展的高性能數(shù)據(jù)存儲(chǔ)解決方案。他支持的數(shù)據(jù)結(jié)構(gòu)非常松散，是類似\t"/subview/3385614/_blank"json的\t"/subview/3385614/_blank"bson格式，因此可以存儲(chǔ)比較復(fù)雜的數(shù)據(jù)類型。MongoDB最大的特點(diǎn)是他支持的查詢語言非常強(qiáng)大，其語法有點(diǎn)類似于面向?qū)ο蟮牟樵冋Z言，幾乎可以實(shí)現(xiàn)類似關(guān)系數(shù)據(jù)庫單表查詢的絕大部分功能，而且還支持對數(shù)據(jù)建立\t"/subview/3385614/_blank"索引。MongoDB的主要功能特性有：1、面向集合存儲(chǔ)，易存儲(chǔ)對象類型的數(shù)據(jù)；2、模式自由；3、支持動(dòng)態(tài)\t"/subview/3385614/_blank"查詢；4、支持完全索引，包含內(nèi)部對象；5、支持查詢；6、支持復(fù)制和故障恢復(fù)；7、使用高效的二進(jìn)制數(shù)據(jù)存儲(chǔ)，包括大型對象（如視頻等）；8、自動(dòng)處理碎片，以支持云計(jì)算層次的擴(kuò)展性；9、支持\t"/subview/3385614/_blank"RUBY，\t"/subview/3385614/_blank"PYTHON，\t"/subview/3385614/_blank"JAVA，\t"/subview/3385614/_blank"C++，\t"/subview/3385614/_blank"PHP，\t"/subview/3385614/_blank"C#等多種語言；10、文件存儲(chǔ)格式為BSON（一種JSON的擴(kuò)展）；11、可通過\t"/subview/3385614/_blank"網(wǎng)絡(luò)訪問。1.3.4Express簡介Express是一個(gè)簡潔而靈活的

node.js

Web應(yīng)用框架,提供一系列強(qiáng)大特性用以創(chuàng)建各種Web應(yīng)用。Express是

node.js

已有的特性進(jìn)行二次抽象，在它之上擴(kuò)展了Web應(yīng)用所需的功能。1.3.5ejs模板引擎什么是模板引擎？模板引擎（TemplateEngine）是一個(gè)將頁面模板和要顯示的數(shù)據(jù)結(jié)合起來生成HTML頁面的工具。模板引擎就相當(dāng)于MVC中的視圖。模板引擎的功能是將頁面模板和要顯示的數(shù)據(jù)結(jié)合起來生成HTML頁面。它既可以運(yùn)行在服務(wù)器端又可以運(yùn)行在客戶端，大多數(shù)時(shí)候它都在服務(wù)器端直接被解析為HTML，解析完成后再傳輸給客戶端，因此客戶端甚至無法判斷頁面是否是模板引擎生成的。有時(shí)候模板引擎也可以運(yùn)行在客戶端，即瀏覽器中，典型的代表就是XSLT，它以XML為輸入，在客戶端生成HTML頁面。但是由于瀏覽器兼容性問題，XSLT并不是很流行。目前的主流還是由服務(wù)器運(yùn)行模板引擎。在MVC架構(gòu)中，模板引擎包含在服務(wù)器端?？刂破鞯玫接脩粽埱蠛?，從模型獲取數(shù)據(jù)，調(diào)用模板引擎。模板引擎以數(shù)據(jù)和頁面模板為輸入，生成HTML頁面，然后返回給控制器，由控制器交回客戶端。什么是ejs？ejs是模板引擎的一種，也是我們這個(gè)教程中使用的模板引擎，因?yàn)樗褂闷饋硎趾唵?，而且與express集成良好。ejs用來從JSON數(shù)據(jù)中生成HTML字符串。ejs的優(yōu)點(diǎn)是將會(huì)帶給你明確、維護(hù)性良好的HTML代碼結(jié)構(gòu)。因此，本系統(tǒng)選擇使用的模版引擎是ejs。ejs的標(biāo)簽系統(tǒng)非常簡單，它只有以下三種標(biāo)簽：<%code%>：JavaScript代碼。<%=code%>：顯示替換過HTML特殊字符的內(nèi)容。<%-code%>：顯示原始HTML內(nèi)容。1.3.6MVC設(shè)計(jì)模式MVC模式（Model-View-Controller）是軟件工程中的一種軟件架構(gòu)模式，把軟件系統(tǒng)分為三個(gè)基本部分：模型（Model）、視圖（View）和控制器（Controller）。MVC模式的目的是實(shí)現(xiàn)一種動(dòng)態(tài)的程序設(shè)計(jì)，使后續(xù)對程序的修改和擴(kuò)展簡化，并且使程序某一部分的重復(fù)利用成為可能。除此之外，此模式通過對復(fù)雜度的簡化，使程序結(jié)構(gòu)更加直觀。軟件系統(tǒng)通過對自身基本部分分離的同時(shí)也賦予了各個(gè)基本部分應(yīng)有的功能。（控制器Controller）——負(fù)責(zé)轉(zhuǎn)發(fā)請求，對請求進(jìn)行處理。（視圖View）——界面設(shè)計(jì)人員進(jìn)行圖形界面設(shè)計(jì)。（模型Model）——程序員編寫程序應(yīng)有的功能（實(shí)現(xiàn)算法等等）、數(shù)據(jù)庫專家進(jìn)行數(shù)據(jù)管理和數(shù)據(jù)庫設(shè)計(jì)(可以實(shí)現(xiàn)具體的功能)。 圖1-3MVC模型圖MVC的優(yōu)點(diǎn)：（1）多個(gè)視圖能共享一個(gè)模型。如今，同一個(gè)Web應(yīng)用程序會(huì)提供多種用戶界面，例如用戶希望既能夠通過瀏覽器來收發(fā)電子郵件，還希望通過手機(jī)來訪問電子郵箱，這就要求Web網(wǎng)站同時(shí)能提供Internet界面和WAP界面。在MVC設(shè)計(jì)模式中，模型響應(yīng)用戶請求并返回響應(yīng)數(shù)據(jù)，視圖負(fù)責(zé)格式化數(shù)據(jù)并把它們呈現(xiàn)給用戶，業(yè)務(wù)邏輯和表示層分離，同一個(gè)模型可以被不同的視圖重用，所以大大提高了代碼的可重用性。（2）控制器是自包含（self-contained）指高獨(dú)立內(nèi)聚的對象，與模型和視圖保持相對獨(dú)立，所以可以方便的改變應(yīng)用程序的數(shù)據(jù)層和業(yè)務(wù)規(guī)則。例如，把數(shù)據(jù)庫從MySQL移植到Oracle，或者把RDBMS數(shù)據(jù)源改變成LDAP數(shù)據(jù)源，只需改變模型即可。一旦正確地實(shí)現(xiàn)了控制器，不管數(shù)據(jù)來自數(shù)據(jù)庫還是LDAP服務(wù)器，視圖都會(huì)正確地顯示它們。由于MVC模式的三個(gè)模塊相互獨(dú)立，改變其中一個(gè)不會(huì)影響其他兩個(gè)，所以依據(jù)這種設(shè)計(jì)思想能構(gòu)造良好的少互擾性的構(gòu)件。（3）控制器提高了應(yīng)用程序的靈活性和可配置性。控制器可以用來連接不同的模型和視圖去完成用戶的需求，也可以構(gòu)造應(yīng)用程序提供強(qiáng)有力的手段。給定一些可重用的模型和視圖，控制器可以根據(jù)用戶的需求選擇適當(dāng)?shù)哪Ｐ瓦M(jìn)行處理，然后選擇適當(dāng)?shù)牡囊晥D將處理結(jié)果顯示給用戶。MVC的缺點(diǎn)：（1）因?yàn)镸VC將視圖和模型分離了。這就會(huì)增加系統(tǒng)的設(shè)計(jì)結(jié)構(gòu)與其實(shí)現(xiàn)方法的復(fù)雜性，同時(shí)也給系統(tǒng)的調(diào)試大大地加大了難度。（2）加大了系統(tǒng)頻繁更新的成本。雖然是進(jìn)行了分層操作，但這并不意味著在更新系統(tǒng)模型的時(shí)候能完全忽略視圖的性質(zhì)，當(dāng)具體的一些接口變化的模型需要頻繁更新，而使得在視圖的處理上變得繁瑣，這導(dǎo)致了視圖更新落后于模型的變化，錯(cuò)誤情況不能正常地顯示。（3）MVC的三層模式會(huì)造成系統(tǒng)的構(gòu)件較多，也就是會(huì)增多系統(tǒng)的代碼，因此，必須進(jìn)行有效的代碼管理工作。1.4系統(tǒng)運(yùn)行要求1.4.1硬件要求CPU：速度在500MHz或以上。CPU的處理速度越快，代碼跑起來也越流暢。內(nèi)存：最低配置32MB，建議使用64MB以上內(nèi)存，如果使用Windows2000或WindowsXP建議使用128MB以上內(nèi)存。硬盤空間：至少需要200MB以上的硬盤空間。1.4.2軟件要求操作系統(tǒng)： Windows8。數(shù)據(jù)庫名稱： MongoDB2.6.9。

第2章可行性分析2.1經(jīng)濟(jì)可行性開發(fā)此社交網(wǎng)站的所需的硬件（計(jì)算機(jī)其其他）由本人提供。軟件環(huán)境Node.js開發(fā)工具和MongoDB可以從網(wǎng)上下載。本系統(tǒng)的開發(fā)、維護(hù)由本人負(fù)責(zé)，因此沒有其他方面的支付，開發(fā)成本主要是時(shí)間成本。系統(tǒng)完成后可作為人們分享文章知識(shí)文化等使用。本系統(tǒng)可帶來的效益將遠(yuǎn)遠(yuǎn)大于本系統(tǒng)的開發(fā)成本，所以從經(jīng)濟(jì)方面上看，開發(fā)此系統(tǒng)是可行的。2.2操作可行性此社交網(wǎng)站具備清新友好的用戶界面，操作簡單，使用方便、快捷，功能豐富，易于維護(hù)。無論用戶是網(wǎng)絡(luò)達(dá)人，或者還是一個(gè)網(wǎng)絡(luò)新手，在此網(wǎng)站注冊登錄后，都可以很快熟悉該網(wǎng)站，并迅速成為分享達(dá)人。從用戶操作方面看，此系統(tǒng)的開發(fā)是可行的。2.3技術(shù)可行性2.3.1系統(tǒng)使用的模式本系統(tǒng)采用的模式為B/S模式。B/S模式簡介B/S（Browser/Server，瀏覽器/服務(wù)器）模式又稱B/S結(jié)構(gòu)。它是隨著Internet技術(shù)的興起，對C/S模式應(yīng)用的擴(kuò)展。在這種結(jié)構(gòu)下，用戶工作界面是通過瀏覽器來實(shí)現(xiàn)的。B/S模式最大的好處是運(yùn)行維護(hù)比較簡便，能實(shí)現(xiàn)不同的人員，從不同的地點(diǎn)，以不同的接入方式（比如LAN,WAN,Internet/Intranet等）訪問和操作共同的數(shù)據(jù)；最大的缺點(diǎn)是對企業(yè)外網(wǎng)環(huán)境依賴性太強(qiáng)，由于各種原因引起企業(yè)外網(wǎng)中斷都會(huì)造成系統(tǒng)癱瘓。B/S結(jié)構(gòu)利用不斷成熟和普及的瀏覽器技術(shù)實(shí)現(xiàn)原來需要復(fù)雜專用軟件才能實(shí)現(xiàn)的強(qiáng)大功能，并節(jié)約了開發(fā)成本，是一種全新的軟件系統(tǒng)構(gòu)造技術(shù)。這種結(jié)構(gòu)更成為當(dāng)今應(yīng)用軟件的首選體系結(jié)構(gòu)，B/S結(jié)構(gòu)以TCP/IP協(xié)議為基礎(chǔ)的，企業(yè)內(nèi)的WWW服務(wù)器可以接受安裝有Web瀏覽程序的Internet終端的訪問，作為最終用戶，只要通過Web瀏覽器，各種處理任務(wù)都可以調(diào)用系統(tǒng)資源來完成，這樣大大簡化了客戶端，減輕了系統(tǒng)維護(hù)與升級的成本和工作量，降低了用戶的總體擁有成本。2.3.2系統(tǒng)使用的開發(fā)語言本系統(tǒng)展現(xiàn)與布局使用了Node.js、HTML5、CSS3、Jquery。HTML5簡介HTML即超級文本標(biāo)記語言，超級文本標(biāo)記語言是標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用，也是一種規(guī)范，一種標(biāo)準(zhǔn)，它通過標(biāo)記符號來標(biāo)記要顯示的網(wǎng)頁中的各個(gè)部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對書寫出錯(cuò)的標(biāo)記將不指出其錯(cuò)誤，且不停止其解釋執(zhí)行過程，編制者只能通過顯示效果來分析出錯(cuò)原因和出錯(cuò)部位。但需要注意的是，對于不同的瀏覽器，對同一標(biāo)記符可能會(huì)有不完全相同的解釋，因而可能會(huì)有不同的顯示效果。HTML5是超文本標(biāo)記語言（HTML）的第五重大修改，這是一項(xiàng)正在進(jìn)行中的一個(gè)草案，目前還沒有正式的標(biāo)準(zhǔn)。HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)，支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內(nèi)的傲游瀏覽器（Maxthon），以及基于IE或Chromium（Chrome的工程版或稱實(shí)驗(yàn)版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產(chǎn)瀏覽器同樣具備支持HTML5的能力。從2012年12月27日至今，進(jìn)行了多達(dá)近百項(xiàng)的修改，包括HTML和XHTML的標(biāo)簽，相關(guān)的API、Canvas等，同時(shí)HTML5的圖像img標(biāo)簽及svg也進(jìn)行了改進(jìn)，性能得到進(jìn)一步提升。由于HTML5語言的特殊性，本系統(tǒng)只在部分功能模塊上使用了，HTML5的新特性。CSS3簡介CSS即層疊樣式表（CascadingStyleSheet）。在網(wǎng)頁制作時(shí)采用層疊樣式表技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。CSS3是CSS技術(shù)的升級版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來。這些模塊包括：盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等。使用CSS3，可以以很簡單的形式創(chuàng)建精美的動(dòng)畫效果。JavaScript簡介JavaScript是一種基于對象和事件驅(qū)動(dòng)并具有相對安全性的客戶端腳本語言。同時(shí)也是一種廣泛用于客戶端Web開發(fā)的腳本語言，常用來給HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的子集）網(wǎng)頁添加動(dòng)態(tài)功能，比如響應(yīng)用戶的各種操作。它最初由網(wǎng)景公司（Netscape）的BrendanEich設(shè)計(jì)，是一種動(dòng)態(tài)、弱類型、基于原型的語言，內(nèi)置支持類。JavaScript是Sun公司(已被oracle收購）的注冊商標(biāo)。Ecma國際以JavaScript為基礎(chǔ)制定了ECMAScript標(biāo)準(zhǔn)。JavaScript也可以用于其他場合，如服務(wù)器端編程。完整的JavaScript實(shí)現(xiàn)包含三個(gè)部分：ECMAScript，文檔對象模型（DocumentObjectModel，簡稱DOM），瀏覽器對象模型（BrowserObjectModel，簡稱BOM）。2.3.3系統(tǒng)使用的依賴庫為簡化JavaScript代碼的編寫，本系統(tǒng)使用了jQuery框架，框架版本為1.10.2。Web前端CSS框架使用Bootstrap，版本號為2.3.2。jQuery簡介jQuery是一個(gè)兼容多瀏覽器的javascript框架，核心理念是writeless,domore(寫得更少,做得更多)。它是輕量級的js庫，它兼容CSS3，還兼容各種瀏覽器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+），jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery能夠使用戶的html頁面保持代碼和html內(nèi)容分離，也就是說，不用再在html里面插入一堆js來調(diào)用命令了，只需定義id即可。如今，jQuery已經(jīng)成為最流行的javascript框架，在世界前10000個(gè)訪問最多的網(wǎng)站中，有超過55%在使用jQuery。jQuery是免費(fèi)、開源的，使用MIT許可協(xié)議。jQuery的語法設(shè)計(jì)可以使開發(fā)者更加便捷，例如操作文檔對象、選擇DOM元素、制作動(dòng)畫效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開發(fā)者編寫插件。其模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強(qiáng)大的靜態(tài)或動(dòng)態(tài)網(wǎng)頁。Body-parser簡介bodyParser用于解析客戶端請求的body中的內(nèi)容，內(nèi)部使用JSON編碼處理,url編碼處理以及對于文件的上傳處理。Cookie-parser簡介cookieParser中間件用于獲取web瀏覽器發(fā)送的cookie中的內(nèi)容，在使用了cookieParser中間件后，代表客戶端請求的htto.IncomingMessage對象就具有了一個(gè)cookies屬性,該屬性之為一個(gè)對象的數(shù)組，其中存放了所有web瀏覽器發(fā)送的cookie，每一個(gè)cookie為cookies屬性值數(shù)組中的一個(gè)對象。Morgan簡介Morgan中間件用于HTTP的請求記錄，在控制臺(tái)中，顯示req請求的信息。如本項(xiàng)目中的請求有：圖2-1Serve-favicon簡介可緩存的圖標(biāo)中間件，用于設(shè)置網(wǎng)頁的favicon.ico，它具有以下的優(yōu)點(diǎn)：用戶代理請求的favicon.ico通常是不加區(qū)分的，這個(gè)中間件可以在中間件記錄之前取消向日志的請求；這個(gè)中間件將緩存圖標(biāo)而跳過磁盤訪問來提高性能；它提供了一個(gè)基于圖標(biāo)內(nèi)容的ETag（ETag是\o"萬維網(wǎng)"萬維網(wǎng)協(xié)議\o"HTTP"HTTP的一部分，是HTTP協(xié)議提供的若干機(jī)制中的一種\o"Web緩存（頁面不存在）"Web緩存驗(yàn)證機(jī)制，并且允許客戶端進(jìn)行緩存協(xié)商。），而不僅僅是文件系統(tǒng)屬性。這個(gè)模塊將成為最兼容的內(nèi)容類型（Content-Type）。ejs簡介Ejs（EmbeddedJavaScripttemplates）是嵌入式的JavaScript模版，它具有以下的特點(diǎn)：緩存功能，能夠緩存已經(jīng)解析好的html模版；<%code%>用于執(zhí)行其中javascript代碼；<%=code%>會(huì)對code進(jìn)行html轉(zhuǎn)義；<%-code%>將不會(huì)進(jìn)行轉(zhuǎn)義；支持自定義標(biāo)簽，比如'<%'可以用'{{'，'%>'用'}}'代替；提供一些輔助函數(shù)，用于模版中使用

；利用<%-includefilename%>加載其他頁面模版。Express-session簡介express-session是基于express框?qū)ｉT用于處理session的中間件。session的認(rèn)證機(jī)制離不開cookie，需要同時(shí)使用cookieParser中間件。express-session中間件的使用：只需要用expressapp的use方法將session掛載在‘/’路徑即可，這樣所有的路由都可以訪問到session?？梢越o要掛載的session傳遞不同的option參數(shù)，來控制session的不同特性。session與發(fā)送到客戶端瀏覽器的生命周期是一致的。而我們在掛載session的時(shí)候，通過option選項(xiàng)的cookie.maxAge成員，我們可以設(shè)置session的過期時(shí)間，以ms為單位（但是，如果session存儲(chǔ)在mongodb中的話，任何低于60s(60000ms)的設(shè)置是沒有用的）。如果maxAge不設(shè)置，默認(rèn)為null，這樣的到期的時(shí)間就是瀏覽器的關(guān)閉時(shí)間，即每次關(guān)閉瀏覽器的時(shí)候，session都會(huì)失效。有時(shí)候，我們需要session的聲明周期要長一點(diǎn)，比如好多網(wǎng)站有個(gè)免密碼兩周內(nèi)自動(dòng)登錄的功能?；谶@個(gè)需求，session必須尋找內(nèi)存之外的存儲(chǔ)載體，數(shù)據(jù)庫能提供完美的解決方案。express框架提供了針對mongodb的中間件：connect-mongo，我們只需在掛載session的時(shí)候在options中傳入mongodb的參數(shù)即可，程序運(yùn)行的時(shí)候，expressapp會(huì)自動(dòng)的替我們管理session的存儲(chǔ)，更新和刪除。當(dāng)然，由于cookie是由瀏覽器廠商實(shí)現(xiàn)的，cookie不具有跨瀏覽器的特性，例如，我用firefox瀏覽器在京東上購物時(shí)，勾選了2周內(nèi)免密碼輸入，但是當(dāng)我第一次用IE登陸京東時(shí)，同樣要重新輸入密碼。所以，這對服務(wù)器的同一個(gè)操作，不同的瀏覽器發(fā)起的請求，會(huì)產(chǎn)生不同的session-cookie。Multer簡介Multer是一個(gè)用來處理文件上傳的中間件，被用來處理所有multipart/form-data形式的文件，擁有非常全面的接口，首先multer作為一個(gè)中間件傳入了app.use，當(dāng)有上傳請求到來時(shí)，express會(huì)攔截此請求并通過multer組件完成上傳操作。在multer初始化方法中傳入的是配置對象，可以在里面配置自定義的參數(shù)，例如“文件大小限制”，“文件數(shù)量限制”，“上傳注冊事件”，“重命名文件名”等等。

第3章需求分析3.1系統(tǒng)功能需求分析需求分析的主要目的是通過詳細(xì)的需求調(diào)研，理清管理流程，并分析其中的問，把握用戶的管理需求，設(shè)計(jì)出應(yīng)用系統(tǒng)的邏輯模型和功能模型。需求分析是應(yīng)系統(tǒng)開發(fā)過程中最為關(guān)鍵的一個(gè)環(huán)節(jié)，只有準(zhǔn)確無誤地把握用戶需求，開發(fā)出的應(yīng)用系統(tǒng)才能真正為管理人員提供更多的支持。在可行性分析的階段已論證了開發(fā)平臺(tái)及軟件的可行性。而現(xiàn)通過對用戶的需要進(jìn)行調(diào)研，進(jìn)一步明確了系統(tǒng)設(shè)計(jì)所需實(shí)現(xiàn)的功能。系統(tǒng)在功能上應(yīng)該滿足以下需求：用戶是使用者和評價(jià)者，所以在開發(fā)的過程中，我們必須從用戶的需求和體驗(yàn)出發(fā)，保證系統(tǒng)的功能滿足大多數(shù)用戶的需求，給用戶提供足夠的交互體驗(yàn)。操作簡單、界面友好。布局設(shè)計(jì)符合大眾審美要求，各功能模塊顯而易見，用戶可通過鼠標(biāo)實(shí)現(xiàn)功能模塊間的切換。即時(shí)可見：對于用戶發(fā)表的說說、評論、回復(fù)、日志、相冊、個(gè)人資料應(yīng)該在點(diǎn)擊確認(rèn)時(shí)，相關(guān)信息立即在其對應(yīng)的位置顯示出來。系統(tǒng)應(yīng)該快速、穩(wěn)定、高效、可靠。系統(tǒng)在結(jié)構(gòu)上應(yīng)該盡可能保持好的擴(kuò)展性，便于將來升級和維護(hù)。3.2系統(tǒng)功能模塊數(shù)據(jù)流圖3.2.1注冊、登錄模塊使用本系統(tǒng)無須強(qiáng)制注冊為會(huì)員，并無須登錄就能進(jìn)入系統(tǒng)，但部分功能不可用。圖3-1注冊、登錄模塊數(shù)據(jù)流圖

第4章總體設(shè)計(jì)4.1總體設(shè)計(jì)的任務(wù)總體設(shè)計(jì)是在系統(tǒng)分析的基礎(chǔ)上由抽象到具體的過程。根據(jù)用戶需求分析階段得到的目標(biāo)系統(tǒng)的邏輯模型確定一個(gè)合理的軟件系統(tǒng)的體系結(jié)構(gòu)。包括劃分組成系統(tǒng)的模塊，模塊間的調(diào)用關(guān)系及模塊間的接口關(guān)系,軟件系統(tǒng)所用的數(shù)據(jù)結(jié)構(gòu)或者數(shù)據(jù)庫結(jié)構(gòu)。4.2系統(tǒng)HIPO圖圖4-1系統(tǒng)HIPO圖4.3數(shù)據(jù)庫設(shè)計(jì)概述1.數(shù)據(jù)庫選擇MongoDB是一個(gè)介于\t"/subview/3385614/_blank"關(guān)系數(shù)據(jù)庫和非關(guān)系數(shù)據(jù)庫之間的產(chǎn)品，是非關(guān)系數(shù)據(jù)庫當(dāng)中功能最豐富，最像關(guān)系數(shù)據(jù)庫的。他支持的數(shù)據(jù)結(jié)構(gòu)非常松散，是類似\t"/subview/3385614/_blank"json的\t"/subview/3385614/_blank"bson格式，因此可以存儲(chǔ)比較復(fù)雜的數(shù)據(jù)類型。Mongo最大的特點(diǎn)是他支持的查詢語言非常強(qiáng)大，其語法有點(diǎn)類似于面向?qū)ο蟮牟樵冋Z言，幾乎可以實(shí)現(xiàn)類似關(guān)系數(shù)據(jù)庫單表查詢的絕大部分功能，而且還支持對數(shù)據(jù)建立\t"/subview/3385614/_blank"索引。2.數(shù)據(jù)庫編碼為避免顯示中文時(shí)顯示亂碼，數(shù)據(jù)庫采用UTF-8編碼格式，UTF-8是UNICODE的一種變長字符編碼又稱萬國碼，現(xiàn)在已經(jīng)標(biāo)準(zhǔn)化為RFC3629。4.5數(shù)據(jù)庫詳細(xì)設(shè)計(jì)1數(shù)據(jù)表的設(shè)計(jì)表4-1添加用戶表（users）中文字段名稱英文字段名稱類型是否索引備注用戶IDidObjectID是NOTNULL用戶名NameString否密碼PasswordString否郵箱EmailString否表4-2添加文章表（posts）中文字段名稱英文字段名稱類型是否索引備注用戶ididObjectID是NOTNULL用戶名NameString否時(shí)間TimeDate否標(biāo)題titleString否標(biāo)簽tagsArray否正文PostString否評論CommentsObject否轉(zhuǎn)載量Reprint_infoInt否閱讀量pvInt否

第5章詳細(xì)設(shè)計(jì)5.1注冊模塊設(shè)計(jì)5.1.1模塊及流程簡述注冊模塊讓用戶注冊為本系統(tǒng)會(huì)員。用戶進(jìn)入系統(tǒng)前必須要進(jìn)行注冊，用戶在注冊窗口輸入個(gè)人信息，需提交的信息有：注冊郵箱、用戶名、密碼，點(diǎn)擊確認(rèn)后，系統(tǒng)會(huì)核對用戶提交的信息會(huì)不會(huì)與數(shù)據(jù)庫的資料沖突，核對無誤后，便將數(shù)據(jù)傳入數(shù)據(jù)庫并自動(dòng)跳轉(zhuǎn)至首頁。如果與數(shù)據(jù)庫的資料沖突，則提醒用戶修改資料。如數(shù)據(jù)庫中已有此用戶名則提示“用戶已存在！”，如重復(fù)密碼與設(shè)置密碼不一致時(shí)則提示“兩次輸入的密碼不一致！”。5.1.2模塊主要代碼文件會(huì)員注冊：index.ejs驗(yàn)證、核對信息并提供反饋：index.js5.1.3模塊界面設(shè)計(jì)圖5-15.2登錄模塊設(shè)計(jì)5.2.1模塊及流程簡述用戶在成功注冊為本系統(tǒng)會(huì)員后，經(jīng)登錄進(jìn)入系統(tǒng)。用戶在登錄時(shí)需輸入用戶名、密碼。點(diǎn)擊提交按鈕系統(tǒng)會(huì)核對用戶的登錄信息，核對無誤后方可進(jìn)入系統(tǒng)。如果用戶密碼填寫錯(cuò)誤，會(huì)提示“密碼錯(cuò)誤！”。如果數(shù)據(jù)庫中無此用戶名，則提示“用戶不存在！”5.2.2模塊主要代碼文件會(huì)員登錄：login.ejs驗(yàn)證、核對信息并提供反饋：index.js5.2.3模塊界面設(shè)計(jì)圖5-25.3首頁模塊設(shè)計(jì)5.3.1模塊簡述用戶可在此頁面查看按距離時(shí)間最近開始顯示的文章預(yù)覽，包括文章的標(biāo)題、發(fā)表時(shí)間、作者、標(biāo)簽、全部或部分正文以及相關(guān)的閱讀量、評論量和轉(zhuǎn)載量。一頁默認(rèn)顯示10篇文章，當(dāng)大于10篇時(shí)，底部可上下頁面跳轉(zhuǎn)。5.3.2模塊主要代碼文件首頁主代碼：index.ejs引入代碼：paging.ejs5.3.3模塊界面設(shè)計(jì)圖5-35.4發(fā)表文章模塊設(shè)計(jì)5.4.1模塊簡述考慮到用戶可能會(huì)在博文里插入圖片及其他，因此文章編輯應(yīng)該要有一個(gè)支持富文本的功能，本系統(tǒng)采用了kindEditor4.1.10。用戶可在此模塊進(jìn)行文章的相關(guān)信息添加：標(biāo)題、標(biāo)簽、正文。其中正文編輯的功能包括字體選擇、撤銷還原、字體顏色、文字背景色、加粗、斜體、下劃線、刪除格式、左右對齊、居中、編號、項(xiàng)目符合、表情、添加網(wǎng)絡(luò)圖片、超鏈接。5.4.2模塊主要代碼文件界面：post.ejs功能：post.js、index.js引入kindEditor5.4.3引用kindEdith核心代碼vareditor1;KindEditor.ready(function(K){editor1=K.create('#editor_id',{allowImageUpload:false,resizeType:0,items:['fontname','|','undo','redo','|','forecolor','hilitecolor','bold','italic','underline','removeformat','|','justifyleft','justifycenter','justifyright','insertorderedlist','insertunorderedlist','|','emoticons','image','link']});});5.4.4模塊界面設(shè)計(jì)圖5-45.5文章正文模塊設(shè)計(jì)5.5.1模塊簡述該頁顯示文章全文及文章的相關(guān)信息、功能及評論模塊。相關(guān)信息包括文章的發(fā)表時(shí)間、作者、閱讀量、評論量、轉(zhuǎn)載量及標(biāo)簽，其中作者可鏈接到該作者的所有文章列表頁，標(biāo)簽可鏈接到含有該標(biāo)簽的所有文章列表頁。功能鍵則會(huì)判斷是否為文章作者來選擇顯示“編輯或刪除”或“轉(zhuǎn)載”。評論模塊暫只支持文字評論，評論后顯示用戶名及評論時(shí)間和評論內(nèi)容，支持未登陸用戶評論。5.5.2模塊主要代碼文件界面：article.ejs、comment.ejs功能：post.js、comment.js、user.js5.5.3模塊界面設(shè)計(jì)圖5-55.6圖片上傳模塊設(shè)計(jì)5.6.1模塊簡述此頁面可上傳用戶本地圖片，登錄后可見。5.6.2模塊功能主要代碼界面：upload.ejs功能：index.js5.6.3模塊核心代碼app.use(multer({dest:'./public/images/head',rename:function(fieldname,filename){returnfilename.replace(/\W+/g,'-').toLowerCase()+Date.now();},limits:{fileSize:1048576}}));5.6.4模塊界面設(shè)計(jì)圖5-65.7標(biāo)簽文章列表模塊設(shè)計(jì)5.7.1模塊簡述此模塊會(huì)將所以與此標(biāo)簽關(guān)聯(lián)的文章以列表的形式輸出標(biāo)題及發(fā)表時(shí)間，點(diǎn)擊標(biāo)題可查看文章。5.7.2模塊主要代碼文件界面：tags.ejs功能：index.js、post.js5.7.3模塊界面設(shè)計(jì)圖5-75.8搜索模塊設(shè)計(jì)5.8.1模塊簡述此模塊根據(jù)關(guān)鍵字模糊查詢文章標(biāo)題，且字母不區(qū)分大小寫。結(jié)果以列表形式顯示，界面與標(biāo)簽文章列表頁相同。5.8.2模塊主要代碼文件界面：search.ejs功能：index.js、post.js

第6章系統(tǒng)測試6.1測試方法本系統(tǒng)主要使用單元測試、黑盒測試和白盒測試。6.1.1單元測試方法簡述在編寫源程序階段就使用此方法對系統(tǒng)進(jìn)行測試。在源程序無語法錯(cuò)誤后，通過運(yùn)行程序，對局部數(shù)據(jù)結(jié)構(gòu)進(jìn)行測試，以發(fā)現(xiàn)局部數(shù)據(jù)說明、初始化、默認(rèn)值等方面的錯(cuò)誤。對源程序中存在多維數(shù)組時(shí)，進(jìn)行邊界條件測試。6.1.2白盒測試方法簡述1.條件覆蓋使用邏輯覆蓋中的條件覆蓋。使用條件覆蓋，不僅可以使每個(gè)語句執(zhí)行一次，而且使判定表達(dá)式中的每個(gè)條件都取到各種可能的結(jié)果。6.1.3黑盒測試方法簡述1.等價(jià)劃分首先劃分輸入數(shù)據(jù)的等價(jià)類，分析程序的功能說明，從而確定輸入數(shù)據(jù)的有效等價(jià)類和無效等價(jià)類。通過等價(jià)類的劃分，可以將程序的輸入域劃分為若干個(gè)數(shù)據(jù)類，以此來推導(dǎo)出測試用例。6.2測試用例6.2.1注冊登錄模塊表6-1注冊登錄模塊測試用例用例描述預(yù)期結(jié)果實(shí)際結(jié)果1注冊頁面，注冊郵箱為：@提示用戶郵箱格式不正確提示用戶郵箱格式不正確2注冊頁面，注冊郵箱為：a@.com提示用戶郵箱格式不正確提示用戶郵箱格式不正確3注冊頁面，注冊郵箱為：a@dfdf提示用戶郵箱格式不正確提示用戶郵箱格式不正確4注冊頁面，注冊郵箱為：a@提示用戶郵箱格式正確用戶郵箱格式正確5注冊頁面，未填寫郵箱，點(diǎn)擊注冊按鈕可注冊可注冊6注冊頁面，未填寫用戶名，點(diǎn)擊注冊按鈕注冊按鈕不可用，提示請?zhí)顚懘俗侄巫园粹o不可用，提示請?zhí)顚懘俗侄?注冊頁面，未填寫密碼，點(diǎn)擊注冊按鈕注冊按鈕不可用，提示請?zhí)顚懘俗侄巫园粹o不可用，提示請?zhí)顚懘俗侄?注冊頁面，未填寫任資料，點(diǎn)擊注冊按鈕注冊按鈕不可用注冊按鈕不可用9注冊頁面，填寫一個(gè)未被注冊的正確郵箱可注冊可注冊10注冊頁面，兩次密碼不一致提示用戶兩次輸入的密碼不一致提示用戶兩次輸入的密碼不一致11登錄頁面，填寫一個(gè)未被注冊的正確郵箱可注冊可注冊12登錄頁面，填寫錯(cuò)誤密碼提示用