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

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

2、 </p><p>　　學 生 姓 名： 趙丹利 </p><p>　　學 生 學 號： 1951150313 </p><p>　　指 導 教 師： 張玉紅 </p><p>　　2016年5月26日</p&g

3、t;<p>　　河北科技師范學院教務處制</p><p><b>　　學 術 聲 明</b></p><p>　　本人呈交的學位論文，是在導師的指導下，獨立進行研究工作所取得的成果，所有數據、圖片資料真實可靠。盡我所知，除文中已經注明引用的內容外，本學位論文的研究成果不包含他人享有著作權的內容。對本論文所涉及的研究工作做出貢獻的其他個人和集體，均已在文中

4、以明確的方式標明。本學位論文的知識產權歸屬于河北科技師范學院。</p><p>　　本人簽名： 日期： </p><p>　　指導教師簽名： 日期： </p>

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

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

7、結。</p><p>　　關鍵詞：網站制作；網站設計；美麗河北；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>　　一、《美麗河北》網站建設的需求分析1</p><p><b>　　（一）項目背景1</b></p><p>　?。ǘ┤蝿招枨蠓治?</p><p>　?。ㄈ┕δ苄枨蠓治?</p><p>　　二、開發(fā)《美麗河北》網站的軟件及技

12、術4</p><p>　　（一）圖像處理軟件（Photoshop）5</p><p><b>　　1．軟件簡介5</b></p><p><b>　　2．主要運用5</b></p><p>　?。ǘ┚W站開發(fā)使用編輯器（Sublime Text）5</p><p>

