一、背景

在后臺頁面的制作過程中，由于數(shù)據(jù)量大，工程時間緊，所以后臺頁面基本上基于模板頁面所生成的代碼后進(jìn)行編輯修改。在基于spring框架的前提下結(jié)合apache模板引擎（org.apache.velocity）。Apache Velocity是基于Java的開源模板引擎和代碼生成器，可將模板轉(zhuǎn)換為源代碼。因為它是用Java實現(xiàn)的，所以它能夠解釋各種模板并為任何語言（Web，服務(wù)，SQL，腳本等）生成代碼，盡管它似乎主要面向Web開發(fā)。生成的文件是.vue格式的文件，所以前端代碼的運行要在node.js的環(huán)境下運行該項目。

二、開發(fā)框架

模板引擎：org.apache.velocity

開發(fā)工具：IntelliJ IDEA 2020.1.3 x64

集成框架：spring MVC

數(shù)據(jù)持久層：myBatis

前端技術(shù)：Node.js、element-ui

三、開發(fā)環(huán)境配置

Node.js安裝與環(huán)境配置：https://www.jianshu.com/p/13f45e24b1de

四、生成代碼

1、生成頁面之前我們需要有對應(yīng)的模板，即velocity能識別的文件.vm格式的模板。

2、此文件需要我們按照所需要的靜態(tài)內(nèi)容進(jìn)行相應(yīng)velocity標(biāo)簽的書寫，之后才能使得是正確的生成靜態(tài)文件。比如需要生成的首頁模板（index.vue.vm）,如圖v-1所示,還有js和數(shù)據(jù)庫sql等模板。

圖v-1

五、模塊調(diào)試示例

本文以.充值金額模塊為例，進(jìn)行闡述列表、新增、刪除、修改的代碼修改過程。

代碼分為1個js，1個vue文件，1個JSP,2個配置文件。下面我舉個例子，能更直觀的展示后臺的前端頁面是如何制作的。

（一）、接口數(shù)據(jù)

首先可以看到圖1-1中的列表頁的接口，helper:set:list是權(quán)限標(biāo)識，TRechargeMoneySet是該列表，點進(jìn)去后可以看到如圖1-2中的接口數(shù)據(jù)

圖1-1列表接口數(shù)據(jù)

圖1-2列表接口的參數(shù)

（二）、如何生成代碼？ 

根據(jù)該列表名（TRechargeMoneySet），在系統(tǒng)工具的代碼生成中搜索該模板。如圖2-1、2-2所示

圖2-1代碼生成頁面

圖2-2模板頁

 （三）、代碼如何引入到項目中？

1、生成該代碼后，將代碼復(fù)制粘貼下來到項目中，Views中的是頁面代碼，是vue文件，api中的是js代碼，兩者位置區(qū)分開。如圖3-1所示

圖3-1代碼生成文件

2、在項目的views目錄中新建一個目錄，將views中的index.vue文件放在新建目錄中，同時在項目api目錄中新建同名目錄存放js文件

圖3-2代碼位置

3、在頁面中注意修改js的路徑，否則引入的數(shù)據(jù)就會失敗，如下圖所示：

 （四）、編輯代碼及效果展示

1、做完上面的步驟后，我們就要將代碼的運行的效果展示出來，將代碼引入到頁面上，在系統(tǒng)管理中可以看到菜單管理（如圖4-1所示），新增一個主類目 “充值管理”，如圖4-2所示，再在充值管理中新增一個菜單（展示的頁面），如圖4-3所示

圖4-1菜單管理

圖4-2上級菜單

2、組件路徑就是vue文件放置的地方，權(quán)限標(biāo)識是圖1-1中的helper:set:list。這樣就在項目中引入了生成代碼后的vue文件和js文件，并展示出來，如圖4-4所示

圖4-3新建充值管理

圖4-4效果圖

3、引入代碼雖然方便，但是存在的問題不可忽視，界面的“狀態(tài)”,“創(chuàng)建者”、“修改者”這些數(shù)據(jù)是要修改的地方，如何修改？首先可以看到“狀態(tài)”中請選擇字典生成，如圖4-5所示，那么就要在代碼中根據(jù)字典中的數(shù)據(jù)生成它的的狀態(tài)，在代碼中的修改如圖4-6、4-7所示

圖4-5代碼生成效果圖

圖4-6代碼模塊圖

圖4-7代碼模塊圖

4、換上代碼后，需要在字典管理（如圖4-8所示）中添加它的狀態(tài)數(shù)據(jù)，在字典管理中新增一個狀態(tài)表如圖4-9，在該狀態(tài)表中新增狀態(tài)數(shù)據(jù)如圖4-10所示：

圖4-8字典管理

圖4-9新增狀態(tài)

圖4-10新增狀態(tài)數(shù)據(jù)

5、新增數(shù)據(jù)后，要將新增的狀態(tài)數(shù)據(jù)通過代碼展示在另一個頁面上，在代碼中定義一個數(shù)組，這個數(shù)組是用來存儲狀態(tài)數(shù)據(jù)的如圖4-11所示，用代碼控制當(dāng)頁面加載的時候獲取狀態(tài)數(shù)據(jù)，如圖4-12所示：

圖4-11

圖4-12狀態(tài)數(shù)據(jù)

6、狀態(tài)數(shù)據(jù)獲取后是標(biāo)識的狀態(tài)，是“0”，“1”的形式，所以需要將標(biāo)識的狀態(tài)翻譯成文字的形式，如圖4-13所示

圖4-13字典翻譯

7、同時在展示代碼的那一行調(diào)用該方法，修改的代碼如圖4-14、4-15所示：

圖4-14

圖4-15

修改后的效果如圖4-16所示：

圖4-16效果圖

（五）、新增數(shù)據(jù)并修改字段信息 

1、圖4-16中可以看到“創(chuàng)建者”和“修改者”是沒有數(shù)據(jù)的，如果想要查看接口請求后有哪些數(shù)據(jù)，可以在代碼中打印請求后的數(shù)據(jù)，如圖5-1所示

圖5-1接口數(shù)據(jù)

2、修改字段信息，如圖5-2所示，效果展示如圖5-3所示：

圖5-2字段信息

圖5-3效果圖

3、在點擊修改后的彈出框如圖5-4所示，頁面上的“狀態(tài)”、“創(chuàng)建者”、“修改者”這些字段都需要修改，修改前的代碼如圖5-5所示，修改后如圖5-6所示

圖5-4代碼生成效果圖

圖5-5修改前代碼模塊

圖5-6修改后代碼模塊

4、修改后的狀態(tài)從標(biāo)識“0”，“1”被翻譯成啟用、禁用，但是“修改時間”是空值（如圖5-7），修改后點擊確定，可以看到如圖5-8的效果。

圖5-7效果圖

圖5-8修改后頁面效果圖

總結(jié)：通過上面的步驟，可以知道，后臺的頁面制作就是將接口數(shù)據(jù)渲染并修改樣式，修改模板中的代碼，來達(dá)到我們想要的效果。