如何設計一個基於Node.js和Express的網站架構？

前言

今年七月份，我和幾個小夥伴們合夥創建了一個開發團隊。業務開展如火如荼的同時，團隊宣傳就提上了日程，因此迫切須要搭建公司網站出來。肯定目標後咱們就開始考慮若是構建一個企業網站。先是進行業內調查，看了看別人家的網站是怎麼作的。整體來說，國外網站的設計和使用的技術總能比國內高很大一截，國內不少公司，甚至是不少軟件公司都不注重公司網站的構建，網站千篇一概，沒有特點。不少網站都是使用Wordpress，而後自定義皮膚。也有一些設計類公司，網站頁面作的很漂亮，設計也前衛，可是前端源代碼寫的一塌糊塗。咱們起初的方案也是想使用Wordpress做爲基礎來設計網站，網站UI從已有開源的皮膚基礎上修改。這樣既能節省開發成本，又能體現獨一無二。其實，剛開始也是這麼作的，而且已經作出來了初版了。只是實在是以爲和別人家的網站差異不大，太普通了，而且網站也沒有任何體現咱們專一於Web開發這一特質。權衡再三以後，決定從頭開發一個企業網站出來，使用咱們團隊擅長的技術從新開發一個網站出來。決定前端使用AngularJS和Bootstrap構建，後端使用node.js和Express構建。通過一個多月的努力完成的項目的初版。下面將詳細介紹這個項目的基礎結構設計。

項目總體設計

技術上，項目前端使用AngularJS和Bootstrap，後端使用node.js和Express。網站自動化構建工具使用grunt。網站總體應用了流行扁平化設計和響應式設計。固然，UI設計是咱們團隊的弱項，因此不少都是借鑑（抄襲）了別人的設計。網站前端代碼基於HTML5，支持Chrome、Safari、Firefox及IE9+，使用IE8瀏覽器打開網站會自動跳轉到引導用戶下載現代瀏覽器的頁面中。網站應用了響應式設計，因此在智能手機上也能夠愉快地瀏覽。

項目是徹底開源的，github上的地址是：eRealm，項目演示地址：eRealm Info & Tech。

代碼結構介紹

推薦使用Webstorm打開項目。打開項目後，代碼結構以下圖所示：

在主體結構中從上到下介紹。app文件夾包含了全部後端代碼；build文件夾中包含了最新數據庫備份；config包含有網站總體的配置；logs文件夾包含網站後端記錄的日誌文件；node_modules是包含全部的node.js依賴包（源代碼中初始沒有此文件夾，運行npm install命令後全部加載的依賴包放置在此文件夾中）；public文件夾包含了全部的前端代碼，包括JavaScript、less、圖片、Webfont等；.bowerrc中定義了bower管理前端庫的下載地址；bower.json則配置了項目須要的前端庫；.jshintre-client和.jshintrc-server分別爲先後端JavaScript代碼規範檢查規則；.travis.yml爲[travis]（https://travis-ci.org/）自動編譯配置；app.js爲node.js啓動腳本文件；build.sh爲單獨編寫的自動發佈bash命令；gruntfile.js爲grunt配置文件；newrelic.js爲newrelic的配置文件，用於監控網站性能；package.json包含了全部node.js依賴包配置。

項目後端結構

項目後端代碼架構以下圖所示：

主要分爲兩大部分：app和config。app裏面按照職責不一樣來分類，每一個腳本文件對應於不一樣的模塊；api文件夾包含了全部api對應的業務邏輯代碼，helper放置一些公用方法，如郵件發送、日誌記錄、數據庫鏈接等等；templates放置的是靜態郵件模板；views是後端頁面模板，使用了handlebar模板引擎，其中http中放置系統錯誤顯示頁面，layouts放置模板頁；routes是express對應的路由配置，全部的頁面和API的路由配置都在這個文件中。config文件夾中爲系統配置，按照不一樣環境分爲開發和現場兩個環境配置，all.js放置共通配置，development.js放置開發環境對應配置而production.js放置線上環境配置。配置內容包括郵件發送、數據庫鏈接及一些第三方API所需的key等等。