13、　　（三）Node.js技術及Mongodb數據庫6</p><p>　　1．Node.js簡介6</p><p>　　2．Moglodb數據庫6</p><p>　　(四）express框架及ejs模板6</p><p>　　1．express框架6</p><p><b>　　2．ejs模板6

14、</b></p><p>　　（五）Bootstrop柵格化布局和git版本管理控制工具7</p><p>　　1．Bootstrop柵格化布局7</p><p>　　2．git版本管理控制工具7</p><p>　　三、《美麗河北》網站設計與實現7</p><p>　?。ㄒ唬┖笈_管理系統(tǒng)結構設計

15、7</p><p>　　1．后臺管理系統(tǒng)結構7</p><p>　　2．前臺頁面呈現結構8</p><p>　?。ǘ┚W站界面及內容設計8</p><p>　　1．網站首頁設計8</p><p>　　2．網頁內容設計8</p><p>　　（三）網站系統(tǒng)及功能實現11</p&g

16、t;<p>　　1．網站系統(tǒng)實現11</p><p>　　2．網站功能實現12</p><p>　　3．數據庫設計18</p><p><b>　　四、設計總結19</b></p><p>　　（一）設計過程中遇到的問題及其解決19</p><p>　?。ǘ﹤€人收獲20

17、</p><p>　?。ㄈ┰O計的不足及對進一步設計的設想20</p><p><b>　　結論20</b></p><p><b>　　參考文獻21</b></p><p><b>　　致謝21</b></p><p><b>　　緒

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

19、全方面的360度的交流與合作?；ヂ摼W已經成為各個企業(yè)以及機構做宣傳活動的主要信息傳遞平臺。</p><p>　　與傳統(tǒng)的宣傳方式相比，網絡宣傳呈現出多維和多元化。它能夠將文字、圖像、信息和聲音有機的結合在一起，可以傳遞出更多的感官信息，增強了網絡宣傳的實效，還可以把信息集中起來，分類分欄，方便瀏覽；而且宣傳型網站的制作成本更低，并且速度更快，更改更加地靈活，制作周期也更短，即使在較短周期進行信息的投放，也可以根據

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

35、>　　文章詳情頁面：在前臺點擊文章標題或頭圖會直接跳轉到詳情頁面，可以查看完整的文章內容。</p><p>　　分配帳號功能：簡單來說就是有一個超級管理來給普通管理員分配帳號和密碼，普通管理員因此獲取對前端內容修改的權限，在此會做限定，僅有超級管理員有權限分配賬號，普通賬號登錄不會顯示分配賬號頁面，且如果強制進入會顯示“沒有分配賬號權限”的信息。</p><p>　　退出登錄：點擊退

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

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

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

39、紹。</p><p>　?。ㄒ唬﹫D像處理軟件（Photoshop）</p><p><b>　　1．軟件簡介</b></p><p>　　Photoshop是Adobe公司旗下最為出名的圖像處理軟件之一，圖像編輯是圖像處理的基礎，Photoshop可以對圖像進行編輯，合成，特效制作等，特效制作在該軟件中主要由濾鏡、通道及工具綜合應用完成。是在制

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

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

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

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

44、><p>　?。ㄈ㎞ode.js技術及Mongodb數據庫</p><p>　　1． Node.js簡介</p><p>　　Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環(huán)境。對Google V8引擎進行了封裝。簡單來說就是前端框架，后臺語言；V8引 擎執(zhí)行Javascript的速度非常快，性能非常好。最大的特色就是使用一個事件驅

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

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

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

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

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

50、p>　　（五）Bootstrop柵格化布局和git版本管理控制工具</p><p>　　1．Bootstrop柵格化布局</p><p>　　Bootstrap的柵格系統(tǒng)為12列(最大列數)，基于HTML5和CSS3開發(fā)，其強大的UI組件簡潔大方，扁平化風格廣受大眾青睞，本網站前端采用bootstop框架，簡單套用部分布局，使頁面簡單大方，主要代碼如下：</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是一款免費、開源的分布式版本控制系統(tǒng)，本網站主要用到其git bash here功能相對于cmd更易上手。難點在于git的安裝和配置。</p><p>　　三、《美麗河北》網站設計與實現</p><p>　　本網站主要包括后臺管理系統(tǒng)和前端呈現頁面兩個部分。前端頁面橫向導航主要是與“美麗河北”有關的

53、內容，后臺系統(tǒng)左側縱向導航主要是與界面管理有關的內容。</p><p>　?。ㄒ唬┖笈_管理系統(tǒng)結構設計</p><p>　　1．后臺管理系統(tǒng)結構</p><p>　　后臺管理系統(tǒng)的幾個模塊主要放在網站的縱向導航部分，其中包括首頁、文章列表、文章發(fā)表、圖片上傳、分配賬號、退出登錄六個模塊，另外有詳細文章模塊，其中文章列表含發(fā)布的所有文章和具體分類以及編輯和刪除功能，以

54、及發(fā)布人和作者等基本信息，分配賬號在管理員權限上做出了相應的限制。系統(tǒng)結構設計如圖3所示：</p><p>　　圖 3 系統(tǒng)設計結構圖</p><p>　　2．前臺頁面呈現結構</p><p>　　前臺頁面呈現相關模塊主要放在網站的橫向導航部分，其中包括首頁、河北之美、最新報道、活動簡報、推薦旅游五個模塊。其中首頁和河北之美是本網站的主要內容。網絡課程系統(tǒng)結構圖如圖

55、4所示：</p><p>　　圖 4 前端網站顯示結構圖</p><p>　?。ǘ┚W站界面及內容設計</p><p><b>　　1．網站首頁設計</b></p><p>　　網頁內容界面布局、風格、色調都一致，整個網站內容簡介大方，主要包括首頁、河北之美、最新報道、和推薦旅游及聯系我們六大模塊。其界面設計如圖5所示：

56、</p><p>　　圖 5 《美麗河北》網站首頁</p><p><b>　　2．網頁內容設計</b></p><p><b>　?。?）首頁模塊</b></p><p>　　首頁由六個模塊組成，包括導航、Banner、美麗河北模塊、新聞速遞模塊、活動簡報模塊和美麗河北、footer六個模塊，作為

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

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

59、b></p><p>　　此模塊以列表形式展現最新報道消息和基本信息，右側有輪播圖，以輪播圖片的方式發(fā)布重點新聞，活動簡報與推薦旅游和此頁面類似，界面設計如圖8所示：</p><p>　　圖 8 最新報道模塊</p><p><b>　?。?）活動簡報模塊</b></p><p>　　此模塊以左圖又文的形式展現活動

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

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

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

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

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

65、ext類型以及password類型。在實現上，打開網站首頁之后，系統(tǒng)會自動判斷有沒有登錄，若已登錄則直接顯示主頁內容，若未登錄，則默認跳轉到login界面，通過從界面獲取用戶輸入的值，在數據庫中查找該用戶是否存在，如果存在，再判斷用戶輸入的密碼與數據庫中存儲的密碼是否一致，比較通過，則說明用戶登錄成功，記錄下用戶登錄狀態(tài)，跳轉至相應的系統(tǒng)主頁即完成登錄，若賬號或密碼不一致，則不跳轉頁面，且顯示“賬號或密碼錯誤”。界面設計如圖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','密碼錯誤');return </p><p>　　res.redirect('/login'); //密碼錯誤則跳轉到登錄頁面} //檢查代

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

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

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

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

75、信息量的增加，為緩解管理員審美疲勞，一頁僅顯示10個頁面，且對其做分頁功能，使頁面簡介，條理清晰而不雜亂.首頁功能代碼如下</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;//判斷是否是第一頁，并把請求的頁數轉換成number類型</p><p>　　app.get('/list/:page',function(req,res){//查詢并返回第page頁的10個文章</p><p>　　var page = req.params.page?req.params.page : 1;}//判

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

78、其中標題文本框和正文文本域是用來填寫內容的，所以用的是text和textarea，文章類型因為是單選且必須選一個所以用的是select下拉框。而行選擇配圖功能則用的是file類型。界面設計如圖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>　　通過點擊文章列表中的編輯按鈕來進入文章編輯頁面。在界面設計上，采用的是bootstrap表單布局。界面設計如圖15所示：</p><p>　　圖 15 編輯文章界面&l

83、t;/p><p>　　這里我們的標題以及文章類型是不允許修改的，管理員可以在修改完正文內容的后點擊保存修改，然后修改完成。其中標題文本框和正文文本域是用來填寫內容的，所以用的是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);});})});}//根據用戶、發(fā)表日期及文章名進行查詢</p><p&g

