基于代碼自動生成技術(shù)的小程序輔助開發(fā)系統(tǒng)設(shè)計與實現(xiàn)

彭淑燕, 劉思聰

(江蘇經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院 智能工程技術(shù)學(xué)院，江蘇 南京 210046)

0 引言

目前越來越多的行業(yè)都開始將小程序作為其主要的流量入口。小程序作為一種典型的輕應(yīng)用，具有免安裝、快速觸達(dá)用戶、用完即走等特點。作為最早提出的一種小程序，微信小程序截止到2019年底，已經(jīng)積累了約500萬個應(yīng)用，累計使用人數(shù)已經(jīng)超過了9億人次。隨著微信小程序的使用范圍越來越廣，越來越多的開發(fā)者加入到了小程序的設(shè)計與開發(fā)當(dāng)中。但是由于微信小程序開發(fā)具有自身獨特的體系架構(gòu)，使得很多開發(fā)者需要重新學(xué)習(xí)相關(guān)的開發(fā)規(guī)范與語法。這樣就導(dǎo)致很多開發(fā)者的開發(fā)成本上升，從而不利于小程序的推廣與應(yīng)用。

鑒于此，本文提出利用Java模板引擎并結(jié)合類反射技術(shù)來進(jìn)行微信小程序代碼的自動生成，從而可以大幅提高小程序的開發(fā)速度，縮短小程序的發(fā)布周期。首先通過分析小程序中的常用功能，來構(gòu)建出若干功能類。然后利用模板引擎來加載相關(guān)的源碼模板文件，最后依據(jù)不同的界面設(shè)計需求，利用反射技術(shù)來將相應(yīng)的功能類配置信息加載至引擎模板中[1]，并最終通過模板引擎來編譯生成具體的小程序源碼。

通過上述系統(tǒng)，可以快速地根據(jù)不同的業(yè)務(wù)需求來搭配不同的邏輯組件，進(jìn)而來構(gòu)建相應(yīng)的微信小程序App。而且由于該系統(tǒng)定義了一系列的公共接口，第三方開發(fā)人員也可以根據(jù)相關(guān)的接口規(guī)范來進(jìn)行二次開發(fā)[2]。

1 系統(tǒng)架構(gòu)設(shè)計

本文所設(shè)計系統(tǒng)遵循MVC架構(gòu)規(guī)范，對于系統(tǒng)的視圖、控制、實體對象都進(jìn)行了分層設(shè)計[3]。具體來說，該系統(tǒng)可由以下幾個模塊組成。

1.1 UI交互模塊

該模塊的作用主要是為用戶提供一個可視化的圖形交互界面，實現(xiàn)用戶的交互操作以及對后端數(shù)據(jù)進(jìn)行可視化渲染。該模塊作為本系統(tǒng)的圖形化交互窗口，一方面將后臺數(shù)據(jù)以直觀的方式呈現(xiàn)給用戶，一方面也會將用戶的操作指令及相關(guān)數(shù)據(jù)通過API數(shù)據(jù)接口傳遞至其它模塊。具體的API數(shù)據(jù)接口格式如表1所示。

表1 API數(shù)據(jù)接口結(jié)構(gòu)

1.2 響應(yīng)控制模塊

