利用Node.js開發前后端分離的系統
——以圖書館地方文獻系統為例

劉紅衛

(泰達圖書館檔案館 天津 300457)

0 引 言

如今移動互聯網高速發展，多種終端訪問對Web應用開發提出了更高的要求。用戶需求不斷變化，Web應用能夠自適應不同類型終端，不再單純滿足傳統瀏覽器端的體驗。用戶需求的變化提高了Web開發難度，而針對不同終端開發不同版本應用的解決方法，并不是有效的開發方式，不僅需要額外的開發人員，還會帶來成本增加、開發時間拖長等影響[1]。前后端分離是多終端 Web應用開發的可行方案，將后端保持不變，前端根據用戶的需求和體驗要求進行多終端定制開發，這樣只需要改變前端代碼，后端保持不變或微調，即可滿足用戶多終端需求，節省開發時間，降低開發成本，提高開發效率。

綜上所述，Web應用開發的前后端分離模式是大勢所趨。

1 圖書館地方文獻系統概況

傳承歷史文明，服務現代化的物質文明和精神文明建設，搜集、整理和保存地方文獻，歷來都是公共圖書館的基本任務之一[2]。地方文獻具有鮮明的區域性和實用性特點，在公共圖書館評估工作中，對地方文獻的館藏建設、開發利用都提出了相關要求，并占有較高分值。

筆者所在的圖書館在幾年前建立了地方文獻系統，并將擁有版權許可的文獻進行數字化，讀者可以在線檢索、閱讀，獲得地方文獻排架信息，文獻類型包括書、報、刊、照片、圖片以及音視頻等。該系統是由第三方開發，運行在 Windows Server系統下采用Asp.net開發，已運行多年，現在經常出現系統死機狀態，需要重啟服務器才能恢復服務，讀者意見很大。由于該系統是早期產品，廠商不再提供支持，當時的開發人員已經跳槽，現在無人能解決這個問題。

為了徹底解決系統中存在的上述問題，我們仔細研究了軟件目錄和結構，確定地方文獻的對象數據文件存于一定規則的目錄中，并且保存完整，元數據保存在 KBase數據庫中，可以導出文本文件。于是，決定自行開發一套新的地方文獻系統，既能實現舊系統的所有功能，又能實現響應式設計在多終端上使用。考慮到用戶將來對多終端界面需求的變化以及開發人員少的現狀，新系統的開發模式決定采用前后端分離模式。

2 前后端分離系統開發實踐

2.1 前后端分離系統設計

2.1.1 軟件開發平臺的選擇

Node.js基于 Chrome V8引擎的 JavaScript運行，使用高效、輕量級的事件驅動、非阻塞 I/O模型，它的包生態系統 npm是目前世界上最大的開源庫生態系統[3]。Node.js使JavaScript不僅可以應用在瀏覽器端，也可以運行在服務器端。目前，Node.js憑借其優秀的性能受到全球各大公司的重視，如 eBay、Microsoft、PayPal、Uber、Yahoo 等，國內阿里巴巴、百度、騰訊等也在很多項目中應用，可見 Node.js的發展已經成熟，它能快速創建大規模的網絡應用，處理高吞吐量的實時連接。Node.js有 Windows、Linux、macOS、SunOS、AIX 等系統平臺版本，具有良好的跨平臺可移植性，可以在Windows上開發，然后部署到Linux等其他系統上。

圖書館能承擔系統開發的人員很少，平日開發工作基本局限于頁面程序的改寫和功能提升上，大家都對 JavaScript腳本語言比較熟悉。針對此情況，結合Node.js可用于全棧開發及諸多特性和優點，在前后端分離系統的開發管理方面也比較方便，為此選擇了Node.js為軟件開發平臺。

2.1.2 前后端分離系統設計

