葉小艷，張 芒，李偉民

(廣州大學(xué)華軟軟件學(xué)院，廣東 廣州 510990)

0 引 言

在多終端的“互聯(lián)網(wǎng)+”時(shí)代，如何提高系統(tǒng)開(kāi)發(fā)效率是許多企業(yè)一直探討的問(wèn)題。經(jīng)過(guò)多年的研究及嘗試，前后端分離架構(gòu)技術(shù)成為了許多企業(yè)的選擇[1]。因?yàn)榻K端有Android、IOS、Web，它們有不同的展現(xiàn)形式，但是需要展示的數(shù)據(jù)是一樣的，所以只需要后臺(tái)提供接口，前端(終端)獲取數(shù)據(jù)并展示出來(lái)即可，并且不同的終端需要不同的開(kāi)發(fā)人員，只有前后端分離的架構(gòu)最適合當(dāng)前多終端的時(shí)代，因此前后端分離架構(gòu)便成了趨勢(shì)[2]。

傳統(tǒng)開(kāi)發(fā)協(xié)作模式有兩種：一種是前端寫(xiě)靜態(tài)頁(yè)面，后端套模板[3]。靜態(tài)頁(yè)面可以進(jìn)行本地開(kāi)發(fā)，只需實(shí)現(xiàn)視圖而不需考慮業(yè)務(wù)邏輯[4]。但因后端要套模板且瀏覽前端代碼，過(guò)程較為復(fù)雜。另一種是前端寫(xiě)模板[5]，但前端編寫(xiě)過(guò)程中過(guò)于依賴后端環(huán)境，一旦后端沒(méi)完成，前端則無(wú)法操作。這兩種協(xié)作方式是目前市場(chǎng)上大量采用的“前后端分離”技術(shù)，但這兩種方式都存在問(wèn)題，且沒(méi)有實(shí)現(xiàn)真正意義上的系統(tǒng)整體架構(gòu)的前后端分離。

文中采用改進(jìn)傳統(tǒng)的MVC框架來(lái)實(shí)現(xiàn)前后端分離，以此減少前后端的耦合性，提高用戶體驗(yàn)，加快網(wǎng)頁(yè)加載速度，降低開(kāi)發(fā)和維護(hù)成本，提升效率。

1 改進(jìn)的MVC框架

1.1 快速開(kāi)發(fā)技術(shù)及現(xiàn)有架構(gòu)

傳統(tǒng)的開(kāi)發(fā)模式存在需求溝通不對(duì)稱、需求變更頻繁、需求不明確等問(wèn)題，造成項(xiàng)目效率低下、延期甚至失敗等問(wèn)題。近年來(lái)逐漸興起的快速開(kāi)發(fā)技術(shù)，則是實(shí)現(xiàn)以業(yè)務(wù)為驅(qū)動(dòng)的智能開(kāi)發(fā)。形成的各種快速開(kāi)發(fā)平臺(tái)是基于業(yè)務(wù)導(dǎo)向的設(shè)計(jì)理念，抽提所有管理系統(tǒng)運(yùn)行的驅(qū)動(dòng)共性形成的“業(yè)務(wù)驅(qū)動(dòng)模型”，省去了復(fù)雜和重復(fù)的編碼過(guò)程，通過(guò)對(duì)智能報(bào)表、數(shù)據(jù)維護(hù)業(yè)務(wù)控制和其他參數(shù)的管理，可以快速、高效地開(kāi)發(fā)各類業(yè)務(wù)系統(tǒng)。簡(jiǎn)化了系統(tǒng)的運(yùn)行機(jī)制，抽提構(gòu)成系統(tǒng)的穩(wěn)定元素和個(gè)性元素，解決各類管理類軟件的構(gòu)筑元素，所以這種快速開(kāi)發(fā)平臺(tái)既可以適用于開(kāi)發(fā)任何類型管理軟件，又可以大幅度提高開(kāi)發(fā)效率，減少技術(shù)瓶頸。

