1.表单构建
表单构建功能是一个强大的可视化工具，用于快速生成前端表单页面。
左侧组件部分是常见的组件，包含单行文本、多行文本、下拉选择、级联选择等。
后侧的组件属性可以修改组件的一些属性信息，比如大小，等
如何把前端页面放到项目中？
我们通过拖拽，生成一个简单的页面，然后点击“导出Vue文件”，导出过程如下：
文件名可以暂时改为“test.vue”,生成的vue文件代码如下：
<template>
<div>
<el-row :gutter="15">
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
<el-col :span="23">
<el-row gutter="15">
<el-col :span="13">
<el-form-item label="手机号" prop="mobile">
<el-input v-model="formData.mobile" placeholder="请输入手机号" :maxlength="11" show-word-limit
clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="密码" prop="field105">
<el-input v-model="formData.field105" placeholder="请输入密码" clearable show-password
:style="{width: '100%'}"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="提交" prop="field101">
<el-button type="primary" icon="el-icon-search" size="medium"> 主要按钮 </el-button>
</el-form-item>
</el-col>
</el-row>
</el-col>
<el-col :span="24">
<el-form-item size="large">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-col>
</el-form>
</el-row>
</div>
</template>
<script>
export default {
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()
},
}
}
</script>
<style>
</style>
我们打开ruoyi-ui的前端文件夹，我们在views中先创建一个文件夹，暂时叫student，把刚才导出的test.vue文件放入到刚才创建的student文件夹。
放入前端的文件夹后，一定要重启前端！否则配置了也访问不了。
回到若依后台，点击”菜单管理”，点击”新增“
此处说明一下。
”组件路径“就是你把组件放到的前端代码的位置，默认都是在views文件夹中。
”路由地址“ 就是要访问的url路径。
其他的按照需求填写就行。
然后修改权限，让我们当前登录的admin有访问这个新页面的权限。
配置上这个这个菜单的权限后，然后刷新页面，就可以看到这个菜单了。
访问这个菜单，就可以看到我们刚才制作的页面了。
2.代码生成
代码生成功能专注于快速生成 Java 后端 的标准化代码，显著减少基础CRUD（增删改查）的开发时间。以下是其核心特性和使用细节：
| 生成文件类型 | 作用 | 对应技术 |
|---|---|---|
| Entity | 数据库表映射的实体类（含JPA或MyBatis注解） | @Table, @Column |
| Mapper | MyBatis的数据库操作接口（或XML文件） | @Mapper |
| Service | 业务逻辑层接口和实现类 | @Service |
| Controller | RESTful API接口层，处理HTTP请求 | @RestController |
| DTO/Query | 数据传输对象或查询条件类（可选生成） | 自定义封装类 |
| XML映射文件 | MyBatis的动态SQL配置（若选择XML方式） | mapper.xml |
（1）创建
创建这个功能，是把sql粘贴在框里，然后根据sql进行创建和生成。比如下面这样
sql代码可以参考如下:
CREATE TABLE student (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(50) NOT NULL,
age INT,
school VARCHAR(100),
tel VARCHAR(20)
);生成了以后就可以看到
每个操作包含“预览”、“编辑”、“删除”、“同步”、”生成代码”功能。
其中”预览“功能是看一下生成的代码。
”编辑“功能如下，可以看到直接修改sql的一些字段、属性等，这个地方字段描述必须要填上，不然生成的代码会有显示缺少部分。
编辑——>”基本信息”，这里要把表描述填上，不然导出的代码会有显示缺失的部分。
编辑——>”生成信息”，这里面的信息也要填写上，比如”生成功能名 “，这些内容缺失，生成的代码会有显示缺失部分。
“同步”功能是将数据库表结构同步到代码生成器的配置中。
”生成代码“是将若依生成的代码打包后下载下来，我们根据前面配置的包路径，把代码放到合适的位置即可，比如上面的代码，生成后会下载到本地，我们打开下载的文件可以看一下它的层级结构
可以看到，生成后的代码的层级结构非常清晰，我们只需要把生成后的代码放到若依相对应的位置即可，如果没有相关文件夹的话可以去创建一个，比如上面的就没有controller文件夹，我们可以去创建一个。
一个文件一个文件移动的过程中，可能会有报错，比较正常，建议先移动实体类。
举一个例子，移动”StudengMapper.xml“文件的方式如下：
前端文件同样，放到相应的位置即可。
如果没有文件夹，新建就可以。
前端文件复制完后如下：
所有的文件全部放到若依中后，我们去创建一下菜单，创建菜单有两种方式，第一种是参考前面的样子，直接使用”菜单管理”，主要是组件路径这个地方，不要填写错误。
另一种是若依已经给你配置好的sql脚本，可以自动生成菜单，在下图的位置。
它的sql代码如下：
-- 菜单 SQL
insert into sys_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, '学生菜单');
-- 按钮父菜单ID
SELECT @parentId := LAST_INSERT_ID();
-- 按钮 SQL
insert into sys_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, '');
insert into sys_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, '');
insert into sys_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, '');
insert into sys_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, '');
insert into sys_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
访问后可以看到接口文档
把这个数据格式化一下，就能看到比较规范的接口文档了。