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

一.代碼目錄結(jié)構(gòu)

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

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

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

1、路由組件

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

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

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

該配置的邏輯是：

1）、點(diǎn)擊菜單后

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

2、spring 對權(quán)限的過濾

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

三.index代碼詳解

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

2、操作按鈕

下面以其中一個生成按鈕為例子進(jìn)行說明:

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

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

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

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

按鈕權(quán)限如下圖

4、列表展示

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

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

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

//點(diǎn)擊菜單后，vue對index進(jìn)行初始化操作，開始調(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ù)跟新中，敬請期待！

四、未來計(jì)劃

1、ruoyi非分離版本拆解

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

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

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

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

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