項目前端結構

項目前端代碼結構以下所示：

前端代碼所有放置於public文件夾下。data目錄包含一些靜態json格式數據，後期可能會考慮放到數據庫中。helper中是瀏覽器下載引導頁面；images包含了全部項目中用到的圖片，咱們儘可能使用第三方的圖片服務器保存圖片，一些小圖標也儘可能使用webfont。JavaScripts文件夾包含全部JavaScript文件，其中app子目錄放置業務代碼，業務代碼都是按照業務不一樣封裝成了不一樣的angularjs controller；debug子目錄放置調試用代碼，而libs方式前端JavaScript庫，項目中使用得JavaScript庫有angularjs、jQuery及一些插件；clients.js是全部ajax請求函數；erealm.js是angularjs的主模塊；language.js包含了全部多語言配置，目前支持中英文。stylesheets包含了全部的css樣式及webfont，除了第三方庫以外，自定義的樣式所有使用了less。做爲一種慣例，項目中添加了humans.txt文件，代表項目的做者信息。有關humans.txt，能夠參考官方網站humans.txt。

自動化構建工具

項目自動化構建使用grunt。grunt的使用涉及開發、調試、發佈階段。開發階段使用了圖片壓縮和前端代碼格式美化，使用的工具是imagemin和jsbeautifier，運行grunt prepare命令。調試階段使用了代碼規範檢查、less編譯、自動添加瀏覽器前綴、自動加載運行nodejs並打開瀏覽器、實時監控代碼變化並刷新頁面等。開發中，使用grunt命令便可，爲默認grunt命令。發佈階段包含了JavaScript及css合併壓縮，並在文件路徑上添加哈希值來避免瀏覽器緩存問題，同時刪除開發環境中使用的代碼，使用grunt build命令便可把代碼切換爲發佈環境。

具體的使用grunt方法及相關工具的介紹，後期會有專門的技術文章講解，這裏不會詳細設計技術細節。

後期持續的改進點

項目完成的比較倉促，可是咱們儘可能保持代碼的整潔和可維護性，一些編碼方式也借鑑當前流行的最佳實踐。但理想是美好的，現實老是不會作到那麼完美，須要不斷的完善。目前存在的問題是後端代碼結構不夠清晰、總體代碼中無用代碼尚未來得及移除。框架上指望把jQuery去掉，只使用Angularjs，目前只作到了儘可能不用jQuery中的方法。小圖標的使用上Bootstrap和 Font Awesome重複，後期會逐步刪除Font Awesome而只使用Bootstrap中帶的小圖標。目前，最大的問題是項目沒有完整的自動化測試，這個後期會逐步添加。

總結

以上是這個開源項目的總體技術結構介紹。在這個項目中，咱們會持續使用最流行的Web技術，但願獲得你們的持續關注，若是有開發者能一塊貢獻一些代碼，咱們將會很是高興。咱們已經在github.io上構建了一個技術平臺來發布Web技術文章，網址是blog.erealm.cn。博客網址也一樣開源，使用了Jekyll構建。Jekyll很是強大，最大的特色是使用markdown格式來發布文章。博客的代碼在這裏：github。

咱們作這個開源的項目的目的有兩個，其一是經過這個項目來展現咱們作Web項目的實力，及培養團隊技術水平。其二是藉助這個項目，能和同行們有個技術上的互動和交流。若是咱們的項目能讓一些新手們學到一些作Web項目的經驗，咱們就很滿足了。技術是不斷革新的，而國內Web技術向來是落後於國外好幾年，這個是不爭的事實。咱們erealm團隊樂意爲國內Web貢獻本身的力量，也歡迎國內同行們和咱們交流Web開發經驗。

*本文同時發表到了團隊技術博客上及我我的博客上，請訪問blog.erealm.cn或www.dang-jian.com查看最新修改版。