畢業(yè)設(shè)計(jì)（論文）：《美麗河北》網(wǎng)站設(shè)計(jì)與制作

1、<p><b>　　河北科技師范學(xué)院</b></p><p><b>　　本科畢業(yè)設(shè)計(jì)</b></p><p>　　《美麗河北》網(wǎng)站設(shè)計(jì)與制作</p><p>　　院（系、部）名 稱 ： 教育學(xué)院 </p><p>　　專 業(yè) 名 稱： 教育技術(shù)學(xué)

2、 </p><p>　　學(xué) 生 姓 名： 趙丹利 </p><p>　　學(xué) 生 學(xué) 號(hào)： 1951150313 </p><p>　　指 導(dǎo) 教 師： 張玉紅 </p><p>　　2016年5月26日</p&g

3、t;<p>　　河北科技師范學(xué)院教務(wù)處制</p><p><b>　　學(xué) 術(shù) 聲 明</b></p><p>　　本人呈交的學(xué)位論文，是在導(dǎo)師的指導(dǎo)下，獨(dú)立進(jìn)行研究工作所取得的成果，所有數(shù)據(jù)、圖片資料真實(shí)可靠。盡我所知，除文中已經(jīng)注明引用的內(nèi)容外，本學(xué)位論文的研究成果不包含他人享有著作權(quán)的內(nèi)容。對(duì)本論文所涉及的研究工作做出貢獻(xiàn)的其他個(gè)人和集體，均已在文中

4、以明確的方式標(biāo)明。本學(xué)位論文的知識(shí)產(chǎn)權(quán)歸屬于河北科技師范學(xué)院。</p><p>　　本人簽名： 日期： </p><p>　　指導(dǎo)教師簽名： 日期： </p>

5、<p><b>　　摘 要</b></p><p>　　隨著互聯(lián)網(wǎng)的迅猛發(fā)展，逐漸改變了原有的新聞信息傳播方式、重塑了新的媒介生態(tài)和傳播格局。當(dāng)前，以‘互聯(lián)網(wǎng)+’為代表的新媒體已經(jīng)成為信息傳播的重要平臺(tái)。社會(huì)公眾通過(guò)新媒體表達(dá)情感、情緒、意愿和意見，新媒體加速了信息傳播的速度，極大地增強(qiáng)了其影響力?；诨ヂ?lián)網(wǎng)的新媒體是未來(lái)媒體發(fā)展的重點(diǎn)，是媒體傳播市場(chǎng)發(fā)展的趨勢(shì)和必然方向。在互聯(lián)

6、網(wǎng)背景下通過(guò)有效的信息傳播理論與宣傳策略進(jìn)一步推動(dòng)我國(guó)新時(shí)期精神文明建設(shè)的意義至關(guān)重要。此網(wǎng)站設(shè)計(jì)以“2016年度河北省社科基金項(xiàng)目(“互聯(lián)網(wǎng)”+背景下“美麗河北”宣傳策略研究)”為藍(lán)本，對(duì)此研究項(xiàng)目進(jìn)行一個(gè)可視化的呈現(xiàn)，目的是以網(wǎng)絡(luò)作為宣傳平臺(tái)推進(jìn)《美麗河北》宣傳力度。此文從“美麗河北”網(wǎng)站的需求分析入手，介紹了所用到的軟件和處理技術(shù)，呈現(xiàn)了網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)過(guò)程，其中對(duì)界面以及系統(tǒng)和功能的實(shí)現(xiàn)等做了詳細(xì)的介紹和補(bǔ)充說(shuō)明，最后進(jìn)行設(shè)計(jì)總

7、結(jié)。</p><p>　　關(guān)鍵詞：網(wǎng)站制作；網(wǎng)站設(shè)計(jì)；美麗河北；Node.js</p><p><b>　　Abstract</b></p><p>　　With the rapid development of the Internet, gradually changed the original way of news and infor

8、mation dissemination, reshaping the new media ecology and communication pattern. At present, the 'Internet +' as the representative of the new media has become an important platform for information dissemination.

9、 The public through the new media to express emotions, emotions, wishes and opinions, new media accelerate the speed of information dissemination, greatly enhanced its influence. Because new m</p><p>　　Keywo

10、rds: Website production; website design; beautiful Hebei; Node.js</p><p><b>　　目 錄</b></p><p><b>　　摘 要I</b></p><p>　　AbstractII</p><p><b&

11、gt;　　緒論1</b></p><p>　　一、《美麗河北》網(wǎng)站建設(shè)的需求分析1</p><p><b>　　（一）項(xiàng)目背景1</b></p><p>　?。ǘ┤蝿?wù)需求分析3</p><p>　　（三）功能需求分析3</p><p>　　二、開發(fā)《美麗河北》網(wǎng)站的軟件及技

12、術(shù)4</p><p>　?。ㄒ唬﹫D像處理軟件（Photoshop）5</p><p><b>　　1．軟件簡(jiǎn)介5</b></p><p><b>　　2．主要運(yùn)用5</b></p><p>　?。ǘ┚W(wǎng)站開發(fā)使用編輯器（Sublime Text）5</p><p>

13、　?。ㄈ㎞ode.js技術(shù)及Mongodb數(shù)據(jù)庫(kù)6</p><p>　　1．Node.js簡(jiǎn)介6</p><p>　　2．Moglodb數(shù)據(jù)庫(kù)6</p><p>　　(四）express框架及ejs模板6</p><p>　　1．express框架6</p><p><b>　　2．ejs模板6

14、</b></p><p>　?。ㄎ澹〣ootstrop柵格化布局和git版本管理控制工具7</p><p>　　1．Bootstrop柵格化布局7</p><p>　　2．git版本管理控制工具7</p><p>　　三、《美麗河北》網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)7</p><p>　?。ㄒ唬┖笈_(tái)管理系統(tǒng)結(jié)構(gòu)設(shè)計(jì)

15、7</p><p>　　1．后臺(tái)管理系統(tǒng)結(jié)構(gòu)7</p><p>　　2．前臺(tái)頁(yè)面呈現(xiàn)結(jié)構(gòu)8</p><p>　?。ǘ┚W(wǎng)站界面及內(nèi)容設(shè)計(jì)8</p><p>　　1．網(wǎng)站首頁(yè)設(shè)計(jì)8</p><p>　　2．網(wǎng)頁(yè)內(nèi)容設(shè)計(jì)8</p><p>　?。ㄈ┚W(wǎng)站系統(tǒng)及功能實(shí)現(xiàn)11</p&g

16、t;<p>　　1．網(wǎng)站系統(tǒng)實(shí)現(xiàn)11</p><p>　　2．網(wǎng)站功能實(shí)現(xiàn)12</p><p>　　3．?dāng)?shù)據(jù)庫(kù)設(shè)計(jì)18</p><p><b>　　四、設(shè)計(jì)總結(jié)19</b></p><p>　　（一）設(shè)計(jì)過(guò)程中遇到的問(wèn)題及其解決19</p><p>　?。ǘ﹤€(gè)人收獲20

17、</p><p>　?。ㄈ┰O(shè)計(jì)的不足及對(duì)進(jìn)一步設(shè)計(jì)的設(shè)想20</p><p><b>　　結(jié)論20</b></p><p><b>　　參考文獻(xiàn)21</b></p><p><b>　　致謝21</b></p><p><b>　　緒

18、論</b></p><p>　　現(xiàn)在,互聯(lián)網(wǎng)幫助企業(yè)馳入了信息高速公路，可以讓企業(yè)信息通過(guò)互聯(lián)網(wǎng)通達(dá)到世界各個(gè)角落。在“互聯(lián)網(wǎng)＋”的環(huán)境下，各個(gè)傳統(tǒng)行業(yè)，以互聯(lián)網(wǎng)為平臺(tái)，利用信息通信技術(shù)，使互聯(lián)網(wǎng)與傳統(tǒng)行業(yè)深度融合，通過(guò)互聯(lián)網(wǎng)來(lái)發(fā)布最新的商業(yè)以及產(chǎn)品信息，供全球檢索，以此來(lái)宣傳產(chǎn)品和服務(wù)以及企業(yè)的形象，全面展示企業(yè)形象，創(chuàng)造出新的發(fā)展生態(tài)。并且通過(guò)互聯(lián)網(wǎng)實(shí)現(xiàn)多屏全網(wǎng)跨平臺(tái)用戶場(chǎng)景結(jié)合，各行各業(yè)可以實(shí)現(xiàn)