如圖1所示，在地方文獻系統前后端分離架構設計中，前后端分別運行在不同的Node.js創建的Web Server上，前端負責接收用戶的請求、相關驗證和數據展示效果，后端負責按照約定好的 API請求處理業務邏輯、訪問數據庫、處理數據，并按約定的數據格式向前端返回相關數據(JSON格式)，包括請求API的時候進行相關驗證。前后端之間通過HTTP請求進行交互，前端獲取數據后，對頁面進行組裝和渲染，并將最終生成的頁面返回瀏覽器。

圖1 圖書館地方文獻系統前后端分離架構圖Fig.1 Back-and-rear separation architecture of the local library documentation system

其前端采用 MVVM(Model-View-View Model)模式，它是在 MVC(Model-View-Controller)模式基礎上改進的開發模式，它與MVC模式相同的是把視圖和數據分離，不同的是引入 ViewModel替換掉Controller來完成視圖和數據的雙向綁定，通過自動的方式完成大部分數據處理工作，從而降低了前端開發的復雜度。

2.2 API接口規范定義

在進行前后端分別開發之前，需要商定好前后端交互所需的 API，包括通訊接口、驗證策略以及數據格式等，形成文檔，確定文檔版本號。前后端開發人員要共同遵守此文檔，需要修改時要共同確認，變更文檔和文檔版本號，然后按照文檔中的接口規范進行前后端的并行開發。

地方文獻系統的前后端通訊是通過 HTTP請求作為API接口，這些API當然可以隨意制定，只要前后端開發人員達成一致即可。但隨意的 API形式缺乏合理性，可讀性差存在較多隱患。因此，我們采用目前較為流行的RESTful制定了API接口。

REST(Representational State Transfer)描述了一個架構樣式的網絡系統，比如 Web應用程序。在目前主流的 3種 Web服務交互方案中，REST相比于SOAP和 XML-RPC更加簡單明了，無論是對 URL的處理還是對 Payload的編碼，REST都傾向于用更加簡單輕量的方法設計和實現。值得注意的是 REST并沒有一個明確的標準，而更像是一種設計風格。每個資源都使用 URI(Universal Resource Identifier)得到一個唯一的地址，所有資源都共享統一的接口，以便在客戶端和服務器之間傳輸狀態，使用的是標準的HTTP 方法，比如 GET、PUT、POST 和 DELETE[4]。符合這種風格的 Web應用則稱為 RESTful。使用RESTful制定的API很容易理解，可避免產生歧義。

2.3 前后端分離的實現

2.3.1 前端的實現

前端頁面采用目前流行框架 Vue.js，它是基于MVVM 模式的輕量級響應式框架，它能有效簡化Web前端開發流程。Vue.js與其他重量級框架不同之處是，它是一套構建用戶界面的漸進式框架，采用自底向上增量開發的設計方式，是更加靈活、開放的解決方案，架構更加簡單，適合開發人員快速掌握其全部特性并投入使用，還便于與第三方庫或既有項目整合[5]。

Vue.js體量輕盈、性能優異、路由功能強大，而且易用、靈活、高效，在 npmjs.com 上有 vue.js腳手架工具vue-cli，通過vue-cli能直接生成Node.js環境下的 Vue應用程序框架，減少構建時間。另外 vue.js現在應用廣泛，網絡交流社區很多，使用中如遇到任何問題都可以利用這些資源及時找到解決辦法，保證開發工作的順利進行。

為了適應多終端用戶瀏覽器環境，頁面采用響應式布局設計，根據終端環境的不同，自動適應屏幕大小，優化頁面顯示。響應式布局框架有很多，比較流行的是 bootstrip.js，圖書館的開發人員在以前的項目中也曾使用過，使用 npm 可以輕松地將 bootstrap.js加入到開發環境中，然后用 import語句將 bootstrap及相關 css文件引入到程序文件中，bootstrap和 vue整合使用效果非常好。

前端的Web Server是由vue-cli工具生成vue開發框架中所包含的，它實際是一個 express框架。前端向后端請求 HTTP API異步操作時會出現跨越問題，可以通過在前端 Web server程序中引入 httpproxy-middleware中間件來解決。

