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

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

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