目前國(guó)內(nèi)已有的Web快速開(kāi)發(fā)框架有不少，僅在MVC方面，就有struts和webwork，還有將struts和webwork統(tǒng)一的struts2，以及tapestry、JSF、easyJWeb[6]。權(quán)限管理框架有Spring Security，異步調(diào)用技術(shù)有AJAX、DWR，RIA技術(shù)有extjs、jQuery、FLEX、GWT等[7]。現(xiàn)有的Web快速開(kāi)發(fā)框架功能較強(qiáng)，但也有開(kāi)發(fā)難度大和需要的知識(shí)復(fù)雜等缺點(diǎn)。這樣開(kāi)發(fā)人員不僅要熟悉服務(wù)器端語(yǔ)言，還必須掌握Ajax相關(guān)的難以調(diào)試的前端技術(shù)。與此同時(shí)，現(xiàn)有的Web快速開(kāi)發(fā)框架從不同層面解決了開(kāi)發(fā)過(guò)程中的部分問(wèn)題，偏重某一方面，但仍然包含有相應(yīng)的模板設(shè)計(jì)和枯燥的代碼段。文中旨在整合并改進(jìn)現(xiàn)有的MVC框架，并結(jié)合現(xiàn)有快速開(kāi)發(fā)技術(shù)平臺(tái)快速搭建業(yè)務(wù)模塊的優(yōu)點(diǎn)，構(gòu)建一套生態(tài)式的開(kāi)發(fā)方法。

MVC模式誕生于19世紀(jì)70年代，流行至今。MVC模式，即“模型—視圖—控制器”的框架技術(shù)，是將一個(gè)應(yīng)用的處理流程按照這種方式進(jìn)行分離[8]。這樣，一個(gè)應(yīng)用流程體系分為模型、視圖和控制器三個(gè)核心模塊，分別在系統(tǒng)中承擔(dān)不同的功能和責(zé)任。這種框架技術(shù)使開(kāi)發(fā)更加高效，代碼耦合度盡量減小，使應(yīng)用程序各部分的職責(zé)更加清晰。

傳統(tǒng)MVC模式如圖1所示，其缺點(diǎn)如下：第一，視圖依賴于模型。如沒(méi)有模型，視圖亦無(wú)法呈現(xiàn)效果；第二，請(qǐng)求須經(jīng)“控制器→模型→視圖”固定流程，用戶才可看到最終展現(xiàn)界面，過(guò)程過(guò)于復(fù)雜；第三，渲染視圖的過(guò)程在服務(wù)端完成，呈現(xiàn)給瀏覽器的是帶有模型的視圖頁(yè)面，性能無(wú)法更好地優(yōu)化。

圖1 傳統(tǒng)MVC模型

1.2 改進(jìn)MVC架構(gòu)

為了克服這些缺點(diǎn)，對(duì)模型進(jìn)行改進(jìn)。從瀏覽器發(fā)送AJAX請(qǐng)求到控制器，服務(wù)端接受請(qǐng)求，然后返回JSON數(shù)據(jù)給瀏覽器，直接在瀏覽器中渲染視圖[9]，如圖2所示。

圖2 改進(jìn)的MVC模型

將服務(wù)器那一端視為后端，瀏覽器這一端視為前端，將以上改進(jìn)后的MVC模式簡(jiǎn)化為以下前后端分離模式。前端關(guān)注界面展現(xiàn)，后端關(guān)注業(yè)務(wù)邏輯，分工明確，職責(zé)清晰。

結(jié)合快速開(kāi)發(fā)技術(shù)平臺(tái)和改進(jìn)后的MVC模型，構(gòu)建系統(tǒng)開(kāi)發(fā)架構(gòu)[10]，如圖3所示。

圖3 PC系統(tǒng)開(kāi)發(fā)架構(gòu)

前端窗體通過(guò)各類組件組成，形成視圖層；利用規(guī)則、函數(shù)等組成規(guī)則鏈來(lái)對(duì)視圖層進(jìn)行控制，并加入實(shí)體層，規(guī)則鏈可以對(duì)視圖層與實(shí)體層進(jìn)行操作控制，使用規(guī)則鏈來(lái)處理數(shù)據(jù)，使用實(shí)體模型來(lái)綁定窗體里的組件。調(diào)用數(shù)據(jù)時(shí)從數(shù)據(jù)庫(kù)加載到實(shí)體，通過(guò)綁定實(shí)體的窗體呈現(xiàn)。

