基于前后端分離架構(gòu)的工作臺賬系統(tǒng)設(shè)計與實現(xiàn)

李威威

(云南大學(xué) 圖書館，云南 昆明 650000)

在單位的運行和日常工作中，工作臺賬建設(shè)是一個必不可少的工作內(nèi)容.把日常的工作內(nèi)容和工作記錄，通過工作臺賬的方式進行管理，對于單位的運行、管理和決策具有非常重要的意義[1-2].

傳統(tǒng)意義上的工作臺賬，主要是通過文字對相關(guān)的工作內(nèi)容進行記錄，以文件的形式分散儲存在記錄人員的個人電腦上，這種臺賬記錄方式存在以下問題：

1) 時效性不足 很多臺賬記錄都是在工作完成之后才形成的，在時間上會有一定的延遲；

2) 準(zhǔn)確性不夠 在工作完成之后形成的臺賬記錄，有時候并不能準(zhǔn)確反映工作現(xiàn)場當(dāng)時的真實情況；

3) 可回溯性差 基于文件的臺賬記錄，無法對臺賬記錄的內(nèi)容進行檢索，臺賬記錄的可回溯性較差；

4) 管理效率低 如果是多人共同完成一項工作，每個人的臺賬記錄都分散存儲在個人的電腦上，收集、整理這些臺賬記錄耗時耗力，臺賬管理效率低下.

例如技術(shù)部門的設(shè)備維護記錄，平時都是由不同的工作人員，在做完維護之后各自記錄.需要進行總結(jié)和匯總的時候，就需要把各個工作人員的記錄收集在一起，進行匯總，形成設(shè)備維護臺賬.這種方式對臺賬的創(chuàng)建、查看、管理帶來了很多的不便，很大程度上降低了工作效率.

隨著移動互聯(lián)網(wǎng)技術(shù)和智能移動設(shè)備的發(fā)展，圖像、音頻和視頻的采集變得越來越容易，工作臺賬的記錄形式和內(nèi)容呈現(xiàn)方式也發(fā)生了很大的變化.使用智能手機實時創(chuàng)建臺賬記錄，引入圖像、音頻和視頻，就可以創(chuàng)建出時效性強、內(nèi)容豐富、記錄準(zhǔn)確的工作臺賬.在做工作總結(jié)或匯報的時候，查看不同類別的臺賬記錄，就可以很方便的對一段時間內(nèi)的工作情況進行總結(jié)[3-4].

為了解決傳統(tǒng)工作臺賬從創(chuàng)建到管理存在的諸多問題，本文提出了一種基于前后端分離架構(gòu)的臺賬系統(tǒng)，并對該系統(tǒng)的設(shè)計和開發(fā)方式進行研究和討論.本系統(tǒng)支持通過智能手機實時創(chuàng)建不同類別的工作臺賬，添加特定的工作人員協(xié)同工作，通過文字、圖片、音頻、視頻以及其他文件等載體，對日常工作實時進行記錄，形成不同類別的工作臺賬.需要查閱臺賬和相關(guān)文件時，通過過濾和檢索功能，就可以快速地查找到相應(yīng)的臺賬記錄.

1 系統(tǒng)需求

臺賬系統(tǒng)的系統(tǒng)需求分為業(yè)務(wù)需求和技術(shù)需求，業(yè)務(wù)需求和技術(shù)需求歸納如下.

1.1 業(yè)務(wù)需求

臺賬系統(tǒng)的業(yè)務(wù)需求，定義了該系統(tǒng)的核心功能.只有滿足基本的業(yè)務(wù)需求，該系統(tǒng)才能正常使用.臺賬系統(tǒng)的業(yè)務(wù)需求歸納如下.

1) 臺賬管理 用戶可以新建不同類別的臺賬、更新和刪除自己創(chuàng)建的臺賬、添加臺賬記錄、更新和刪除臺賬記錄、添加臺賬成員、移除臺賬成員、按照臺賬標(biāo)題進行檢索、根據(jù)臺賬類型、創(chuàng)建者、創(chuàng)建時間進行過濾和排序；

2) 成員管理 臺賬創(chuàng)建者可以添加多個成員、移除多個成員，支持多成員協(xié)同工作，共同創(chuàng)建臺賬記錄；

3) 文件管理 在創(chuàng)建臺賬記錄的時候上傳多個文件、支持按需修改允許上傳的文件類型、刪除文件、文件集中存放、通過文件名稱檢索文件、通過文件類型、上傳者、上傳時間進行過濾、排序；