前端程序通過 mock.js按照約定的接口文檔生成模擬數據進行單獨測試，不用等后端 API接口開發完畢，這樣能夠在前后端的集成測試前發現大部分問題，從而節省集成測試的時間，縮短開發周期。

2.3.2 后端的實現

后端 Web Server采用 Koa2。Koa是由 Express原班人馬打造的，致力于成為一個更小、更富有表現力、更健壯的 Web框架。使用 Koa編寫 web應用，通過組合不同的generator，可以免除重復繁瑣的回調函數嵌套，并極大地提升錯誤處理的效率。Koa不在內核方法中綁定任何中間件，它僅僅提供了一個輕量優雅的函數庫，使得編寫Web應用變得得心應手[6]。Koa2是一個簡單的MVC架構，結構非常清晰，地方文獻系統的數據庫采用mysql，通過npm將mysql訪問包文件加入到后臺開發環境中，將數據處理程序如mysql數據庫的操作、本地文件訪問等程序放到models目錄，將業務邏輯處理程序放到controllers目錄，另外將API接口定義在router目錄中api.js文件內，該文件要引入 koa-router包，在主程序中通過語句app.use(require('./server/routes/ api.js').routes())啟動API接口路由。

Koa2中Koa Context將node的request和response對象封裝到單個對象中，為編寫 Web應用程序和API提供了許多有用的方法。比如用ctx標識符創建一個 Context，使用語句 ctx.body＝result_set，這里的result_set是指API接口處理程序的結果數據集，這樣前端就獲得了后端返回的數據。

應用Koa2開發是非常簡單、快捷、清晰的，要實現 Koa功能擴展既可以自己編寫中間件程序，也可在 npmjs.com網站上找那些優秀的支持 Koa2的中間件直接使用，提高開發效率。但是，網上的中間件良莠不齊，需要仔細甄別。

2.4 部署

前后端分離的地方文獻系統集成測試完畢后，可以部署到一臺或多臺服務器，前后端分開以及數據庫獨立，可根據業務運行的實際情況按需部署，應用非常靈活。

目前，圖書館的地方文獻系統前后端和數據庫暫時部署在一臺 Windows Server上，從運行的效果看已經滿足讀者的訪問要求。這得益于部署時使用了Node.js的高級生產進程管理工具PM2。

Node.js以單線程的方式運行，多核心處理器系統不能發揮最大的性能。Node.js提供了 cluster模塊，可以生成多個工作線程，只需要將代碼封裝到cluster的處理邏輯中，再增加額外的代碼用于解決一個線程掛掉的問題。PM2內置 cluster模式包含了所有上述的處理邏輯，不必修改任何代碼，輕松地實現負載均衡，并能實時進行擴展。

PM2簡化了很多 Node.js應用管理中的繁瑣任務，不論什么情況都能保持生產進程一直運行，生產環境實現零停機更新。它還提供了性能監控、自動重啟、控制臺檢測、遠程控制接口API等功能，目前PM2支持在Linux、macOS、Windows等多平臺運行。

3 前后端分離的優勢

通過 Node.js進行前后端分離的地方文獻系統開發的優勢為：首先，前后端開發人員的職責完全分清，能夠同時并行開發和測試，互不干擾，提高了開發效率，縮短了開發時間，降低了項目成本；其次，前端界面變化后端無需修改，可以輕松應對今后多終端需求的改變，降低了維護成本；最后，提高了代碼的可復用性和可維護性，架構明確，代碼清晰。

4 結 語

利用Node.js開發前后端分離的圖書館地方文獻系統的實踐，不僅僅是前后端開發的分工，也是開發環境、代碼、部署的完全分離，與傳統的 Web應用開發模式相比，提高了開發效率，增強了代碼的可維護性，提高了系統的可用性、伸縮性、擴展性。今后還應在接口服務化、代碼模塊化、功能組件化等方面進一步探索，以便應對越來越復雜的 Web應用開發挑戰。