本章节详细介绍前端代码生成配置界面的实现，包括界面展示逻辑和api接口
一.代码目录结构
代码存放在/src/views/tool/gen下- basicInfoForm:基础信息。
- editTable：数据库表字段编辑。
- genInfoForm:生成信息，生成的模版，现在提供的模版包含单表模版，树表模版，还有主表模版。生成的类名称，存放类的路径，对应的菜单配置。
- importTable：从数据库表选择需要生成代码的表，导入待生成代码表。
- 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低代码开发平台
请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信