4) 用戶和權(quán)限管理 支持批量導(dǎo)入多個用戶賬號、對不同的用戶賬號進行權(quán)限管理；

5) 備份和恢復(fù)機制 系統(tǒng)具備自動備份能力、在系統(tǒng)出現(xiàn)故障時可以迅速恢復(fù)；

6) 使用場景 支持PC、智能手機和平板電腦.

1.2 技術(shù)需求

技術(shù)需求定義了系統(tǒng)在設(shè)計和開發(fā)過程中需要滿足的相關(guān)技術(shù)要求.本系統(tǒng)的技術(shù)需求：

1) 穩(wěn)定性 可靠、穩(wěn)定的運行；

2) 安全性 系統(tǒng)具備數(shù)據(jù)自動備份、手動備份和故障恢復(fù)能力，臺賬記錄和文件的訪問限制、用戶信息的加密存儲，API的訪問控制；

3) B/S架構(gòu) 用戶無需安裝客戶端/App，通過瀏覽器即可使用；

4) 全平臺可用 可以在PC、智能手機和平板電腦上正常使用；

5) 兼容性 兼容主流瀏覽器(Chrome、Firefox、Safari、Edge、360瀏覽器等).

2 系統(tǒng)架構(gòu)

根據(jù)上面的業(yè)務(wù)需求和技術(shù)需求，本系統(tǒng)采用前后端分離的軟件架構(gòu)進行設(shè)計和開發(fā)，系統(tǒng)架構(gòu)圖采用分層架構(gòu)的方式進行設(shè)計.分層系統(tǒng)架構(gòu)包含數(shù)據(jù)訪問層、業(yè)務(wù)層和表示層.其中數(shù)據(jù)訪問層定義了臺賬系統(tǒng)的數(shù)據(jù)定義和數(shù)據(jù)訪問邏輯，業(yè)務(wù)層定義了臺賬系統(tǒng)的基本業(yè)務(wù)功能與邏輯，表示層定義了系統(tǒng)的訪問方式和用戶界面[5].其中數(shù)據(jù)訪問層和業(yè)務(wù)層屬于后端架構(gòu)的核心功能，用戶界面構(gòu)建屬于前端架構(gòu)的核心功能.系統(tǒng)分層架構(gòu)圖如圖1所示.

圖1 臺賬系統(tǒng)架構(gòu)圖

2.1 前后端分離架構(gòu)

前后端分離架構(gòu)是近幾年才流行起來的Web架構(gòu)，這種架構(gòu)與傳統(tǒng)的B/S架構(gòu)既有相同之處，也有一定的區(qū)別.兩者的相同之處是系統(tǒng)在瀏覽器上通過Web的形式進行訪問.不同之處是兩者開發(fā)的原理和開發(fā)過程不同.

傳統(tǒng)的B/S架構(gòu)，一般由后端開發(fā)人員開發(fā)系統(tǒng)功能，并構(gòu)建前端界面的HTML結(jié)構(gòu)，前端開發(fā)人員編寫CSS樣式表和JavaScript代碼來實現(xiàn)頁面的視覺效果與相關(guān)動效.在這種開發(fā)模式下，前、后端開發(fā)人員的關(guān)系屬于緊耦合，前端頁面視覺效果的改動，需要后端開發(fā)人員更改HTML結(jié)構(gòu)，這種情況極大地降低了系統(tǒng)開發(fā)的靈活性和開發(fā)效率.加之很多后端開發(fā)人員專注于系統(tǒng)功能的開發(fā)，對于前端開發(fā)知之甚少，經(jīng)常會在前端頁面的HTML代碼中添加冗余代碼，導(dǎo)致系統(tǒng)加載速度變慢.

前后端分離架構(gòu)把前、后端功能解耦，前、后端開發(fā)者的關(guān)系屬于松散耦合.后端開發(fā)人員專注于系統(tǒng)功能開發(fā)，并形成系統(tǒng)API文檔，前端開發(fā)人員將精力集中于前端用戶界面的構(gòu)建.在這種開發(fā)模式下，前端開發(fā)人員可以靈活的定制用戶界面，構(gòu)建最小HTML結(jié)構(gòu)，最大程度上降低代碼冗余，優(yōu)化系統(tǒng)的加載速度，進一步提升系統(tǒng)的使用體驗.

2.2 后端系統(tǒng)

