本章节详细介绍前端代码生成配置界面的实现，包括界面展示逻辑和api接口

一.代码目录结构

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

1. basicInfoForm:基础信息。
2. editTable：数据库表字段编辑。
3. genInfoForm:生成信息，生成的模版，现在提供的模版包含单表模版，树表模版，还有主表模版。生成的类名称，存放类的路径，对应的菜单配置。
4. importTable：从数据库表选择需要生成代码的表，导入待生成代码表。
5. index：生成代码列表，展示已经配置好的待生成的数据库记录，可以下载生成的代码，也可进行配置编辑，代码生成的菜单入口

二.菜单与index的入口配置说明

1、路由组件

如下图，左侧是代码目录结构，右侧是管理后台的菜单管理（系统管理-》菜单管理）。

点击列表记录（菜单管理）右侧编辑，系统弹出菜单配置的详细信息。

其中组件路径对应代码view目录下面的tool/gen/index

该配置的逻辑是：

1）、点击菜单后

2）、vue读取菜单对应的组件路径，并完成调用路由，进入index的业务代码

2、spring 对权限的过滤

菜单配置的权限字符，当该角色配置了菜单权限，用户登录后，点击菜单后调用java接口获取数据，spring 首先验证码用户是否有权限，实现的逻辑通过注解@PreAuthorize来实现。如果判断用户拥有权限，则继续执行，如果用户未拥有权限，则拒绝访问接口。

三.index代码详解

1、顶部搜索框代码，主要由el-input（输入表单），el-button（按钮）组成

2、操作按钮

下面以其中一个生成按钮为例子进行说明:

element的布局方式与bootstrap原理是一样的，将网页划分成若干行，然后每行等分为若干列，基于这样的方式进行布局，形象的成为栅栏布局。

区别是element可将每行划分为24个分栏，而bootstrap是划分为12个分栏，从使用角度，还是24个分栏更加精细。

首先每行使用<el-row>标签标识，然后每行内的列使用<el-col>标识，至于每列整行的宽度比例，则使用:span属性进行设置。

//gutter:每行的间隔是10<el-row :gutter="10" class="mb8"> <el-col :span="1.5"> //el-button按钮，@click="handleGenTable" 点击时候调用handleGenTable //方法 <el-button type="primary" plain icon="el-icon-download" size="mini" @click="handleGenTable" //用户登录后，会将用户权限字符加载到本地内存，如果判断有权限，则显示，没有权限 //则该按钮不显示 v-hasPermi="['tool:gen:code']" >生成</el-button> </el-col></el-row>

按钮权限如下图

4、列表展示

如下图，在列表显示使用el-table组件进行显示，其中表格的数据通过:data进行绑定。

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

tableList的数据获取函数

//点击菜单后，vue对index进行初始化操作，开始调用 this.getList();的方法//getlist方法调用后台接口获取参数并将接口数据赋值给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; } );},

持续跟新中，敬请期待！

四、未来计划

1、ruoyi非分离版本拆解

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

3、ruoyi-vue-pro：支付模块，电商模块

4、基于ruoyi-vue-pro项目开发

5、JEECG低代码开发平台

请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信