19、全方面的360度的交流與合作?；ヂ?lián)網(wǎng)已經(jīng)成為各個(gè)企業(yè)以及機(jī)構(gòu)做宣傳活動(dòng)的主要信息傳遞平臺(tái)。</p><p>　　與傳統(tǒng)的宣傳方式相比，網(wǎng)絡(luò)宣傳呈現(xiàn)出多維和多元化。它能夠?qū)⑽淖?、圖像、信息和聲音有機(jī)的結(jié)合在一起，可以傳遞出更多的感官信息，增強(qiáng)了網(wǎng)絡(luò)宣傳的實(shí)效，還可以把信息集中起來(lái)，分類分欄，方便瀏覽；而且宣傳型網(wǎng)站的制作成本更低，并且速度更快，更改更加地靈活，制作周期也更短，即使在較短周期進(jìn)行信息的投放，也可以根據(jù)

20、需求很快的完成制作，能夠使經(jīng)營(yíng)決策的變化得到及時(shí)的實(shí)施和推廣。更重要的是互聯(lián)網(wǎng)的交互性特別強(qiáng)，它是以信息互動(dòng)的方式來(lái)進(jìn)行傳播；如點(diǎn)擊更多的按鈕后，就可以鏈接到更多的相關(guān)信息；于此同時(shí)還能夠建立完整的用戶數(shù)據(jù)庫(kù)，包括用戶的地域分布、年齡、性別、收入、職業(yè)、婚姻狀況和愛(ài)好等各個(gè)方面。并且可以通過(guò)監(jiān)視瀏覽量、點(diǎn)擊率等指標(biāo)，對(duì)信息進(jìn)行統(tǒng)計(jì)，這樣可以及時(shí)的衡量宣傳效果，分析市場(chǎng)與受眾，根據(jù)信息發(fā)布目標(biāo)受眾的特點(diǎn)，有針對(duì)性地進(jìn)行信息發(fā)布，并且可以根

21、據(jù)用戶特點(diǎn)作定點(diǎn)投放和跟蹤分析，對(duì)投放效果做出客觀準(zhǔn)確的評(píng)價(jià)，以更加準(zhǔn)確有效的制定下一步的宣傳策略方案。在以信息技術(shù)為支撐的新經(jīng)濟(jì)條件下，越來(lái)越多的企業(yè)開始利用起網(wǎng)絡(luò)這個(gè)有效的工具。同時(shí)內(nèi)容管理系統(tǒng)有助于網(wǎng)站的即時(shí)發(fā)布、更新和后期維護(hù)，大大的提高了決策實(shí)施</p><p>　　一、《美麗河北》網(wǎng)站建設(shè)的需求分析</p><p><b>　?。ㄒ唬╉?xiàng)目背景</b><

22、;/p><p>　　當(dāng)前，科技的迅速發(fā)展，把移動(dòng)通訊技術(shù)、數(shù)字技術(shù)、網(wǎng)絡(luò)技術(shù)、多媒體技術(shù)帶到了各行各業(yè)，帶到了千家萬(wàn)戶，使我國(guó)的經(jīng)濟(jì)、政治、文化生活都處在了“互聯(lián)網(wǎng)+”的背景下。在這個(gè)背景下，既給宣傳工作帶來(lái)了機(jī)遇，也帶來(lái)了挑戰(zhàn)。如何把握住這個(gè)新的機(jī)遇，并且迎接接踵而來(lái)的挑戰(zhàn)，是宣傳工作的一個(gè)重要課題。</p><p>　　首先從社會(huì)發(fā)展趨勢(shì)上看，政府類大型門戶網(wǎng)站建設(shè)近些年來(lái)數(shù)量激增，政府信

23、息化是整個(gè)社會(huì)信息發(fā)展的必然要求和基礎(chǔ)。隨著電子信息化的深入發(fā)展，簡(jiǎn)單的信息發(fā)布、內(nèi)容檢索等基本功能已無(wú)法滿足需要，資源索取、民意反饋等應(yīng)用的需求越來(lái)越迫切，具備強(qiáng)大交互功能和協(xié)同作業(yè)能力的政府信息網(wǎng)站，正在成為電子信息時(shí)代政府與社會(huì)公眾之間有效溝通的橋梁，并將成為政府高效行政、履行公共服務(wù)職能的一個(gè)重要平臺(tái)保證。政府門戶網(wǎng)站的建設(shè)受到各級(jí)政府的重視，據(jù)統(tǒng)計(jì)，90%以上的政府部門都建成了門戶網(wǎng)站，普遍實(shí)現(xiàn)了政務(wù)公開、信息發(fā)布等功能。但總

24、的來(lái)說(shuō)，我國(guó)政府門戶網(wǎng)站建設(shè)還仍然存在很多問(wèn)題，如網(wǎng)上信息不夠豐富、更新頻率低、應(yīng)用水平比較低、網(wǎng)站交互性相對(duì)較差，服務(wù)功能較弱，尤其是跨部門的協(xié)同能力還相對(duì)很低。作為政府對(duì)外發(fā)布信息、為公眾提供服務(wù)的窗口，政府信息門戶網(wǎng)站建設(shè)的重要意義：體現(xiàn)服務(wù)性政府新形象；利用網(wǎng)絡(luò)為公眾社會(huì)提供優(yōu)質(zhì)的多元化服務(wù)；推動(dòng)和加速整個(gè)社會(huì)的信息化發(fā)展；整合信息資源，提高政府在行政、服務(wù)和管理方面的效率。</p><p>　　其次從國(guó)

25、家政治文化發(fā)展上來(lái)說(shuō)，2012年，中國(guó)共產(chǎn)黨第十八次全國(guó)代表大會(huì)提出了“美麗中國(guó)”概念，并于十八大報(bào)告中首次作為執(zhí)政理念提出。中共十八屆三中全會(huì)通過(guò)的《中共中央關(guān)于全面深化改革若干重大問(wèn)題的決定》提出的國(guó)家治理體系與治理能力現(xiàn)代化成為當(dāng)前以及未來(lái)很長(zhǎng)時(shí)間內(nèi)政府發(fā)展的新標(biāo)向；2014年中央網(wǎng)絡(luò)安全與信息化領(lǐng)導(dǎo)小組成立，組長(zhǎng)習(xí)近平在第一次會(huì)議上高度肯定了建設(shè)網(wǎng)絡(luò)強(qiáng)國(guó)的戰(zhàn)略性意義，強(qiáng)調(diào)通過(guò)不斷努力，使中國(guó)網(wǎng)絡(luò)世界越來(lái)越強(qiáng)大，并進(jìn)一步促進(jìn)其他領(lǐng)

26、域的發(fā)展與進(jìn)步。習(xí)近平主席曾說(shuō)：當(dāng)今時(shí)代，以信息技術(shù)為核心的新一輪科技革命正在孕育興起，互聯(lián)網(wǎng)日益成為創(chuàng)新驅(qū)動(dòng)發(fā)展的先導(dǎo)力量，深刻改變著人們的生產(chǎn)生活，有力推動(dòng)者社會(huì)發(fā)展；李克強(qiáng)總理曾說(shuō)：互聯(lián)網(wǎng)是人類最偉大發(fā)明之一；互聯(lián)網(wǎng)發(fā)展是人類經(jīng)濟(jì)社會(huì)發(fā)展的大潮流；互聯(lián)網(wǎng)不僅是工作、學(xué)習(xí)的工具，也是一種生活的方式，人們的很多思維習(xí)慣都因?yàn)榫W(wǎng)絡(luò)而有所改變。近年來(lái)河北省的城市鄉(xiāng)村都在發(fā)生著可喜的變化，著力優(yōu)化國(guó)土空間格局、推動(dòng)綠色低碳循環(huán)發(fā)展、推進(jìn)能源