后端系統(tǒng)主要為臺賬系統(tǒng)提供運行的基礎(chǔ)環(huán)境，主要包括操作系統(tǒng)、服務(wù)器軟件、數(shù)據(jù)庫軟件和內(nèi)容管理系統(tǒng).

操作系統(tǒng)選擇開源的Linux系統(tǒng)，該操作系統(tǒng)安全、穩(wěn)定，為臺賬系統(tǒng)的穩(wěn)定運行提供保障；Web服務(wù)器軟件采用Apache服務(wù)器軟件，該服務(wù)器能夠提供穩(wěn)定的Web服務(wù)；數(shù)據(jù)庫選用MySQL或MariaDB；業(yè)務(wù)功能使用Drupal進行開發(fā).后端系統(tǒng)使用的軟件都是開源軟件，能夠在很大程度上節(jié)省開發(fā)和運行成本，同時提供安全、穩(wěn)定、可靠的服務(wù).

系統(tǒng)的業(yè)務(wù)功能主要使用Drupal進行開發(fā)，系統(tǒng)各功能模塊以JSON:API的形式提供API接口.用戶在前端界面，通過HTTP請求，就可以和后端系統(tǒng)進行交互.API的設(shè)計和開發(fā)遵守JSON:API的接口約定，輸出結(jié)構(gòu)穩(wěn)定、表意明確的JSON數(shù)據(jù).在特定的功能模塊中，對特定的API，以及API所支持的HTTP方法進行權(quán)限控制，以保障系統(tǒng)的安全性和穩(wěn)定性[6].

2.3 前端系統(tǒng)

臺賬系統(tǒng)前端用戶界面的構(gòu)建，采用當(dāng)下流行的用戶界面構(gòu)建庫Vue進行開發(fā)，使用axios執(zhí)行HTTP操作，從服務(wù)器獲取臺賬數(shù)據(jù)，在服務(wù)器創(chuàng)建、更新和刪除臺賬.結(jié)合狀態(tài)管理器Vuex、路由管理器Vue Router和組件庫Ant Design Vue，就可以開發(fā)出界面精美、易于使用的臺賬系統(tǒng)[7-8].

3 系統(tǒng)核心模塊設(shè)計與開發(fā)

根據(jù)臺賬系統(tǒng)的需求和架構(gòu)，需要設(shè)計和開發(fā)用戶認證、臺賬管理、個人中心和權(quán)限管理等核心模塊.

3.1 用戶認證模塊

用戶認證模塊是本系統(tǒng)的核心模塊，主要實現(xiàn)用戶登錄、退出、用戶信息共享、登錄狀態(tài)傳遞等功能.臺賬系統(tǒng)中的所有功能，都需要用戶認證模塊提供支持，只有通過認證的用戶，才有創(chuàng)建臺賬、編輯臺賬、添加成員、創(chuàng)建臺賬記錄、添加文件等權(quán)限.

當(dāng)用戶第一次訪問系統(tǒng)的時候，輸入用戶名和密碼進行登錄，登錄成功之后，后端系統(tǒng)就會自動為這次登錄生成一個唯一的Token，同時返回用戶登錄信息，用戶成功登錄之后的所有操作，都需要使用到用戶信息和這個Token.由于用戶登錄信息是明文信息，直接存儲在瀏覽器中比較危險，很容易造成用戶信息泄露，從而威脅到系統(tǒng)安全.因此，本系統(tǒng)采用AES加密算法，對用戶的登錄信息執(zhí)行AES加密，把加密之后的信息存儲在數(shù)組中，再把該數(shù)組保存在瀏覽器的Localstorage中.系統(tǒng)需要使用用戶登錄信息的時候，從Localstorage中讀取保存著用戶登錄信息的數(shù)組，對所需數(shù)據(jù)執(zhí)行AES解密，就能夠獲得用戶的登錄信息.用戶退出系統(tǒng)時，系統(tǒng)從Localstorage中清除用戶的登錄信息.通過AES加密機制和數(shù)組的存取方式，可以在很大程度上提升系統(tǒng)的安全性.

用戶再次訪問系統(tǒng)的時候，系統(tǒng)從瀏覽器的Localstorage中讀取用戶信息，如果讀取到了用戶信息，表明用戶已經(jīng)登錄過了，就不需要重復(fù)登錄.如果沒有讀取到用戶信息，意味著用戶之前退出了系統(tǒng)，此時，頁面跳轉(zhuǎn)到用戶登錄界面，引導(dǎo)用戶重新登錄.

3.2 臺賬管理模塊

