ibb娱乐彩票
上海代寫論文網專業提供代寫畢業論文、代寫本科論文服務
您現在的位置:首頁 > 計算機論文 > 網站設計論文 >
基于HTML5+Bootstrap模式的響應式企業網站設計
發布時間:2020-01-22

  摘    要: 隨著信息技術的高速發展,企業因自身和客戶的需求對網站的個性化需求越來越高,同時,由于用戶端設備的“彈性”和滿足用戶體驗,企業網站必須實現響應式網頁設計。通過闡述現代企業網站的功能和需求,分析網站界面設計、系統的前端功能設計和后臺管理系統設計等,基于“NodeJS+MongoDB”開發模式,實現了響應式企業網站,在滿足企業個性化需求的同時,不斷提高用戶體驗和網站的開發效率。

  關鍵詞: HTML5; NodeJS; MongoDB; Bootstrap; 企業網站;

  0、 引言

  隨著信息技術的高速發展,數字化、信息化的網絡技術已經被更多的人接受并融入了我們的日常生活和工作。企業也越來越多地要和外界進行信息溝通,通過不同的客戶端展示自己的企業文化和風采。近幾年興起的HTML5,以它良好的用戶體驗、嚴謹清晰的代碼結構、便捷的維護管理、跨平臺開發及較低的開發成本等優勢不斷滿足企業網站的各種需求。

  如今,利用移動設備訪問企業網站的頻率遠遠高于傳統的PC,傳統的網站開發技術又難于兼容所有的移動設備尺寸,企業為了在不同的移動設備上都能完美的展示自己的企業文化、發布產品信息和企業動態、優化與用戶的交互過程,開始重新構建基于HTML5+Bootstrap模式的響應式網站。這樣不僅更加直觀的展示信息給用戶,而且加強了用戶溝通,提升用戶體驗[1,2]。

  1、 系統開發的相關技術

  該系統設計語言采用NodeJS,系統框架采用Express技術,數據庫開發采用MongoDB。系統支持Windows、Linux和MacOS等現在流行的主要系統。NodeJS是一個基于Chrome JavaScript運行時建立的開發平臺,響應速度快、易于擴展,使用事件驅動,非阻塞I/O模型,非常適合在分布式設備上運行。Express是一個基于NodeJS平臺的簡單靈活的web應用開發框架,它提供一系列強大的特性,幫助創建各種Web和移動設備應用。而MongoDB是現今最流行的一類NoSQL數據庫,具有操作簡單、性能高等特點。

  1.1、 HTML5[3,4]

  隨著移動互聯網的飛速發展,目前html5技術也得到了不斷的完善,開發技術方面越來越成熟了,成為了目前主流的開發語言之一。

  HTML5可以實現移動開發、游戲開發、跨瀏覽器開發等多平臺開發任務,它能夠支持音視頻,具有清晰的代碼結構,可實現更好的互動體驗。這一前端開發主流語言技術將會被越來越多的個人開發者或者企業開發商所青睞。
 

基于HTML5+Bootstrap模式的響應式企業網站設計
 

  1.2、 NodeJS

  NodeJS[5]是一個可以快速構建網絡服務及應用的平臺。作為JavaScript服務端的開發平臺,開發簡單、易于擴展。同時,由于NodeJS具有事件驅動,異步、非堵塞I/O,單線程等優勢,因此在開發高并發網絡服務時,性能非常出眾;NodeJS占用系統資源少,運行成本低;NodeJS對GoogleV8[6]引擎進行了封裝,執行JavaScript的速度快、效率高。

  1.3、 MongoDB

  MongoDB[7]是一個基于分布式文件存儲的NoSQL數據庫,由C++編寫的,存儲數據方便、性能高[8]。

  2、 系統分析

  2.1、 可行性分析

  (1)技術可行性[10]:本系統支持Windows、Linux及MacOS等多平臺搭建系統;數據庫采用NoSQL——MongoDB,并利用mongoose來管理數據庫,避免了sql語言的直接接觸;框架使用express;前端設計利用jade模板引擎結合bootstrap樣式,簡化代碼的同時,界面更加美觀,更加人性化,因此,從技術上來說是相對容易實現的。

  (2)經濟可行性:由于選擇的開發工具和服務器可以使用免費的開源軟件,因此,本系統在經濟上投入低,系統建成后,將為企業文化和產品宣傳提供很大的方便[9]。

  2.2、 需求分析

  根據相關調研及企業網站的需求分析[11],發現目前企業網站包含的內容逐步增多,使得網站的主要展現的內容的得不到充分的展示,本系統主要通過對傳統的企業網站的簡化,實現企業文化、企業精神及相關突出信息的重點展示與宣傳。

  3、 系統前端功能設計與實現

  3.1、 前端結構與布局設計[12]

  本網站主要用于企業的文化和產品展示、信息和動態發布、公司招聘等功能。具體的功能模塊分為網站首頁、產品展示、品牌故事、最新動態、團隊介紹和聯系我們等6個功能模塊,每個功能模塊分為幾個小的功能模塊[13],功能模塊如圖1所示。

  3.2、 系統分層開發

  為了降低開發成本,提高開發效率,按照企業網站功能模塊的劃分,系統開發按功能模塊分層開發。整個開發過程大致分為:搭建總體結構,設計模塊,制作頁面設置,搭建底層JS腳本[14],設計JS交互效果,內部測試,優化代碼等。

  3.3、 編寫系統代碼

  在編寫系統代碼時,按照功能模塊的開發次序,先編寫HTML布局,再進行CSS的開發。

  3.4、 系統內部測試及后期優化

  前端測試[15],先對頁面效果和設計圖進行比對,逐步優化頁面細節。再利用不同尺寸和規格的設備,查看頁面的兼容性。最后再進行代碼優化,提高訪問速度。

  圖1 企業網站前端模塊劃分圖