27、生產(chǎn)消費(fèi)變革、努力改善環(huán)境質(zhì)量、實(shí)施山水林田湖海生態(tài)修復(fù)等，強(qiáng)調(diào)奮力建設(shè)美麗河北。那么如何有效的傳播河北省的建設(shè)</p><p>　　最后需要注意的是網(wǎng)絡(luò)宣傳應(yīng)有一定的規(guī)范性和要求，比如：各網(wǎng)絡(luò)媒體要堅(jiān)持正確的輿論導(dǎo)向，加強(qiáng)正確的輿論宣傳引導(dǎo)，認(rèn)真做好網(wǎng)絡(luò)宣傳安全工作，凡涉密內(nèi)容或需要請(qǐng)示報(bào)告的宣傳事項(xiàng)，不得擅自行事，要嚴(yán)格遵守網(wǎng)絡(luò)宣傳有關(guān)規(guī)定，嚴(yán)把網(wǎng)絡(luò)宣傳政治關(guān)。開展創(chuàng)先爭(zhēng)優(yōu)活動(dòng)，是深入貫徹落實(shí)科學(xué)發(fā)展、全面推

28、進(jìn)黨的建設(shè)的一項(xiàng)重大舉措，是學(xué)習(xí)實(shí)踐科學(xué)發(fā)展觀活動(dòng)的繼續(xù)和深化，各網(wǎng)絡(luò)媒體在保留原學(xué)習(xí)實(shí)踐科學(xué)發(fā)展觀活動(dòng)。各網(wǎng)絡(luò)媒體和各地、各單位部門要高度重視網(wǎng)絡(luò)宣傳工作，從講政治的高度，加強(qiáng)對(duì)創(chuàng)先爭(zhēng)優(yōu)活動(dòng)網(wǎng)絡(luò)宣傳工作的組織領(lǐng)導(dǎo)和實(shí)施，確保網(wǎng)絡(luò)宣傳工作在整個(gè)美麗河北活動(dòng)中發(fā)揮出積極的、重要的、具有廣泛影響力的作用，為美麗河北宣傳營(yíng)造濃厚的宣傳輿論氛圍做出努力。為加強(qiáng)網(wǎng)絡(luò)宣傳工作，確保工作落到實(shí)處。</p><p><b&

29、gt;　?。ǘ┤蝿?wù)需求分析</b></p><p>　　傳統(tǒng)紙媒介傳播信息二維化難于共享匯總，其統(tǒng)計(jì)數(shù)據(jù)正確性也難以考證。存在著較多的缺點(diǎn)，如：效率低、保密性差、傳播慢、覆蓋率小、成本高等，時(shí)間一長(zhǎng)將產(chǎn)生大量的文件和數(shù)據(jù)，更加不便于查找，更新，維護(hù)等。隨著科學(xué)技術(shù)的不斷地提高，計(jì)算機(jī)技術(shù)也日漸成熟，使用更現(xiàn)代化的計(jì)算機(jī)技術(shù)來(lái)替代傳統(tǒng)的紙質(zhì)媒介傳遞信息，有著巨大的優(yōu)勢(shì)。如今我們已經(jīng)能深刻認(rèn)識(shí)到其強(qiáng)大的

30、功能，具有傳統(tǒng)媒介不具有的眾多優(yōu)點(diǎn)，例如：檢索迅速、查找方便、容易修改、存儲(chǔ)量大、保密性好、可靠性高、數(shù)據(jù)處理快捷、壽命長(zhǎng)、成本低等。這些優(yōu)點(diǎn)能極大地提升政府形象，并且為廣大群眾提供了方便。新媒體在這方面利用互聯(lián)網(wǎng)使傳播效率有了質(zhì)的飛躍。</p><p>　　隨著時(shí)間的推移，目標(biāo)人群的急劇擴(kuò)散，各種信息量也成倍增長(zhǎng)。面對(duì)如此龐大的信息量，就需要有內(nèi)容管理系統(tǒng)來(lái)發(fā)布、篩選、過(guò)濾相應(yīng)的信息。隨著生活水平的提高，客戶體

31、驗(yàn)要求也不斷提升，在互聯(lián)網(wǎng)時(shí)代，計(jì)算機(jī)技術(shù)不斷的更新，用戶體驗(yàn)要求不斷的提升，為了跟上社會(huì)發(fā)展的腳步，以更優(yōu)的客戶體驗(yàn)為目標(biāo)實(shí)現(xiàn)后臺(tái)的各種功能，只有利用最新的技術(shù)不斷更新需求才能適應(yīng)未來(lái)的發(fā)展趨勢(shì)。通過(guò)這樣的一個(gè)系統(tǒng)，就可以做到信息的規(guī)范管理、科學(xué)統(tǒng)計(jì)和快速的查詢、刪除，從而減少后期需求更新和管理系統(tǒng)后期維護(hù)的工作量。我們所要開發(fā)的是一款能夠進(jìn)行管理前端頁(yè)面展示內(nèi)容的內(nèi)容管理系統(tǒng)和前端頁(yè)面網(wǎng)站展示的網(wǎng)站，該網(wǎng)站在代碼上采用“最佳實(shí)踐”，

32、以及方便后期維護(hù)和迭代更新，且跟隨社會(huì)發(fā)展更新的技術(shù)適應(yīng)未來(lái)發(fā)展趨勢(shì)的網(wǎng)站。</p><p><b>　?。ㄈ┕δ苄枨蠓治?lt;/b></p><p>　　本網(wǎng)站包括前臺(tái)和后臺(tái)兩部分，其中前臺(tái)是向客戶展示相關(guān)信息，后臺(tái)則為管理員管理網(wǎng)站提供的平臺(tái)。內(nèi)容管理系統(tǒng)是一個(gè)用于添加、編輯、刪除前端頁(yè)面展示內(nèi)容的一個(gè)后臺(tái)管理系統(tǒng)，管理員通過(guò)在內(nèi)容管理系統(tǒng)中對(duì)于來(lái)進(jìn)行文章的發(fā)布、新

33、聞動(dòng)態(tài)的發(fā)現(xiàn)，圖片內(nèi)容的管理，及時(shí)更新最新信息，提高工作及維護(hù)效率。具體分布如圖1：</p><p>　　圖 1 內(nèi)容管理系統(tǒng)結(jié)構(gòu)圖</p><p>　　該系統(tǒng)主要研究實(shí)現(xiàn)以下功能： </p><p>　　登錄：需要利用帳號(hào)和密碼進(jìn)行來(lái)登錄該系統(tǒng)，會(huì)對(duì)帳號(hào)的密碼進(jìn)行驗(yàn)證，分超級(jí)管理員和普通管理員。</p><p>　　文章列表頁(yè)面：文章的詳情

34、以列表形式展示，有編輯功能和刪除功能、以及分頁(yè)功能三個(gè)功能模塊。</p><p>　　發(fā)布文章頁(yè)面：發(fā)布之前需要填寫文章標(biāo)題、選擇文章分類、添加文章內(nèi)容，從數(shù)據(jù)庫(kù)選擇文章配圖，通過(guò)點(diǎn)擊提交來(lái)將文章發(fā)布到前臺(tái)頁(yè)面。 </p><p>　　編輯文章頁(yè)面：在編輯區(qū)域，主要基本功能就是修改和刪除，可以修改文章配圖和文章的內(nèi)容，同樣通過(guò)點(diǎn)擊提交來(lái)完成修改文章的過(guò)程。</p><p

35、>　　文章詳情頁(yè)面：在前臺(tái)點(diǎn)擊文章標(biāo)題或頭圖會(huì)直接跳轉(zhuǎn)到詳情頁(yè)面，可以查看完整的文章內(nèi)容。</p><p>　　分配帳號(hào)功能：簡(jiǎn)單來(lái)說(shuō)就是有一個(gè)超級(jí)管理來(lái)給普通管理員分配帳號(hào)和密碼，普通管理員因此獲取對(duì)前端內(nèi)容修改的權(quán)限，在此會(huì)做限定，僅有超級(jí)管理員有權(quán)限分配賬號(hào)，普通賬號(hào)登錄不會(huì)顯示分配賬號(hào)頁(yè)面，且如果強(qiáng)制進(jìn)入會(huì)顯示“沒(méi)有分配賬號(hào)權(quán)限”的信息。</p><p>　　退出登錄：點(diǎn)擊退