臺賬管理模塊主要實現(xiàn)與臺賬相關(guān)的所有功能.當(dāng)用戶登錄成功之后，就可以根據(jù)工作類別創(chuàng)建一個特定的臺賬，并設(shè)置當(dāng)前臺賬的狀態(tài).臺賬創(chuàng)建成功之后，系統(tǒng)就會為該臺賬生成一個特定的UUID(universally unique identifier，通用唯一識別碼).臺賬創(chuàng)建者可以為該臺賬添加多個成員，以便進行多人協(xié)同工作.參與該臺賬建設(shè)的成員就可以添加多個臺賬記錄，并根據(jù)臺賬記錄的內(nèi)容，上傳相應(yīng)的文件.

臺賬管理模塊具有權(quán)限控制功能，只有臺賬創(chuàng)建者才有編輯和刪除臺賬的權(quán)限，臺賬參與者可以創(chuàng)建、編輯和刪除自己添加的臺賬記錄和上傳的文件.這種設(shè)計策略可以有效防止臺賬記錄的誤刪除、文件的誤操作，有效增強系統(tǒng)的安全性和穩(wěn)定性.

臺賬管理模塊還具備文件上傳和管理功能.本系統(tǒng)目前支持37種常見格式的文件上傳，可以根據(jù)需求增加支持的文件類型和允許上傳的文件尺寸.臺賬參與者可根據(jù)文件名稱檢索文件，根據(jù)文件類型、文件上傳者過濾文件.

當(dāng)一個工作臺賬所有記錄都完成時，臺賬創(chuàng)建者就可以將臺賬的狀態(tài)修改為“結(jié)束“，此時，臺賬成員的編輯和刪除權(quán)限將會被凍結(jié)，該臺賬所有的記錄、臺賬文件都不能編輯和刪除.這種設(shè)計可以保障臺賬記錄的完整性、穩(wěn)定性和安全性，為以后查找臺賬，獲取臺賬記錄和文件提供一定的保障.

3.3 個人中心模塊

個人中心模塊主要包含了個人信息、我創(chuàng)建的臺賬、我參與的臺賬和個人網(wǎng)盤.

個人中心主要展示個人基本信息，包含個人登錄名、注冊郵箱和聯(lián)系電話，提供重置密碼功能.

筆者參與的臺賬和創(chuàng)建的臺賬主要展示了當(dāng)前登錄用戶創(chuàng)建的臺賬和參與的臺賬，方便用戶了解自己創(chuàng)建和參與臺賬的情況.

個人網(wǎng)盤用來上傳和存儲個人的私有文件.當(dāng)用戶第一次登錄系統(tǒng)的時候，系統(tǒng)就會自動為用戶創(chuàng)建個人網(wǎng)盤，并分配一個UUID，該UUID與用戶的信息關(guān)聯(lián).因此，用戶上傳到個人網(wǎng)盤的文件，就是用戶的私有文件，這些文件具有一定的私密性，其他用戶無法查看和訪問這些文件.

3.4 權(quán)限管理模塊

權(quán)限管理模塊為本系統(tǒng)的設(shè)計和開發(fā)提供必要的用戶信息認證、操作權(quán)限管理.

在業(yè)務(wù)功能層面，該模塊通過細分的權(quán)限控制，保障只有登錄用戶才能夠訪問臺賬記錄和相關(guān)文件，只有臺賬創(chuàng)建者才能管理和編輯臺賬，臺賬參與者只能創(chuàng)建、編輯臺賬記錄、上傳文件、刪除自己上傳的文件等等.

在系統(tǒng)開發(fā)層面，該模塊通過對不同API的特定HTTP方法進行權(quán)限控制，在HTTP方法上增加Basic Authorization認證，結(jié)合CSRF-TOKEN，通過雙重認證，保障系統(tǒng)的安全性.

3.5 用戶界面模塊

本系統(tǒng)采用前后端分離架構(gòu)，系統(tǒng)的功能模塊由后端開發(fā)人員進行開發(fā)，提供JSON:API格式的數(shù)據(jù)接口.系統(tǒng)前端用戶界面采用Vue進行開發(fā)，配合Vuex、Vue Router、Ant Design Vue組件庫和crypto-js來構(gòu)建完整的前端用戶界面.前端系統(tǒng)使用axios執(zhí)行相應(yīng)的HTTP方法與服務(wù)器進行交互，使用GET方法從服務(wù)器獲取數(shù)據(jù)，使用POST和PATCH向服務(wù)器添加和更新數(shù)據(jù)，調(diào)用DELETE方法從服務(wù)器刪除臺賬記錄或文件.這些HTTP方法都需要攜帶用戶登錄信息，才能和后端系統(tǒng)進行交互.

