《若依ruoyi》第十二章:Ruoyi 代码生成(低代码)vue逻辑详解一

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

一.代码目录结构

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

《若依ruoyi》第十二章:Ruoyi 代码生成(低代码)vue逻辑详解一

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

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

1、路由组件

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

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

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

该配置的逻辑是:

1)、点击菜单后

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

《若依ruoyi》第十二章:Ruoyi 代码生成(低代码)vue逻辑详解一

2、spring 对权限的过滤

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

《若依ruoyi》第十二章:Ruoyi 代码生成(低代码)vue逻辑详解一

三.index代码详解

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

《若依ruoyi》第十二章:Ruoyi 代码生成(低代码)vue逻辑详解一

2、操作按钮

《若依ruoyi》第十二章:Ruoyi 代码生成(低代码)vue逻辑详解一

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

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>

按钮权限如下图

《若依ruoyi》第十二章:Ruoyi 代码生成(低代码)vue逻辑详解一

4、列表展示

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

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

《若依ruoyi》第十二章:Ruoyi 代码生成(低代码)vue逻辑详解一

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; } );},

持续跟新中,敬请期待!

《若依ruoyi》第十二章:Ruoyi 代码生成(低代码)vue逻辑详解一

四、未来计划

1、ruoyi非分离版本拆解

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

3、ruoyi-vue-pro:支付模块,电商模块

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

5、JEECG低代码开发平台

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

相关新闻

联系我们
联系我们
公众号
公众号
在线咨询
分享本页
返回顶部