36、出當(dāng)前登錄帳號(hào)將會(huì)并且跳轉(zhuǎn)到登錄頁(yè)面。</p><p>　　前臺(tái)信息展示從各個(gè)方面及各種方式展示美麗河北，例如圖片與文字介紹；后臺(tái)網(wǎng)站則是對(duì)這些內(nèi)容的發(fā)布、編輯、刪除以及管理權(quán)權(quán)限等基礎(chǔ)功能的實(shí)現(xiàn)。本網(wǎng)站通過(guò)強(qiáng)大的計(jì)算機(jī)技術(shù)為瀏覽者瀏覽帶來(lái)了便利也給網(wǎng)站管理人員管理瀏覽網(wǎng)站節(jié)省時(shí)間、勞動(dòng)力和成本。本網(wǎng)站的實(shí)施成功會(huì)帶來(lái)以下的幾個(gè)優(yōu)點(diǎn)：能夠減少人力與管理費(fèi)用；提高了信息準(zhǔn)確度；可以改進(jìn)管理與服務(wù)；建立了高效的信息傳

37、輸和服務(wù)平臺(tái)，提高了信息的處理速度和利用率；可操作性強(qiáng)，簡(jiǎn)單易上手；模塊化開發(fā)，便于后期更新和維護(hù)。</p><p>　　二、開發(fā)《美麗河北》網(wǎng)站的軟件及技術(shù)</p><p>　　此項(xiàng)目的開發(fā)工具采用Sublime Text3編輯器，利用git bash工具來(lái)運(yùn)行開發(fā)環(huán)境，以及mongoDB數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)庫(kù)的管理，Node.js開發(fā)管理端功能，結(jié)合express框架進(jìn)行前后，端頁(yè)面的開發(fā)，

38、包括啟動(dòng)服務(wù)器和設(shè)置路由等，利用ejs模板引擎對(duì)頁(yè)面的數(shù)據(jù)進(jìn)行渲染，利用bootstrop進(jìn)行前端頁(yè)面的布局與開發(fā)，高效地實(shí)現(xiàn)了網(wǎng)站內(nèi)容管理系統(tǒng)的各項(xiàng)功能，可對(duì)網(wǎng)站內(nèi)容進(jìn)行查詢、修改、刪除、插入、更新等。另外新增超級(jí)管理員功能，超級(jí)管理員可以給其他人分配帳號(hào)密碼等功能。提高了網(wǎng)站維護(hù)的效率，減少網(wǎng)站維護(hù)成本，并且在開發(fā)的過(guò)程中，注重代碼規(guī)范以及代碼的“最佳實(shí)踐”，有利于后期對(duì)于該項(xiàng)目的維護(hù)、更新和迭代；本章將對(duì)以上所用的技術(shù)作出簡(jiǎn)單的介

39、紹。</p><p>　　（一）圖像處理軟件（Photoshop）</p><p><b>　　1．軟件簡(jiǎn)介</b></p><p>　　Photoshop是Adobe公司旗下最為出名的圖像處理軟件之一，圖像編輯是圖像處理的基礎(chǔ)，Photoshop可以對(duì)圖像進(jìn)行編輯，合成，特效制作等，特效制作在該軟件中主要由濾鏡、通道及工具綜合應(yīng)用完成。是在制

40、作網(wǎng)頁(yè)時(shí)必不可少的網(wǎng)頁(yè)圖像處理軟件。</p><p><b>　　2．主要運(yùn)用</b></p><p>　　從功能上看，該軟件可以對(duì)圖像做各種變換如放大、縮小、旋轉(zhuǎn)、傾斜、圖像合成、校色調(diào)色等。以滿足圖像在網(wǎng)頁(yè)頁(yè)面的合理布局，和顏色搭配。</p><p>　　本網(wǎng)站制作過(guò)程中運(yùn)用Photoshop CS6對(duì)圖片進(jìn)行處理，例如：裁剪，修復(fù)，調(diào)色等

41、，然后將圖片根據(jù)需要保存為成.jpg或.png格式，放入到網(wǎng)頁(yè)中，這樣不但圖片清晰，且和頁(yè)面其他圖片或背景相融合，在性能方面合適的圖片格式加快網(wǎng)站的加載速度。</p><p>　?。ǘ┚W(wǎng)站開發(fā)使用編輯器（Sublime Text）</p><p>　　Sublime Text 是目前主流前端開發(fā)編輯器。由程序員Jon Skinner于2008年1月份所開發(fā)出來(lái)，它最初被設(shè)計(jì)為一個(gè)具有豐富

42、擴(kuò)展功能的Vim。相對(duì)于其它編輯器體積較小，運(yùn)行速度快、其文本功能很強(qiáng)大、支持編譯功能且可在控制臺(tái)看到輸出，最重要的是內(nèi)嵌python解釋器支持插件開發(fā)，這種完全開放的用戶自定義配置，使其達(dá)到優(yōu)秀可擴(kuò)展能力。</p><p>　　Sublime Text具有漂亮的用戶界面，例如高亮顯示；強(qiáng)大的功能，例如代碼縮略圖，Python的插件，代碼段（Snippet）等。界面效果如圖2：</p><p&

43、gt;　　圖 2 sublime界面</p><p>　　Sublime Text 的主要功能包括：拼寫檢查，書簽，完整的 Python API，即時(shí)項(xiàng)目切換，多窗口等等。另外Sublime Text 是一個(gè)跨平臺(tái)的編輯器，同時(shí)支持Windows、Linux、Mac OS X等操作系統(tǒng)。在項(xiàng)目保護(hù)上，有編輯狀態(tài)恢復(fù)的能力，在任何情況下包括error的情況下退出頁(yè)面，界面都會(huì)保存最后一次編輯狀態(tài)的代碼。</p

44、><p>　?。ㄈ㎞ode.js技術(shù)及Mongodb數(shù)據(jù)庫(kù)</p><p>　　1． Node.js簡(jiǎn)介</p><p>　　Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。對(duì)Google V8引擎進(jìn)行了封裝。簡(jiǎn)單來(lái)說(shuō)就是前端框架，后臺(tái)語(yǔ)言；V8引 擎執(zhí)行Javascript的速度非?？欤阅芊浅：?。最大的特色就是使用一個(gè)事件驅(qū)

