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

目录

一、场景

二、代码介绍

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-1:新增菜单(sql 版本-推荐)

Step 11-2:新增菜单(手动版)

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代码生成器

【JeecgBoot-Vue3】第6节 低代码平台如何快速生成代码(上)_第1张图片

1.2 数据库配置

【JeecgBoot-Vue3】第6节 低代码平台如何快速生成代码(上)_第2张图片

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

【JeecgBoot-Vue3】第6节 低代码平台如何快速生成代码(上)_第3张图片

三、单表CRUD

Step 1:新增表

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

Step 2:填写 表名 > 表描述,其它默认

【JeecgBoot-Vue3】第6节 低代码平台如何快速生成代码(上)_第4张图片

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

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

【JeecgBoot-Vue3】第6节 低代码平台如何快速生成代码(上)_第5张图片

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

  • 作用:设置前端页面组件
  • 是否查询(后面章节详细介绍)

【JeecgBoot-Vue3】第6节 低代码平台如何快速生成代码(上)_第6张图片

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

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

【JeecgBoot-Vue3】第6节 低代码平台如何快速生成代码(上)_第7张图片

【JeecgBoot-Vue3】第6节 低代码平台如何快速生成代码(上)_第8张图片

Step 6:保存,并同步数据库

  • 作用:数据库生成对应表

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

【JeecgBoot-Vue3】第6节 低代码平台如何快速生成代码(上)_第9张图片

Step 8:代码生成

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

【JeecgBoot-Vue3】第6节 低代码平台如何快速生成代码(上)_第10张图片

Step 9:查看生成代码

【JeecgBoot-Vue3】第6节 低代码平台如何快速生成代码(上)_第11张图片

Step 10:前端代码迁移

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

【JeecgBoot-Vue3】第6节 低代码平台如何快速生成代码(上)_第12张图片

Step 11-1:新增菜单(sql 版本-推荐)

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

运行生成的脚本

【JeecgBoot-Vue3】第6节 低代码平台如何快速生成代码(上)_第13张图片

  • Step 2菜单分配到admin下(手动)

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

【JeecgBoot-Vue3】第6节 低代码平台如何快速生成代码(上)_第14张图片

Step 11-2新增菜单(手动版)

  • Step 1添加菜单

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

【JeecgBoot-Vue3】第6节 低代码平台如何快速生成代码(上)_第15张图片

  • Step 2菜单分配到admin下(手动)同 Step 11-1

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

【JeecgBoot-Vue3】第6节 低代码平台如何快速生成代码(上)_第16张图片

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

你可能感兴趣的:(JEECG-boot,官方文档实践,低代码,jeecgboot,vue3,一键生成前端代码)