【JeecgBoot-Vue3】第6节 低代码平台如何快速生成代码(上)
【JeecgBoot-Vue3】零基础入门 - 首页
一、场景
- jeecg-boot: V 3.4.4(发布日期:2022-11-21)
- jeecgboot-vue3: V 3.4.4(发布日期:2022-11-21)
二、代码介绍
1. 后端
1.1 online代码生成器
1.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
三、单表 CRUD
Step 1:新增表
- admin登录 >进入主页面,选择菜单> 低代码开发>online表单开发 > 点击新增
Step 2:填写 表名 > 表描述,其它默认
Step 3:新增字段 > 数据库属性
- 默认字段:1-6
- 新增字段:7-11,可修改字段类型,长度,允许空等
Step 4:新增字段 > 页面属性
- 作用:设置前端页面组件
- 是否查询(后面章节详细介绍)
Step 5:新增字段 > 校验字段
- 作用:下拉框中列表值
- 字典code查询:系统管理 > 数据字典 > 搜索“性别” >查看字典编号"sex"
Step 6:保存,并 同步数据库
- 作用:数据库生成对应表
Step 7:数据库中 查看生成的表
Step 8:代码生成
- 作用 : 生成前后端所有代码,默认VUE3
Step 9:查看生成代码
Step 10:前端代码迁移
- vue3 : 迁移到前端文件夹views下 src/views/test/one
- 注意 : 这里路径对应 Step 11-B-Step 1: 新增菜单 > 前端组件 设置 test/one/ScoreRangeList
Step 11-A:新增菜单(sql 版本-推荐)
- Step 1:添加菜单到admin用户下
运行生成的脚本
- Step 2:菜单分配到admin下(手动)
系统管理 > 角色管理 > admin的操作中点击 授权 > 选择菜单后保存
Step 11-B:新增菜单(手动版)
- Step 1:添加菜单
系统管理 > 菜单管理 > 添加菜单
- Step 2:菜单分配到admin下(手动)同 Step 11-1