45、動(dòng)、非阻塞式 I/O 的模型， Node利用了Javascript作為事件驅(qū)動(dòng)語(yǔ)言這個(gè)優(yōu)點(diǎn)， 采用了一個(gè)稱為“事件循環(huán)(event loop）”的架構(gòu)，使得編寫可擴(kuò)展性高的服務(wù)器變得既容易又安全。使用Node既能提高性能，又能減低開發(fā)復(fù)雜度的架構(gòu)，使其輕量又高效。它的包管理器 npm，是全球最大的開源庫(kù)生態(tài)系統(tǒng)，需要在linux下進(jìn)行安裝。在Node.js出現(xiàn)之后，后臺(tái)服務(wù)器可以使用javascript編輯。目前大多數(shù)人用它來(lái)構(gòu)建站點(diǎn)和

46、實(shí)時(shí)的業(yè)務(wù)處理系統(tǒng)。本網(wǎng)站用Node,js處理請(qǐng)求，獲取數(shù)據(jù)，以及使用ejs模板引擎將數(shù)據(jù)展示出來(lái)并響應(yīng)等等。node.js + express搭配建設(shè)網(wǎng)站，可以不需要考慮太多HTTP處理細(xì)節(jié)。</p><p>　　2．Moglodb數(shù)據(jù)庫(kù)</p><p>　　MongoDB數(shù)據(jù)庫(kù)基于分布式文件存儲(chǔ)。屬于非關(guān)系數(shù)據(jù)庫(kù)但卻像關(guān)系數(shù)據(jù)庫(kù)，而且相對(duì)其他功能最豐富。他支持的數(shù)據(jù)結(jié)構(gòu)類似json格式

47、，可以存儲(chǔ)相對(duì)復(fù)雜的數(shù)據(jù)類型。Mongo面向集合的存儲(chǔ)特點(diǎn)模式相對(duì)自由，是高性能、易部署、易使用，存儲(chǔ)數(shù)據(jù)非常方便。</p><p>　　(四）express框架及ejs模板</p><p>　　1．express框架</p><p>　　Express 是一個(gè)簡(jiǎn)潔而靈活的 node.js 應(yīng)用框架,使用Express可以快速搭建“完整功能”的網(wǎng)站，對(duì)底層HTTP模

48、塊再包裝，他可以設(shè)置中間件來(lái)響應(yīng)服務(wù)器請(qǐng)求，通過(guò)設(shè)置路由表執(zhí)行不同的http請(qǐng)求動(dòng)作，中間件（middleware）就是處理HTTP請(qǐng)求的函數(shù)，每個(gè)中間件可以從App實(shí)例，接收三個(gè)參數(shù)，依次為request對(duì)象（代表HTTP請(qǐng)求）、response對(duì)象（代表HTTP回應(yīng)），next回調(diào)函數(shù)（代表下一個(gè)中間件），可以通過(guò)模板傳遞參數(shù)來(lái)動(dòng)態(tài)渲染前端頁(yè)面，代碼如下：</p><p>　　function useless

49、Middleware(req, res, next) {next();}</p><p><b>　　2．ejs模板</b></p><p>　　ejs模板是一款簡(jiǎn)單實(shí)用的js模板引擎，支持各種 js 語(yǔ)法，用來(lái)從JSON數(shù)據(jù)中生成HTML字符串。主要核心是將模板代碼轉(zhuǎn)變成了一個(gè)function，每次拿數(shù)據(jù)call這個(gè)function。</p><

50、p>　?。ㄎ澹〣ootstrop柵格化布局和git版本管理控制工具</p><p>　　1．Bootstrop柵格化布局</p><p>　　Bootstrap的柵格系統(tǒng)為12列(最大列數(shù))，基于HTML5和CSS3開發(fā)，其強(qiáng)大的UI組件簡(jiǎn)潔大方，扁平化風(fēng)格廣受大眾青睞，本網(wǎng)站前端采用bootstop框架，簡(jiǎn)單套用部分布局，使頁(yè)面簡(jiǎn)單大方，主要代碼如下：</p><

51、;p>　　<div class="container"><div class="row"><div class="col-md-4"></div><div class="col-md-8"></div></div></div></p><

52、p>　　2．git版本管理控制工具</p><p>　　Git是一款免費(fèi)、開源的分布式版本控制系統(tǒng)，本網(wǎng)站主要用到其git bash here功能相對(duì)于cmd更易上手。難點(diǎn)在于git的安裝和配置。</p><p>　　三、《美麗河北》網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)</p><p>　　本網(wǎng)站主要包括后臺(tái)管理系統(tǒng)和前端呈現(xiàn)頁(yè)面兩個(gè)部分。前端頁(yè)面橫向?qū)Ш街饕桥c“美麗河北”有關(guān)的

53、內(nèi)容，后臺(tái)系統(tǒng)左側(cè)縱向?qū)Ш街饕桥c界面管理有關(guān)的內(nèi)容。</p><p>　?。ㄒ唬┖笈_(tái)管理系統(tǒng)結(jié)構(gòu)設(shè)計(jì)</p><p>　　1．后臺(tái)管理系統(tǒng)結(jié)構(gòu)</p><p>　　后臺(tái)管理系統(tǒng)的幾個(gè)模塊主要放在網(wǎng)站的縱向?qū)Ш讲糠?，其中包括首?yè)、文章列表、文章發(fā)表、圖片上傳、分配賬號(hào)、退出登錄六個(gè)模塊，另外有詳細(xì)文章模塊，其中文章列表含發(fā)布的所有文章和具體分類以及編輯和刪除功能，以

54、及發(fā)布人和作者等基本信息，分配賬號(hào)在管理員權(quán)限上做出了相應(yīng)的限制。系統(tǒng)結(jié)構(gòu)設(shè)計(jì)如圖3所示：</p><p>　　圖 3 系統(tǒng)設(shè)計(jì)結(jié)構(gòu)圖</p><p>　　2．前臺(tái)頁(yè)面呈現(xiàn)結(jié)構(gòu)</p><p>　　前臺(tái)頁(yè)面呈現(xiàn)相關(guān)模塊主要放在網(wǎng)站的橫向?qū)Ш讲糠?，其中包括首?yè)、河北之美、最新報(bào)道、活動(dòng)簡(jiǎn)報(bào)、推薦旅游五個(gè)模塊。其中首頁(yè)和河北之美是本網(wǎng)站的主要內(nèi)容。網(wǎng)絡(luò)課程系統(tǒng)結(jié)構(gòu)圖如圖

55、4所示：</p><p>　　圖 4 前端網(wǎng)站顯示結(jié)構(gòu)圖</p><p>　　（二）網(wǎng)站界面及內(nèi)容設(shè)計(jì)</p><p><b>　　1．網(wǎng)站首頁(yè)設(shè)計(jì)</b></p><p>　　網(wǎng)頁(yè)內(nèi)容界面布局、風(fēng)格、色調(diào)都一致，整個(gè)網(wǎng)站內(nèi)容簡(jiǎn)介大方，主要包括首頁(yè)、河北之美、最新報(bào)道、和推薦旅游及聯(lián)系我們六大模塊。其界面設(shè)計(jì)如圖5所示：

56、</p><p>　　圖 5 《美麗河北》網(wǎng)站首頁(yè)</p><p><b>　　2．網(wǎng)頁(yè)內(nèi)容設(shè)計(jì)</b></p><p><b>　?。?）首頁(yè)模塊</b></p><p>　　首頁(yè)由六個(gè)模塊組成，包括導(dǎo)航、Banner、美麗河北模塊、新聞速遞模塊、活動(dòng)簡(jiǎn)報(bào)模塊和美麗河北、footer六個(gè)模塊，作為

57、首頁(yè)，使瀏覽者亦一樣看到最直觀的界面和最有用的信息，采用bootstrop布局，Ps處理圖片，通過(guò)<a>標(biāo)簽實(shí)現(xiàn)透明層和CSS實(shí)現(xiàn)柵格布局、陰影等效果。新聞速遞動(dòng)態(tài)顯示最新發(fā)布新聞，包括標(biāo)題、作者和發(fā)布時(shí)間等信息，點(diǎn)擊可查看詳細(xì)頁(yè)面簡(jiǎn)報(bào)，其界面如圖6所示：</p><p><b>　　圖 6 首頁(yè)模塊</b></p><p><b>　?。?）河

58、北之美模塊</b></p><p>　　該模塊主要包括美麗海濱、美麗鄉(xiāng)村、美麗學(xué)校、美麗長(zhǎng)城等6大模塊，界面僅展示部分內(nèi)容，右上角有查看更多內(nèi)容，點(diǎn)擊進(jìn)入列表頁(yè)面，所有內(nèi)容將以列表形式展現(xiàn)出來(lái)，點(diǎn)擊圖片可查看全部文字信息，具體界面展示如圖7所示：</p><p>　　圖 7 美麗河北模塊</p><p><b>　?。?）最新報(bào)道模塊</

59、b></p><p>　　此模塊以列表形式展現(xiàn)最新報(bào)道消息和基本信息，右側(cè)有輪播圖，以輪播圖片的方式發(fā)布重點(diǎn)新聞，活動(dòng)簡(jiǎn)報(bào)與推薦旅游和此頁(yè)面類似，界面設(shè)計(jì)如圖8所示：</p><p>　　圖 8 最新報(bào)道模塊</p><p><b>　　（4）活動(dòng)簡(jiǎn)報(bào)模塊</b></p><p>　　此模塊以左圖又文的形式展現(xiàn)活動(dòng)