2 ERP系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

2.1 系統(tǒng)設(shè)計(jì)

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

系統(tǒng)以ERP系統(tǒng)中庫(kù)存、OA等模塊為例，搭建基于前后端分離的系統(tǒng)架構(gòu)，以此搭建一個(gè)具有響應(yīng)式布局的SPA后臺(tái)ERP管理系統(tǒng)。

基于圖3開(kāi)發(fā)架構(gòu)的控制層與模型層，將視圖層脫離出來(lái)，React+dva的前端技術(shù)組建系統(tǒng)的前端頁(yè)面，并通過(guò)訪問(wèn)控制層公開(kāi)的接口對(duì)后臺(tái)進(jìn)行操作，最終形成了該系統(tǒng)架構(gòu)，如圖4所示(V3指某快速開(kāi)發(fā)平臺(tái))。

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

系統(tǒng)分為前后端兩部分：

(1)前端向云服務(wù)器發(fā)起靜態(tài)文件請(qǐng)求，如HTML、CSS、JS、Image等，由Nginx服務(wù)器搭建的HTTP服務(wù)會(huì)訪問(wèn)本地資源，得到HTML、CSS、JS、Image等文件，并返回到前端，然后展示通過(guò)瀏覽器編譯成用戶可以看到的頁(yè)面。

(2)Nginx通過(guò)反向代理將V3執(zhí)行系統(tǒng)的地址代理到80端口，比如訪問(wèn)http://www.mitarl.com/api時(shí)，通過(guò)反向代理后最終訪問(wèn)的是http://www.mitarl.com:8080/webapi/。

(3)前端通過(guò)AJAX(GET、POST)向Nginx服務(wù)器發(fā)出請(qǐng)求，訪問(wèn)V3的WebAPI接口，WebAPI通過(guò)規(guī)則鏈對(duì)數(shù)據(jù)進(jìn)行處理，最后通過(guò)訪問(wèn)數(shù)據(jù)庫(kù)并得到相應(yīng)的數(shù)據(jù)，然后以JSON格式的數(shù)據(jù)返回到前端，前端拿到數(shù)據(jù)后對(duì)其進(jìn)行處理，并展示在用戶的瀏覽器上。

2.1.2 系統(tǒng)技術(shù)架構(gòu)

系統(tǒng)技術(shù)架構(gòu)如圖5所示。

圖5 系統(tǒng)技術(shù)架構(gòu)

①State表示Model的狀態(tài)數(shù)據(jù)；

②Action是一個(gè)帶type屬性指明具體行為的對(duì)象，它是View層改變State的唯一途徑，通過(guò)調(diào)用dispatch方法，傳遞Action到Model層，根據(jù)Reducer改變State；

③異步的Action，與同步的Action在dispatch時(shí)是一樣的，但是到達(dá)Model層，Model層會(huì)先根據(jù)type先觸發(fā)Reducer再觸發(fā)Effect；

④dispatch是一個(gè)用于觸發(fā)Action的函數(shù)，可以看作是觸發(fā)這個(gè)行為的方式[11]；

⑤Reducer是描述如何改變數(shù)據(jù)的[12]；

⑥Effect被稱為副作用，dva底層引入redux-saga做異步流程控制[12]，運(yùn)用ES6的generator的相關(guān)概念將異步轉(zhuǎn)成同步寫(xiě)法；

⑦Subscription訂閱，然后根據(jù)條件dispatch需要的Action，可以監(jiān)聽(tīng)路由、鍵盤(pán)輸入等的變化；

⑧connect將React與Redux數(shù)據(jù)連通，通過(guò)映射State里面的數(shù)據(jù)，以React中props數(shù)據(jù)的方式傳遞給組件。

2.1.3 系統(tǒng)框架整合