該模塊的作用是對用戶的操作進(jìn)行響應(yīng)。該模塊可以調(diào)用模板引擎模塊，通過類反射技術(shù)來生成相應(yīng)的小程序代碼。該模塊主要接收UI交互界面所傳遞的用戶數(shù)據(jù)。在獲取到用戶數(shù)據(jù)后，該模塊首先需要對數(shù)據(jù)進(jìn)行格式解析。首先需要從接口數(shù)據(jù)的Data字段中獲得用戶數(shù)據(jù)。需要注意的是，由于本系統(tǒng)允許用戶傳遞空值數(shù)據(jù)(Null)，因此響應(yīng)控制模塊需要先對用戶數(shù)據(jù)進(jìn)行非空判定(Is_Null)。當(dāng)確定上述數(shù)據(jù)不為空時，才對用戶數(shù)據(jù)進(jìn)行格式解析。具體方法為首先對Data字段的值按@符進(jìn)行分割，之后對獲取到的每一個鍵值再按冒號進(jìn)行分割，之后將冒號右側(cè)的值作為最終的用戶數(shù)據(jù)，并進(jìn)行處理。當(dāng)用戶數(shù)據(jù)處理完畢后，如果沒有任何錯誤異常信息出現(xiàn)，則該模塊會對Status字段進(jìn)行數(shù)據(jù)填充，具體值為200，同時對Msg字段賦值：“Success”。如果在上述過程中出現(xiàn)了異常錯誤信息，則終止整個響應(yīng)流程，并為Status字段賦值為500，Msg字段賦值：“Fail”。其他情況，按照響應(yīng)的代碼進(jìn)行填充。如果該用戶操作不需要獲取后臺服務(wù)器數(shù)據(jù)，則Result字段不進(jìn)行填充，直接按空值進(jìn)行傳輸。否則，將相應(yīng)的數(shù)據(jù)按照“Key1:Value1@Key2:Value2……”的形式進(jìn)行填充。所有操作結(jié)束后，將上述API接口數(shù)據(jù)傳輸回UI交互模塊當(dāng)中。UI交互模塊會自動解析上述API數(shù)據(jù)，并進(jìn)行相應(yīng)的界面渲染與響應(yīng)。

1.3 對象操作模塊

該模塊主要對系統(tǒng)中的數(shù)據(jù)表進(jìn)行對象關(guān)系映射(ORM)，從而將對數(shù)據(jù)庫的操作轉(zhuǎn)變?yōu)閷ο到y(tǒng)實例對象的操作[4]。上述3個模塊之間存在著相互依賴關(guān)系。具體的系統(tǒng)架構(gòu)設(shè)計如圖1所示。

圖1 系統(tǒng)架構(gòu)設(shè)計圖

2 系統(tǒng)技術(shù)實現(xiàn)

2.1 UI交互模塊實現(xiàn)

本系統(tǒng)采用B/S結(jié)構(gòu)，該架構(gòu)模式具有系統(tǒng)平臺依賴度低、部署靈活、能夠?qū)崿F(xiàn)系統(tǒng)功能熱更新等優(yōu)點。在UI交互模塊中包含了所有的系統(tǒng)可視化頁面，上述頁面都是基于HTML，CSS以及VUE前端框架開發(fā)而成的。具體而言，在上述頁面當(dāng)中，HTML確定了頁面的基本框架布局結(jié)構(gòu)，利用DIV元素作為頁面布局的框架模塊，首先設(shè)置每個功能模塊的空間位置。之后通過設(shè)置不同DIV元素的空間定位屬性，來確定不同功能模塊之間的空間相對位置。在確定了模塊間的空間相對位置后，使用CSS樣式來對頁面整體結(jié)構(gòu)進(jìn)行外觀美化。當(dāng)靜態(tài)頁面搭建完成后，再基于VUE框架的模板功能(Template)，將靜態(tài)頁面按功能模塊的不同劃分至不同的模板當(dāng)中。當(dāng)頁面對后臺數(shù)據(jù)進(jìn)行渲染時，將上述功能模板按需進(jìn)行組合，并最終與后臺數(shù)據(jù)一起構(gòu)成完整的動態(tài)渲染頁面內(nèi)容。具體過程如圖2所示。

圖2 UI交互模塊實現(xiàn)原理圖

2.2 響應(yīng)控制模塊實現(xiàn)

響應(yīng)控制模塊的實現(xiàn)主要基于Java語言的SpringBoot框架來實現(xiàn)。該模塊的作用主要是用來響應(yīng)前端用戶請求，處理傳輸數(shù)據(jù)以及向前端頁面?zhèn)鬏敽笈_數(shù)據(jù)。該模塊中每一類用戶請求都會被單獨抽象為一個獨立的Java類。每一類中都包含以下幾個基本操作響應(yīng)函數(shù)：(1)add；(2)update；(3)delete；(4)find。除此以外，每個響應(yīng)類中，還包含若干特殊函數(shù)，用來響應(yīng)用戶的不同操作請求。每個用戶響應(yīng)類中都會添加SpringBoot的用戶響應(yīng)注解(RequestMapping)。通過該注解，可以將用戶的操作與響應(yīng)類中的相關(guān)函數(shù)關(guān)聯(lián)起來，從而可以實現(xiàn)對用戶操作的響應(yīng)[7]。