60、簡(jiǎn)報(bào)的基本信息，簡(jiǎn)單明了的概括簡(jiǎn)報(bào)的主要內(nèi)容，界面設(shè)計(jì)如圖9所示：</p><p>　　圖 9 活動(dòng)簡(jiǎn)報(bào)模塊</p><p><b>　?。?）推薦旅游模塊</b></p><p>　　此模塊以圖片的方式展現(xiàn)旅游圖片集，點(diǎn)擊圖片可看放大效果的圖片，使圖片在盡可能少胡空間內(nèi)盡可能多的信息，此頁(yè)面功能有待擴(kuò)展，對(duì)于用戶體驗(yàn)和功能有著很大的晉升空間，

61、由于時(shí)間原因僅實(shí)現(xiàn)簡(jiǎn)單的效果，界面設(shè)計(jì)如圖10所示：</p><p>　　圖 10 推薦旅游模塊</p><p><b>　?。?）聯(lián)系我們模塊</b></p><p>　　此模塊以表單的樣式實(shí)現(xiàn)基本功能，右側(cè)有關(guān)于我們的一些信息，例如電話、郵箱，，界面設(shè)計(jì)如圖11所示：</p><p>　　圖 11 聯(lián)系我們模塊<

62、;/p><p>　?。ㄈ┚W(wǎng)站系統(tǒng)及功能實(shí)現(xiàn)</p><p><b>　　1．網(wǎng)站系統(tǒng)實(shí)現(xiàn)</b></p><p>　　此網(wǎng)站建設(shè)過(guò)程使用git bash工具來(lái)運(yùn)行開發(fā)環(huán)境，以及mongoDB數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)庫(kù)的管理，使用sublime Text3編輯器，通過(guò)HTML、CSS、和bootstrop實(shí)現(xiàn)靜態(tài)網(wǎng)頁(yè)布局，通過(guò)使用Javascript實(shí)現(xiàn)動(dòng)態(tài)

63、效果，用Node.js結(jié)合express框架進(jìn)行前后端頁(yè)面的開發(fā)利用，并用ejs模板引擎對(duì)頁(yè)面的數(shù)據(jù)進(jìn)行渲染，實(shí)現(xiàn)前后端簡(jiǎn)單的交互功能。</p><p><b>　　2．網(wǎng)站功能實(shí)現(xiàn)</b></p><p>　　此網(wǎng)站的動(dòng)態(tài)功能主要包含用戶登錄、首頁(yè)、文章列表、發(fā)表文章、圖片上傳、退出登錄，編輯、修改刪除文章等功能。</p><p><b

64、>　?。?）用戶登錄</b></p><p>　　用戶登錄作為系統(tǒng)的最基礎(chǔ)模塊，為系統(tǒng)的安全性保駕護(hù)航。系統(tǒng)的用戶，不管是超級(jí)管理員還是普通管理員，都可以通過(guò)登錄窗口輸入用戶名和密碼，通過(guò)身份驗(yàn)證后進(jìn)入系統(tǒng)主頁(yè)。</p><p>　　在界面設(shè)計(jì)上，主要采用bootstrap的柵格布局。表單元素用的是bootstrap框架里面的表單樣式，用戶名和密碼的文本需要輸入，用的是t

65、ext類型以及password類型。在實(shí)現(xiàn)上，打開網(wǎng)站首頁(yè)之后，系統(tǒng)會(huì)自動(dòng)判斷有沒(méi)有登錄，若已登錄則直接顯示主頁(yè)內(nèi)容，若未登錄，則默認(rèn)跳轉(zhuǎn)到login界面，通過(guò)從界面獲取用戶輸入的值，在數(shù)據(jù)庫(kù)中查找該用戶是否存在，如果存在，再判斷用戶輸入的密碼與數(shù)據(jù)庫(kù)中存儲(chǔ)的密碼是否一致，比較通過(guò)，則說(shuō)明用戶登錄成功，記錄下用戶登錄狀態(tài)，跳轉(zhuǎn)至相應(yīng)的系統(tǒng)主頁(yè)即完成登錄，若賬號(hào)或密碼不一致，則不跳轉(zhuǎn)頁(yè)面，且顯示“賬號(hào)或密碼錯(cuò)誤”。界面設(shè)計(jì)如圖12所示：&