圖1 企業網站前端模塊劃分圖

  4、 系統后臺管理系統的設計與實現

  4.1、 系統管理界面功能設計

  系統后臺管理系統主要是對前端頁面展示內容的即時更新,還有公司相關管理人員的權限的設置管理。主要管理的模塊有:管理員權限、職務管理、辦公環境、產品管理、新聞發布等,頁面布局采用當前比較流行的扁平化趨勢[16],簡潔明了的展示頁面的主要管理功能。

  4.2、 系統數據庫的搭建

  本系統數據庫采用NoSQL—MongoDB[17]運行,管理利用mongoose來實現,不需要使用sql語言進行直接接觸。MongoDB是一個基于分布式文件存儲的NoSQL數據庫,由C++編寫的,存儲數據方便、性能高。本系統主要創建的表,具體如表1所示。

  表1 網站數據庫設計及其功能
表1 網站數據庫設計及其功能

  5、 結束語

  本文主要研究了現代企業網站[18]的系統需求分析、系統前端功能設計、后臺管理系統設計和數據庫設計等,基于NodeJS+MongoDB,利用HTML5+Bootstrap技術實現了響應式企業網站。該網站界面簡潔、功能完善,跨平臺性好,相應速度快,用戶體驗良好,可以不斷提升企業形象、加強企業文化宣傳、推廣品牌產品、提高企業知名度推廣,為企業做強做大奠定了良好的基礎。

  參考文獻

  [1]舒后,熊一帆,葛雪嬌.基于Bootstrap框架的響應式網頁設計與實現[J].北京印刷學院學報,2016.2:47-52.
  [2]季嘉明.基于Bootstrap+SSI的跨平臺企業管理系統的設計與實現[D].東華大學碩士學位論文,2015.
  [3] Ravulavaru A. Learning Ionic-Build Hybrid Mobile Applications with HTML5[M]. Packt Publishing, 2017.
  [4] Sanoja A, Gan?arski S. Block-based Migration from HTML4Standard to HTML5 Standard in the Context of Web Archives[C]//Sctc. 2017.
  [5] Liang L, Zhu L, Shang W, et al. Express supervision system based on NodeJS and MongoDB[C]//Ieee/acis, International Conference on Computer and Information Science. IEEE, 2017.
  [6]袁文亮.基于NodeJS快速構建小型推特系統[J].電腦迷,2017(1).
  [7] Francia S. MongoDB and PHP-O’Reilly Media Free, Live Events[J]. 2017.
  [8]Li C, Gu J. A SQL transformation model of MongoDB based on ANTLR[J]. Xibei Gongye Daxue Xuebao/journal of Northwestern Polytechnical University, 2017, 35(1):143-147.
  [9]吳尚宇,熊英.基于NodeJS的校園失物招領系統[J].電腦迷, 2016(4).
  [10]周彩陽.圖書館服務器虛擬化技術可行性分析[J].圖書館論壇, 2008, 28(3):65-67.
  [11]王秀超,繆煒愷,王以松,等.一種面向列車車載控制軟件的需求分析方法[J].計算機工程, 2017, 43(7):48-53.
  [12]楊穎.校園OA系統前端用戶界面設計與實現[J].福建電腦, 2017, 33(4):142-144.
  [13]宋官民,王寧寧,申士杰. Web前端的發展趨勢[J].江西建材, 2017(2):250-250.
  [14]王偉,郝軍啟,唐有明.精通JS腳本之jQuery框架[M].化學工業出版社, 2011.
  [15]朱曉敏.軟件測試的相關技術應用研究[J].電子測試,2017(1):122-123.
  [16] 謝建華.基于Bootstrap技術的企業網站設計與實現[J].計算機時代, 2017(8).
  [17] Francia S. MongoDB and PHP-O’Reilly Media Free, Live Events[J]. 2017.
  [18]陳蓮蓮,張巖,張永華,等.基于B/S模式的企業網站的設計與實現[J].電腦知識與技術:學術交流, 2015,11(11X):16-18.

對應分類:
版權所有:上海論文網專業權威的論文代寫、論文發表的網站,秉承信譽至上、用戶為首的服務理念,服務好每一位客戶
本站部分論文收集于網絡,如有不慎侵犯您的權益,請您及時致電或寫信告知,我們將第一時間處理,郵箱:shlunwen@163.com
ibb娱乐彩票
<meter id="7xttx"></meter>
  1. <code id="7xttx"><delect id="7xttx"><p id="7xttx"></p></delect></code>
  2. <acronym id="7xttx"></acronym>

    <address id="7xttx"></address>
    新田县| 依兰县| 米脂县| 新源县| 岐山县| 瓦房店市| 崇信县| 汝南县| 扬中市| 高台县| 云阳县| 昌宁县| 陇西县| 麻江县| 永城市| 黎城县| 甘孜县| 福州市|