86、t;<b>　?。?）分配賬號</b></p><p>　　由超級管理員為普通管理員分配帳號密碼。用戶名文字框類型為text，密碼框類型為password，郵箱類型為email 當填寫完成后通過點擊注冊將普通管理員帳號注冊成功。</p><p>　　頁面邏輯為判斷登陸者是否是超級管理員，若是則此界面顯示，若不是則此界面不顯示，在超級管理員登陸的條件下，超級管理員有權分

87、配管理員賬號，輸入要設置的用戶名和密碼及郵箱，點擊注冊，數據庫會自動存儲該賬號和密碼，此時新開的賬戶密碼正確即可登錄，需要注意的是，非超級管理員沒有修改和刪除別人發(fā)布文章的權限。主要采用bootstrap form表單布局，界面設計如圖16所示：</p><p>　　圖 16 分配賬號界面</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:'分配帳號',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');//返回注冊頁面}</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','用戶名已經存在');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','注冊成功！

95、9;);res.redirect('/'); });});}); //注冊成功后返回主頁</p><p>　　User.prototype.save = function(callback){ // 要存入數據的用戶文檔</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){ //打開數據庫讀取users集</p><p>　　if(err){m

97、ongodb.close();return callback(err);};//錯誤，返回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>　?。?）詳細文章</b></p><p>　　通過點擊文章標題可以進入文章具體內容頁面，來查看并編輯或者刪除文章。該頁面顯示文章標題，編輯刪除按鈕，操作人信息，日期信息，已經正文內容。在

99、界面設計上，主要采用div排版。標題利用h2標簽。如圖17所示：</p><p>　　圖 17 詳細文章界面</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>　　（7）退出登錄界面</b></p><p>　　此模塊主要當點擊退出登錄會直接跳轉到登錄頁面，且顯示“登出成功”。界面設計如圖18所示：</p><p>　　圖18 退出登錄界面</p><p><b>　　3．數據庫

103、設計</b></p><p>　　本系統(tǒng)使用的是Mongodb數據庫，在數據庫中包含管理員表、文章內容表兩類表，其中為每一個表設定一個主鍵，便于查詢表中數據。</p><p>　　表3.1管理員（admin）</p><p><b>　　接口數據格式 </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文章內容表（bmb）</p><p><b>　　接口數據格式</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>　　四、設計總結</b></p><p>　?。ㄒ唬┰O計過程中遇到的問題及其解決</p><p>　　在網站制作中，我遇到如下幾個問題：</p><p>　　搭建Mongodb數據庫相對耗費時間和精力，需要有耐心，同時自己也會翻墻搜索一

110、些資料，除了使用谷歌翻譯外，自身也要有一定的英語閱讀能力。</p><p>　　當用Node.js建站的時候，因為要考慮 HTTP 協(xié)議處理細節(jié)，類似于HTTP 的 Cache 機制，由于對這個模塊比較生疏，所以選擇express框架搭配Node.js使邏輯處理相對簡單。</p><p>　　Bootstrop的UI組件會產生一定的代碼冗余，解決辦法是通過谷歌插件調試，盡量查看頁面源代碼，

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

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

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

114、時間關系和個人能力的不足，在功能完善等方面還有很大的不足，自我測試的功能并沒有實現。網站雖然沒有BUG在保證了質量的基礎上，沒有保證效率，對自己所用的技術還不夠深度和熟練。在接下來的設計中，應進一步增加需求和完善模塊的功能。</p><p><b>　　結論</b></p><p>　　系統(tǒng)設計是一個綜合能力的體現。在整個過程中，都需要周密的計劃和安排，每一步需要細心

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

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