66、lt;/p><p>　　圖 12 login登錄界面</p><p><b>　　功能代碼如下：</b></p><p>　　app.get('/login',checkNotLogin);</p><p>　　app.get('/login',function(req,res){res.re

67、nder('login',{title:'登錄',user : req.session.user,styleUrl : 'manage-index.css',</p><p>　　success : req.flash('success').toString(),error : </p><p>　　req.flash(&

68、#39;error').toString()});});</p><p>　　app.post('/login',checkNotLogin);</p><p>　　app.post('/login',function(req,res){</p><p>　　var md5 = crypto.createHash('m

69、d5'), //生成密碼的md5值</p><p>　　password = md5.update(req.body.password).digest('hex');</p><p>　　User.get(req.body.name,function(err,user){ //檢查用戶是否存在</p><p>　　if(!user){re

70、q.flash('error','用戶名不存在！'); }</p><p>　　f(user.password!=password){req.flash('error','密碼錯(cuò)誤');return </p><p>　　res.redirect('/login'); //密碼錯(cuò)誤則跳轉(zhuǎn)到登錄頁(yè)面} //檢查代

71、碼是否一致</p><p>　　req.session.user = user;req.flash('success','登錄成功！</p><p>　　');res.redirect('/'); //登錄后跳轉(zhuǎn)到主頁(yè)})});//用戶名密碼都匹配后將用戶信息存入session</p><p><b>　　

72、（2）后臺(tái)首頁(yè)</b></p><p>　　首頁(yè)作為管理系統(tǒng)的最基礎(chǔ)模塊，管理員登錄之后可以查看到文章列表，管理員登錄后就可以看到發(fā)布人、作者、發(fā)表日期，通過(guò)點(diǎn)擊文章標(biāo)題來(lái)查看某篇文章的詳細(xì)內(nèi)容，通過(guò)點(diǎn)擊文章作者可以查看某個(gè)人發(fā)表的文章。</p><p>　　在界面設(shè)計(jì)上，主要采用表格。左側(cè)導(dǎo)航是用的bootstrap的組件，右側(cè)數(shù)據(jù)利用表格來(lái)顯示文章數(shù)據(jù)列表，還有分頁(yè)功能是利

73、用的是div包含數(shù)個(gè)a標(biāo)簽。</p><p>　　功能上當(dāng)鼠標(biāo)劃過(guò)左側(cè)導(dǎo)航按鈕式，按鈕會(huì)變色，以提示用戶當(dāng)前處于哪一模塊。在首頁(yè)就可以對(duì)所有內(nèi)容進(jìn)行編輯、修改和刪除。分頁(yè)功能使頁(yè)面簡(jiǎn)介、條理清晰而不雜亂，打開網(wǎng)站首頁(yè)之后，系統(tǒng)會(huì)自動(dòng)判斷有沒(méi)有登錄，此圖片和過(guò)程展示會(huì)在網(wǎng)站內(nèi)容設(shè)計(jì)模塊展示。界面設(shè)計(jì)如圖13所示：</p><p>　　圖 13 后臺(tái)界面首頁(yè)</p><p&

74、gt;　　若已登錄則直接顯示主頁(yè)內(nèi)容，若未登錄，則默認(rèn)跳轉(zhuǎn)到login界面，當(dāng)輸入賬號(hào)密碼成功之后，才會(huì)跳轉(zhuǎn)到主頁(yè)面，并且顯示登錄用戶名，若賬號(hào)或密碼不一致，則不跳轉(zhuǎn)頁(yè)面，且顯示“賬號(hào)或密碼錯(cuò)誤”。當(dāng)鼠標(biāo)劃過(guò)左側(cè)導(dǎo)航按鈕式，按鈕會(huì)變色，以提示用戶當(dāng)前處于哪一模塊。為了使瀏覽網(wǎng)站的用戶一目了然，因此把最新文章列表在首頁(yè)展示出來(lái)，且以表格形式輸出文章題目、文章分類、文章作者，操作人、發(fā)表日期，在首頁(yè)就可以對(duì)所有內(nèi)容進(jìn)行編輯、修改和刪除。由于

75、信息量的增加，為緩解管理員審美疲勞，一頁(yè)僅顯示10個(gè)頁(yè)面，且對(duì)其做分頁(yè)功能，使頁(yè)面簡(jiǎn)介，條理清晰而不雜亂.首頁(yè)功能代碼如下</p><p>　　app.get('/',checkLogin);</p><p>　　app.get('/',function(req,res){</p><p>　　var page = req.param

76、s.page?req.params.page : 1;//判斷是否是第一頁(yè)，并把請(qǐng)求的頁(yè)數(shù)轉(zhuǎn)換成number類型</p><p>　　app.get('/list/:page',function(req,res){//查詢并返回第page頁(yè)的10個(gè)文章</p><p>　　var page = req.params.page?req.params.page : 1;}//判

77、斷是否是第一頁(yè)，并把請(qǐng)求的頁(yè)數(shù)轉(zhuǎn)換成number類型。</p><p><b>　　（3）發(fā)表文章</b></p><p>　　管理員通過(guò)填寫標(biāo)題，選擇文章類型，先把文章配圖（可選）然后填寫有正文字來(lái)創(chuàng)建文章的內(nèi)容，通過(guò)點(diǎn)擊發(fā)表文章來(lái)進(jìn)行新文章的發(fā)布。</p><p>　　在界面設(shè)計(jì)上，主要采用柵格布局。右側(cè)采用的是bootstrap表單布局。

78、其中標(biāo)題文本框和正文文本域是用來(lái)填寫內(nèi)容的，所以用的是text和textarea，文章類型因?yàn)槭菃芜x且必須選一個(gè)所以用的是select下拉框。而行選擇配圖功能則用的是file類型。界面設(shè)計(jì)如圖14所示：</p><p>　　圖 14 發(fā)布文章界面</p><p><b>　　功能代碼如下：</b></p><p>　　app.get('

79、/post',checkLogin);</p><p>　　app.get('/post',function(req,res){</p><p>　　res.render('post',{title:'發(fā)布文章',user : req.session.user,styleUrl : </p><p>　　

80、9;manage-index.css',success : req.flash('success').toString(), error : </p><p>　　req.flash('error').toString()})</p><p><b>　　});</b></p><p>　　app.pos

81、t('/post',checkLogin);</p><p>　　app.post('/post',function(req,res){</p><p>　　var currentUser = req.session.user,</p><p>　　post = new Post (currentUser.name,req.body.

82、title,req.body.type,req.body.post,req.body.img); </p><p><b>　?。?）編輯文章</b></p><p>　　通過(guò)點(diǎn)擊文章列表中的編輯按鈕來(lái)進(jìn)入文章編輯頁(yè)面。在界面設(shè)計(jì)上，采用的是bootstrap表單布局。界面設(shè)計(jì)如圖15所示：</p><p>　　圖 15 編輯文章界面&l

83、t;/p><p>　　這里我們的標(biāo)題以及文章類型是不允許修改的，管理員可以在修改完正文內(nèi)容的后點(diǎn)擊保存修改，然后修改完成。其中標(biāo)題文本框和正文文本域是用來(lái)填寫內(nèi)容的，所以用的是text和textarea，文章類型用的是select下拉框，text和select的disabled的值為disabled，功能代碼如下：</p><p>　　app.post('/edit/:name/:da

84、y/:title');</p><p>　　app.post('/edit/:name/:day/:title',function(req,res){</p><p>　　var currentUser = req.session.user; var title = req.params.title;</p><p>　　collection

85、.findOne({"name" : name,"time.day" : day,"title" : title},function(err,doc){mongodb.close();if(err){return callback(err); } callback(null,doc);});})});}//根據(jù)用戶、發(fā)表日期及文章名進(jìn)行查詢</p><p&g

86、t;<b>　　（5）分配賬號(hào)</b></p><p>　　由超級(jí)管理員為普通管理員分配帳號(hào)密碼。用戶名文字框類型為text，密碼框類型為password，郵箱類型為email 當(dāng)填寫完成后通過(guò)點(diǎn)擊注冊(cè)將普通管理員帳號(hào)注冊(cè)成功。</p><p>　　頁(yè)面邏輯為判斷登陸者是否是超級(jí)管理員，若是則此界面顯示，若不是則此界面不顯示，在超級(jí)管理員登陸的條件下，超級(jí)管理員有權(quán)分

87、配管理員賬號(hào)，輸入要設(shè)置的用戶名和密碼及郵箱，點(diǎn)擊注冊(cè)，數(shù)據(jù)庫(kù)會(huì)自動(dòng)存儲(chǔ)該賬號(hào)和密碼，此時(shí)新開的賬戶密碼正確即可登錄，需要注意的是，非超級(jí)管理員沒(méi)有修改和刪除別人發(fā)布文章的權(quán)限。主要采用bootstrap form表單布局，界面設(shè)計(jì)如圖16所示：</p><p>　　圖 16 分配賬號(hào)界面</p><p><b>　　功能代碼如下：</b></p>&l

88、t;p>　　app.get('/reg',checkLogin);</p><p>　　app.get('/reg',function(req,res){</p><p>　　res.render('reg',{title:'分配帳號(hào)',user : req.session.user,styleUrl : 'ma

89、nage-index.css',success : req.flash('success').toString(),error : req.flash('error').toString()})</p><p><b>　　});</b></p><p>　　app.post('/reg',checkNotLog

90、in);</p><p>　　app.post('/reg',function(req,res){</p><p>　　var name = req.body.name,password = req.body.password, password_re = req.body['password-repeat'];</p><p>　　

91、if(password!=password_re){req.flash('error','兩次輸入密碼不一致！');return res.redirect('/reg');//返回注冊(cè)頁(yè)面}</p><p>　　var md5 = crypto.createHash('md5');//生成密碼的md5值</p><p>　　v

92、ar password = md5.update(req.body.password).digest('hex');</p><p>　　var newUser = new User({name : req.body.name,password:password,email: req.body.email});</p><p>　　User.get(newUser.name

93、,function(err,user){</p><p>　　if(user){req.flash('error','用戶名已經(jīng)存在');return res.redirect('/reg');}//檢查用戶名是否存在</p><p>　　newUser.save(function(err,user){</p><p>

94、;　　if(user){req.flash('error',err);return res.redirect('/reg');}//如果用戶不存在則新增用戶</p><p>　　req.session.user = user;//用戶信息存入session</p><p>　　req.flash('success','注冊(cè)成功！

95、9;);res.redirect('/'); });});}); //注冊(cè)成功后返回主頁(yè)</p><p>　　User.prototype.save = function(callback){ // 要存入數(shù)據(jù)的用戶文檔</p><p>　　var user = {name : this.name,password :this.password,email : this

96、.email };</p><p>　　mongodb.open(function(err,db){ if(err){return callback(err);};</p><p>　　db.collection('users',function(err,collection){ //打開數(shù)據(jù)庫(kù)讀取users集</p><p>　　if(err){m

97、ongodb.close();return callback(err);};//錯(cuò)誤，返回err信息</p><p>　　collection.insert(user,{safe : true},function(err,user){</p><p>　　mongodb.close();if(err){return </p><p>　　callback(err);

98、}callback(null,user[0]); });});});</p><p><b>　　};</b></p><p><b>　　（6）詳細(xì)文章</b></p><p>　　通過(guò)點(diǎn)擊文章標(biāo)題可以進(jìn)入文章具體內(nèi)容頁(yè)面，來(lái)查看并編輯或者刪除文章。該頁(yè)面顯示文章標(biāo)題，編輯刪除按鈕，操作人信息，日期信息，已經(jīng)正文內(nèi)容。在

