【JeecgBoot-Vue3】第6节低代码平台如何快速生成代码（下 - 主附表）

10月前作者：ladymorgana 分类：Toy博客阅读(34) 违法举报

这篇具有很好参考价值的文章主要介绍了【JeecgBoot-Vue3】第6节低代码平台如何快速生成代码（下 - 主附表）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

【JeecgBoot-Vue3】零基础入门 - 首页文章来源地址https://www.toymoban.com/news/detail-702632.html

一、场景

二、功能介绍

三、主附表CRUD

3.1 建主表-test_class

Step 1：新增主表

Step 2：填写表名 > 表描述，其它默认

Step 3：新增字段 > 数据库属性

Step 4：新增字段 > 页面属性

Step 5：保存 > 同步数据库

3.2 建附表 - test_student

Step 1：新增附表

Step 2：填写表名 > 表描述，其它默认

Step 3：新增字段 > 数据库属性

Step 4：新增字段 > 页面属性

Step 5：新增字段 > 校验字段

Step 6：设置外键

Step 7：保存 > 同步数据库

Step 8：代码生成

Step 9：查看生成代码

Step 10：前端代码迁移

Step 11-1：新增菜单（sql 版本-推荐）

Step 11-2：新增菜单（手动版）

Step 12：重新启动前后端，并刷新admin登录页面

四、主附表四种风格

4.1 JVXE风格

4.2 ERP风格

4.3 内嵌子表风格 (比JVXE多了一个展开键) (推荐)

4.4 Tab风格 (推荐)

【JeecgBoot-Vue3】零基础入门 - 首页

一、场景

jeecg-boot: V 3.4.4（发布日期：2022-11-21）
jeecgboot-vue3: V 3.4.4（发布日期：2022-11-21）

二、功能介绍

一对多（1 : N）

主表：班级表（1）
附表：学生表（N）

三、主附表CRUD

3.1 建主表-test_class

Step 1：新增主表

admin登录 >进入主页面,选择菜单> 低代码开发>online表单开发 > 点击新增

Step 2：填写表名 > 表描述，其它默认

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

Step 3：新增字段 > 数据库属性

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

Step 4：新增字段 > 页面属性

作用：设置前端页面组件
是否查询（后面章节详细介绍）

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

Step 5：保存 > 同步数据库

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

3.2 建附表 - test_student

Step 1：新增附表

admin登录 >进入主页面,选择菜单> 低代码开发>online表单开发 > 点击新增

Step 2：填写表名 > 表描述，其它默认

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

Step 3：新增字段 > 数据库属性

注意：这里外键，test_class 表主键 id

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

Step 4：新增字段 > 页面属性

注意：这里外键，不显示

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

Step 5：新增字段 > 校验字段

作用：下拉框中列表值
字典code查询：系统管理 > 数据字典 > 搜索“性别” >查看字典编号"sex"

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

Step 6：设置外键

作用：这里外键，test_class 表主键 id

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

Step 7：保存 > 同步数据库

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

Step 8：代码生成

作用:生成前后端所有代码,默认VUE3
注意：这里需要选择主表才可以

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

风格：选择ERP风格

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

Step 9：查看生成代码

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

Step 10：前端代码迁移

vue3:迁移到前端文件夹views下 src/views/test/one

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

Step 11-1：新增菜单（sql 版本-推荐）

Step 1：添加菜单到admin用户下
注意：这里路径对应设置 test/classerp/ScoreRangeList，所以需要修改sql，如图

运行生成的脚本

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

Step 2：菜单分配到admin下（手动）

系统管理 > 角色管理 > admin的操作中点击授权 > 选择菜单后保存

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

Step 11-2：新增菜单（手动版）

Step 1：添加菜单

系统管理 > 菜单管理 > 添加菜单

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

Step 2：菜单分配到admin下（手动）同 Step 11-1

Step 12：重新启动前后端，并刷新admin登录页面

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

四、主附表四种风格

4.1 JVXE风格

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

4.2 ERP风格

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

4.3 内嵌子表风格 (比JVXE多了一个展开键) (推荐)

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

4.4 Tab风格 (推荐)

jeecg主表和附表,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键前后端

【JeecgBoot-Vue3】零基础入门 - 首页

到了这里，关于【JeecgBoot-Vue3】第6节低代码平台如何快速生成代码（下 - 主附表）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

JeecgBoot 3.5.1 版本发布，开源的企业级低代码平台