當(dāng)前端頁面?zhèn)鬟f的數(shù)據(jù)被用戶響應(yīng)類獲取后，會首先將上述數(shù)據(jù)保存至一個String類型的變量當(dāng)中，之后利用split工具函數(shù)對Data字段中的數(shù)據(jù)按冒號進(jìn)行解析，并將解析后的數(shù)據(jù)保存到一個臨時數(shù)組變量當(dāng)中。如果獲取到的解析結(jié)果長度值小于2時，則判定當(dāng)前用戶沒有向后臺響應(yīng)函數(shù)傳遞數(shù)據(jù)。反之，則從臨時數(shù)組變量中獲取第2個位置上的數(shù)據(jù)，該數(shù)據(jù)即為用戶數(shù)據(jù)。獲得用戶數(shù)據(jù)后，繼續(xù)利用split函數(shù)來按“@”符進(jìn)行格式解析。解析后得到數(shù)據(jù)均被保存于臨時數(shù)組變量當(dāng)中，之后所有用戶數(shù)據(jù)均以冒號為特征符號進(jìn)行二次解析，并將解析后的數(shù)據(jù)傳入響應(yīng)的適配器類(Adaptive)中進(jìn)行進(jìn)一步的處理。如果用戶數(shù)據(jù)需要存儲至數(shù)據(jù)庫時，則響應(yīng)的適配器類調(diào)用后臺對象操作模塊中的相關(guān)方法來進(jìn)行數(shù)據(jù)庫操作。另一方面，如果用戶數(shù)據(jù)需要結(jié)合模板引擎(Volicity)來生成相關(guān)的小程序代碼時，響應(yīng)控制模塊也會調(diào)用模板引擎的相關(guān)方法，在類反射器的幫助下，向代碼模板中填充相關(guān)的實例數(shù)據(jù)，并最終生成小程序代碼[8]。生成的相關(guān)代碼以壓縮包的形式向用戶提供。需要注意的是，當(dāng)使用模板引擎進(jìn)行代碼生成時，需要首先確保用戶傳遞的數(shù)據(jù)能夠被正確的實例化，要點是用戶數(shù)據(jù)必須含有完整路徑的Java類名，否則用戶數(shù)據(jù)無法完成實例化操作，最終會導(dǎo)致小程序代碼生成失敗。具體流程如圖3所示。

圖3 響應(yīng)控制模塊工作流程圖

2.3 對象操作模塊實現(xiàn)

該模塊主要基于Spring Data JPA框架技術(shù)[5-6]來實現(xiàn)對象-關(guān)系映射(ORM)。在本系統(tǒng)中主要抽象出了12種代碼模板對象，并且支持用戶進(jìn)行代碼模板的自定義操作。具體的代碼模板對象如表2所示。

表2 代碼模板列表

上述模板對象，均通過JPA框架存儲于系統(tǒng)數(shù)據(jù)庫中?？梢园葱柽M(jìn)行模塊組合。

3 總結(jié)

小程序作為一種典型的輕應(yīng)用，具有免安裝、快速觸達(dá)用戶、用完即走等特點，使其應(yīng)用范圍越來越廣，越來越多的開發(fā)者加入到了小程序的設(shè)計與開發(fā)當(dāng)中。但是由于小程序開發(fā)具有自身獨特的體系架構(gòu)，而且目前各大公司均推出了自己的小程序平臺，使得很多開發(fā)者需要重新學(xué)習(xí)相關(guān)的開發(fā)規(guī)范與語法。這樣就導(dǎo)致很多開發(fā)者的開發(fā)成本上升，小程序應(yīng)用的開發(fā)周期拉長，從而不利于小程序的推廣與應(yīng)用。本研究所提出的基于Java模板引擎并結(jié)合類反射技術(shù)來進(jìn)行小程序代碼的自動生成系統(tǒng)，可以大幅提高小程序的開發(fā)速度，縮短小程序的發(fā)布周期。經(jīng)過一系列的實踐檢驗，發(fā)現(xiàn)該系統(tǒng)能夠穩(wěn)定，高效地進(jìn)行小程序的開發(fā)工作，達(dá)到了本研究的設(shè)計目的，性能穩(wěn)定、高效。這也為以后的小程序開發(fā)提供了一種新的設(shè)計思路。