先訂閱監(jiān)聽(tīng)瀏覽器的路由變化，當(dāng)?shù)刂菲ヅ涑晒?，?huì)觸發(fā)向服務(wù)器獲取數(shù)據(jù)的異步請(qǐng)求，獲取到數(shù)據(jù)后，對(duì)狀態(tài)容器進(jìn)行賦值，狀態(tài)容器發(fā)生改變后映射到了對(duì)應(yīng)的組件，組件就會(huì)進(jìn)行渲染處理[13]。

(1)Subscriptions訂閱代碼。

配置(){監(jiān)聽(tīng)路由(路由地址){如果路由地址==/home或者==/則觸發(fā)getOwnerTasks方法}}

(2)Effect代碼(主要處理異步請(qǐng)求)。

getOwnersTask(){先從state樹(shù)里獲取當(dāng)前狀態(tài)的app樹(shù)下的user和Home樹(shù)下的query，再創(chuàng)建傳遞給接口的數(shù)據(jù)對(duì)象，然后調(diào)用寫(xiě)好的service接口并傳入?yún)?shù)。等待call的結(jié)果，判斷結(jié)果是否正確，正確就put觸發(fā)對(duì)應(yīng)的Reducer去修改狀態(tài)樹(shù)}

(3)Service服務(wù)接口代碼。

一個(gè)異步函數(shù)，提供給effect調(diào)用，以JSON格式的數(shù)據(jù)傳遞params參數(shù)到服務(wù)端接口，最終收到接口的返回?cái)?shù)據(jù)并傳遞給正在等待的effect。

(4)Reducer和state樹(shù)。

Reducer接收action，即put時(shí)帶的參數(shù)，這里是把接口傳過(guò)來(lái)的參數(shù)(todo、done兩個(gè)數(shù)組)合并到當(dāng)前的state樹(shù)里。

(5)Connect將Redux與React連接起來(lái)。

將state樹(shù)中Home節(jié)點(diǎn)，app節(jié)點(diǎn)下的isNavbar、user映射到Home組件，使得Home組件的prors屬性存在這幾個(gè)屬性。

(6)Home組件下的Table組件。

數(shù)據(jù)源是通過(guò)state樹(shù)傳過(guò)來(lái)React的props屬性下的todo，滾動(dòng)條是根據(jù)瀏覽器大小決定的。使用React進(jìn)行組件編寫(xiě)，通過(guò)dva(Redux+React-Route+Redux-saga)提供的connect組件對(duì)React和Redux進(jìn)行通信，從而React組件可以獲取Redux里面的store數(shù)據(jù)，React通過(guò)發(fā)送action去觸發(fā)effect(異步)請(qǐng)求V3WebAPI接口或Reducer(同步)，從而Redux改變store里面的數(shù)據(jù)，React組件的props屬性綁定了Redux的store，store改變props也會(huì)改變，React組件就會(huì)自動(dòng)刷新?tīng)顟B(tài)。

2.2 系統(tǒng)實(shí)現(xiàn)

基于篇幅，本節(jié)只介紹系統(tǒng)開(kāi)發(fā)過(guò)程中用到的框架技術(shù)的典型示例。

2.2.1 登錄功能

登錄功能主要是對(duì)用戶身份進(jìn)行驗(yàn)證，核對(duì)用戶輸入的用戶名、密碼和驗(yàn)證碼的數(shù)據(jù)合法性和一致性。登錄功能采用異步請(qǐng)求到快速開(kāi)發(fā)平臺(tái)的登錄構(gòu)件，實(shí)現(xiàn)過(guò)程如下：

點(diǎn)擊登錄按鈕會(huì)觸發(fā)action，然后action觸發(fā)effect(帶*的是ES6的異步函數(shù))，接收兩個(gè)參數(shù)。第一個(gè)參數(shù)：接收action傳過(guò)來(lái)的數(shù)據(jù)，這里是把這個(gè)參數(shù)里面的payload拿出來(lái)；第二個(gè)參數(shù)：獲取dva框架提供的兩種異步方法，call是去請(qǐng)求service(定義請(qǐng)求接口，類似于Ajax)并傳入payload，通過(guò)yield關(guān)鍵字去等待異步數(shù)據(jù)，當(dāng)異步數(shù)據(jù)獲取回來(lái)后，賦值給res，res里面的data就是從V3WebAPI獲取過(guò)來(lái)的數(shù)據(jù)，再判斷數(shù)據(jù)是否正確，如果正確則put一個(gè)Reducer，將傳過(guò)來(lái)的數(shù)據(jù)對(duì)應(yīng)修改store里面的數(shù)據(jù)，React再刷新組件狀態(tài)。