项目介绍 JeecgBoot是一款企业级的低代码平台！前后端分离架构 SpringBoot2.x，SpringCloud，Ant DesignVue3，Mybatis-plus，Shiro，JWT 支持微服务。强大的代码生成器让前后端代码一键生成! JeecgBoot引领低代码开发模式(OnlineCoding- 代码生成- 手工MERGE)，帮助解决Java项目70%的重复工作，让开发

2023年04月23日
浏览(44)
低代码平台——少量编码即可快速生成应用程序

低代码平台，即无需编码或通过少量代码就可以快速生成应用程序的开发平台。低代码平台面向的是IT或者平民程序员，解决传统软件开发模式带来的周期长、成本高等问题，客户群体主要为软件开发公司或者拥有IT的中大型企业。而零代码（No-code）则是在“低代码（low-

2024年02月12日
浏览(49)
VScode快速生成Vue3组件模板（代码片段&插件）

方法一：配置用户代码片段好处：可以完全按照个人习惯设置。 1、打开设置里的用户代码片段 2、找到vue.json 3、配置如下： 4、使用：输入vue回车生成方法二：使用Vue VSCode Snippets插件好处：安装即用，生成默认模板。 1、下载Vue VSCode Snippets插件并启用 2、使用：输入vue回车

2024年02月14日
浏览(42)
如何利用代码快速生成mapper.xml的＜resultMap＞

一，问题引入当我们开发 mapper.xml ----dao接层 ----service接口----serviceImp ----controller层，其中在mapper.xml编写查询语句的sql时会遇到sql查询到的结果涉及到多张表的字段，或者单张表的字段过多时，这时候我们就需写一个 resultMap来封装一下这段sql的返回结果，这个 resultMap标签长

2023年04月25日
浏览(47)
Vue - 拖曳式可视化生成应用软件（适合迭代的基础架构、低代码平台）

您预览完功能图后，可滑动到文章最底部点击克隆仓库，在本地运行起来就可以开始了！截至目前，在浏览器上 “拖曳式” 创建应用已经不是什么新鲜事了，它们统称为低代码平台。您要开发这样一个平台（或完成本职工作）不是一件简单的事情，要涉及的知识太多了，

2024年02月11日
浏览(45)
vscode中如何快速生成vue3模板-非常实用的小技巧

在vue项目开发过程中，我们会发现我们每次新建一个vue组件文件的时候，都需要写一些重复的代码，比如下面代码：在vscode编辑器中，那有没有什么办法能够让我们快速生成这样的模板呢，答案是有的！如果觉得对你有帮助的话还望点个赞 + 收藏一下，希望能够帮助到更多

2024年02月15日
浏览(61)
用Vue如何实现低代码开发平台？

在众多开发技术中，Vue组件化开发技术以其卓越的灵活性和高效性备受瞩目。低代码平台相信不少人知道它的存在，而且现在大部分公司都在开发自己的低代码平台，首先我们来看看低代码平台可视化界面：官网：https://www.jnpfsoft.com/?csdn，感兴趣自行去体验。可以看到，大

2024年02月16日
浏览(36)
Vue中如何以HTML形式显示内容并动态生成HTML代码

Vue是一个流行的JavaScript框架，用于构建现代化的Web应用程序。在Vue应用程序中，我们经常需要以HTML形式显示内容，并动态生成HTML代码。本文将介绍如何在Vue中实现这些功能。 Vue中的模板语法默认会将所有内容都解析为纯文本，无法直接渲染HTML代码。但是，Vue提供了一个内

2024年04月08日
浏览(44)
AI写作平台推荐，AI写作快速生成文章平台

随着科技的不断进步和人类对于人工智能的追求，AI人工智能原创文章写作平台逐渐兴起。这种全新的写作方式，将会给我们带来无限的文章写作灵感和方便。今天我们就来给大家介绍一下，目前市面上一些优秀的AI人工智能原创文章写作平台。高质量AI写作网站排行榜：第

2024年02月15日
浏览(67)
毕业设计——基于java+vue开发的在线教育平台，将开发PC、小程序、手机端，集成RABC权限+在线考试+文档预览+视频播放+代码生成器等功能

完整项目地址：https://download.csdn.net/download/lijunhcn/88556337 本项目是基于java+vue开发的[在线教育平台]，将开发PC、小程序、手机端，集成RABC权限+在线考试+文档预览+视频播放+代码生成器等功能。版本控制：git 依赖管理：maven 接口文档：Swagger 权限验证：Spring Security 数据库：

2024年02月03日
浏览(77)