99、界面設(shè)計(jì)上，主要采用div排版。標(biāo)題利用h2標(biāo)簽。如圖17所示：</p><p>　　圖 17 詳細(xì)文章界面</p><p><b>　　功能代碼如下：</b></p><p>　　app.get('/u/:name/:day/:title',function(req,res){ </p><p>　　P

100、ost.getOne(req.params.name,req.params.day,req.params.title,function(err,post){</p><p>　　if(err){req.flash('error',err);return res.redirect('/');}</p><p>　　res.render('article

101、',{title : req.params.title,post : post,styleUrl : 'manage-index.css',user : req.session.user,success : req.flash('success').toString(),error : req.flash('error').toString()})})</p>&

102、lt;p><b>　　});</b></p><p><b>　?。?）退出登錄界面</b></p><p>　　此模塊主要當(dāng)點(diǎn)擊退出登錄會(huì)直接跳轉(zhuǎn)到登錄頁(yè)面，且顯示“登出成功”。界面設(shè)計(jì)如圖18所示：</p><p>　　圖18 退出登錄界面</p><p><b>　　3．?dāng)?shù)據(jù)庫(kù)

103、設(shè)計(jì)</b></p><p>　　本系統(tǒng)使用的是Mongodb數(shù)據(jù)庫(kù)，在數(shù)據(jù)庫(kù)中包含管理員表、文章內(nèi)容表兩類表，其中為每一個(gè)表設(shè)定一個(gè)主鍵，便于查詢表中數(shù)據(jù)。</p><p>　　表3.1管理員（admin）</p><p><b>　　接口數(shù)據(jù)格式 </b></p><p><b>　　{ <

104、;/b></p><p>　　_id: '59053c6d6dc1f813eca3859d',</p><p>　　name: 'chenjian',</p><p>　　password: 'b4ed99c0de60df97c9ef2fb8b700778d',</p><p>　　ema

105、il: 'togo0915@163.com' </p><p><b>　　}</b></p><p>　　表3.2文章內(nèi)容表（bmb）</p><p><b>　　接口數(shù)據(jù)格式</b></p><p><b>　　{</b></p><p&

106、gt;　　"_id":"5920f50b36af901bd88bf121",</p><p>　　"name":"zhaodanli","</p><p>　　time":{"date":"2017-05-21T02:01:47.593Z",</

107、p><p>　　"year":2017,"month":"2017-5",</p><p>　　"day":"2017-5-21","timer":"2017-5-21 10:1"},</p><p>　　"type&qu

108、ot;:"0",</p><p>　　"title":"",</p><p>　　"imgUrl":"6264-1dzovug.awl9v0a4i.jpg",</p><p>　　"post":"正文"</p>&

109、lt;p><b>　　}</b></p><p><b>　　四、設(shè)計(jì)總結(jié)</b></p><p>　?。ㄒ唬┰O(shè)計(jì)過(guò)程中遇到的問(wèn)題及其解決</p><p>　　在網(wǎng)站制作中，我遇到如下幾個(gè)問(wèn)題：</p><p>　　搭建Mongodb數(shù)據(jù)庫(kù)相對(duì)耗費(fèi)時(shí)間和精力，需要有耐心，同時(shí)自己也會(huì)翻墻搜索一

110、些資料，除了使用谷歌翻譯外，自身也要有一定的英語(yǔ)閱讀能力。</p><p>　　當(dāng)用Node.js建站的時(shí)候，因?yàn)橐紤] HTTP 協(xié)議處理細(xì)節(jié)，類似于HTTP 的 Cache 機(jī)制，由于對(duì)這個(gè)模塊比較生疏，所以選擇express框架搭配Node.js使邏輯處理相對(duì)簡(jiǎn)單。</p><p>　　Bootstrop的UI組件會(huì)產(chǎn)生一定的代碼冗余，解決辦法是通過(guò)谷歌插件調(diào)試，盡量查看頁(yè)面源代碼，

111、根據(jù)源代碼調(diào)整頁(yè)面；在制作過(guò)程中在保證質(zhì)量和時(shí)間的前提下，注意對(duì)網(wǎng)站進(jìn)行一定的優(yōu)化；圖片上傳功能和分頁(yè)效果等部分功能不會(huì)實(shí)現(xiàn)，通過(guò)谷歌，利用周圍人力資源等方法，改善自身邏輯思維，對(duì)頁(yè)面邏輯進(jìn)行梳理。</p><p>　　最后對(duì)前端做了相應(yīng)的優(yōu)化，如代碼壓縮等。</p><p><b>　?。ǘ﹤€(gè)人收獲</b></p><p>　　在設(shè)計(jì)和制作

112、《美麗河北》網(wǎng)站以及文檔編寫過(guò)程中，通過(guò)對(duì)畢業(yè)設(shè)計(jì)資料的分析整理提高了自己的分析判斷綜合能力，以及對(duì)網(wǎng)站功能實(shí)現(xiàn)的邏輯處理能力，與此同時(shí)采用了自己從未使用過(guò)的Node.js和相關(guān)框架，在搭建網(wǎng)站和配置服務(wù)器的過(guò)程中，磨煉了自己的耐心，增加自己的細(xì)心程度。</p><p>　　關(guān)于技術(shù)，在不斷的改進(jìn)，優(yōu)化過(guò)程中，體會(huì)到網(wǎng)站的可維護(hù)性的重要性，包括代碼的可理解性，適應(yīng)性和可擴(kuò)展性，增加代碼的可讀性，第一次從產(chǎn)品需求的

113、角度出發(fā)，理解一個(gè)項(xiàng)目不同角度不同的需求，體會(huì)了合作精神在工作與生活中的重要性。</p><p>　　在這次畢業(yè)設(shè)計(jì)過(guò)程中，認(rèn)識(shí)到了畢業(yè)設(shè)計(jì)是綜合了大學(xué)以來(lái)所有的各方面的勞動(dòng)成果，包括知識(shí)技能，合作能力，自我管理能力，和自主學(xué)習(xí)能力都有很大的鍛煉，同時(shí)對(duì)使用的技術(shù)有了更深層次的掌握。</p><p>　?。ㄈ┰O(shè)計(jì)的不足及對(duì)進(jìn)一步設(shè)計(jì)的設(shè)想</p><p>　　由于

114、時(shí)間關(guān)系和個(gè)人能力的不足，在功能完善等方面還有很大的不足，自我測(cè)試的功能并沒(méi)有實(shí)現(xiàn)。網(wǎng)站雖然沒(méi)有BUG在保證了質(zhì)量的基礎(chǔ)上，沒(méi)有保證效率，對(duì)自己所用的技術(shù)還不夠深度和熟練。在接下來(lái)的設(shè)計(jì)中，應(yīng)進(jìn)一步增加需求和完善模塊的功能。</p><p><b>　　結(jié)論</b></p><p>　　系統(tǒng)設(shè)計(jì)是一個(gè)綜合能力的體現(xiàn)。在整個(gè)過(guò)程中，都需要周密的計(jì)劃和安排，每一步需要細(xì)心

115、和耐心去琢磨和推敲，增強(qiáng)了自主解決問(wèn)題的能力，整個(gè)項(xiàng)目簡(jiǎn)介大方，可操作性強(qiáng)，對(duì)操作人員的需求較低，同時(shí)模塊化開發(fā)，利于未來(lái)維護(hù)、更新迭代，后期會(huì)隨著自己經(jīng)驗(yàn)的增長(zhǎng)不斷地完善自己的作品。實(shí)踐證明，理論是基礎(chǔ)只有在基礎(chǔ)之上，實(shí)踐才會(huì)更容易和輕松，只有在實(shí)踐之后才會(huì)融會(huì)貫通所有知識(shí)的交叉點(diǎn)，更好的利用醫(yī)學(xué)的知識(shí)。</p><p><b>　　參考文獻(xiàn)</b></p><p>

116、;　　[1] 寧家駿.“互聯(lián)網(wǎng)+”行動(dòng)計(jì)劃的實(shí)施背景、內(nèi)涵及主要內(nèi)容[J].電子政務(wù),2015,06:101-106.</p><p>　　[2] 金保印.解讀互聯(lián)網(wǎng)+[J].民營(yíng)科技.2015,11.</p><p>　　[3] 賈晶晶.“互聯(lián)網(wǎng)+”時(shí)代泛娛樂(lè)產(chǎn)業(yè)發(fā)展趨勢(shì)分析與思考[J].新聞知識(shí),2015(07).</p><p>　　[4] 姜非亞.網(wǎng)站建設(shè)過(guò)