2.2.2 流程定義功能

快速開(kāi)發(fā)平臺(tái)支持完整流程定義和擴(kuò)展，提供高度可視化流程設(shè)計(jì)器，集流程圖設(shè)計(jì)、規(guī)則定制和代碼擴(kuò)展、調(diào)試于一體，流程設(shè)計(jì)開(kāi)發(fā)快捷高效[14]。使用iframe連通快速開(kāi)發(fā)平臺(tái)的窗體，使快速開(kāi)發(fā)平臺(tái)的窗體能在自己的系統(tǒng)中使用，將自己寫(xiě)的頁(yè)面與快速開(kāi)發(fā)平臺(tái)的窗體結(jié)合起來(lái)。

2.2.3 組織機(jī)構(gòu)管理功能

組織機(jī)構(gòu)管理也是使用iframe連接快速開(kāi)發(fā)平臺(tái)的窗體，因?yàn)榭焖匍_(kāi)發(fā)平臺(tái)已經(jīng)提供了一套組織機(jī)構(gòu)管理的標(biāo)準(zhǔn)的窗體與規(guī)則，完全不用自己去做任何的業(yè)務(wù)編寫(xiě)，所以利用快速開(kāi)發(fā)平臺(tái)的這些窗體來(lái)對(duì)系統(tǒng)進(jìn)行擴(kuò)展。

總之，使用iframe來(lái)連接快速開(kāi)發(fā)平臺(tái)提供的窗體，簡(jiǎn)化系統(tǒng)的一些必要業(yè)務(wù)，如OA、組織機(jī)構(gòu)管理等模塊，可以直接引入快速開(kāi)發(fā)平臺(tái)的窗體來(lái)對(duì)系統(tǒng)進(jìn)行擴(kuò)展，從而節(jié)約開(kāi)發(fā)時(shí)間和簡(jiǎn)化開(kāi)發(fā)過(guò)程。

2.3 系統(tǒng)測(cè)試

2.3.1 Model層測(cè)試

Model層使用Mocha測(cè)試框架與第三方斷言模塊expect進(jìn)行測(cè)試。Model層測(cè)試代碼如下：

import expect from 'expect';//引入斷言模塊

import {effects} from 'dva/saga';//引入effects

import Home from '../src/models/Home';//引入需要測(cè)試的model

//Home測(cè)試用例

describe('Model的Home測(cè)試用例',()=>{

it('加載',()=>{expect(Home).toExist();});

describe('測(cè)試reducers',()=>{

it('getOwnerTasksReducer',()=>{

const reducers=Home.reducers;

const reducer=reducers.getOwnerTaskReducer;

const state={

todo:[],

done:[],

};

expect(reducer(state,

{payload:{todo:[{id:1,state:'Running'}],done:[{id:2,state:'Complete'}]}})

)

.toEqual({ todo:[{ id:1, state:'Runing'}],done:[{ id:2, state:'Complete' }]});

});

});

describe('測(cè)試effects',()=>{

it('getOwnerTasks',()=> {

const{call,put}=effects;

const sagas=Home.effects;

const saga={sagas.getOwnerTasks;

const generator=saga({type:.'Home/getOwnerTasks'},{call,put});

let next=generator.next();

//訪問(wèn)接口成功后，接口會(huì)返回是否成功的參數(shù)，正常情況下是返回成功

expect(next.value).toEqual({ success: true });

});

});

});

Model層需要測(cè)試的是Reducer與Effect，Reducer是普通函數(shù)，并且是純函數(shù)，職責(zé)單一，對(duì)于固定輸入，就有固定輸出，所以很容易測(cè)試。Effect的測(cè)試主要是驗(yàn)證這件事是否發(fā)起了對(duì)某個(gè)服務(wù)的調(diào)用，這個(gè)服務(wù)是否在執(zhí)行，無(wú)關(guān)本模塊的正確性。一個(gè)Effect實(shí)際上是轉(zhuǎn)化為同步邏輯的測(cè)試，因?yàn)樗且粋€(gè)generator函數(shù)，只需對(duì)這個(gè)Effect一路next，就能跑完整個(gè)邏輯。

