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

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

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

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

一、场景

二、代码介绍

1. 后端

1.1 online代码生成器

1.2 数据库配置

1.3 代码生成配置

三、单表 CRUD

Step 1：新增表

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

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

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

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

Step 6：保存，并同步数据库

Step 7：数据库中查看生成的表

Step 8：代码生成

Step 9：查看生成代码

Step 10：前端代码迁移

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

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

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

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

一、场景

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

二、代码介绍

1. 后端

1.1 online代码生成器

jeecg自动生成代码,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键生成前端代码

1.2 数据库配置

jeecg自动生成代码,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键生成前端代码

1.3 代码生成配置

jeecg_config.properties

#code_generate_project_path 代码生成后存放的路径
project_path=E:\\workspace\\jeecg-boot
#bussi_package[User defined] 生成的代码：父模块包名
bussi_package=org.jeecg.modules.demo


#default code path
#source_root_package=src
#webroot_package=WebRoot

#maven code path
source_root_package=src.main.java
webroot_package=src.main.webapp

#ftl resource url
templatepath=/jeecg/code-template
system_encoding=utf-8

#db Table id [User defined] 
db_table_id=id

#db convert flag[true/false]
db_filed_convert=true

#page Search Field num [User defined]
page_search_filed_num=1
#page_filter_fields
page_filter_fields=create_time,create_by,update_time,update_by
exclude_table=act_,ext_act_,design_,onl_,sys_,qrtz_

bussi_packag

jeecg自动生成代码,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键生成前端代码

三、单表 CRUD

Step 1：新增表

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

jeecg自动生成代码,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键生成前端代码

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

jeecg自动生成代码,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键生成前端代码

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

默认字段：1-6
新增字段：7-11，可修改字段类型，长度，允许空等

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：保存，并同步数据库

作用：数据库生成对应表

jeecg自动生成代码,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键生成前端代码

jeecg自动生成代码,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键生成前端代码

jeecg自动生成代码,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键生成前端代码

Step 7：数据库中查看生成的表

jeecg自动生成代码,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键生成前端代码

Step 8：代码生成

作用 : 生成前后端所有代码,默认VUE3

jeecg自动生成代码,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键生成前端代码

jeecg自动生成代码,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键生成前端代码

Step 9：查看生成代码

jeecg自动生成代码,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键生成前端代码

Step 10：前端代码迁移

vue3 : 迁移到前端文件夹views下 src/views/test/one
注意 : 这里路径对应 Step 11-B-Step 1：新增菜单 > 前端组件设置 test/one/ScoreRangeList

jeecg自动生成代码,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键生成前端代码

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

Step 1：添加菜单到admin用户下

运行生成的脚本

jeecg自动生成代码,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键生成前端代码

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

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

jeecg自动生成代码,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键生成前端代码

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

Step 1：添加菜单

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

jeecg自动生成代码,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键生成前端代码

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

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

jeecg自动生成代码,JEECG-boot 官方文档实践,低代码,jeecgboot,vue3,一键生成前端代码文章来源地址https://www.toymoban.com/news/detail-617971.html

到了这里，关于【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日
浏览(42)
低代码平台——少量编码即可快速生成应用程序

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

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

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

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

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

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

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

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

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

2024年02月15日
浏览(56)
用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日
浏览(42)
AI写作平台推荐，AI写作快速生成文章平台

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

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

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

2024年02月03日
浏览(70)