本系統(tǒng)采用響應(yīng)式設(shè)計理念和定制開發(fā)模式，為PC、智能手機和平板電腦定制不同的用戶界面.用戶無論使用PC、智能手機或者平板電腦，都能夠使用完整的系統(tǒng)功能，獲得良好的用戶體驗.

系統(tǒng)為智能手機深度定制用戶界面，用戶在智能手機上使用微信、瀏覽器訪問系統(tǒng)，就可以實時創(chuàng)建內(nèi)容豐富的臺賬記錄，每條臺賬記錄都會攜帶唯一的時間戳，極大地提升了臺賬記錄的靈活性，保障臺賬記錄的準(zhǔn)確性和時效性.

4 測試、優(yōu)化、部署、上線使用

前后端開發(fā)人員開發(fā)完成之后，要根據(jù)系統(tǒng)業(yè)務(wù)需求進行測試.測試包含平臺測試、瀏覽器測試、業(yè)務(wù)功能測試和臨界條件測試.平臺測試，就是在不同的操作系統(tǒng)，不同的設(shè)備上進行測試，檢查系統(tǒng)在不同的平臺上是否能夠正常運行，各個模塊是否能夠正常工作.瀏覽器測試就是在不同平臺的主流瀏覽器上進行測試，檢驗系統(tǒng)是否具備良好的兼容性，在不同瀏覽器上的用戶界面表現(xiàn)是否一致.業(yè)務(wù)功能測試主要對系統(tǒng)的業(yè)務(wù)功能進行測試，并在極限情況下進行測試，確保系統(tǒng)在各種條件下都能夠滿足系統(tǒng)的業(yè)務(wù)需求.

測試完成之后，生成測試文檔，開發(fā)人員根據(jù)測試文檔，對測試過程中遇到的問題進行修復(fù)和優(yōu)化，然后再次進行測試.經(jīng)過多次測試和優(yōu)化的迭代之后，在系統(tǒng)滿足所有業(yè)務(wù)需求的情況下，就可以打包、部署、上線使用.

經(jīng)過測試，本系統(tǒng)能夠在Windows、Mac和Linux上的主流瀏覽器(Chrome、Firefox、Safari、Edge和360瀏覽器)上良好運行，在智能手機和平板電腦上使用微信或瀏覽器訪問系統(tǒng)，也可以使用系統(tǒng)的全部功能.上線運行的臺賬系統(tǒng)，部分后端API接口數(shù)據(jù)和前端用戶界面如圖2所示.

圖2 臺賬系統(tǒng)的接口數(shù)據(jù)(上)和用戶界面(下)

其中(a)是筆者的臺賬接口中輸出的數(shù)據(jù)，與其對應(yīng)的用戶界面是(e)；(b)是臺賬的詳細內(nèi)容數(shù)據(jù)，與其對應(yīng)的用戶界面是(f)；(c)是臺賬記錄接口中輸出的數(shù)據(jù)，與其對應(yīng)的用戶界面是(g)；(d)是個人中心創(chuàng)建的臺賬接口中輸出的數(shù)據(jù)，與其對應(yīng)的用戶界面是(h)

5 結(jié)語

在一個單位的運行過程中，無論是對日常工作進行記錄和歸類整理，還是為年終工作總結(jié)積累素材，工作臺賬的建設(shè)都顯得尤為重要.本文所設(shè)計和開發(fā)的基于前后端分離架構(gòu)的臺賬系統(tǒng)，支持全平臺運行、提供臺賬分類管理、多成員協(xié)同工作、臺賬文件管理等功能.通過本系統(tǒng)的實施，可以極大地提升工作臺賬記錄的靈活性和時效性，通過多成員協(xié)同工作，可以增強工作臺賬的完備性，通過對工作臺賬分類管理，對臺賬中相關(guān)文件的集中存儲和管理，極大的提升了工作人員查找、獲取、整理工作記錄的效率.

在本系統(tǒng)后續(xù)迭代開發(fā)過程中，將會增加臺賬模板系統(tǒng)、消息系統(tǒng)等模塊，進一步優(yōu)化用戶界面，提升系統(tǒng)運行速度，增強系統(tǒng)穩(wěn)定性和安全性，為單位工作臺賬的建設(shè)提供平臺支持，為單位治理能力現(xiàn)代化提供內(nèi)容和技術(shù)支撐.