2.3.2 表現(xiàn)層測(cè)試

表現(xiàn)層主要是React組件，利用Enzyme庫(kù)結(jié)合mocha與expect斷言，去測(cè)試React組件的虛擬DOM創(chuàng)建情況、虛擬DOM的渲染情況等。表現(xiàn)層測(cè)試代碼如下：

import React from 'react';

import{shallow,mount,render} from 'enzyme';

import Home from '../../src/routes/Home';

import MinimzeCard from '../../src/components/common/MinimzeCard'

describe('Home測(cè)試虛擬DOM',function(){

it('Home下的第一個(gè)MinimzeCard的title屬性是待辦',function(){

let app=shallow();

//在Home的虛擬DOM中尋找MinimzeCard組件，找到它的title屬性，它的斷言為待辦

expect(app.find(MinimzeCard).at(@).props('titled)).to.equal('待辦');

});

});

describe ('Home測(cè)試渲染情況',function (){

it('渲染Home組件,渲染出兩個(gè)MinimzeCard', function(){

let app=render();

//渲染Home組件后，尋找MinimzeCard組件的長(zhǎng)度大小，斷言為2

expect(app.find(MinimzeCard).length).to.equal(2);

});

});

總體而言，使用mocha測(cè)試框架編寫(xiě)測(cè)試用例去測(cè)試dva框架與React框架，最終執(zhí)行測(cè)試用例，并通過(guò)所有的測(cè)試用例，最后系統(tǒng)未發(fā)現(xiàn)嚴(yán)重的缺陷，系統(tǒng)業(yè)務(wù)邏輯無(wú)錯(cuò)誤，保證了系統(tǒng)的完整無(wú)漏洞。

3 結(jié)束語(yǔ)

該系統(tǒng)PC端，使用某公司快速開(kāi)發(fā)平臺(tái)，實(shí)現(xiàn)以業(yè)務(wù)為驅(qū)動(dòng)的智能開(kāi)發(fā)，更多考慮用戶的需求，實(shí)現(xiàn)復(fù)雜的企業(yè)級(jí)管理系統(tǒng)軟件的開(kāi)發(fā)，極大地提升了軟件的開(kāi)發(fā)效率和開(kāi)發(fā)質(zhì)量，大幅縮短了開(kāi)發(fā)周期[15]。

系統(tǒng)移動(dòng)端采用前后端分離技術(shù)以及響應(yīng)式布局，并使用流行前端框架React開(kāi)發(fā)了ERP系統(tǒng)，經(jīng)過(guò)詳細(xì)的設(shè)計(jì)和測(cè)試，最終實(shí)現(xiàn)了整個(gè)開(kāi)發(fā)框架。React的組件化思想，使得系統(tǒng)更加模塊化，更容易維護(hù)、拓展。用戶可以較快地熟悉系統(tǒng)，可以利用PC端和移動(dòng)端操作系統(tǒng)，從而提高工作效率，縮短開(kāi)發(fā)流程。

利用快速開(kāi)發(fā)技術(shù)，以業(yè)務(wù)為驅(qū)動(dòng)快速開(kāi)發(fā)系統(tǒng)，將重點(diǎn)放在系統(tǒng)更完善的功能上而非代碼，結(jié)合現(xiàn)有移動(dòng)端的開(kāi)發(fā)框架，逐步完善移動(dòng)端框架，并且對(duì)移動(dòng)端擴(kuò)展更多的功能。推廣這種快速、擴(kuò)展性強(qiáng)的框架方法，使信息系統(tǒng)開(kāi)發(fā)更加便捷多元。