若依(ruoyi)前后端分离版—从0到1带你搭建项目(7)—表单构建、代码生成、系统接口

1.表单构建表单构建功能是一个强大的可视化工具用于快速生成前端表单页面。左侧组件部分是常见的组件包含单行文本、多行文本、下拉选择、级联选择等。后侧的组件属性可以修改组件的一些属性信息比如大小等如何把前端页面放到项目中我们通过拖拽生成一个简单的页面然后点击“导出Vue文件”导出过程如下文件名可以暂时改为“test.vue”,生成的vue文件代码如下templatedivel-row:gutter15el-form refelForm:modelformData:rulesrulessizemediumlabel-width100pxel-col:span23el-row gutter15el-col:span13el-form-item label手机号propmobileel-input v-modelformData.mobileplaceholder请输入手机号:maxlength11show-word-limit clearable prefix-iconel-icon-mobile:style{width: 100%}/el-input/el-form-item/el-colel-col:span12el-form-item label密码propfield105el-input v-modelformData.field105placeholder请输入密码clearable show-password:style{width: 100%}/el-input/el-form-item/el-colel-col:span10el-form-item label提交propfield101el-button typeprimaryiconel-icon-searchsizemedium主要按钮/el-button/el-form-item/el-col/el-row/el-colel-col:span24el-form-item sizelargeel-button typeprimaryclicksubmitForm提交/el-buttonel-button clickresetForm重置/el-button/el-form-item/el-col/el-form/el-row/div/templatescriptexportdefault{components:{},props:[],data(){return{formData:{mobile:,field105:undefined,field101:undefined,},rules:{mobile:[{required:true,message:请输入手机号,trigger:blur},{pattern:/^1(3|4|5|7|8|9)\d{9}$/,message:手机号格式错误,trigger:blur}],field105:[{required:true,message:请输入密码,trigger:blur}],},}},computed:{},watch:{},created(){},mounted(){},methods:{submitForm(){this.$refs[elForm].validate(valid{if(!valid)return// TODO 提交表单})},resetForm(){this.$refs[elForm].resetFields()},}}/scriptstyle/style我们打开ruoyi-ui的前端文件夹我们在views中先创建一个文件夹暂时叫student把刚才导出的test.vue文件放入到刚才创建的student文件夹。放入前端的文件夹后一定要重启前端否则配置了也访问不了。回到若依后台点击”菜单管理”点击”新增“配置内容参考:此处说明一下。”组件路径“就是你把组件放到的前端代码的位置默认都是在views文件夹中。”路由地址“ 就是要访问的url路径。其他的按照需求填写就行。然后修改权限让我们当前登录的admin有访问这个新页面的权限。配置上这个这个菜单的权限后然后刷新页面就可以看到这个菜单了。访问这个菜单就可以看到我们刚才制作的页面了。2.代码生成代码生成功能专注于快速生成 Java 后端 的标准化代码显著减少基础CRUD增删改查的开发时间。以下是其核心特性和使用细节1创建创建这个功能是把sql粘贴在框里然后根据sql进行创建和生成。比如下面这样sql代码可以参考如下:CREATETABLEstudent(idINTAUTO_INCREMENTPRIMARYKEY,nameVARCHAR(50)NOTNULL,ageINT,schoolVARCHAR(100),telVARCHAR(20));生成了以后就可以看到每个操作包含“预览”、“编辑”、“删除”、“同步”、”生成代码”功能。其中”预览“功能是看一下生成的代码。”编辑“功能如下可以看到直接修改sql的一些字段、属性等这个地方字段描述必须要填上不然生成的代码会有显示缺少部分。编辑——”基本信息”这里要把表描述填上不然导出的代码会有显示缺失的部分。“同步”功能是将数据库表结构同步到代码生成器的配置中。”生成代码“是将若依生成的代码打包后下载下来我们根据前面配置的包路径把代码放到合适的位置即可比如上面的代码生成后会下载到本地我们打开下载的文件可以看一下它的层级结构可以看到生成后的代码的层级结构非常清晰我们只需要把生成后的代码放到若依相对应的位置即可如果没有相关文件夹的话可以去创建一个比如上面的就没有controller文件夹我们可以去创建一个。一个文件一个文件移动的过程中可能会有报错比较正常建议先移动实体类。举一个例子移动”StudengMapper.xml“文件的方式如下前端文件同样放到相应的位置即可。如果没有文件夹新建就可以。前端文件复制完后如下所有的文件全部放到若依中后我们去创建一下菜单创建菜单有两种方式第一种是参考前面的样子直接使用”菜单管理”主要是组件路径这个地方不要填写错误。另一种是若依已经给你配置好的sql脚本可以自动生成菜单在下图的位置。它的sql代码如下-- 菜单 SQLinsertintosys_menu(menu_name,parent_id,order_num,path,component,is_frame,is_cache,menu_type,visible,status,perms,icon,create_by,create_time,update_by,update_time,remark)values(学生,3,1,student,system/student/index,1,0,C,0,0,system:student:list,#,admin,sysdate(),,null,学生菜单);-- 按钮父菜单IDSELECTparentId:LAST_INSERT_ID();-- 按钮 SQLinsertintosys_menu(menu_name,parent_id,order_num,path,component,is_frame,is_cache,menu_type,visible,status,perms,icon,create_by,create_time,update_by,update_time,remark)values(学生查询,parentId,1,#,,1,0,F,0,0,system:student:query,#,admin,sysdate(),,null,);insertintosys_menu(menu_name,parent_id,order_num,path,component,is_frame,is_cache,menu_type,visible,status,perms,icon,create_by,create_time,update_by,update_time,remark)values(学生新增,parentId,2,#,,1,0,F,0,0,system:student:add,#,admin,sysdate(),,null,);insertintosys_menu(menu_name,parent_id,order_num,path,component,is_frame,is_cache,menu_type,visible,status,perms,icon,create_by,create_time,update_by,update_time,remark)values(学生修改,parentId,3,#,,1,0,F,0,0,system:student:edit,#,admin,sysdate(),,null,);insertintosys_menu(menu_name,parent_id,order_num,path,component,is_frame,is_cache,menu_type,visible,status,perms,icon,create_by,create_time,update_by,update_time,remark)values(学生删除,parentId,4,#,,1,0,F,0,0,system:student:remove,#,admin,sysdate(),,null,);insertintosys_menu(menu_name,parent_id,order_num,path,component,is_frame,is_cache,menu_type,visible,status,perms,icon,create_by,create_time,update_by,update_time,remark)values(学生导出,parentId,5,#,,1,0,F,0,0,system:student:export,#,admin,sysdate(),,null,);直接在ruoyi的数据库中执行一下这个地方注意一下如果你的IDEA没有自动更新热部署要重启前端和后端。生成后如下图所示。测试一下新增学生功能2导入导入就是已经有了表这个地方从数据库读取然后再生成代码比如我在数据库中有个表sys_class点击导入找到表名然后点击确定即可。导入后也要按照上面的内容对表进行补充然后再生成代码。3.系统接口打开以后我们可以接口文档。接口文档地址是http://localhost/dev-api/v3/api-docs访问后可以看到接口文档把这个数据格式化一下就能看到比较规范的接口文档了。