本章節(jié)詳細介紹前端代碼生成配置界面的實現(xiàn)，包括界面展示邏輯和api接口

一.代碼目錄結構

代碼存放在/src/views/tool/gen下

1. basicInfoForm:基礎信息。
2. editTable：數(shù)據(jù)庫表字段編輯。
3. genInfoForm:生成信息，生成的模版，現(xiàn)在提供的模版包含單表模版，樹表模版，還有主表模版。生成的類名稱，存放類的路徑，對應的菜單配置。
4. importTable：從數(shù)據(jù)庫表選擇需要生成代碼的表，導入待生成代碼表。
5. index：生成代碼列表，展示已經(jīng)配置好的待生成的數(shù)據(jù)庫記錄，可以下載生成的代碼，也可進行配置編輯，代碼生成的菜單入口

二.菜單與index的入口配置說明

1、路由組件

如下圖，左側是代碼目錄結構，右側是管理后臺的菜單管理（系統(tǒng)管理-》菜單管理）。

點擊列表記錄（菜單管理）右側編輯，系統(tǒng)彈出菜單配置的詳細信息。

其中組件路徑對應代碼view目錄下面的tool/gen/index

該配置的邏輯是：

1）、點擊菜單后

2）、vue讀取菜單對應的組件路徑，并完成調(diào)用路由，進入index的業(yè)務代碼

2、spring 對權限的過濾

菜單配置的權限字符，當該角色配置了菜單權限，用戶登錄后，點擊菜單后調(diào)用java接口獲取數(shù)據(jù)，spring 首先驗證碼用戶是否有權限，實現(xiàn)的邏輯通過注解@PreAuthorize來實現(xiàn)。如果判斷用戶擁有權限，則繼續(xù)執(zhí)行，如果用戶未擁有權限，則拒絕訪問接口。

三.index代碼詳解

1、頂部搜索框代碼，主要由el-input（輸入表單），el-button（按鈕）組成

2、操作按鈕

下面以其中一個生成按鈕為例子進行說明:

element的布局方式與bootstrap原理是一樣的，將網(wǎng)頁劃分成若干行，然后每行等分為若干列，基于這樣的方式進行布局，形象的成為柵欄布局。

區(qū)別是element可將每行劃分為24個分欄，而bootstrap是劃分為12個分欄，從使用角度，還是24個分欄更加精細。

首先每行使用<el-row>標簽標識，然后每行內(nèi)的列使用<el-col>標識，至于每列整行的寬度比例，則使用:span屬性進行設置。

//gutter:每行的間隔是10<el-row :gutter="10" class="mb8"> <el-col :span="1.5"> //el-button按鈕，@click="handleGenTable" 點擊時候調(diào)用handleGenTable //方法 <el-button type="primary" plain icon="el-icon-download" size="mini" @click="handleGenTable" //用戶登錄后，會將用戶權限字符加載到本地內(nèi)存，如果判斷有權限，則顯示，沒有權限 //則該按鈕不顯示 v-hasPermi="['tool:gen:code']" >生成</el-button> </el-col></el-row>

按鈕權限如下圖

4、列表展示

如下圖，在列表顯示使用el-table組件進行顯示，其中表格的數(shù)據(jù)通過:data進行綁定。

<el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">

tableList的數(shù)據(jù)獲取函數(shù)

//點擊菜單后，vue對index進行初始化操作，開始調(diào)用 this.getList();的方法//getlist方法調(diào)用后臺接口獲取參數(shù)并將接口數(shù)據(jù)賦值給tableList變量created() { this.getList(); }, /** 查詢表集合 */getList() { this.loading = true; listTable(this.addDateRange(this.queryParams, this.dateRange)).then(response => { this.tableList = response.rows; this.total = response.total; this.loading = false; } );},

持續(xù)跟新中，敬請期待！

四、未來計劃

1、ruoyi非分離版本拆解

2、ruoyi-vue-pro：講解工作流

3、ruoyi-vue-pro：支付模塊，電商模塊

4、基于ruoyi-vue-pro項目開發(fā)

5、JEECG低代碼開發(fā)平臺

請關注我，本星球會持續(xù)推出更多的開源項目代碼解析，如有更好的意見請留言回復或者私信